/* ================================================================
   SANIT CONFORT — custom.css  (theme nico)
   ================================================================
   CARTE DES BLOCS (chercher le titre entre guillemets pour sauter au bloc) :
    1. "FONDATIONS — refonte design"  → tokens --sanit-* (SOURCE DE VERITE),
       typo Inter, boutons, surfaces, champs.
    2. "v2 corrections header"        → header flex, logo, recherche, panier.
    3. "v5 correction page mon compte"→ cartes "mon compte".
    4. "MENU DESKTOP STABLE"          → flyouts du menu natif #_desktop_top_menu.
       ⚠ NE PAS SUPPRIMER : ce bloc fournit la visibility/opacity au survol
         des sous-menus REUTILISES par le Catalogue (bloc 11). Ils marchent
         ENSEMBLE. Le retirer casse le mega-menu.
    5. "CARTES PRODUIT" + "ETAPE 2bis"→ prix produit, vignettes (TTC/HT, bandeau marque).
    6. "ETAPE 2" / "ETAPE 4a"         → page categorie : cartes, pastilles, pages navigation.
    7. "ETAPE 3"                      → fiche produit (prix, onglets).
    8. "Mobile & presentation v2" / "FIX FILTRE MOBILE" → filtres mobiles (panneau).
    9. "ETAPE 4" / "HOME — ... SLIDER"→ accueil : Nos univers, titres, sliders produits.
   10. "ETAPE 5" / "FOOTER v2"        → footer sombre.
   11. "EN-TETE" / "CATALOGUE"        → bouton Catalogue + mega-menu (voir ⚠ bloc 4).
   12. "SLIDER haut"                  → puces du carousel d'accueil.
   ----------------------------------------------------------------
   Regle d'or : pour modifier une couleur/forme globale -> bloc 1 (tokens).
   On AJOUTE en fin de fichier (la derniere regle gagne). Toujours bumper
   ?v= dans head.tpl + vider var/cache/prod/smarty/compile.
   (Ancien :root #0066cc en double supprime le 29/06 — reecrit par le bloc 1.)
   ================================================================ */

body{
  background:var(--sanit-surface);
  color:var(--sanit-text);
}

a,
#header a,
.tabs .nav-tabs .nav-link.active,
.nav-link,
.dropdown-item:focus,
.dropdown-item:hover,
.block-category .category-cover a,
.product-miniature .highlighted-informations a,
.product-prices .tax-shipping-delivery-label{
  color:var(--sanit-brand);
}

a:focus,
a:hover,
#header a:hover,
#header a:focus{
  color:var(--sanit-brand-hover);
}

.btn-primary,
.btn-primary.focus,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-unstyle:focus .expand-more,
.bootstrap-touchspin .input-group-btn-vertical .btn,
.product-actions .add-to-cart,
.block_newsletter form input[type=submit],
#search_filters .facet .facet-label.active a,
.pagination .current a,
.pagination .current span,
.page-my-account #content .links a{
  background:var(--sanit-brand);
  border-color:var(--sanit-brand);
  color:#fff;
  border-radius:10px;
}

.btn-primary:hover,
.btn-primary:active:hover,
.btn-primary:focus:hover,
.product-actions .add-to-cart:hover,
.block_newsletter form input[type=submit]:hover{
  background:var(--sanit-brand-hover);
  border-color:var(--sanit-brand-hover);
  color:#fff;
}

.form-control:focus,
.input-group.focus,
.bootstrap-touchspin input.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:rgba(0,102,204,.45);
  box-shadow:0 0 0 .2rem rgba(0,102,204,.12);
}

#header,
.header-top,
#header .header-top .container,
.top-menu .sub-menu,
.block-category,
.card,
#search_filters,
.products-sort-order .select-list,
.dropdown-menu,
#blockcart-modal .modal-content,
.modal-content,
.featured-products,
.product-accessories,
.product-miniature,
#subcategories ul li,
.block-social,
.tabs,
#product-details,
#product #content .product-container,
.page-content,
.cart-grid-body,
.cart-grid-right,
.blockreassurance_product,
#left-column .block-categories,
#left-column #search_filters,
.category-cover,
.page-cms #content,
.page-contact .contact-form,
.ps-shoppingcart{
  background:var(--sanit-card);
  border-radius:var(--sanit-radius);
}

#header,
.block-category,
.card,
#search_filters,
.dropdown-menu,
#blockcart-modal .modal-content,
.modal-content,
.product-miniature,
.tabs,
#product #content .product-container,
.cart-grid-body,
.cart-grid-right,
#left-column .block-categories,
#left-column #search_filters,
.page-contact .contact-form{
  box-shadow:var(--sanit-shadow);
}

#header .header-top{
  background:#fff;
}

#header .header-nav{
  background:var(--sanit-brand);
  color:#fff;
}

#header .header-nav a,
#header .header-nav .material-icons,
#header .header-nav .expand-more,
#header .header-nav .hidden-sm-down,
#header .header-nav .text-xs-right{
  color:#fff;
}

#header .top-menu > li > a,
#header .top-menu a[data-depth="0"]{
  color:var(--sanit-text);
  font-weight:700;
}

#header .top-menu > li > a:hover,
#header .top-menu a[data-depth="0"]:hover,
#header .top-menu .sub-menu a:hover{
  color:var(--sanit-brand);
}

#wrapper,
.main-section,
#main{
  background:transparent;
}

#search_widget form,
.block_newsletter form{
  border-radius:999px;
  overflow:hidden;
}

#search_widget form input[type=text],
.block_newsletter input[type=email]{
  border-radius:999px 0 0 999px;
}

#search_widget form button,
.block_newsletter form button,
.block_newsletter form input[type=submit]{
  border-radius:0 999px 999px 0;
}

.product-miniature{
  border:1px solid #edf1f5;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
}

.product-miniature:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px rgba(18,22,31,.12);
}

.product-miniature .thumbnail-container,
.product-cover,
.js-qv-mask,
.product-images > li.thumb-container > .thumb{
  border-radius:10px;
}

.product-price,
.current-price span,
.discount,
.regular-price{
  color:var(--sanit-brand);
}

.pagination a,
.page-link,
.custom-checkbox input[type=checkbox]+span,
.custom-radio input[type=radio]+span{
  border-radius:8px;
}

.block_newsletter,
#footer,
.footer-container,
#footer .footer-container,
#footer .copyrights,
#footer .footer-after{
  background:var(--sanit-footer);
  color:#fff;
}

#footer a,
#footer .h3,
#footer .h4,
#footer .links .title,
#footer .block-contact,
#footer p,
#footer li a,
#footer .textwidget,
#footer .material-icons{
  color:#fff;
}

#footer a:hover,
#footer .links ul > li a:hover{
  color:#d9ebff;
}

#footer .block_newsletter,
#footer .links,
#footer .block-social,
#footer .block-contact,
#footer .ps-contact-info{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:16px;
}

.blockreassurance{
  background:#fff;
  border-radius:12px;
  box-shadow:var(--sanit-shadow);
}

.breadcrumb{
  background:transparent;
}

.breadcrumb li::after,
.breadcrumb a{
  color:var(--sanit-muted);
}

.breadcrumb .active,
.breadcrumb a:hover{
  color:var(--sanit-brand);
}

.carousel .carousel-inner,
.carousel .carousel-item,
.carousel .carousel-item img{
  border-radius:14px;
}

.carousel .caption{
  background:rgba(255,255,255,.92);
  border-radius:12px;
  padding:20px;
}

@media (max-width: 767px){
  #header .header-nav{
    background:var(--sanit-brand);
  }

  #header,
  .product-miniature,
  .card,
  .block_newsletter,
  .tabs,
  .cart-grid-body,
  .cart-grid-right{
    border-radius:10px;
  }
}


/* --- v2 corrections header / slider / footer --- */
#header .header-top {
  background:#fff;
  border-bottom:1px solid #e7edf3;
}

#header .header-top .row,
#header .header-nav .row {
  display:flex;
  align-items:center;
}

#header .top-logo img,
#_desktop_logo img {
  max-height:54px;
  width:auto;
}

#header .header-top-right {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

#header .header-nav .right-nav {
  display:flex;
  justify-content:flex-end;
  align-items:stretch;
}

#header .header-nav #_desktop_user_info,
#header .header-nav #_desktop_cart {
  display:flex;
  align-items:stretch;
}

#header .header-nav .user-info,
#header .header-nav .blockcart {
  display:flex;
  align-items:center;
  min-height:42px;
}

#header .header-nav .user-info a,
#header .header-nav .blockcart a {
  display:flex;
  align-items:center;
  gap:.4rem;
  height:100%;
  padding:0 1.15rem;
  color:#fff !important;
  text-decoration:none;
}

#header .header-nav .user-info {
  border-left:1px solid rgba(255,255,255,.15);
}

#header .header-nav .blockcart {
  background:rgba(255,255,255,.16);
  border-left:1px solid rgba(255,255,255,.15);
}

#header .header-nav .blockcart:hover,
#header .header-nav .blockcart:focus-within {
  background:rgba(0,0,0,.12);
}

#header .header-nav .blockcart.inactive,
#header .header-nav .blockcart.inactive a,
#header .header-nav .blockcart .shopping-cart,
#header .header-nav .blockcart .cart-products-count,
#header .header-nav .blockcart .hidden-sm-down {
  color:#fff !important;
  opacity:1;
}

#header .header-top .search-widgets {
  margin-left:auto;
}

#header .header-top .search-widgets form {
  position:relative;
  min-width:260px;
  max-width:360px;
  border:1px solid #d9e2eb;
  border-radius:999px;
  background:#fff;
  box-shadow:0 8px 18px rgba(18,22,31,.08);
}

#header .header-top .search-widgets form input[type=text] {
  height:44px;
  padding:0 3rem 0 1rem;
  color:#41505f;
  background:transparent;
  border:0;
}

#header .header-top .search-widgets form input[type=text]::placeholder {
  color:#9aa6b2;
  opacity:1;
}

#header .header-top .search-widgets form input[type=text]:focus {
  background:transparent;
  outline:0;
}

#header .header-top .search-widgets form button[type=submit] {
  right:.75rem;
  color:var(--sanit-brand);
}

#header .header-top .search-widgets form button[type=submit] .search {
  color:var(--sanit-brand);
}

/* top-menu link styles → gérés dans le bloc menu desktop ci-dessous */

.carousel .carousel-inner {
  box-shadow:0 18px 40px rgba(18,22,31,.12);
}

.carousel .caption {
  max-width:330px;
  padding:1.6rem 1.5rem;
  background:rgba(255,255,255,.88);
  border-left:4px solid var(--sanit-brand);
  box-shadow:0 18px 40px rgba(18,22,31,.18);
}

.carousel .caption .display-1,
.carousel .caption .caption-description,
.carousel .caption .caption-description p,
.carousel .caption .caption-description h1,
.carousel .caption .caption-description h2,
.carousel .caption .caption-description h3 {
  color:#213244 !important;
  text-shadow:none !important;
}

.carousel .caption .display-1 {
  margin-bottom:.75rem;
  font-size:2.45rem;
  line-height:1.02;
}

.carousel .caption .caption-description p:last-child {
  margin-bottom:0;
}

.carousel .direction .carousel-control i {
  background:rgba(0,102,204,.72);
  border-radius:999px;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

#footer {
  margin-top:2.5rem;
  padding-top:3rem;
  background:linear-gradient(180deg,#35393d 0%,#2d3135 100%);
}

#footer .block_newsletter,
#footer .footer-container,
#footer .copyrights,
#footer .footer-after {
  box-shadow:none;
}

#blockEmailSubscription_displayFooterBefore {
  margin:0 auto 1.75rem;
  padding:1.5rem 1.75rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
}

#blockEmailSubscription_displayFooterBefore #block-newsletter-label,
#blockEmailSubscription_displayFooterBefore p,
#blockEmailSubscription_displayFooterBefore .block_newsletter,
#blockEmailSubscription_displayFooterBefore .gdpr_consent_label,
#blockEmailSubscription_displayFooterBefore .custom-checkbox label {
  color:#fff;
}

#blockEmailSubscription_displayFooterBefore form .col-xs-12 {
  position:relative;
}

#blockEmailSubscription_displayFooterBefore .input-wrapper input[type=email] {
  width:100%;
  height:50px;
  padding:0 10rem 0 1rem;
  color:#2a3440;
  background:#fff;
  border:0;
  border-radius:999px;
}

#blockEmailSubscription_displayFooterBefore input.btn.btn-primary {
  position:absolute;
  top:0;
  right:15px;
  z-index:2;
  height:50px;
  padding:0 1.5rem;
  border-radius:999px;
}

#blockEmailSubscription_displayFooterBefore .clearfix {
  display:none;
}

#footer .block-social,
#footer .links,
#footer .block-contact,
#footer .ps-contact-info {
  background:transparent;
  border:0;
  padding:0;
}

#footer .footer-container {
  background:transparent;
}

#footer .links .title,
#footer .block-contact .title {
  margin-bottom:1rem;
  padding:0 0 .85rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}

#footer .links .h3,
#footer .links .title .h3,
#footer .block-contact .h4,
#footer .block-contact .block-contact-title {
  color:#fff;
}

#footer .links ul {
  background:transparent;
}

#footer .links ul > li {
  padding:.2rem 0;
  background:transparent;
  border-bottom:0;
  font-weight:400;
}

#footer .links ul > li a,
#footer .block-contact,
#footer .block-contact a,
#footer .ps-contact-info,
#footer .ps-contact-info a {
  color:rgba(255,255,255,.88);
}

#footer .links ul > li a:hover,
#footer .block-contact a:hover,
#footer .ps-contact-info a:hover {
  color:#fff;
  text-decoration:none;
}

#footer #block-reassurance {
  margin-top:1.25rem;
}

#footer #block-reassurance ul {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  padding:0;
  list-style:none;
}

#footer #block-reassurance li {
  flex:1 1 220px;
}

#footer #block-reassurance .block-reassurance-item {
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1rem 1.1rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
}

#footer #block-reassurance .block-reassurance-item .h6 {
  color:#fff;
  margin:0;
}

#footer .text-sm-center,
#footer .text-sm-center a {
  color:#fff;
}

@media (max-width: 991px) {
  #header .header-top-right,
  #header .header-nav .right-nav {
    display:block;
  }

  #blockEmailSubscription_displayFooterBefore .input-wrapper input[type=email] {
    padding-right:1rem;
  }

  #blockEmailSubscription_displayFooterBefore input.btn.btn-primary {
    position:relative;
    top:auto;
    right:auto;
    width:100%;
    margin-top:.85rem;
  }

  .carousel .caption .display-1 {
    font-size:2rem;
  }
}

/* --- v5 correction page mon compte --- */
.page-my-account #content .links{
  display:flex;
  flex-wrap:wrap;
  margin-right:-10px;
  margin-left:-10px;
}

.page-my-account #content .links > a{
  display:block;
  padding:10px;
  background:transparent;
  border:0;
  color:inherit;
  text-decoration:none;
}

.page-my-account #content .links > a:hover,
.page-my-account #content .links > a:focus{
  background:transparent;
  color:inherit;
  text-decoration:none;
}

.page-my-account #content .links .link-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  min-height:170px;
  padding:1.5rem 1rem;
  text-align:center;
  background:#fff;
  border:1px solid #dfe8f2;
  border-radius:14px;
  box-shadow:0 12px 28px rgba(18,22,31,.08);
  color:#213244;
  font-size:1rem;
  font-weight:600;
  line-height:1.35;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.page-my-account #content .links .link-item i{
  display:block;
  margin:0;
  font-size:2rem;
  color:var(--sanit-brand);
}

.page-my-account #content .links > a:hover .link-item,
.page-my-account #content .links > a:focus .link-item{
  transform:translateY(-2px);
  border-color:rgba(0,102,204,.38);
  box-shadow:0 16px 32px rgba(18,22,31,.12);
  color:#213244;
}

.page-my-account #content .links > a:hover .link-item i,
.page-my-account #content .links > a:focus .link-item i{
  color:var(--sanit-brand-hover);
}

@media (max-width: 767px){
  .page-my-account #content .links > a{
    padding:8px;
  }

  .page-my-account #content .links .link-item{
    min-height:130px;
    padding:1.1rem .85rem;
    font-size:.95rem;
  }
}


/* ================================================================
   MENU DESKTOP STABLE — SanitConfort
   ----------------------------------------------------------------
   Objectif :
   • empêcher la fermeture quand la souris part légèrement en diagonale
   • supprimer les zones mortes entre niveaux
   • rendre atteignables les catégories éloignées
   • garder un comportement propre sur desktop uniquement
   ================================================================ */
@media (min-width: 768px) {

  /* conteneurs */
  #header,
  #_desktop_top_menu,
  #_desktop_top_menu .container,
  #_desktop_top_menu .top-menu,
  #_desktop_top_menu .top-menu[data-depth="0"] {
    overflow: visible !important;
  }

  #_desktop_top_menu {
    position: relative;
    z-index: 50;
  }

  #_desktop_top_menu > .top-menu[data-depth="0"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem;
  }

  #_desktop_top_menu > .top-menu[data-depth="0"] > li {
    position: relative;
    float: none;
  }

  /* liens niveau 0 */
  #header .top-menu > li > a,
  #header .top-menu a[data-depth="0"] {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: .48rem .92rem;
    border-radius: 999px;
    transition: background .15s ease, color .15s ease;
  }

  #header .top-menu > li > a:hover,
  #header .top-menu a[data-depth="0"]:hover,
  #header .top-menu > li:hover > a,
  #header .top-menu > li:focus-within > a {
    background: rgba(0,102,204,.09);
    color: var(--sanit-brand);
    text-decoration: none;
  }

  /* -------- niveau 1 -------- */
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .sub-menu,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .sub-menu.collapse,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .popover {
    display: block !important;
    position: absolute;
    top: calc(100% - 10px);
    left: 0;

    min-width: 290px;
    width: max-content;
    max-width: min(1180px, calc(100vw - 40px));
    margin: 0;
    padding: 10px 0 12px;

    background: #fff;
    border: 1px solid #dce8f4;
    border-radius: 14px;
    box-shadow:
      0 6px 14px rgba(18,22,31,.08),
      0 18px 40px rgba(18,22,31,.14);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);

    z-index: 900;
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear .22s;

    overflow: visible !important;
  }

  /* pont invisible entre la barre et le panneau */
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .sub-menu::before,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .sub-menu.collapse::before,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li > .popover::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -24px;
    height: 24px;
  }

  #_desktop_top_menu > .top-menu[data-depth="0"] > li:hover > .sub-menu,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li:hover > .sub-menu.collapse,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li:hover > .popover,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li:focus-within > .sub-menu,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li:focus-within > .sub-menu.collapse,
  #_desktop_top_menu > .top-menu[data-depth="0"] > li:focus-within > .popover {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility 0s linear 0s;
  }

  /* structure interne */
  #_desktop_top_menu .sub-menu,
  #_desktop_top_menu .popover {
    overflow: visible !important;
  }

  #_desktop_top_menu .sub-menu ul,
  #_desktop_top_menu .popover ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #_desktop_top_menu .sub-menu li,
  #_desktop_top_menu .popover li {
    position: relative;
    float: none;
  }

  #_desktop_top_menu .sub-menu a,
  #_desktop_top_menu .popover a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    min-height: 40px;
    padding: .62rem 1.05rem;
    color: #213244;
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    transition: background .12s ease, color .12s ease;
  }

  #_desktop_top_menu .sub-menu li:hover > a,
  #_desktop_top_menu .popover li:hover > a,
  #_desktop_top_menu .sub-menu li:focus-within > a,
  #_desktop_top_menu .popover li:focus-within > a {
    background: rgba(0,102,204,.075);
    color: var(--sanit-brand);
  }

  /* niveau 2+ : toujours collés au niveau précédent */
  #_desktop_top_menu .sub-menu li > .collapse,
  #_desktop_top_menu .sub-menu li > .sub-menu,
  #_desktop_top_menu .popover li > .collapse,
  #_desktop_top_menu .popover li > .sub-menu {
    display: block !important;
    position: absolute;
    top: -10px;
    left: calc(100% - 6px);

    min-width: 280px;
    width: max-content;
    max-width: min(520px, calc(100vw - 40px));
    margin: 0;
    padding: 10px 0 12px;

    background: #fff;
    border: 1px solid #dce8f4;
    border-radius: 14px;
    box-shadow:
      0 6px 14px rgba(18,22,31,.08),
      0 18px 40px rgba(18,22,31,.14);

    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);

    z-index: 910;
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility 0s linear .22s;

    overflow: visible !important;
  }

  /* pont latéral invisible pour le trajet souris */
  #_desktop_top_menu .sub-menu li > .collapse::before,
  #_desktop_top_menu .sub-menu li > .sub-menu::before,
  #_desktop_top_menu .popover li > .collapse::before,
  #_desktop_top_menu .popover li > .sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -22px;
    width: 24px;
  }

  #_desktop_top_menu .sub-menu li:hover > .collapse,
  #_desktop_top_menu .sub-menu li:hover > .sub-menu,
  #_desktop_top_menu .popover li:hover > .collapse,
  #_desktop_top_menu .popover li:hover > .sub-menu,
  #_desktop_top_menu .sub-menu li:focus-within > .collapse,
  #_desktop_top_menu .sub-menu li:focus-within > .sub-menu,
  #_desktop_top_menu .popover li:focus-within > .collapse,
  #_desktop_top_menu .popover li:focus-within > .sub-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition:
      opacity .16s ease,
      transform .16s ease,
      visibility 0s linear 0s;
  }

  /* flèche à droite si sous-menu */
  #_desktop_top_menu .sub-menu li:has(> .collapse) > a::after,
  #_desktop_top_menu .sub-menu li:has(> .sub-menu) > a::after,
  #_desktop_top_menu .popover li:has(> .collapse) > a::after,
  #_desktop_top_menu .popover li:has(> .sub-menu) > a::after {
    content: "›";
    flex: 0 0 auto;
    font-size: 1.15rem;
    line-height: 1;
    opacity: .45;
    transition: opacity .12s ease, transform .12s ease;
  }

  #_desktop_top_menu .sub-menu li:hover:has(> .collapse) > a::after,
  #_desktop_top_menu .sub-menu li:hover:has(> .sub-menu) > a::after,
  #_desktop_top_menu .popover li:hover:has(> .collapse) > a::after,
  #_desktop_top_menu .popover li:hover:has(> .sub-menu) > a::after,
  #_desktop_top_menu .sub-menu li:focus-within:has(> .collapse) > a::after,
  #_desktop_top_menu .sub-menu li:focus-within:has(> .sub-menu) > a::after,
  #_desktop_top_menu .popover li:focus-within:has(> .collapse) > a::after,
  #_desktop_top_menu .popover li:focus-within:has(> .sub-menu) > a::after {
    opacity: 1;
    transform: translateX(2px);
  }

  /* si un sous-menu irait trop à droite, on le repasse à gauche */
  #_desktop_top_menu .sub-menu li.submenu-reverse > .collapse,
  #_desktop_top_menu .sub-menu li.submenu-reverse > .sub-menu,
  #_desktop_top_menu .popover li.submenu-reverse > .collapse,
  #_desktop_top_menu .popover li.submenu-reverse > .sub-menu {
    left: auto;
    right: calc(100% - 6px);
    transform: translateX(-8px);
  }

  #_desktop_top_menu .sub-menu li.submenu-reverse > .collapse::before,
  #_desktop_top_menu .sub-menu li.submenu-reverse > .sub-menu::before,
  #_desktop_top_menu .popover li.submenu-reverse > .collapse::before,
  #_desktop_top_menu .popover li.submenu-reverse > .sub-menu::before {
    left: auto;
    right: -22px;
  }

  /* sécurité si le thème injecte des colonnes */
  #_desktop_top_menu .sub-menu .top-menu[data-depth="1"] > li,
  #_desktop_top_menu .popover .top-menu[data-depth="1"] > li,
  #_desktop_top_menu .sub-menu .category-sub-menu > li,
  #_desktop_top_menu .popover .category-sub-menu > li {
    width: 100%;
  }
}


.product-miniature .product-price-and-shipping .product-on-order {
  display: block;
  margin-top: 0.35rem;
  color: #b00020;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}

.product-prices .product-discount,
.product-prices .current-price{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.product-prices .supplier-public-price-label{
  display:inline-block;
  font-size:.95rem;
  font-weight:500;
  color:#6c757d;
  line-height:1.2;
}


.product-prices .price-tax-label-inline{
  display:inline-block;
  font-size:.95rem;
  font-weight:600;
  color:var(--sanit-brand);
  line-height:1.2;
}

.product-prices .product-price-ht-small{
  margin-top:6px;
  margin-bottom:0;
  font-size:.9rem;
  color:#6c757d;
  line-height:1.3;
}

.product-prices .product-price-ht-small .tax-mode{
  font-weight:600;
}

.product-prices .tax-shipping-delivery-label{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.product-prices .delivery-prefix{
  font-weight:500;
  color:#6c757d;
}

.product-prices .delivery-information{
  font-weight:600;
}


/* ===== CARTES PRODUIT HARMONISÉES — hauteur et espacements fixes (v3) ===== */
.products.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}

.products.row > .js-product {
  display: flex;
  padding: 0 8px 16px;
}

.products.row > .js-product .product-miniature {
  display: flex;
  width: 100%;
  height: 100%;
  margin-bottom: 0;
}

.products.row > .js-product .thumbnail-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.product-miniature .thumbnail-container .product-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 14px;
  overflow: hidden;
  background: #f8f9fa;
}

.product-miniature .thumbnail-container .product-thumbnail picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.product-miniature .thumbnail-container .product-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: unset;
  object-fit: contain;
  object-position: center;
}

.product-miniature .product-description {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 14px 14px;
}

.product-miniature .product-title {
  margin: 0;
  min-height: 2.7em;
  font-size: .92rem;
  line-height: 1.35;
}

.product-miniature .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-decoration: none;
}

.product-miniature .product-price-and-shipping {
  margin-top: auto;
  min-height: 2.3em;
}

@media (max-width: 767px) {
  .products.row {
    margin-left: -6px;
    margin-right: -6px;
  }

  .products.row > .js-product {
    padding: 0 6px 12px;
  }

  .product-miniature .product-description {
    padding: 10px 12px 12px;
  }
}

/* MAJ 19/06 titres vignettes sur 3 lignes (demande user) */
.product-miniature .product-title{min-height:4.1em}
.product-miniature .product-title a{-webkit-line-clamp:3}


/* ================================================================
   SANITCONFORT — Mobile & presentation v2 (26/06/2026, demande patron)
   Remplace la v1 (sous-cat en grille = casse le design carte natif,
   + panneau filtre vide car facettes repliees).
   1) Filtres mobiles : barre + panneau coulissant, FACETTES DEPLIEES.
   2) Sous-categories : responsive (le min-width:200px natif les rend
      enormes sur mobile) en gardant le design carte natif.
   3) Description categorie plus lisible.
   Pilote par custom-mobile.js.
   ================================================================ */

/* ---------- 1. FILTRES MOBILES (bottom sheet) ---------- */
.m-filter-bar,.m-filter-head,.m-filter-foot,.m-filter-overlay{display:none;}

@media (max-width:767px){
  .m-filter-bar{display:flex;gap:8px;position:sticky;top:0;z-index:300;background:#fff;padding:8px 0;margin:0 0 12px;border-bottom:1px solid #e7edf3;}
  .m-filter-bar .m-fbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;font-size:14px;font-weight:500;border:1px solid #ccd3da;border-radius:8px;background:#fff;color:#1b2a36;cursor:pointer;line-height:1;}
  .m-filter-bar .m-fbtn svg{flex:none;}
  .m-filter-bar .m-fbtn .m-badge{background:#185FA5;color:#fff;border-radius:10px;font-size:12px;min-width:20px;padding:1px 6px;}
  .m-filter-bar .m-fbtn .m-badge:empty{display:none;}

  /* arbre categories deja dans le menu hamburger -> masque ici */
  #left-column .block-categories{display:none !important;}

  /* la colonne gauche devient le panneau coulissant */
  #left-column{position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;width:100% !important;max-width:100% !important;max-height:86vh !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch;z-index:1100 !important;background:#fff !important;border-radius:16px 16px 0 0 !important;margin:0 !important;padding:0 16px 16px !important;transform:translateY(106%) !important;transition:transform .28s ease;box-shadow:0 -6px 22px rgba(0,0,0,.20) !important;}
  body.m-filters-open #left-column{transform:translateY(0) !important;}

  /* filtres propres dans le panneau */
  #category #left-column #search_filters_wrapper{margin:0 !important;}
  #category #left-column #search_filters{padding:0 !important;margin:0 !important;border:0 !important;box-shadow:none !important;background:transparent !important;}
  /* CLE DU BUG : deplier toutes les facettes dans le panneau (sinon vide) */
  #left-column #search_filters .facet .collapse{display:block !important;height:auto !important;}
  #left-column #search_filters .facet{border-bottom:1px solid #f0f0f0 !important;padding:4px 0 8px !important;}
  #left-column #search_filters .facet .title{pointer-events:none;cursor:default;}
  #left-column #search_filters .facet .title .collapse-icons{display:none !important;}
  #left-column #search_filters .facet .title .facet-title{font-size:14px;font-weight:500;color:#1b2a36;text-transform:none;}

  .m-filter-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;padding:14px 0 10px;font-size:16px;font-weight:500;border-bottom:1px solid #eee;z-index:5;}
  .m-filter-head .m-close{background:none;border:none;font-size:26px;line-height:1;color:#555;cursor:pointer;padding:0 4px;}

  .m-filter-foot{display:block;position:sticky;bottom:0;background:#fff;padding:12px 0 8px;border-top:1px solid #eee;z-index:5;margin-top:8px;}
  .m-filter-foot .m-apply{width:100%;padding:13px;font-size:15px;font-weight:500;color:#fff;background:#185FA5;border:none;border-radius:8px;cursor:pointer;}

  .m-filter-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1050;}
  body.m-filters-open .m-filter-overlay{display:block;}
  body.m-filters-open{overflow:hidden;}
}

/* ---------- 2. SOUS-CATEGORIES (responsive, garde le design carte natif) ---------- */
#subcategories ul li{min-width:0 !important;}   /* enleve le 200px qui bloque le retrecissement */
@media (max-width:767px){
  #subcategories{margin-top:10px;}
  #subcategories ul{margin-left:-6px;justify-content:flex-start;}
  #subcategories ul li{width:calc(33.333% - 12px) !important;margin:6px !important;}
  #subcategories ul li .subcategory-image a{padding:5px;}
  #subcategories ul li:hover .subcategory-image a{padding:3px;border-width:3px;}
  #subcategories ul li .subcategory-name{font-size:12px;line-height:1.25;}
}

/* ---------- 3. DESCRIPTION CATEGORIE ---------- */
#category-description p,#category-description ul,#category-description li{color:#33414d !important;line-height:1.6 !important;}
#category-description{max-width:820px;}
@media (max-width:767px){
  #category-description p,#category-description ul,#category-description li{font-size:14.5px !important;}
}


/* ================================================================
   FONDATIONS — refonte design SANIT CONFORT (26/06/2026)
   Esprit epure / pro (reference Tereva). On REDECLARE les tokens
   --sanit-* d'origine (la declaration la plus tardive gagne) :
   tout le site herite des nouvelles couleurs/formes. + typo Inter
   + boutons et surfaces plus nets.
   ================================================================ */
:root{
  --sanit-brand:#0a5aa3;            /* bleu marque, un peu plus profond/elegant */
  --sanit-brand-hover:#083f73;
  --sanit-brand-soft:#eaf2fb;       /* fond bleu tres clair (pastilles, surbrillances) */
  --sanit-ink:#15222e;              /* titres (presque noir bleute) */
  --sanit-text:#39454f;             /* texte courant */
  --sanit-muted:#69767f;            /* texte secondaire */
  --sanit-line:#e7ecf1;             /* filets / bordures */
  --sanit-surface:#f4f6f9;          /* fond de page */
  --sanit-card:#ffffff;
  --sanit-footer:#15222e;
  --sanit-radius:12px;
  --sanit-radius-sm:9px;
  --sanit-shadow:0 6px 20px rgba(18,30,45,.07);
  --sanit-shadow-sm:0 2px 8px rgba(18,30,45,.05);
}

/* ---- Typographie ---- */
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--sanit-text);
  background:var(--sanit-surface);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5,.products-selection h1{
  color:var(--sanit-ink);font-weight:600;letter-spacing:-.2px;
}

/* ---- Liens ---- */
a{color:var(--sanit-brand);}
a:hover,a:focus{color:var(--sanit-brand-hover);}

/* ---- Boutons : coins coherents, plus nets ---- */
.btn{border-radius:var(--sanit-radius-sm);font-weight:500;letter-spacing:.1px;}
.btn-primary,.product-actions .add-to-cart,.block_newsletter form input[type=submit]{
  background:var(--sanit-brand);border-color:var(--sanit-brand);box-shadow:none;border-radius:var(--sanit-radius-sm);
}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,
.product-actions .add-to-cart:hover,.block_newsletter form input[type=submit]:hover{
  background:var(--sanit-brand-hover);border-color:var(--sanit-brand-hover);
}
.btn-secondary{border-radius:var(--sanit-radius-sm);}

/* ---- Surfaces : filet + ombre plus doux ---- */
.card,.product-miniature,#subcategories ul li{
  border:0.5px solid var(--sanit-line);
  box-shadow:var(--sanit-shadow-sm);
}

/* ---- Champs ---- */
.form-control:focus,input:focus,select:focus,textarea:focus,.custom-select:focus{
  border-color:rgba(10,90,163,.45);
  box-shadow:0 0 0 .2rem rgba(10,90,163,.12);
}


/* ================================================================
   ETAPE 2 — PAGE CATEGORIE : fiches produit + sous-categories
   (26/06/2026). Visuel uniquement (on ne touche pas au mecanisme
   de survol/quick-view natif). Sous-categories -> pastilles.
   ================================================================ */

/* ----- Fiches produit (cartes) ----- */
.product-miniature .thumbnail-container{
  border-radius:var(--sanit-radius);
  transition:box-shadow .2s ease, transform .2s ease;
}
.product-miniature:hover .thumbnail-container{
  box-shadow:var(--sanit-shadow);
  transform:translateY(-3px);
}
.product-miniature .thumbnail-top .product-thumbnail{padding:8px;}
.product-miniature .product-thumbnail img{max-height:210px;object-fit:contain;margin:0 auto;}

.product-miniature .product-description{padding:10px 12px 14px;text-align:left;}
.product-miniature .product-title{min-height:2.7em;margin:0 0 6px;text-align:left;text-transform:none;}
.product-miniature .product-title a{
  font-size:13px;font-weight:500;color:var(--sanit-ink);
  -webkit-line-clamp:2;text-align:left;line-height:1.35;
}
.product-miniature .product-title a:hover{color:var(--sanit-brand);}

.product-miniature .product-price-and-shipping{
  text-align:left;margin-top:4px;font-weight:600;color:var(--sanit-ink);font-size:15px;
}
.product-miniature .product-price-and-shipping .regular-price{
  color:var(--sanit-muted);font-weight:400;font-size:12px;text-decoration:line-through;margin-right:5px;
}

/* badges (Promo, Nouveau...) : pilules bleu marque au lieu du cyan */
.product-miniature .product-flags li.product-flag{
  background:var(--sanit-brand);border-radius:7px;font-size:11px;font-weight:600;
  text-transform:none;padding:3px 9px;min-width:0;min-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,.14);
}
/* quick view : gris -> bleu marque au survol */
.product-miniature .highlighted-informations .quick-view{color:var(--sanit-muted);}
.product-miniature .highlighted-informations .quick-view:hover{color:var(--sanit-brand);}

/* ----- Sous-categories en pastilles ----- */
#subcategories{border-top:0 !important;margin-bottom:18px;}
#subcategories .subcategory-heading{font-size:14px;color:var(--sanit-muted);font-weight:500;margin-bottom:10px;text-transform:none;}
#subcategories ul.subcategories-list{display:flex !important;flex-wrap:wrap;gap:8px;margin:0 !important;justify-content:flex-start !important;}
#subcategories ul.subcategories-list li{
  width:auto !important;min-width:0 !important;margin:0 !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;
}
#subcategories ul.subcategories-list li .subcategory-image{display:none !important;}
#subcategories ul.subcategories-list li h5{margin:0;}
#subcategories ul.subcategories-list li .subcategory-name{
  display:inline-block;padding:7px 14px;font-size:13px;font-weight:500;text-transform:none;
  color:var(--sanit-ink);background:#fff;border:1px solid var(--sanit-line);border-radius:20px;
  text-decoration:none;transition:.15s;
}
#subcategories ul.subcategories-list li:hover .subcategory-name,
#subcategories ul.subcategories-list li .subcategory-name:hover{
  background:var(--sanit-brand-soft);border-color:var(--sanit-brand);color:var(--sanit-brand);
}
@media (max-width:767px){
  #subcategories ul.subcategories-list{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;}
  #subcategories ul.subcategories-list li .subcategory-name{white-space:nowrap;}
}

/* fix pastilles sous-categories : ne pas comprimer les pilules
   (flex-shrink) -> elles gardent leur largeur, le texte ne se coupe plus,
   et la rangee defile horizontalement sur mobile. (26/06/2026) */
#subcategories ul.subcategories-list li{flex:0 0 auto !important;}
#subcategories ul.subcategories-list li .subcategory-name{white-space:nowrap !important;overflow:visible !important;}


/* ================================================================
   ETAPE 3 — FICHE PRODUIT (26/06/2026). Prix mis en avant, bouton
   panier net, onglets propres (bleu marque au lieu du cyan).
   Visuel uniquement.
   ================================================================ */

/* ----- Titre ----- */
#main h1.h1{font-size:24px;line-height:1.25;margin-bottom:.5rem;}

/* ----- Prix ----- */
.product-prices{margin-top:1rem;}
.product-price .current-price .current-price-value{
  font-size:28px;font-weight:700;color:var(--sanit-ink);letter-spacing:-.4px;
}
.product-prices .price-tax-label-inline,
.product-prices .supplier-public-price-label{
  font-size:12px;color:var(--sanit-muted);font-weight:400;
}
.product-prices .product-discount .regular-price{
  color:var(--sanit-muted);font-weight:400;text-decoration:line-through;font-size:16px;
}
.product-price .discount{
  display:inline-block;padding:3px 10px;font-size:13px;font-weight:600;color:#fff;
  background:#c0392b;border-radius:7px;
}

/* ----- Quantité + bouton panier ----- */
.product-quantity #quantity_wanted{
  height:3rem;border-radius:var(--sanit-radius-sm);border:1px solid var(--sanit-line);
}
.product-actions .add-to-cart{
  height:auto;min-height:3rem;width:100%;max-width:340px;
  font-size:15px;font-weight:600;letter-spacing:.2px;border-radius:var(--sanit-radius-sm);
}

/* ----- Onglets (description, fiche technique...) ----- */
.tabs{box-shadow:none;}
.tabs .nav-tabs{border-bottom:1px solid var(--sanit-line);gap:4px;}
.tabs .nav-tabs .nav-link{
  color:var(--sanit-muted);font-weight:500;font-size:15px;padding:10px 16px;
  border:0;border-bottom:2px solid transparent;
}
.tabs .nav-tabs .nav-link:hover{color:var(--sanit-ink);}
.tabs .nav-tabs .nav-link.active{
  color:var(--sanit-brand);border-bottom-color:var(--sanit-brand);background:transparent;
}

/* ----- Infos / logo marque ----- */
.product-information{color:var(--sanit-text);}
.product-information .manufacturer-logo{border:1px solid var(--sanit-line);border-radius:8px;}


/* ================================================================
   ETAPE 2bis — Vignettes produit : prix TTC + HT + bandeau marque
   (26/06/2026). Template miniatures/product.tpl modifie.
   ================================================================ */

/* ----- Bandeau marque en diagonale (coin haut-gauche) ----- */
.product-miniature .thumbnail-container{position:relative;overflow:hidden;}
.product-miniature .brand-ribbon{
  position:absolute;top:16px;left:-44px;width:152px;z-index:4;
  transform:rotate(-45deg);
  background:var(--sanit-brand);color:#fff;
  font-size:10px;font-weight:600;line-height:1.2;text-align:center;
  padding:4px 0;text-transform:uppercase;letter-spacing:.4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 4px rgba(0,0,0,.22);pointer-events:none;
}
/* badges Promo/Nouveau : decales sous le bandeau */
.product-miniature .product-flags{top:38px;}

/* ----- Prix : TTC (principal) + HT (secondaire) ----- */
.product-miniature .product-price-and-shipping{line-height:1.25;min-height:0;}
.product-miniature .product-price-and-shipping .price{
  font-size:18px;font-weight:700;color:var(--sanit-ink);display:inline-block;
}
.product-miniature .product-price-and-shipping .price .tax-mode{
  font-size:11px;font-weight:500;color:var(--sanit-muted);margin-left:3px;
}
.product-miniature .product-price-and-shipping .price-ht{
  display:block;font-size:12px;color:var(--sanit-muted);font-weight:400;margin-top:1px;
}
.product-miniature .product-price-and-shipping .price-ht .ht-value{font-weight:500;}

/* ================================================================
   FIX FILTRE MOBILE (26/06/2026) — CAUSE REELLE : le theme met
   #search_filters_wrapper en display:none sur mobile -> le panneau
   s'ouvrait VIDE (les facettes etaient la mais le parent cache).
   On force le wrapper visible + facettes en accordeon repliable
   (compact : on tape un titre pour deplier, facon Tereva).
   ================================================================ */
@media (max-width:767px){
  #left-column #search_filters_wrapper{display:block !important;}
  #left-column #search_filters .facet .collapse:not(.in){display:none !important;height:0 !important;}
  #left-column #search_filters .facet .title{pointer-events:auto !important;cursor:pointer !important;}
  #left-column #search_filters .facet .title .collapse-icons{display:inline-block !important;}
}


/* ================================================================
   ETAPE 4a — Categories parentes = pages de NAVIGATION (26/06/2026)
   Comme Tereva : une categorie qui a des sous-categories n'affiche
   NI produits NI filtres, juste de belles vignettes de sous-cat.
   (logique dans product-list.tpl -> body.cat-navigation)
   ================================================================ */

/* bouton "Filtrer" natif bugué (page blanche) : neutralise (mon panneau le remplace) */
.filter-button, #search_filter_toggler{display:none !important;}

/* page navigation : pas de colonne filtres, contenu pleine largeur */
body.cat-navigation #left-column{display:none !important;}
body.cat-navigation #content-wrapper{flex:0 0 100% !important;max-width:100% !important;width:100% !important;}
body.cat-navigation .m-filter-bar{display:none !important;}

/* sous-categories en GRANDES vignettes images */
body.cat-navigation #subcategories{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;margin-top:6px;}
body.cat-navigation #subcategories .subcategory-heading{font-size:16px;color:var(--sanit-ink);font-weight:600;margin-bottom:16px;}
body.cat-navigation #subcategories ul.subcategories-list{display:grid !important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important;gap:18px !important;}
body.cat-navigation #subcategories ul.subcategories-list li{
  width:auto !important;min-width:0 !important;margin:0 !important;flex:initial !important;
  background:#fff !important;border:0.5px solid var(--sanit-line) !important;border-radius:var(--sanit-radius) !important;
  box-shadow:var(--sanit-shadow-sm) !important;overflow:hidden;transition:transform .2s ease, box-shadow .2s ease;text-align:center;
}
body.cat-navigation #subcategories ul.subcategories-list li:hover{box-shadow:var(--sanit-shadow) !important;transform:translateY(-4px);}
body.cat-navigation #subcategories .subcategory-image{display:block !important;max-width:none !important;width:auto !important;margin:0 !important;padding:0 !important;}
body.cat-navigation #subcategories .subcategory-image a.img{display:block !important;padding:16px !important;border:0 !important;}
body.cat-navigation #subcategories .subcategory-image a.img img{display:block !important;width:100% !important;max-width:100% !important;height:160px !important;object-fit:contain !important;}
body.cat-navigation #subcategories ul.subcategories-list li:hover .subcategory-image a.img{padding:16px !important;border:0 !important;}
body.cat-navigation #subcategories h5{margin:0 !important;padding:12px !important;border-top:0.5px solid var(--sanit-line);}
body.cat-navigation #subcategories .subcategory-name{
  display:block !important;padding:0 !important;border:0 !important;background:transparent !important;border-radius:0 !important;
  font-size:14px !important;font-weight:500 !important;color:var(--sanit-ink) !important;white-space:normal !important;text-transform:none !important;
}
body.cat-navigation #subcategories ul.subcategories-list li:hover .subcategory-name,
body.cat-navigation #subcategories .subcategory-name:hover{background:transparent !important;color:var(--sanit-brand) !important;}

@media (max-width:767px){
  body.cat-navigation #subcategories ul.subcategories-list{grid-template-columns:repeat(2,1fr) !important;gap:12px !important;}
  body.cat-navigation #subcategories .subcategory-image a.img img{height:120px !important;}
}

/* fix specificite (26/06) : la regle "pastille" de l'etape 2
   (#subcategories ul.subcategories-list li .subcategory-image{display:none})
   etait PLUS specifique que mes regles cat-navigation -> images 0x0.
   On re-declare avec la meme profondeur de selecteur. */
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image{display:block !important;max-width:none !important;width:auto !important;padding:0 !important;margin:0 !important;}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img{display:block !important;padding:16px !important;border:0 !important;}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img img{display:block !important;width:100% !important;max-width:100% !important;height:150px !important;object-fit:contain !important;}
body.cat-navigation #subcategories ul.subcategories-list li:hover .subcategory-image a.img{padding:16px !important;border:0 !important;}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-name{display:block !important;padding:0 !important;border:0 !important;background:transparent !important;border-radius:0 !important;font-size:14px !important;font-weight:500 !important;color:var(--sanit-ink) !important;white-space:normal !important;text-transform:none !important;}
@media (max-width:767px){
  body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img img{height:120px !important;}
}

/* ================================================================
   ETAPE 4 — PAGE D'ACCUEIL (26/06/2026)
   Section "Nos univers" (tuiles departements) + titres de section.
   ================================================================ */
.page-home .cc-univers{margin:.5rem 0 2.5rem;}
.cc-univers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.cc-univers-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px 16px;background:#fff;border:0.5px solid var(--sanit-line);border-radius:var(--sanit-radius);text-align:center;color:var(--sanit-ink);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.cc-univers-tile:hover{transform:translateY(-4px);box-shadow:var(--sanit-shadow);border-color:var(--sanit-brand);color:var(--sanit-brand);}
.cc-univers-tile svg{width:44px;height:44px;color:var(--sanit-brand);flex:none;}
.cc-univers-tile span{font-size:14px;font-weight:500;line-height:1.25;}

/* Titres de section home : centres, accent bleu, plus de tout-majuscule lourd */
.page-home .products-section-title{
  text-align:center;font-size:22px;font-weight:600;color:var(--sanit-ink);
  text-transform:none !important;letter-spacing:-.2px;margin:0 0 1.5rem;
  padding-bottom:12px;position:relative;
}
.page-home .products-section-title::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:48px;height:3px;border-radius:3px;background:var(--sanit-brand);
}
.page-home .featured-products{margin-bottom:2.5rem;}

@media (max-width:767px){
  .cc-univers-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cc-univers-tile{padding:20px 10px;}
  .cc-univers-tile svg{width:36px;height:36px;}
  .page-home .products-section-title{font-size:19px;}
}

/* ================================================================
   ETAPE 5 — Harmonisation footer avec la nouvelle palette (26/06)
   (en-tete + menu deja stylises par les fondations / boss-override)
   ================================================================ */
#footer{background:linear-gradient(180deg,#1b2a38 0%,#15222e 100%) !important;margin-top:2.5rem;padding-top:3rem;}
#footer .copyrights,#footer .footer-after{background:transparent !important;border-top:1px solid rgba(255,255,255,.09);margin-top:1.5rem;}
#footer .block_newsletter,#footer .links,#footer .block-social,#footer .block-contact,#footer .ps-contact-info{
  background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.10) !important;border-radius:var(--sanit-radius) !important;
}
#footer a:hover{color:#fff !important;}

/* ================================================================
   FOOTER v2 (26/06) — fix titres illisibles (« Votre compte » etait
   en noir car les fondations colorent les titres en ink) + colonnes
   a plat (plus de cartes), look propre.
   ================================================================ */
/* tous les titres de colonnes en BLANC, coherents */
#footer h1,#footer h2,#footer h3,#footer h4,#footer h5,
#footer .h3,#footer .h4,#footer .title,#footer .links .title,
#footer .block-contact .h3,#footer [class*="account"] .h3,#footer .ps-contact-info .h3{
  color:#fff !important;font-weight:600 !important;font-size:14px !important;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px !important;
}
/* colonnes a plat : plus de fond/bordure/carte */
#footer .block_newsletter,#footer .links,#footer .block-social,
#footer .block-contact,#footer .ps-contact-info,#footer .account-list,
#footer .footer-container > div,#footer .links ul{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  -webkit-box-shadow:none !important;box-shadow:none !important;
}
#footer .links ul,#footer .ps-contact-info,#footer .block-contact{padding:0 !important;}
/* liens + texte : gris clair lisible, blanc au survol */
#footer,#footer p,#footer li,#footer a,#footer .links a,#footer address{color:#aab4be !important;}
#footer a:hover,#footer .links a:hover,#footer .cms-page-link:hover{color:#fff !important;}
#footer ul{list-style:none;margin:0;padding:0;}
#footer li{margin-bottom:9px;line-height:1.45;}

/* ================================================================
   HOME — Produits populaires / Meilleures ventes en SLIDER horizontal
   (au lieu d'une grande grille) + FOOTER MOBILE propre. (26/06)
   ================================================================ */
/* Slider horizontal compact (desktop + mobile, swipe/scroll) */
.page-home .featured-products .products{
  display:flex !important;flex-wrap:nowrap !important;overflow-x:auto;gap:14px;margin:0 !important;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;
}
.page-home .featured-products .products > .js-product{
  flex:0 0 auto !important;width:230px !important;max-width:76vw;margin:0 !important;padding:0 !important;scroll-snap-align:start;
}
.page-home .featured-products .products::-webkit-scrollbar{height:8px;}
.page-home .featured-products .products::-webkit-scrollbar-track{background:transparent;}
.page-home .featured-products .products::-webkit-scrollbar-thumb{background:var(--sanit-line);border-radius:4px;}

/* Footer mobile : titres blancs + accordeon propre */
@media (max-width:767px){
  #footer .title.hidden-md-up{border-top:1px solid rgba(255,255,255,.10) !important;padding:13px 0 !important;margin:0 !important;background:transparent !important;}
  #footer .title .h3,#footer .title span.h3{color:#fff !important;font-size:15px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.4px;margin:0 !important;}
  #footer .title .collapse-icons .material-icons,#footer .title .navbar-toggler,#footer .title .collapse-icons{color:#fff !important;}
  #footer .footer-container{padding:1.25rem 1rem !important;}
  #footer .links,#footer .links ul{margin:0 !important;}
  #footer .links ul li{margin-bottom:11px;}
}

/* cartes du slider home encore plus petites (26/06) */
.page-home .featured-products .products > .js-product{width:168px !important;max-width:62vw;}
.page-home .featured-products .products{gap:12px;}

/* fleches du slider home (26/06) */
.page-home .cc-slider-wrap{position:relative;}
.page-home .cc-arrow{
  position:absolute;top:46%;transform:translateY(-50%);z-index:5;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--sanit-line);
  background:#fff;color:var(--sanit-ink);font-size:24px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sanit-shadow-sm);transition:.15s;padding:0;
}
.page-home .cc-arrow:hover{color:#fff;background:var(--sanit-brand);border-color:var(--sanit-brand);}
.page-home .cc-arrow-prev{left:-8px;}
.page-home .cc-arrow-next{right:-8px;}
@media (max-width:767px){
  .page-home .cc-arrow{width:32px;height:32px;font-size:20px;}
  .page-home .cc-arrow-prev{left:0;}
  .page-home .cc-arrow-next{right:0;}
}

/* fleches des sliders custom (equipe/partenaires/marques) : meme look rond blanc (26/06) */
.ne-slider-btn,.np-slider-btn,.nf-slider-btn{
  width:38px !important;height:38px !important;border-radius:50% !important;
  border:1px solid var(--sanit-line) !important;background:#fff !important;color:var(--sanit-ink) !important;
  font-size:22px !important;line-height:1 !important;display:inline-flex !important;align-items:center;justify-content:center;
  padding:0 !important;box-shadow:var(--sanit-shadow-sm) !important;transition:.15s !important;
}
.ne-slider-btn:hover,.np-slider-btn:hover,.nf-slider-btn:hover{
  background:var(--sanit-brand) !important;color:#fff !important;border-color:var(--sanit-brand) !important;
}
.ne-slider-track,.np-slider-track,.nf-slider-track{touch-action:pan-y;}
@media (max-width:767px){.ne-slider-btn,.np-slider-btn,.nf-slider-btn{width:32px !important;height:32px !important;font-size:19px !important;}}


/* sliders custom -> scroll natif (swipe fluide) SANS toucher la largeur
   responsive des slides (25/33/50/100%). On tue juste le transform. (26/06 v2) */
.ne-slider-wrap,.np-slider-wrap,.nf-slider-wrap{
  overflow-x:auto !important;overflow-y:hidden !important;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;
}
.ne-slider-track,.np-slider-track,.nf-slider-track{
  transform:none !important;transition:none !important;touch-action:auto !important;
}
.ne-slide,.np-slide,.nf-slide{scroll-snap-align:start;}
.ne-slider-wrap::-webkit-scrollbar,.np-slider-wrap::-webkit-scrollbar,.nf-slider-wrap::-webkit-scrollbar{height:8px;}
.ne-slider-wrap::-webkit-scrollbar-track,.np-slider-wrap::-webkit-scrollbar-track,.nf-slider-wrap::-webkit-scrollbar-track{background:transparent;}
.ne-slider-wrap::-webkit-scrollbar-thumb,.np-slider-wrap::-webkit-scrollbar-thumb,.nf-slider-wrap::-webkit-scrollbar-thumb{background:var(--sanit-line);border-radius:4px;}

/* equipe : en mobile, plusieurs cartes par vue (au lieu d'1 plein ecran 440px) (26/06) */
@media (max-width:575px){ .ne-slide{flex:0 0 64% !important;} }
@media (min-width:576px) and (max-width:767px){ .ne-slide{flex:0 0 44% !important;} }

/* sliders custom : on masque leurs boutons natifs (casses/delegues) et on utilise
   nos fleches overlay (.cc-arrow) dans un holder relatif. (26/06) */
.ne-slider-btn,.np-slider-btn,.nf-slider-btn{display:none !important;}
.page-home .cc-slider-holder{position:relative;}

/* ================================================================
   EN-TETE — Menu horizontal -> bouton "Catalogue" (26/06)
   PC : on masque #_desktop_top_menu (doublon) et on montre .cc-cat.
   Mobile : on garde le burger natif #menu-icon, .cc-cat masquee.
   ================================================================ */
@media (min-width:768px){
  #_desktop_top_menu{display:none !important;}
  .header-top-right .cc-cat{display:inline-flex;align-items:center;gap:18px;position:relative;vertical-align:middle;margin-right:18px;}
}
@media (max-width:767px){ .cc-cat{display:none !important;} }

.cc-cat-btn{display:inline-flex;align-items:center;gap:8px;background:var(--sanit-brand);color:#fff;border:none;border-radius:var(--sanit-radius-sm);padding:11px 18px;font-size:14px;font-weight:500;cursor:pointer;line-height:1;white-space:nowrap;}
.cc-cat-btn:hover{background:var(--sanit-brand-hover);}
.cc-cat-cmi{color:var(--sanit-ink);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap;}
.cc-cat-cmi:hover{color:var(--sanit-brand);}
.cc-cat-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:1200;width:310px;background:#fff;border:0.5px solid var(--sanit-line);border-radius:var(--sanit-radius);box-shadow:var(--sanit-shadow);padding:8px;}
.cc-cat.open .cc-cat-panel{display:block;}
.cc-cat-panel a{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;color:var(--sanit-ink);text-decoration:none;font-size:14px;font-weight:500;}
.cc-cat-panel a:hover{background:var(--sanit-brand-soft);color:var(--sanit-brand);}
.cc-cat-ic{width:30px;height:30px;border-radius:7px;background:var(--sanit-brand-soft);color:var(--sanit-brand);display:flex;align-items:center;justify-content:center;flex:none;}

/* ================================================================
   CATALOGUE : l'arbre du menu (#_desktop_top_menu, 942 liens) reutilise
   en mega-menu vertical dans le panneau, sous-menus en flyout a droite.
   On surcharge le style horizontal natif du menu. (27/06)
   ================================================================ */
.cc-cat-panel{width:auto !important;min-width:262px;padding:8px !important;overflow:visible !important;}
.cc-cat-panel #_desktop_top_menu{display:block !important;position:static !important;width:auto !important;background:transparent !important;box-shadow:none !important;border:0 !important;padding:0 !important;margin:0 !important;}
.cc-cat-panel .top-menu{display:block !important;position:static !important;width:auto !important;min-width:0 !important;background:transparent !important;box-shadow:none !important;border:0 !important;margin:0 !important;padding:0 !important;}
.cc-cat-panel .top-menu > li{display:block !important;float:none !important;width:100% !important;position:relative !important;border:0 !important;margin:0 !important;}
.cc-cat-panel .top-menu li > a,.cc-cat-panel .sub-menu li > a{
  display:flex !important;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px !important;color:var(--sanit-ink) !important;font-size:14px !important;font-weight:500 !important;
  border-radius:8px;white-space:nowrap;text-transform:none !important;line-height:1.3 !important;
}
.cc-cat-panel .top-menu li > a:hover{background:var(--sanit-brand-soft) !important;color:var(--sanit-brand) !important;}
.cc-cat-panel li.cc-has-sub > a::after{content:"\203A";font-size:17px;color:#aab4bd;margin-left:6px;}
.cc-cat-panel li.cc-has-sub > a:hover::after{color:var(--sanit-brand);}
/* sous-menus en flyout a droite (tous niveaux) */
.cc-cat-panel .sub-menu{
  display:none !important;position:absolute !important;left:100% !important;right:auto !important;top:-8px !important;
  min-width:248px;max-height:80vh;overflow-y:auto;
  background:#fff !important;border:0.5px solid var(--sanit-line) !important;border-radius:var(--sanit-radius) !important;
  box-shadow:var(--sanit-shadow) !important;padding:8px !important;margin:0 !important;z-index:6;
}
.cc-cat-panel li:hover > .sub-menu{display:block !important;}
.cc-cat-panel .sub-menu li{position:relative !important;display:block !important;width:100% !important;float:none !important;border:0 !important;}
.cc-cat-panel .sub-menu::before{display:none !important;}

/* ================================================================
   SLIDER haut (carousel ps_imageslider) — puces de navigation (29/06)
   (sera fondu dans la section slider lors de la consolidation)
   ================================================================ */
.carousel .carousel-indicators{
  position:absolute; bottom:14px; left:0; right:0; margin:0; padding:0;
  display:flex; justify-content:center; gap:9px; list-style:none; z-index:6;
}
.carousel .carousel-indicators li{
  width:11px; height:11px; margin:0; border-radius:50%;
  background:rgba(255,255,255,.72); border:1.5px solid rgba(16,42,67,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.18); cursor:pointer;
  transition:transform .2s, background .2s; text-indent:-9999px; box-sizing:border-box;
}
.carousel .carousel-indicators li.active{
  background:var(--sanit-brand); border-color:#fff; transform:scale(1.2);
}
@media (max-width:767px){
  .carousel .carousel-indicators{bottom:9px; gap:7px;}
  .carousel .carousel-indicators li{width:9px; height:9px;}
}

/* ================================================================
   "Nos univers" + Catalogue — espace "Électro & Maison / Stock
   plateforme nationale" : differenciation sobre. v5 (29/06)
   carte : bandeau badge + bordure bleutee + colis ; menu desktop :
   colis + separateur + badge ; menu mobile : groupes "Univers magasin"
   / "Espace plateforme nationale".
   ================================================================ */
.cc-univers-grid{gap:14px;}
.cc-univers-tile{position:relative;gap:13px;padding:1.6rem .85rem;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.cc-univers-tile svg{width:54px;height:54px;padding:14px;box-sizing:border-box;background:var(--sanit-brand-soft);color:var(--sanit-brand);border-radius:50%;transition:background .15s,color .15s;}
.cc-univers-tile > span{font-size:14px;font-weight:500;line-height:1.3;}
.cc-univers-tile:hover{border-color:var(--sanit-brand);color:var(--sanit-ink);box-shadow:var(--sanit-shadow);transform:translateY(-3px);}
.cc-univers-tile:hover svg{background:var(--sanit-brand);color:#fff;}

.cc-univers-tile--plateforme{background:linear-gradient(180deg,#ffffff 0%,#f3f7fd 100%);border:1.5px solid #bcd6ef;overflow:hidden;padding-top:2.5rem;}
.cc-univers-tile--plateforme:hover{border-color:var(--sanit-brand);box-shadow:var(--sanit-shadow);}
.cc-univers-tile--plateforme .cc-univers-tag{position:absolute;top:0;left:0;right:0;background:#fbf4e0;color:#8a6a20;border-bottom:1px solid #eedfb2;font-size:9.5px;font-weight:600;text-transform:none;letter-spacing:.3px;padding:5px 6px;text-align:center;border-radius:0;line-height:1.3;}
.cc-univers-tile--plateforme .cc-univers-title{font-size:14px;font-weight:600;color:var(--sanit-ink);line-height:1.25;}
.cc-univers-tile--plateforme .cc-univers-sub{font-size:11.5px;font-weight:400;color:var(--sanit-muted);line-height:1.35;margin-top:-7px;}

.cc-cat-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--sanit-brand);}
.cc-cat-ic svg{width:18px;height:18px;}
.cc-cat-tag{display:inline-block;flex:0 0 auto;background:#fbf4e0;border:1px solid #ecdcae;color:#977726;font-size:9px;font-weight:600;letter-spacing:.2px;text-transform:none;padding:2px 7px;border-radius:6px;line-height:1.35;white-space:nowrap;}
.cc-cat-plateforme > a{text-transform:none;}

@media (min-width:768px){
  .cc-cat-panel .cc-cat-plateforme{border-top:1px solid var(--sanit-line);margin-top:6px;padding-top:5px;}
  .cc-cat-panel .cc-cat-plateforme > a{flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;gap:9px !important;background:transparent !important;border:0 !important;color:var(--sanit-ink) !important;font-size:14px !important;min-width:0;}
  .cc-cat-panel .cc-cat-plateforme > a:hover{background:var(--sanit-brand-soft) !important;color:var(--sanit-brand) !important;}
  .cc-cat-panel .cc-cat-plateforme > a:hover .cc-cat-ic{color:var(--sanit-brand);}
  .cc-cat-panel .cc-cat-plateforme > a::after{position:static !important;margin:0 0 0 auto !important;color:#aab4bd !important;}
}

@media (max-width:767px){
  .cc-mob-head{list-style:none;margin:0;padding:12px 18px 5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--sanit-muted);background:transparent;pointer-events:none;}
  .cc-mob-head--pf{margin-top:6px;border-top:1px solid var(--sanit-line);padding-top:13px;color:#9a7b2e;}
  .cc-cat-plateforme > a{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:5px !important;min-width:0 !important;white-space:normal !important;}
  .cc-cat-plateforme > a .cc-cat-ic{display:none !important;}
  .cc-cat-plateforme > a .cc-cat-tag{align-self:flex-start;margin:0;}
  .cc-cat-sub{font-size:11px;color:var(--sanit-muted);font-weight:400;line-height:1.3;}
  .cc-univers-tile svg{width:46px;height:46px;padding:11px;}
  .cc-univers-tile--plateforme{padding-top:2.3rem;}
  .cc-univers-tile--plateforme .cc-univers-tag{font-size:9px;}
  .cc-univers-tile--plateforme .cc-univers-sub{font-size:11px;}
}

@media (max-width:767px){ .cc-cat-plateforme .cc-cat-sub{text-transform:none !important;} }

/* ================================================================
   MENU MOBILE — coupure en encarts (v6, 29/06) :
   "Univers magasin" / "Espace plateforme" en cartes, titres centres,
   + on retire le "Appelez-nous" du bas du menu natif.
   ================================================================ */
@media (max-width:767px){
  #mobile_top_menu_wrapper .js-top-menu-bottom{display:none !important;}
  .cc-mob-head{text-align:center !important;font-size:11px !important;letter-spacing:.6px !important;padding:16px 12px 8px !important;}
  .cc-mob-head--pf{color:#9a7b2e !important;border-top:0 !important;margin-top:12px !important;padding-top:8px !important;}
  #mobile_top_menu_wrapper .top-menu > li.category{background:#fff;margin:0 12px;border-left:1px solid var(--sanit-line);border-right:1px solid var(--sanit-line);}
  #mobile_top_menu_wrapper .top-menu > .cc-mob-head + li.category{border-top:1px solid var(--sanit-line);border-radius:12px 12px 0 0;}
  #mobile_top_menu_wrapper .top-menu > li.category:has(+ .cc-mob-head){border-bottom:1px solid var(--sanit-line);border-radius:0 0 12px 12px;}
  #mobile_top_menu_wrapper .top-menu > li.category:last-child{border-bottom:1px solid var(--sanit-line);border-radius:0 0 12px 12px;}
  #mobile_top_menu_wrapper .top-menu > .cc-mob-head--pf + li.category{background:#f4f8fd;border-color:#cfe0f2 !important;}
}

/* ================================================================
   CATALOGUE DESKTOP — coupure "Nos univers" / "Espace plateforme".
   En-tetes en ::before SCOPES au panneau (.cc-cat-panel) pour qu'ils
   ne migrent pas vers le menu mobile natif. v7 (29/06)
   ================================================================ */
@media (min-width:768px){
  .cc-cat-panel .top-menu[data-depth="0"]::before{
    content:"Nos univers";display:block;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    color:var(--sanit-muted);padding:2px 12px 8px;
  }
  .cc-cat-panel .cc-cat-plateforme{
    background:#f4f8fd !important;border:1px solid #dbe7f4 !important;border-radius:10px;
    margin-top:10px !important;padding:0 0 5px !important;
  }
  .cc-cat-panel .cc-cat-plateforme::before{
    content:"Espace plateforme";display:block;
    font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
    color:#9a7b2e;padding:9px 12px 3px;
  }
  .cc-cat-panel .cc-cat-plateforme > a{border-radius:0 0 9px 9px !important;}
}

/* ================================================================
   ACCUEIL "Nos univers" — coupure en 2 : "Nos univers" (3 cartes
   magasin) / "Espace plateforme" (carte electro, fond bleute). v8 (29/06)
   ================================================================ */
.cc-univers-split{display:flex;gap:22px;align-items:stretch;}
.cc-univers-store{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.cc-univers-store .cc-univers-grid{grid-template-columns:repeat(3,1fr);flex:1;}
.cc-univers-pf{flex:0 0 300px;background:#f1f6fc;border:1px solid #d6e4f3;border-radius:16px;padding:14px 16px 16px;display:flex;flex-direction:column;}
.cc-univers-pf .cc-univers-grid{flex:1;}
.cc-univers-grid--single{grid-template-columns:1fr;}
.cc-univers-pf .cc-univers-tile--plateforme{height:100%;}
.cc-univers-h{text-align:left;font-size:15px;font-weight:600;color:var(--sanit-ink);margin:0 0 12px;padding:0;text-transform:none;letter-spacing:0;position:static;}
.cc-univers-h::after{display:none;}
.cc-univers-h--pf::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:#e3b94e;margin-right:8px;vertical-align:middle;}

@media (max-width:991px){ .cc-univers-pf{flex-basis:250px;} }
@media (max-width:767px){
  .cc-univers-split{flex-direction:column;gap:18px;}
  .cc-univers-pf{flex:1 1 auto;}
  .cc-univers-store .cc-univers-grid{grid-template-columns:repeat(2,1fr);}
  .cc-univers-h{font-size:14px;}
}

/* ================================================================
   ENCARTS "Univers magasin" (le pendant de "Espace plateforme") +
   renommage "Univers magasin" partout. v9 (29/06)
   ================================================================ */
/* --- ACCUEIL : encadrer aussi le groupe magasin + differencier les fonds --- */
.cc-univers-store{background:#eef1f6;border:1px solid #dfe5ec;border-radius:16px;padding:14px 16px 16px;}
.cc-univers-pf{background:#e6eefb !important;border-color:#cedef3 !important;}

/* --- CATALOGUE DESKTOP : renommer "Univers magasin" + encadrer le groupe magasin --- */
@media (min-width:768px){
  .cc-cat-panel .top-menu[data-depth="0"]::before{content:"Univers magasin";}
  .cc-cat-panel .top-menu[data-depth="0"] > li:not(.cc-cat-plateforme){background:#f6f9fc;border-left:1px solid #e3e9f0;border-right:1px solid #e3e9f0;}
  .cc-cat-panel .top-menu[data-depth="0"] > li:first-child{border-top:1px solid #e3e9f0;border-radius:10px 10px 0 0;}
  .cc-cat-panel .top-menu[data-depth="0"] > li:not(.cc-cat-plateforme):has(+ .cc-cat-plateforme){border-bottom:1px solid #e3e9f0;border-radius:0 0 10px 10px;}
  .cc-cat-panel .top-menu[data-depth="0"] > li:not(.cc-cat-plateforme):last-child{border-bottom:1px solid #e3e9f0;border-radius:0 0 10px 10px;}
}

/* ================================================================
   CATALOGUE DESKTOP v10 — "Espace plateforme" : titre en zone blanche
   AU-DESSUS de sa boite (comme "Univers magasin"), boite sur l'item.
   ================================================================ */
@media (min-width:768px){
  .cc-cat-panel .cc-cat-plateforme{
    background:transparent !important;border:0 !important;border-radius:0 !important;
    margin-top:12px !important;padding:0 !important;
  }
  .cc-cat-panel .cc-cat-plateforme::before{padding:6px 12px 6px !important;}
  .cc-cat-panel .cc-cat-plateforme > a{
    background:#eef4fc !important;border:1px solid #d7e6f6 !important;border-radius:10px !important;
  }
}

/* ================================================================
   ACCUEIL v11 — titres AU-DESSUS des boites (zone page), 2 colonnes,
   carte "Espace plateforme" enrichie (moins simpliste).
   ================================================================ */
.cc-univers-split{display:flex;gap:22px;align-items:stretch;}
.cc-univers-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.cc-univers-col--pf{flex:0 0 300px;}
.cc-univers-h{text-align:left;font-size:15px;font-weight:600;color:var(--sanit-ink);margin:0 0 10px;padding:0 2px;text-transform:none;letter-spacing:0;position:static;background:transparent;border:0;}
.cc-univers-h::after{display:none;}
.cc-univers-h--pf::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:#e3b94e;margin-right:8px;vertical-align:middle;}

.cc-univers-store{background:#eef1f6 !important;border:1px solid #dfe5ec !important;border-radius:16px;padding:16px;flex:1 1 auto;display:flex;}
.cc-univers-store .cc-univers-grid{grid-template-columns:repeat(3,1fr);flex:1;}
.cc-univers-pf{background:#e6eefb !important;border:1px solid #cedef3 !important;border-radius:16px;padding:14px;flex:1 1 auto;display:flex;}
.cc-univers-pf .cc-univers-grid{flex:1;grid-template-columns:1fr;}
.cc-univers-pf .cc-univers-tile--plateforme{height:100%;gap:10px;}

.cc-univers-tile--plateforme .cc-univers-desc{font-size:12px;color:var(--sanit-muted);line-height:1.4;padding:0 10px;margin-top:-2px;}
.cc-univers-tile--plateforme .cc-univers-cta{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--sanit-brand);}

@media (max-width:991px){ .cc-univers-col--pf{flex-basis:250px;} }
@media (max-width:767px){
  .cc-univers-split{flex-direction:column;gap:16px;}
  .cc-univers-col--pf{flex:1 1 auto;}
  .cc-univers-store .cc-univers-grid{grid-template-columns:repeat(2,1fr);}
  .cc-univers-h{font-size:14px;}
}

/* ================================================================
   ACCUEIL "Choisissez votre espace" v12 (29/06) — refonte hero.
   Bloc Catalogue magasin (3 cartes) + bloc Stock plateforme + reassurance.
   Icones = Tabler webfont (charge dans head.tpl).
   ================================================================ */
.cc-espace{max-width:1180px;margin:0 auto 1rem;}
.cc-espace-title{text-align:center;font-size:30px;font-weight:700;color:var(--sanit-ink);margin:.3rem 0 28px;position:relative;padding-bottom:14px;}
.cc-espace-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:60px;height:4px;border-radius:3px;background:var(--sanit-brand);}
.cc-espace-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:24px;align-items:stretch;}

.cc-espace-store{background:#fff;border:1px solid var(--sanit-line);border-radius:20px;padding:28px 28px 26px;box-shadow:var(--sanit-shadow-sm);display:flex;flex-direction:column;}
.cc-espace-store-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;}
.cc-espace-headic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--sanit-brand-soft);color:var(--sanit-brand);display:flex;align-items:center;justify-content:center;font-size:24px;}
.cc-espace-store-head h3{margin:0 0 4px;font-size:21px;font-weight:700;color:var(--sanit-ink);line-height:1.2;}
.cc-espace-store-head p{margin:0;font-size:14px;color:var(--sanit-muted);line-height:1.45;}
.cc-espace-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;flex:1;}
.cc-espace-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 10px 16px;background:#fff;border:1px solid var(--sanit-line);border-radius:16px;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.cc-espace-card:hover{transform:translateY(-4px);box-shadow:var(--sanit-shadow);border-color:var(--sanit-brand);}
.cc-espace-cic{width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;}
.cic-blue{background:#e9f2fc;color:#1f6fc4;}
.cic-green{background:#e7f5ec;color:#2c9f57;}
.cic-orange{background:#fdf0e3;color:#e08a37;}
.cc-espace-cname{font-size:15px;font-weight:600;color:var(--sanit-ink);}
.cc-espace-arrow{width:34px;height:34px;border-radius:50%;background:var(--sanit-brand-soft);color:var(--sanit-brand);display:flex;align-items:center;justify-content:center;font-size:18px;margin-top:auto;transition:background .15s,color .15s;}
.cc-espace-card:hover .cc-espace-arrow{background:var(--sanit-brand);color:#fff;}
.cc-espace-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:600;border-radius:12px;padding:13px 22px;text-decoration:none;transition:.15s;line-height:1;}
.cc-espace-btn i{font-size:18px;}
.cc-espace-btn-outline{align-self:center;border:1.5px solid var(--sanit-brand);color:var(--sanit-brand);background:#fff;}
.cc-espace-btn-outline:hover{background:var(--sanit-brand-soft);}

.cc-espace-pf{background:linear-gradient(160deg,#f3f9ff 0%,#e7f0fd 100%);border:1.5px solid #cfe0f3;border-radius:20px;padding:26px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.cc-espace-badge{display:inline-flex;align-items:center;gap:7px;background:var(--sanit-brand);color:#fff;font-size:13px;font-weight:600;padding:7px 16px;border-radius:30px;margin-bottom:18px;}
.cc-espace-badge i{font-size:15px;color:#ffd766;}
.cc-espace-pfic{width:86px;height:86px;border-radius:50%;background:#fff;color:var(--sanit-brand);display:flex;align-items:center;justify-content:center;font-size:42px;box-shadow:0 6px 18px rgba(16,42,67,.10);margin-bottom:16px;}
.cc-espace-pf h3{margin:0 0 10px;font-size:24px;font-weight:700;color:var(--sanit-brand);}
.cc-espace-pf p{margin:0 0 18px;font-size:14.5px;color:#46586a;line-height:1.5;max-width:290px;}
.cc-espace-minis{display:flex;gap:12px;margin-bottom:22px;}
.cc-espace-minis span{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--sanit-brand);display:flex;align-items:center;justify-content:center;font-size:20px;border:1px solid #dbe8f5;}
.cc-espace-btn-fill{width:100%;max-width:300px;background:var(--sanit-brand);color:#fff;margin-top:auto;}
.cc-espace-btn-fill:hover{background:var(--sanit-brand-hover);}

.cc-reassurance{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;padding-top:26px;border-top:1px solid var(--sanit-line);}
.cc-rea{display:flex;align-items:center;gap:13px;}
.cc-rea > i{flex:none;font-size:30px;color:var(--sanit-brand);}
.cc-rea strong{display:block;font-size:14.5px;font-weight:600;color:var(--sanit-ink);}
.cc-rea span{display:block;font-size:13px;color:var(--sanit-muted);}

@media (max-width:900px){
  .cc-espace-grid{grid-template-columns:1fr;}
  .cc-reassurance{grid-template-columns:repeat(2,1fr);gap:18px 16px;}
}
@media (max-width:767px){
  .cc-espace-title{font-size:23px;}
  .cc-espace-store{padding:20px 16px;}
  .cc-espace-store-head h3{font-size:18px;}
  .cc-espace-cards{gap:10px;}
  .cc-espace-card{padding:16px 5px 12px;gap:10px;}
  .cc-espace-cic{width:52px;height:52px;font-size:25px;}
  .cc-espace-cname{font-size:13px;}
  .cc-reassurance{grid-template-columns:1fr;gap:14px;}
}


/* ================================================================
   ACCUEIL "Choisissez votre espace" v13 (29/06) — rendu premium proche maquette
   Objectif : un seul grand module elegant, avec Catalogue magasin a gauche,
   Stock plateforme nationale a droite, effets modernes et meilleure lisibilite.
   ================================================================ */
.page-home .cc-espace{
  max-width:1240px;
  margin:0 auto 1.4rem;
  padding:2.1rem 12px .6rem;
  position:relative;
  isolation:isolate;
}
.page-home .cc-espace::before{
  content:"";
  position:absolute;
  left:-16px;
  top:92px;
  width:132px;
  height:180px;
  opacity:.55;
  z-index:-1;
  background-image:radial-gradient(rgba(10,90,163,.25) 1.4px, transparent 1.4px);
  background-size:16px 16px;
  pointer-events:none;
}
.page-home .cc-espace::after{
  content:"";
  position:absolute;
  right:-80px;
  top:96px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(10,90,163,.13) 0, rgba(10,90,163,.06) 42%, rgba(10,90,163,0) 70%);
  z-index:-1;
  pointer-events:none;
}
.page-home .cc-espace-title{
  font-size:clamp(27px,3vw,38px);
  line-height:1.12;
  letter-spacing:-.7px;
  color:#10243a;
  margin:0 0 30px;
  padding-bottom:17px;
}
.page-home .cc-espace-title::after{
  width:66px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#0a5aa3,#0874d1);
  box-shadow:0 5px 16px rgba(10,90,163,.24);
}
.page-home .cc-espace-grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(335px,.98fr);
  gap:0;
  align-items:stretch;
  padding:12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(207,220,235,.86);
  border-radius:32px;
  box-shadow:0 26px 70px rgba(16,36,58,.09), 0 2px 8px rgba(16,36,58,.04);
  overflow:hidden;
  backdrop-filter:saturate(130%) blur(6px);
}
.page-home .cc-espace-grid::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.42) 54%, rgba(232,243,255,.52) 100%),
    radial-gradient(circle at 72% 12%, rgba(10,90,163,.08), transparent 32%);
  z-index:0;
}
.page-home .cc-espace-grid::after{
  content:"";
  position:absolute;
  top:26px;
  bottom:26px;
  left:calc(61.8% + 6px);
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(202,215,230,.85), transparent);
  z-index:1;
}
.page-home .cc-espace-store,
.page-home .cc-espace-pf{
  position:relative;
  z-index:2;
}
.page-home .cc-espace-store{
  background:transparent;
  border:0;
  border-radius:26px;
  box-shadow:none;
  padding:30px 34px 26px;
}
.page-home .cc-espace-store-head{
  align-items:center;
  justify-content:center;
  text-align:left;
  gap:16px;
  margin:0 0 28px;
}
.page-home .cc-espace-headic{
  width:52px;
  height:52px;
  border-radius:18px;
  background:linear-gradient(145deg,#edf6ff,#ffffff);
  border:1px solid rgba(10,90,163,.24);
  color:#0a5aa3;
  box-shadow:0 10px 22px rgba(10,90,163,.08), inset 0 0 0 5px rgba(10,90,163,.04);
  font-size:25px;
}
.page-home .cc-espace-store-head h3{
  font-size:clamp(21px,2vw,28px);
  line-height:1.12;
  letter-spacing:-.45px;
  color:#10243a;
  margin:0 0 9px;
}
.page-home .cc-espace-store-head p{
  font-size:15.5px;
  color:#4d6075;
  line-height:1.45;
}
.page-home .cc-espace-cards{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin:0 0 24px;
}
.page-home .cc-espace-card{
  position:relative;
  min-height:224px;
  padding:31px 16px 21px;
  gap:17px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid rgba(217,226,237,.92);
  border-radius:28px;
  box-shadow:0 16px 36px rgba(16,36,58,.055), 0 2px 5px rgba(16,36,58,.025);
  overflow:hidden;
}
.page-home .cc-espace-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(145deg, rgba(10,90,163,.18), rgba(255,255,255,0) 42%);
  z-index:0;
  transition:opacity .22s ease;
}
.page-home .cc-espace-card > *{position:relative;z-index:1;}
.page-home .cc-espace-card:hover{
  transform:translateY(-7px);
  border-color:rgba(10,90,163,.38);
  box-shadow:0 24px 52px rgba(16,36,58,.11), 0 8px 18px rgba(10,90,163,.09);
}
.page-home .cc-espace-card:hover::before{opacity:1;}
.page-home .cc-espace-cic{
  width:94px;
  height:94px;
  font-size:46px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 12px 25px rgba(16,36,58,.045);
  transition:transform .22s ease, box-shadow .22s ease;
}
.page-home .cc-espace-card:hover .cc-espace-cic{
  transform:scale(1.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7), 0 18px 32px rgba(16,36,58,.08);
}
.page-home .cic-blue{background:linear-gradient(145deg,#edf5ff,#e8f1fb);color:#095ca8;}
.page-home .cic-green{background:linear-gradient(145deg,#e9f8f1,#e7f4fb);color:#0870b8;}
.page-home .cic-orange{background:linear-gradient(145deg,#fff1e4,#f9f4ef);color:#0a5aa3;}
.page-home .cc-espace-cname{
  font-size:18px;
  font-weight:750;
  color:#10243a;
  letter-spacing:-.18px;
}
.page-home .cc-espace-arrow{
  width:38px;
  height:38px;
  font-size:20px;
  background:#eef5fd;
  color:#0a5aa3;
  box-shadow:0 8px 16px rgba(10,90,163,.06);
}
.page-home .cc-espace-card:hover .cc-espace-arrow{
  background:linear-gradient(135deg,#0a5aa3,#0874d1);
  color:#fff;
  box-shadow:0 12px 22px rgba(10,90,163,.24);
}
.page-home .cc-espace-btn{
  border-radius:999px;
  min-height:52px;
  padding:14px 28px;
  font-size:15.5px;
  font-weight:750;
  letter-spacing:-.05px;
}
.page-home .cc-espace-btn-outline{
  color:#0a5aa3;
  border:1.5px solid rgba(10,90,163,.75);
  background:rgba(255,255,255,.82);
  box-shadow:0 12px 26px rgba(10,90,163,.05);
}
.page-home .cc-espace-btn-outline:hover{
  background:#eef6ff;
  color:#083f73;
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(10,90,163,.10);
}
.page-home .cc-espace-pf{
  margin:0;
  min-height:100%;
  border-radius:28px;
  border:1.5px solid rgba(93,151,217,.58);
  padding:28px 28px 25px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 22%),
    linear-gradient(145deg,#f7fbff 0%,#edf6ff 50%,#e3effc 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 16px 40px rgba(10,90,163,.08);
  overflow:hidden;
}
.page-home .cc-espace-pf::before{
  content:"";
  position:absolute;
  right:-92px;
  top:56px;
  width:240px;
  height:420px;
  transform:rotate(17deg);
  background:repeating-linear-gradient(90deg, rgba(10,90,163,.055) 0 5px, transparent 5px 16px);
  opacity:.7;
  z-index:0;
  pointer-events:none;
}
.page-home .cc-espace-pf::after{
  content:"";
  position:absolute;
  right:-70px;
  bottom:-110px;
  width:260px;
  height:260px;
  border-radius:48px;
  transform:rotate(42deg);
  background:linear-gradient(135deg, rgba(10,90,163,.13), rgba(10,90,163,0));
  z-index:0;
  pointer-events:none;
}
.page-home .cc-espace-badge{
  position:relative;
  z-index:1;
  background:linear-gradient(135deg,#0a5aa3,#0874d1);
  font-size:13px;
  font-weight:800;
  padding:9px 18px;
  margin-bottom:18px;
  box-shadow:0 12px 26px rgba(10,90,163,.22);
}
.page-home .cc-espace-pfic{
  position:relative;
  z-index:1;
  width:100px;
  height:100px;
  font-size:50px;
  background:rgba(255,255,255,.92);
  border:12px solid rgba(255,255,255,.68);
  box-shadow:0 18px 38px rgba(10,90,163,.13), inset 0 0 0 1px rgba(10,90,163,.13);
  margin:0 0 16px;
}
.page-home .cc-espace-pf h3{
  position:relative;
  z-index:1;
  margin:0 0 12px;
  font-size:clamp(25px,2.3vw,31px);
  letter-spacing:-.55px;
  color:#0a5aa3;
}
.page-home .cc-espace-pf p{
  position:relative;
  z-index:1;
  max-width:330px;
  margin:0 0 22px;
  font-size:16px;
  line-height:1.46;
  color:#33485e;
}
.page-home .cc-espace-minis{
  position:relative;
  z-index:1;
  gap:15px;
  margin-bottom:28px;
}
.page-home .cc-espace-minis span{
  width:50px;
  height:50px;
  border-color:rgba(196,214,235,.9);
  background:rgba(255,255,255,.9);
  color:#0a5aa3;
  box-shadow:0 12px 23px rgba(16,36,58,.07);
}
.page-home .cc-espace-btn-fill{
  position:relative;
  z-index:1;
  max-width:330px;
  min-height:58px;
  padding:0 0 0 26px;
  justify-content:space-between;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(135deg,#0758a8,#0876d5);
  box-shadow:0 18px 34px rgba(10,90,163,.26);
}
.page-home .cc-espace-btn-fill i{
  width:70px;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  background:rgba(0,41,105,.18);
  font-size:24px;
}
.page-home .cc-espace-btn-fill:hover{
  color:#fff;
  background:linear-gradient(135deg,#074d92,#006bc6);
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(10,90,163,.32);
}
.page-home .cc-reassurance{
  max-width:1180px;
  margin:34px auto 0;
  padding:22px 0 0;
  border-top:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
}
.page-home .cc-rea{
  min-height:70px;
  padding:0 26px;
  border-right:1px solid rgba(214,224,235,.9);
}
.page-home .cc-rea:first-child{padding-left:0;}
.page-home .cc-rea:last-child{border-right:0;padding-right:0;}
.page-home .cc-rea > i{
  font-size:38px;
  color:#0a5aa3;
}
.page-home .cc-rea strong{
  font-size:15.5px;
  font-weight:800;
  color:#10243a;
  letter-spacing:-.15px;
}
.page-home .cc-rea span{
  margin-top:3px;
  font-size:13.5px;
  color:#607184;
}
@media (max-width:1100px){
  .page-home .cc-espace-grid{grid-template-columns:1fr;gap:14px;}
  .page-home .cc-espace-grid::after{display:none;}
  .page-home .cc-espace-store{padding:26px 24px;}
  .page-home .cc-espace-pf{min-height:auto;}
  .page-home .cc-reassurance{grid-template-columns:repeat(2,1fr);gap:18px 0;}
  .page-home .cc-rea:nth-child(2){border-right:0;}
  .page-home .cc-rea:nth-child(3){padding-left:0;}
}
@media (max-width:767px){
  .page-home .cc-espace{padding-top:1.2rem;}
  .page-home .cc-espace::before,
  .page-home .cc-espace::after{display:none;}
  .page-home .cc-espace-title{margin-bottom:18px;}
  .page-home .cc-espace-grid{border-radius:22px;padding:10px;}
  .page-home .cc-espace-store{padding:18px 12px 20px;}
  .page-home .cc-espace-store-head{align-items:flex-start;justify-content:flex-start;text-align:left;margin-bottom:18px;}
  .page-home .cc-espace-headic{width:44px;height:44px;border-radius:14px;font-size:22px;}
  .page-home .cc-espace-store-head h3{font-size:20px;}
  .page-home .cc-espace-store-head p{font-size:13.5px;}
  .page-home .cc-espace-cards{gap:12px;}
  .page-home .cc-espace-card{min-height:156px;border-radius:20px;padding:20px 10px 14px;gap:10px;}
  .page-home .cc-espace-cic{width:64px;height:64px;font-size:31px;}
  .page-home .cc-espace-cname{font-size:14.5px;}
  .page-home .cc-espace-pf{border-radius:20px;padding:22px 14px;}
  .page-home .cc-espace-pfic{width:82px;height:82px;font-size:40px;border-width:9px;}
  .page-home .cc-espace-pf p{font-size:14px;}
  .page-home .cc-espace-btn{width:100%;font-size:14px;}
  .page-home .cc-espace-minis{gap:10px;}
  .page-home .cc-espace-minis span{width:44px;height:44px;}
  .page-home .cc-reassurance{grid-template-columns:1fr;gap:14px;margin-top:24px;padding:0 10px;}
  .page-home .cc-rea{padding:0;border-right:0;}
  .page-home .cc-rea:nth-child(3){padding-left:0;}
}
@media (max-width:560px){
  .page-home .cc-espace-cards{grid-template-columns:1fr;}
  .page-home .cc-espace-card{min-height:136px;flex-direction:row;text-align:left;justify-content:flex-start;padding:16px 14px;}
  .page-home .cc-espace-card .cc-espace-arrow{margin-left:auto;margin-top:0;}
}

/* ================================================================
   SLIDER CATEGORIES "Choisissez votre espace" (29/06) — scroll natif
   (swipe doigt mobile) + fleches PC. Pret pour plus de 3 categories.
   ================================================================ */
.cc-espace-cards-wrap{position:relative;}
.page-home .cc-espace-cards{
  display:flex !important;grid-template-columns:none !important;flex-wrap:nowrap !important;
  overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;
  padding:2px 2px 8px !important;margin:0 !important;
  scrollbar-width:thin;scrollbar-color:#cdd8e4 transparent;
}
.page-home .cc-espace-cards::-webkit-scrollbar{height:6px;}
.page-home .cc-espace-cards::-webkit-scrollbar-thumb{background:#cdd8e4;border-radius:3px;}
.page-home .cc-espace-cards::-webkit-scrollbar-track{background:transparent;}
.page-home .cc-espace-card{flex:0 0 calc((100% - 28px)/3) !important;scroll-snap-align:start;min-width:0;}
.cc-espace-nav{position:absolute;top:46%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:50%;border:1px solid var(--sanit-line);background:#fff;color:var(--sanit-brand);display:none;align-items:center;justify-content:center;font-size:20px;cursor:pointer;box-shadow:var(--sanit-shadow-sm);transition:.15s;}
.cc-espace-nav:hover{background:var(--sanit-brand);color:#fff;border-color:var(--sanit-brand);}
.cc-espace-prev{left:-10px;}
.cc-espace-next{right:-10px;}
.cc-espace-cards-wrap.cc-has-nav .cc-espace-nav{display:flex;}
@media (max-width:767px){
  .page-home .cc-espace-store,
  .page-home .cc-espace-pf{min-width:0 !important;}
  .page-home .cc-espace-card{flex:0 0 74% !important;flex-direction:column !important;text-align:center !important;}
  .page-home .cc-espace-card .cc-espace-arrow{margin-left:0 !important;margin-top:auto !important;}
  .cc-espace-nav{display:none !important;}
}


/* ================================================================
   BURGER MOBILE — bloc "Nos services" (C.M.I + Reservation Palette).
   Raccourcis d'en-tete sinon perdus sur mobile. v9 (29/06)
   ================================================================ */
@media (max-width:767px){
  .cc-mob-head--svc{margin-top:14px !important;border-top:0 !important;}
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc{
    list-style:none;background:#fff;margin:0 12px;
    border-left:1px solid var(--sanit-line);border-right:1px solid var(--sanit-line);
  }
  #mobile_top_menu_wrapper .top-menu > .cc-mob-head--svc + li.cc-mob-svc{
    border-top:1px solid var(--sanit-line);border-radius:12px 12px 0 0;
  }
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc:last-child{
    border-bottom:1px solid var(--sanit-line);border-radius:0 0 12px 12px;
  }
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc > a{
    display:flex !important;align-items:center;gap:12px;
    padding:14px 18px !important;font-size:14px;font-weight:500;
    color:var(--sanit-ink) !important;text-decoration:none;line-height:1.2;
  }
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc + li.cc-mob-svc > a{
    border-top:1px solid var(--sanit-line);
  }
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc > a:hover{
    background:var(--sanit-brand-soft) !important;color:var(--sanit-brand) !important;
  }
  #mobile_top_menu_wrapper .top-menu > li.cc-mob-svc > a > i{
    font-size:20px;line-height:1;color:var(--sanit-brand);flex:0 0 24px;text-align:center;
  }
}


/* ================================================================
   ACCUEIL — "Pourquoi choisir Sanit Confort ?" : 3 cartes
   (remplace l'ancien bloc texte ps_customtext). v10 (29/06)
   ================================================================ */
.cc-why{max-width:1180px;margin:48px auto;padding:0 16px;text-align:center;}
.cc-why-title{position:relative;font-size:28px;font-weight:700;color:var(--sanit-ink);margin:0 0 12px;padding-bottom:14px;}
.cc-why-title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:3px;border-radius:2px;background:var(--sanit-brand);}
.cc-why-intro{max-width:700px;margin:0 auto 30px;color:var(--sanit-muted);font-size:15px;line-height:1.6;}
.cc-why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.cc-why-card{background:#fff;border:1px solid var(--sanit-line);border-radius:18px;padding:30px 24px;box-shadow:var(--sanit-shadow-sm);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.cc-why-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,90,163,.10);border-color:#cfe0f2;}
.cc-why-ic{display:inline-flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50%;background:var(--sanit-brand-soft);color:var(--sanit-brand);font-size:29px;margin-bottom:16px;}
.cc-why-card h3{font-size:17px;font-weight:600;color:var(--sanit-ink);margin:0 0 8px;}
.cc-why-card p{font-size:14px;color:var(--sanit-muted);line-height:1.55;margin:0;}
@media (max-width:991px){ .cc-why-grid{gap:16px;} .cc-why-card{padding:26px 18px;} }
@media (max-width:767px){
  .cc-why{margin:34px auto;}
  .cc-why-grid{grid-template-columns:1fr;gap:14px;}
  .cc-why-title{font-size:22px;}
  .cc-why-card{padding:24px 20px;}
}


/* ================================================================
   HOMOGENEISATION TITRES MODULES ACCUEIL (equipe / artisans /
   marques) : titre centre + tiret bleu + sous-titre, comme cc-why.
   v11 (29/06)
   ================================================================ */
.ne-slider-head, .np-slider-head, .nf-slider-head{
  display:flex !important;flex-direction:column !important;align-items:center !important;
  text-align:center !important;gap:14px !important;
}
.ne-slider-head h2, .np-slider-head h2, .nf-slider-head h2{
  position:relative;font-size:28px !important;font-weight:700 !important;
  color:var(--sanit-ink) !important;margin:0 0 12px !important;padding-bottom:14px !important;
}
.ne-slider-head h2::after, .np-slider-head h2::after, .nf-slider-head h2::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;background:var(--sanit-brand);
}
.ne-slider-head p, .np-slider-head p, .nf-slider-head p{
  color:var(--sanit-muted) !important;font-size:15px !important;line-height:1.6 !important;
  max-width:680px;margin:0 auto !important;
}
@media (max-width:767px){
  .ne-slider-head h2, .np-slider-head h2, .nf-slider-head h2{font-size:22px !important;}
}


/* ================================================================
   "Choisissez votre espace" — TUILES CARREES (style Tereva).
   Remplace le slider : categories en grille de carres, harmonise
   PC/mobile, ratio 1:1 (image de fond future = 1 seule dimension).
   v12 (29/06)
   ================================================================ */
.cc-espace-nav{display:none !important;}
.page-home .cc-espace-cards{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  flex-wrap:initial !important;
  overflow:visible !important;
  scroll-snap-type:none !important;
  gap:16px !important;
  padding:0 !important;
  margin:0 0 22px !important;
}
.page-home .cc-espace-card{
  flex:initial !important;
  aspect-ratio:1 / 1;
  min-height:0 !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  text-align:left !important;
  gap:10px !important;
  padding:20px !important;
  border-radius:22px !important;
  background-size:cover !important;
  background-position:center !important;
}
.page-home .cc-espace-card .cc-espace-arrow{display:none !important;}
.page-home .cc-espace-cic{width:56px !important;height:56px !important;font-size:28px !important;margin:0 !important;}
.page-home .cc-espace-cname{font-size:16px !important;line-height:1.25;margin:0 !important;}
@media (max-width:767px){
  .page-home .cc-espace-cards{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .page-home .cc-espace-card{aspect-ratio:1 / 1;flex-direction:column !important;align-items:flex-start !important;justify-content:space-between !important;text-align:left !important;padding:16px !important;}
  .page-home .cc-espace-card .cc-espace-arrow{display:none !important;}
  .page-home .cc-espace-cic{width:48px !important;height:48px !important;font-size:24px !important;}
  .page-home .cc-espace-cname{font-size:14.5px !important;}
}


/* "Rendez-nous visite en magasin" masque sur mobile (garde sur PC). v13 (29/06) */
@media (max-width:767px){
  .page-home .cc-espace-btn-outline{display:none !important;}
}


/* ================================================================
   TUILE "Choisissez votre espace" AVEC IMAGE DE FOND.
   Ajouter la classe .cc-espace-card--photo + style="background-image:url(...)"
   sur la tuile : l'image remplit le carre (cover, auto-ajuste), l'icone
   disparait, et le titre passe en bulle blanche (lisible sur toute image).
   v14 (29/06)
   ================================================================ */
.page-home .cc-espace-card--photo{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  justify-content:flex-end !important;
  border-color:rgba(16,36,58,.10) !important;
}
.page-home .cc-espace-card--photo .cc-espace-cic{display:none !important;}
.page-home .cc-espace-card--photo .cc-espace-cname{
  align-self:flex-start;
  background:#fff;
  color:#10243a;
  padding:8px 15px;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(16,36,58,.28);
}


/* bulles titre identiques (meme taille + meme place) sur toutes les tuiles photo. v15 (29/06) */
.page-home .cc-espace-card--photo .cc-espace-cname{
  align-self:stretch !important;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  min-height:2.7em;
  padding:6px 10px !important;
  border-radius:13px !important;
  font-size:14px !important;
  line-height:1.2;
  overflow-wrap:break-word;
}
@media (max-width:767px){
  .page-home .cc-espace-card--photo .cc-espace-cname{font-size:11.5px !important;min-height:2.8em;padding:5px 8px !important;}
}


/* hauteur uniforme + ajustement mobile des bulles titre photo (v15b 29/06) */
.page-home .cc-espace-card--photo .cc-espace-cname{box-sizing:border-box !important;min-height:3.4em !important;}
@media (max-width:767px){
  .page-home .cc-espace-card--photo{padding:11px !important;}
  .page-home .cc-espace-card--photo .cc-espace-cname{font-size:11px !important;min-height:3.6em !important;padding:4px 7px !important;}
}


/* bulles titre photo : bleu marque + texte blanc (v16 29/06) */
.page-home .cc-espace-card--photo .cc-espace-cname{
  background:var(--sanit-brand) !important;
  color:#fff !important;
  box-shadow:0 5px 16px rgba(16,36,58,.34) !important;
  font-weight:700 !important;
}


/* 3 tuiles vierges (placeholders a remplir) v17 (29/06) */
.page-home .cc-espace-card--empty{
  background:#fafcff !important;
  border:2px dashed #d6dfe9 !important;
  box-shadow:none !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:default;
}
.page-home .cc-espace-card--empty:hover{transform:none !important;box-shadow:none !important;border-color:#cdd8e4 !important;}
.cc-espace-empty-plus{color:#c3cdd8;font-size:36px;display:flex;line-height:1;}


/* ================================================================
   REFONTE "Produits populaires" (accueil) v18 (29/06) :
   cartes epurees, prix bleu, titre homogene, SANS bloc stock.
   Scope .page-home .featured-products -> pages categories intactes.
   ================================================================ */
.page-home .nicostock{display:none !important;}

/* titre homogene (centre + tiret bleu, comme les autres sections) */
.page-home .featured-products .products-section-title{
  text-align:center !important;font-size:28px !important;font-weight:700 !important;
  color:var(--sanit-ink) !important;text-transform:none !important;letter-spacing:0 !important;
  position:relative;padding-bottom:14px;margin:0 0 26px;
}
.page-home .featured-products .products-section-title::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:54px;height:3px;border-radius:2px;background:var(--sanit-brand);
}

/* carte */
.page-home .featured-products .product-miniature{
  border-radius:18px !important;border:1px solid var(--sanit-line) !important;
  box-shadow:0 2px 10px rgba(16,36,58,.05) !important;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.page-home .featured-products .product-miniature:hover{
  transform:translateY(-6px);box-shadow:0 20px 40px rgba(16,36,58,.12) !important;
  border-color:#cfe0f2 !important;
}
.page-home .featured-products .product-thumbnail{background:#fff !important;padding:18px !important;}
.page-home .featured-products .product-description{padding:14px 16px 18px !important;gap:6px !important;}
.page-home .featured-products .product-title{min-height:2.7em !important;margin:0 !important;}
.page-home .featured-products .product-title a{
  -webkit-line-clamp:2 !important;font-size:13.5px !important;font-weight:600 !important;
  color:var(--sanit-ink);line-height:1.3;
}
.page-home .featured-products .product-title a:hover{color:var(--sanit-brand);}
.page-home .featured-products .product-price-and-shipping{min-height:0 !important;margin-top:auto;}
.page-home .featured-products .product-price-and-shipping .price{
  font-size:20px !important;font-weight:800 !important;color:var(--sanit-brand) !important;
}
.page-home .featured-products .product-price-and-shipping .price .tax-mode{color:var(--sanit-muted) !important;font-weight:500;}
.page-home .featured-products .price-ht{color:var(--sanit-muted) !important;}


/* Produits populaires : cartes sans fond blanc + bouton "Tous les produits". v19 (29/06) */
.page-home .featured-products .product-miniature{
  background:transparent !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
}
.page-home .featured-products .product-miniature:hover{
  transform:none !important;box-shadow:none !important;border:none !important;
}
.page-home .featured-products .product-thumbnail{background:transparent !important;}
.page-home .featured-products .product-thumbnail img{mix-blend-mode:multiply;transition:transform .25s ease;}
.page-home .featured-products .product-miniature:hover .product-thumbnail img{transform:scale(1.05);}
.page-home .featured-products .product-description{padding:10px 6px 6px !important;}

/* "Tous les produits" en bouton bleu centre */
.page-home .featured-products .all-product-link{
  display:flex !important;align-items:center;gap:6px;
  width:fit-content;margin:20px auto 0 !important;float:none !important;
  background:var(--sanit-brand);color:#fff !important;
  padding:12px 24px;border-radius:10px;
  font-size:14px;font-weight:600;text-decoration:none;
  transition:background .15s ease, transform .15s ease;
}
.page-home .featured-products .all-product-link:hover{background:var(--sanit-brand-hover);transform:translateY(-1px);color:#fff !important;}


/* correction (v20 29/06) : cartes produit BLANCHES conservees, fond blanc
   AUTOUR de la section retire (section transparente, comme "Notre equipe"). */
.page-home .featured-products{background:transparent !important;border-radius:0 !important;box-shadow:none !important;}
.page-home .featured-products .product-miniature{
  background:#fff !important;border:1px solid var(--sanit-line) !important;
  box-shadow:0 2px 10px rgba(16,36,58,.05) !important;border-radius:18px !important;overflow:hidden;
}
.page-home .featured-products .product-miniature:hover{
  transform:translateY(-6px) !important;box-shadow:0 20px 40px rgba(16,36,58,.12) !important;border-color:#cfe0f2 !important;
}
.page-home .featured-products .product-thumbnail{background:#fff !important;}
.page-home .featured-products .product-thumbnail img{mix-blend-mode:normal !important;}
.page-home .featured-products .product-miniature:hover .product-thumbnail img{transform:none !important;}
.page-home .featured-products .product-description{padding:14px 16px 18px !important;}

/* ================================================================
   SLIDER HAUT (ps_imageslider) v24 (29/06) : la HAUTEUR du bandeau
   SUIT l'image (height auto). L'image remplit la largeur et garde
   ses proportions -> bien dimensionnee, rien de coupe, pas de blanc,
   pareil PC/mobile. Wrapper reel = <figure>. Carousel intact.
   ================================================================ */
.page-home #content .carousel{height:auto !important;}
.page-home #content .carousel .carousel-inner{height:auto !important;aspect-ratio:auto !important;border-radius:12px;overflow:hidden;}
.page-home #content .carousel .carousel-item{height:auto !important;aspect-ratio:auto !important;}
.page-home #content .carousel .carousel-item > a{display:block;}
.page-home #content .carousel .carousel-item figure{margin:0 !important;padding:0 !important;display:block;line-height:0;}
.page-home #content .carousel .carousel-item img{
  width:100% !important;height:auto !important;display:block !important;max-width:none !important;
}


/* Bandeau accueil : 2 images carrees cote a cote (remplace le slider). v25 (29/06) */
.cc-duo{max-width:1180px;margin:8px auto 4px;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cc-duo-tile{display:block;aspect-ratio:1 / 1;border-radius:16px;overflow:hidden;position:relative;box-shadow:var(--sanit-shadow-sm);transition:transform .18s ease, box-shadow .18s ease;}
.cc-duo-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(16,36,58,.12);}
.cc-duo-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.cc-duo-empty{display:flex;align-items:center;justify-content:center;text-align:center;border:2px dashed var(--sanit-line);background:#fafcff;box-shadow:none;}
.cc-duo-empty:hover{transform:none;box-shadow:none;}
.cc-duo-ph{color:#9aa6b0;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;}
.cc-duo-ph i{font-size:22px;}
@media (max-width:767px){.cc-duo{gap:10px;margin:6px auto 2px;}.cc-duo-ph{font-size:12px;}}


/* ================================================================
   SLIDER HERO maison (rectangulaire) v26 (29/06) — remplace le
   carousel Bootstrap. scroll-snap (swipe mobile) + fleches + points
   + autoplay (actifs des qu'il y a >= 2 images). Ratio 2114/744.
   ================================================================ */
.cc-hero{position:relative;max-width:1180px;margin:10px auto 6px;padding:0 16px;}
.cc-hero-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;touch-action:pan-x;border-radius:14px;scrollbar-width:none;}
.cc-hero-track::-webkit-scrollbar{display:none;}
.cc-hero-slide{flex:0 0 100%;scroll-snap-align:start;display:block;aspect-ratio:2114 / 744;}
.cc-hero-slide img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;}
.cc-hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.92);color:var(--sanit-brand);font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18);transition:.15s;padding:0;}
.cc-hero-nav:hover{background:#fff;}
.cc-hero-prev{left:28px;} .cc-hero-next{right:28px;}
.cc-hero-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:7px;}
.cc-hero-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.65);border:none;cursor:pointer;padding:0;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.cc-hero-dot.active{background:#fff;width:24px;border-radius:5px;}
.cc-hero[data-single] .cc-hero-nav,.cc-hero[data-single] .cc-hero-dots{display:none !important;}
@media (max-width:767px){
  .cc-hero{padding:0 12px;margin:6px auto 2px;}
  .cc-hero-nav{width:34px;height:34px;font-size:18px;}
  .cc-hero-prev{left:18px;}.cc-hero-next{right:18px;}
  .cc-hero-dots{bottom:10px;}
}

/* masque "À partir de" une fois une variante choisie (anti-flash) */

/* ===== [01/07] Vignette : bloc prix soigné (encadré + couleur marque) ===== */
.product-miniature .product-price-and-shipping{
  margin-top:10px;
  padding:8px 11px 9px;
  background:var(--sanit-brand-soft);
  border:1px solid #d8e6f6;
  border-radius:var(--sanit-radius-sm);
  line-height:1.2;
  min-height:0;
}
.product-miniature .product-price-and-shipping .cc-from-label{
  display:block;
  font-size:11px;
  font-weight:500;
  color:var(--sanit-muted);
  margin-bottom:1px;
}
.product-miniature .product-price-and-shipping .price{
  color:var(--sanit-brand);
  font-weight:800;
  font-size:19px;
  letter-spacing:-.2px;
}
.product-miniature .product-price-and-shipping .price .tax-mode{
  font-size:11px;
  font-weight:600;
  color:var(--sanit-muted);
  margin-left:3px;
  letter-spacing:0;
}
.product-miniature .product-price-and-shipping .price-ht{
  display:block;
  font-size:12px;
  color:var(--sanit-muted);
  margin-top:3px;
}
.product-miniature .product-price-and-shipping .price-ht .ht-value{
  font-weight:600;
  color:var(--sanit-text);
}
.product-miniature .product-price-and-shipping .price-ht .tax-mode{
  font-weight:500;
}

/* ===== [01/07] Encart "N finitions / N dimensions disponibles" sur vignette ===== */
.product-miniature .cc-choices{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 2px;}
.product-miniature .cc-choice{display:inline-flex;align-items:center;gap:5px;background:var(--sanit-brand-soft);color:var(--sanit-brand);border:1px solid #d8e6f6;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600;line-height:1.3;}
.product-miniature .cc-choice .material-icons{font-size:14px;line-height:1;}

/* ============================================================
   BADGE EN STOCK vignettes v1 (2026-07-03)
   Pastille verte sur les vignettes produit quand quantity > 0
   (rien d affiche quand pas de stock, demande patron)
   ============================================================ */
.product-miniature .cc-stock-flag{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;font-weight:600;color:#1e7e34;background:#e8f6ec;border:1px solid #bfe5c9;border-radius:12px;padding:1px 9px;margin:2px 0 4px;line-height:1.5}
.product-miniature .cc-stock-flag::before{content:"";width:8px;height:8px;border-radius:50%;background:#28a745;flex:0 0 auto}

/* ---- bandeau promo fournisseur (accueil) ---- */
.cc-promo{max-width:1180px;margin:0 auto 14px;padding:0 16px;}
.cc-promo-lien{display:block;line-height:0;border-radius:14px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.10);transition:transform .15s,box-shadow .15s;}
.cc-promo-lien:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.16);}
.cc-promo-lien img{width:100%;height:auto;display:block;}
.cc-promo-note{margin:8px 2px 0;font-size:13px;line-height:1.5;color:#5a6472;}
.cc-promo-note a{color:#1d6f42;text-decoration:underline;}
.cc-promo-note a:hover{color:#14512f;}
@media(max-width:640px){.cc-promo-note{font-size:12px;}}

/* [20/08/2026] Mention sous l'image principale quand la photo n'est pas celle du produit
   exact (gamme propre sans photo d'usine). Discrete, jamais criarde. */
.cc-image-mention {
  margin: .5rem 0 0;
  padding: .35rem .6rem;
  font-size: .78rem;
  font-style: italic;
  color: #6b7280;
  background: #f4f5f7;
  border-left: 3px solid #d1d5db;
  border-radius: 3px;
  text-align: center;
}


/* ================================================================
   31/08/2026 - LES LIBELLES DE FILTRE NE DOIVENT PAS ETRE COUPES.
   Le patron : « je ne vois pas toute la phrase dans les filtres ».
   Nos valeurs sont des phrases (« Mitigeur de lavabo avec douchette »,
   « Robinetterie de baignoire & bain-douche ») : coupees, elles ne
   veulent plus rien dire et le client ne peut pas choisir.
   /!\ On corrige l'AFFICHAGE, on ne raccourcit pas les libelles :
       ils servent aussi au fil d'Ariane, a l'URL et au referencement.
   ================================================================ */
#search_filters .facet .facet-label,
#search_filters .facet .facet-label a,
#search_filters_wrapper .facet .facet-label,
#search_filters_wrapper .facet .facet-label a,
#left-column #search_filters .facet .facet-label,
#left-column #search_filters .facet .facet-label a{
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:break-word;
  word-break:normal;
  line-height:1.3 !important;
  max-width:none !important;
  width:auto !important;
}
#search_filters .facet .facet-label{
  display:flex !important;
  align-items:flex-start;
  gap:6px;
  padding:3px 0;
}
#search_filters .facet .facet-label .custom-input,
#search_filters .facet .facet-label input{flex:0 0 auto;margin-top:2px;}
#search_filters .facet .facet-title{white-space:normal !important;}


/* ================================================================
   31/08/2026 (2) - LA CASE DOIT ETRE CENTREE SUR LA PREMIERE LIGNE.
   Le patron : « la case a cocher n'est pas vraiment centree avec le nom ».
   /!\ Le rond visible est le <span class="custom-checkbox">, pas l'<input>.
   /!\ On lui donne la hauteur d'UNE ligne (1.3em) et on centre dedans :
       un libelle sur deux lignes garde donc sa case en face de la
       premiere ligne, au lieu de descendre au milieu du bloc.
   ================================================================ */
#search_filters .facet .facet-label > .custom-checkbox,
#search_filters .facet .facet-label > .custom-radio,
#search_filters_wrapper .facet .facet-label > .custom-checkbox,
#search_filters_wrapper .facet .facet-label > .custom-radio,
#left-column #search_filters .facet .facet-label > .custom-checkbox,
#left-column #search_filters .facet .facet-label > .custom-radio{
  flex:0 0 auto !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:1.3em !important;
  height:1.3em !important;
  margin:0 !important;
  top:auto !important;
  vertical-align:top !important;
}
#search_filters .facet .facet-label input,
#left-column #search_filters .facet .facet-label input{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
#search_filters .facet .facet-label > a,
#left-column #search_filters .facet .facet-label > a{
  flex:1 1 auto;
  min-width:0;
  line-height:1.3 !important;
}


/* ================================================================
   31/08/2026 (3) - LE VRAI REGLAGE case / libelle des filtres.
   Mesure dans le navigateur : la case etait bien placee, c'est le
   LIBELLE qui descendait de 7px (margin-top:.4375rem du theme).
   /!\ Le wrapper prend la meme taille de police que le lien pour que
       son height:1.3em vaille exactement une ligne de libelle.
   ================================================================ */
#search_filters .facet .facet-label > a,
#search_filters_wrapper .facet .facet-label > a,
#left-column #search_filters .facet .facet-label > a{
  margin-top:0 !important;
  padding-top:0 !important;
  font-size:.9375rem;
  line-height:1.3 !important;
}
#search_filters .facet .facet-label > .custom-checkbox,
#search_filters .facet .facet-label > .custom-radio,
#search_filters_wrapper .facet .facet-label > .custom-checkbox,
#search_filters_wrapper .facet .facet-label > .custom-radio,
#left-column #search_filters .facet .facet-label > .custom-checkbox,
#left-column #search_filters .facet .facet-label > .custom-radio{
  font-size:.9375rem !important;
  height:1.3em !important;
  min-height:1.3em !important;
}

/* 03/09/2026 : prix barre = tarif public fournisseur, sur sa propre ligne, petit et gris,
   au-dessus du prix paye (vignettes et panier). La fiche garde son propre style. */
.cc-public{display:block;font-size:12px;font-weight:400;color:var(--sanit-muted);line-height:1.3;margin:0 0 2px;white-space:normal}
.cc-public .supplier-public-price-label{font-size:12px;font-weight:400;color:var(--sanit-muted);display:inline}
.cc-public .regular-price{font-size:12px;font-weight:400;color:var(--sanit-muted);text-decoration:line-through;margin:0 0 0 4px;display:inline}
.product-miniature .product-price-and-shipping .cc-public{margin-top:2px}
.cart-item .product-discount .cc-public{margin:0}


/* 07/09/2026 : notice europeenne sur la garantie legale, obligatoire au 27/09/2026 et
   accessible AVANT la commande. Meme forme que le bouton « Imprimer » de nicofichemaison,
   dans le bleu de la maison, pour que les deux fassent la paire. */
.cc-garantie-wrap{margin:14px 0}
.cc-garantie-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:#fff;color:var(--sanit-brand,#0a5aa3);
  border:2px solid var(--sanit-brand,#0a5aa3);
  border-radius:var(--sanit-radius-sm,9px);
  padding:9px 16px;font-weight:600;font-size:14px;line-height:1.2;
  text-decoration:none;transition:background .15s,color .15s;
}
.cc-garantie-btn:hover,.cc-garantie-btn:focus{background:var(--sanit-brand,#0a5aa3);color:#fff;text-decoration:none}
.cc-garantie-ico{font-size:16px;line-height:1}
.cc-garantie-sub{display:block;font-size:12px;color:var(--sanit-muted,#69767f);margin:4px 0 0}
/* 07/09/2026 : dans le panier la notice ne doit pas concurrencer le bouton COMMANDER.
   Une ligne discrete suffit : l'obligation est d'etre ACCESSIBLE avant la commande. */
.cc-garantie-note{margin:10px 0 0;text-align:center;font-size:12px;line-height:1.35}
.cc-garantie-note a{color:var(--sanit-muted,#69767f);text-decoration:underline}
.cc-garantie-note a:hover{color:var(--sanit-brand,#0a5aa3)}

/* ── 09/09/2026 : la vignette de sous-rayon remplit toute sa case ─────────────
   Le patron : « l'image ne rempli toujours pas tout l'espace, je veux que tout
   l'espace dédié à l'image soit pris, que ça fasse joli avec les petits arrondis ».

   Avant : le lien portait 16px de marge et l'image était en object-fit:contain,
   donc une image carrée laissait du blanc de chaque côté dans une case plus large.

   🚨 IL FAUT ÉCRIRE LE SÉLECTEUR AUSSI PROFOND QUE CELUI QU'ON REMPLACE.
   « body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image
   a.img » (0-1-4-3) bat « body.cat-navigation #subcategories .subcategory-image
   a.img » (0-1-3-2) même avec !important, et même écrit plus bas dans le fichier.
   Premier essai perdu là-dessus, exactement comme le 29/06 plus haut dans ce fichier.

   Le bouton du Mode rangement est accroché AU NOM, pas à l'image : le overflow
   caché ne le mange pas.   Repère : cc-vignette-pleine  */
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image{
  overflow:hidden !important;border-radius:var(--sanit-radius) var(--sanit-radius) 0 0 !important;
  line-height:0 !important;background:#fff !important;padding:0 !important;
}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img,
body.cat-navigation #subcategories ul.subcategories-list li:hover .subcategory-image a.img{
  padding:0 !important;border:0 !important;display:block !important;
}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image picture{
  display:block !important;
}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img img{
  display:block !important;width:100% !important;max-width:none !important;
  height:190px !important;object-fit:cover !important;object-position:center !important;
  border-radius:0 !important;transition:transform .25s ease;
}
body.cat-navigation #subcategories ul.subcategories-list li:hover .subcategory-image a.img img{
  transform:scale(1.04);
}
@media (max-width:767px){
  body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image a.img img{
    height:140px !important;
  }
}
/* ── fin cc-vignette-pleine ─────────────────────────────────────────────────── */

/* ══ cc-titre-complet ═══════════════════════════════════════════════════════════
   Le patron, 09/09/2026 : « fais en sorte que je vois toujours tout le titre sans
   coupure ». La coupure venait du MODELE, pas du CSS : subcategories.tpl portait
   « truncate:25 », qui rendait « Raccords (cuivre,... » a la place de
   « Raccords (cuivre, laiton, PER-multicouche) ». La troncature est retiree.

   Ici on range la consequence : un titre sur trois lignes descendait le bouton du
   Mode rangement de 16 px par rapport aux cases voisines. La case devient une
   colonne, le titre prend la place qui reste et se centre, le bouton se pose au
   fond. Toutes les cases d'une rangee ont alors leurs boutons alignes.
   Repere : cc-titre-complet
   ═══════════════════════════════════════════════════════════════════════════════ */
body.cat-navigation #subcategories ul.subcategories-list li{
  display:flex !important;flex-direction:column !important;
}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-image{
  flex:0 0 auto !important;
}
body.cat-navigation #subcategories ul.subcategories-list li h5{
  flex:1 1 auto !important;display:flex !important;
  align-items:center !important;justify-content:center !important;
}
body.cat-navigation #subcategories ul.subcategories-list li .subcategory-name{
  line-height:1.3 !important;overflow-wrap:break-word !important;word-break:normal !important;
  hyphens:auto !important;
}
/* ── fin cc-titre-complet ───────────────────────────────────────────────────── */

/* ══ cc-titre-rayon ═════════════════════════════════════════════════════════════
   Le bandeau de rayon. Le patron, 09/09/2026 : « je trouve ca un peu pauvre, tu ne
   peux faire plus pro du genre avec un bandeau ou un encadrement un changement de
   couleur de fond ».

   Le bandeau porte le bleu de la marque (--sanit-brand #0a5aa3), un degrade en
   diagonale, un liseré clair en haut, et une trame de lignes a 4 % pour donner de la
   matiere sans faire de bruit. Le titre est en Inter 700, deja chargee par le site,
   donc pas un octet de plus. Le compte de references est automatique.

   🚨 SELECTEURS AVEC UN ID : le theme impose min-height:220px, un fond blanc et une
   ombre sur « .block-category » depuis SA feuille, pas depuis custom.css. Un
   !important sur un selecteur de classe n'aurait pas suffi.
   Repere : cc-titre-rayon
   ═══════════════════════════════════════════════════════════════════════════════ */
#js-product-list-header .block-category.cc-titre-rayon{
  min-height:0 !important;height:auto !important;
  background:transparent !important;border:0 !important;box-shadow:none !important;
  border-radius:0 !important;padding:0 !important;margin:0 0 20px !important;
  text-align:center !important;
}
#js-product-list-header .cc-rayon-bandeau{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  padding:32px 26px 30px;
  border-radius:var(--sanit-radius);
  box-shadow:0 10px 28px rgba(10,54,92,.20);
  background:
    radial-gradient(900px 260px at 14% -60%, rgba(255,255,255,.18), transparent 62%),
    linear-gradient(135deg,#0a5aa3 0%,#0c5192 48%,#083f73 100%);
}
/* la trame, discrete : des lignes a 4 % de blanc */
#js-product-list-header .cc-rayon-bandeau::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 1px,transparent 1px 14px);
}
/* le lisere clair en haut du bandeau */
#js-product-list-header .cc-rayon-bandeau::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#5fa3dd,#a8d1f2,#5fa3dd);
}
#js-product-list-header .cc-rayon-bandeau h1.h1{
  margin:0 !important;max-width:28ch;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif !important;
  font-size:clamp(22px,2.5vw,33px) !important;font-weight:700 !important;
  line-height:1.16 !important;letter-spacing:.05em !important;
  text-transform:uppercase !important;color:#ffffff !important;
  text-shadow:0 1px 2px rgba(3,26,48,.28);
}
#js-product-list-header .cc-rayon-compte{
  margin:0 !important;padding:5px 15px;
  border-radius:999px;border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.13);
  color:#e8f1fa !important;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;line-height:1.5;
}
/* le bouton du Mode rangement, sous le bandeau et centre */
#js-product-list-header .nicocat-catimg-page{text-align:center !important;margin-top:10px !important;}
@media (max-width:767px){
  #js-product-list-header .cc-rayon-bandeau{padding:22px 16px 20px;gap:10px;border-radius:var(--sanit-radius-sm);}
  #js-product-list-header .cc-rayon-bandeau h1.h1{letter-spacing:.035em !important;}
  #js-product-list-header .block-category.cc-titre-rayon{margin:0 0 14px !important;}
}
/* ── fin cc-titre-rayon ─────────────────────────────────────────────────────── */

/* ================================================================
   PRODUITS POPULAIRES (11/09/2026) : 30 produits au lieu de 8, TOUJOURS EN BANDE QUI DEFILE.
   Une grille 6 x 5 a ete essayee le matin meme ; le patron : « alors non toujours sur slide ».
   Le nombre se regle par HOME_FEATURED_NBR (30), le classement par la MAJ du matin.
   ================================================================ */

/* ================================================================
   MOBILE : LE DOIGT FAIT DE NOUVEAU DEFILER LA PAGE VERS LE BAS (11/09/2026)
   Le patron : « le module choisissez votre espace deconne un peu sur mobile si je veux
   slide vers le bas il veut pas ». Six blocs de l'accueil portaient touch-action:pan-x,
   qui n'autorise au doigt QUE le glissement de cote : un glissement vers le bas qui
   commence dessus etait avale (environ 1 500 px de page sur un telephone). « Choisissez
   votre espace » n'est meme plus une bande qui defile (grille de tuiles depuis la v12),
   le reglage du 29/06 etait reste. pan-x pan-y garde le glissement de cote DANS les
   bandes et rend le defilement vertical a la page.
   ================================================================ */
.page-home .cc-espace-cards,
.cc-hero-track,
.ne-slider-wrap,.np-slider-wrap,.nf-slider-wrap,
.nav-track{touch-action:pan-x pan-y !important;}

/* ===== GUIDE FUMISTERIE POUJOULAT (22/09/2026) : page CMS 16, rayons fumisterie ===== */
.pg{--b:#0a5aa3;--b2:#0d3f73;--bc:#eaf2fb;--t:#1f2933;--t2:#46525e;--g:#f5f7fa;--l:#dbe2ea;--r:#b3261e;font-size:16px;line-height:1.55;color:var(--t)}
.pg *{box-sizing:border-box}
.page-cms .pg,.page-cms .pg p,.page-cms .pg li{text-align:left}
.page-cms .pg p{font-size:16px;color:var(--t2);margin:0 0 10px}
.pg-hero{background:linear-gradient(135deg,var(--b),var(--b2));border-radius:16px;padding:30px 30px 26px;margin:0 0 10px}
.page-cms .pg .pg-hero h2{color:#fff;margin:0 0 8px;font-size:30px;line-height:1.2;font-weight:700}
.page-cms .pg .pg-hero p{color:#fff;font-size:17px;margin:0;opacity:.95}
.pg-etapes{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.page-cms .pg .pg-etapes a{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:6px 16px;font-size:15px;font-weight:600;text-decoration:none}
.page-cms .pg .pg-etapes a:hover{background:#fff;color:var(--b)}
.page-cms .pg h3.pg-t{font-size:23px;font-weight:700;color:var(--t);margin:38px 0 16px;display:flex;align-items:center;gap:12px;line-height:1.25}
.pg-num{background:var(--b);color:#fff;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex:0 0 36px}
.pg-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.page-cms .pg .pg-app{display:flex;flex-direction:column;background:#fff;border:2px solid var(--l);border-radius:14px;padding:10px 10px 14px;text-align:center;text-decoration:none;color:var(--t);font-weight:700;font-size:16px;line-height:1.3;transition:border-color .15s,box-shadow .15s,transform .15s}
.page-cms .pg .pg-app:hover{border-color:var(--b);box-shadow:0 6px 18px rgba(10,90,163,.16);transform:translateY(-2px)}
.pg-app img{width:100%;height:170px;object-fit:contain;display:block;margin:0 auto 10px}
.pg-app span{flex:1;display:flex;align-items:center;justify-content:center}
.page-cms .pg:has(#pg-bois:target) .pg-app[href="#pg-bois"],.page-cms .pg:has(#pg-granules:target) .pg-app[href="#pg-granules"],.page-cms .pg:has(#pg-gaz:target) .pg-app[href="#pg-gaz"],.page-cms .pg:has(#pg-murale:target) .pg-app[href="#pg-murale"],.page-cms .pg:has(#pg-sol:target) .pg-app[href="#pg-sol"],.page-cms .pg:not(:has(.pg-p:target)) .pg-app[href="#pg-bois"]{border-color:var(--b);background:var(--bc);color:var(--b);box-shadow:0 0 0 3px rgba(10,90,163,.18)}
.pg-p{display:none}
.pg-p:target{display:block}
.pg-panels:not(:has(.pg-p:target)) #pg-bois{display:block}
.pg-p,.pg-ancre{scroll-margin-top:90px}
.pg-sit{display:grid;grid-template-columns:340px 1fr;gap:26px;background:#fff;border:1px solid var(--l);border-radius:16px;padding:20px;margin:0 0 18px;box-shadow:0 1px 4px rgba(20,40,60,.05)}
.pg-sit-img{position:relative;background:#fff;border-radius:10px;display:flex;align-items:flex-start;justify-content:center;cursor:zoom-in}
.pg-sit-img img{width:100%;height:auto;max-height:500px;object-fit:contain;border-radius:8px}
.page-cms .pg .pg-sit-img span{position:absolute;right:6px;bottom:6px;background:rgba(31,41,51,.78);color:#fff;border-radius:6px;padding:3px 9px;font-size:13px;font-weight:600}
.pg-sit-txt{min-width:0}
.page-cms .pg .pg-sit h4{margin:2px 0 6px;font-size:21px;font-weight:700;color:var(--t);line-height:1.25}
.page-cms .pg .pg-gamme{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 16px}
.page-cms .pg .pg-gamme span{background:var(--g);border:1px solid var(--l);color:var(--t2);border-radius:6px;padding:2px 9px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.page-cms .pg .pg-gamme a{color:var(--b);font-size:19px;font-weight:700;text-decoration:none}
.page-cms .pg .pg-suivez{font-size:14px;font-weight:600;color:var(--t2);margin:0 0 4px;text-transform:uppercase;letter-spacing:.03em}
.page-cms .pg .pg-pieces{list-style:none;padding:0;margin:0 0 16px}
.page-cms .pg .pg-pieces li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:11px 0;border-top:1px solid #edf1f5;margin:0}
.page-cms .pg .pg-pieces li b{display:block;font-size:16px;color:var(--t);margin:3px 0 7px}
.pg-n{background:var(--r);color:#fff;border-radius:6px;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:700}
.pg-n.pg-plus{background:#7d8a96}
.pg-chips{display:flex;flex-wrap:wrap;gap:8px}
.page-cms .pg .pg-chips a{display:inline-block;background:var(--bc);color:var(--b);border:1px solid #cfe0f3;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none}
.page-cms .pg .pg-chips a:hover{background:var(--b);border-color:var(--b);color:#fff}
.pg-bas{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;border-top:1px solid #edf1f5;padding-top:14px}
.page-cms .pg .pg-btn{display:inline-block;background:var(--b);color:#fff;border-radius:10px;padding:10px 18px;font-size:16px;font-weight:700;text-decoration:none}
.page-cms .pg .pg-btn:hover{background:var(--b2);color:#fff}
.page-cms .pg .pg-aussi{font-size:15px;margin:0;color:var(--t2)}
.page-cms .pg .pg-aussi a{color:var(--b);font-weight:600}
.pg-lead{max-width:900px}
.page-cms .pg .pg-lead a{color:var(--b);font-weight:600}
.pg-styles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.page-cms .pg .pg-style{display:block;background:#fff;border:1px solid var(--l);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--t);transition:border-color .15s,box-shadow .15s}
.pg-style img{width:100%;height:170px;object-fit:cover;display:block}
.pg-style b{display:block;padding:10px 12px 2px;font-size:17px;color:var(--t)}
.pg-style span{display:block;padding:0 12px 12px;font-size:14px;color:var(--t2);line-height:1.4}
.page-cms .pg .pg-style:hover{border-color:var(--b);box-shadow:0 6px 18px rgba(10,90,163,.14)}
.pg-fin{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.page-cms .pg .pg-fin a{display:block;background:var(--bc);border:1px solid #cfe0f3;border-radius:14px;padding:16px;text-decoration:none;color:var(--t)}
.page-cms .pg .pg-fin a:hover{border-color:var(--b)}
.pg-fin a b{display:block;color:var(--b);font-size:17px;margin-bottom:6px}
.pg-fin a span{display:block;font-size:15px;color:var(--t2);line-height:1.45}
.pg-schema{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;background:var(--g);border-radius:16px;padding:20px}
.pg-schema img{width:100%;height:auto;border-radius:10px}
.page-cms .pg .pg-schema ol{margin:0;padding-left:22px}
.page-cms .pg .pg-schema li{margin:0 0 10px;font-size:16px;color:var(--t2)}
.page-cms .pg .pg-schema li b{color:var(--t)}
.page-cms .pg .pg-aide{background:var(--bc);border-left:5px solid var(--b);border-radius:10px;padding:16px 20px;margin-top:26px;font-size:17px;color:var(--t)}
.page-cms .pg .pg-aide a{color:var(--b);font-weight:700}
@media (max-width:1000px){.pg-apps{grid-template-columns:repeat(3,1fr)}.pg-sit{grid-template-columns:240px 1fr;gap:18px}.pg-styles{grid-template-columns:repeat(3,1fr)}.pg-fin{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.pg-sit{grid-template-columns:1fr}.pg-sit-img img{max-height:340px;width:auto;max-width:100%}.pg-schema{grid-template-columns:1fr}}
@media (max-width:560px){.pg-apps{grid-template-columns:1fr 1fr;gap:10px}.pg-app img{height:130px}.pg-styles{grid-template-columns:1fr 1fr}.pg-style img{height:130px}.pg-fin{grid-template-columns:1fr}.pg-hero{padding:22px 18px}.page-cms .pg .pg-hero h2{font-size:24px}.page-cms .pg h3.pg-t{font-size:20px}.pg-sit{padding:14px}.page-cms .pg .pg-btn{display:block;text-align:center}}
/* barre des rayons fumisterie (pouj_nav.py, category-header.tpl) */
.cc-rayon-nav{margin:0 0 18px}
.cc-rayon-nav .pgc-nav{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;background:#fff;border:1px solid #dbe2ea;border-radius:14px;padding:14px 16px}
.cc-rayon-nav .pgc-parts{flex:1 1 420px;min-width:0}
.cc-rayon-nav .pgc-t{display:block;font-size:13px;font-weight:700;color:#46525e;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px}
.cc-rayon-nav .pgc-chips{display:flex;flex-wrap:wrap;gap:8px}
.cc-rayon-nav .pgc-chips a{display:inline-block;background:#eaf2fb;color:#0a5aa3;border:1px solid #cfe0f3;border-radius:999px;padding:6px 14px;font-size:15px;font-weight:600;line-height:1.3;text-decoration:none}
.cc-rayon-nav .pgc-chips a:hover{background:#0a5aa3;border-color:#0a5aa3;color:#fff}
.cc-rayon-nav a.pgc-guide{flex:0 1 300px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(135deg,#0a5aa3,#0d3f73);color:#fff;border-radius:12px;padding:12px 16px;text-decoration:none}
.cc-rayon-nav .pgc-nav.pgc-seul{padding:0;border:0;background:none}
.cc-rayon-nav .pgc-seul a.pgc-guide{flex:1 1 100%;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-radius:14px}
.cc-rayon-nav .pgc-seul a.pgc-guide b{font-size:17px}
.cc-rayon-nav .pgc-seul a.pgc-guide span{font-size:14px;text-align:right}
.cc-rayon-nav a.pgc-guide b{font-size:16px;color:#fff}
.cc-rayon-nav a.pgc-guide span{font-size:14px;color:#fff;opacity:.9}
.cc-rayon-nav a.pgc-guide span:after{content:" \2192"}
.cc-rayon-nav a.pgc-guide:hover{box-shadow:0 6px 18px rgba(10,90,163,.25)}
.cc-rayon-nav .pgc-tete{display:block;padding:18px}
.cc-rayon-nav .pgc-tete-t b{display:block;font-size:21px;color:#1f2933}
.cc-rayon-nav .pgc-tete-t span{display:block;font-size:15px;color:#46525e;margin:2px 0 14px}
.cc-rayon-nav .pgc-apps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cc-rayon-nav .pgc-apps a{display:flex;flex-direction:column;align-items:center;background:#fff;border:2px solid #dbe2ea;border-radius:12px;padding:8px 8px 12px;text-decoration:none;color:#1f2933;font-weight:700;font-size:15px;line-height:1.3;text-align:center}
.cc-rayon-nav .pgc-apps a:hover{border-color:#0a5aa3;color:#0a5aa3;box-shadow:0 6px 18px rgba(10,90,163,.16)}
.cc-rayon-nav .pgc-apps img{width:100%;height:130px;object-fit:contain;margin:0 0 8px}
@media (max-width:900px){.cc-rayon-nav .pgc-apps{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.cc-rayon-nav .pgc-apps{grid-template-columns:1fr 1fr}.cc-rayon-nav .pgc-apps img{height:100px}.cc-rayon-nav a.pgc-guide{flex-basis:100%}}
.category-additional-description .pgc-intro{font-size:17px;color:#1f2933}
.cc-rayon-nav .pgc-renvoi{margin:10px 0 0;font-size:15px;color:#46525e;background:#f5f7fa;border:1px solid #dbe2ea;border-radius:10px;padding:10px 14px}
.cc-rayon-nav .pgc-renvoi a{color:#0a5aa3;font-weight:600;text-decoration:none}
.cc-rayon-nav .pgc-renvoi a:hover{text-decoration:underline}
/* ===== FIN GUIDE FUMISTERIE POUJOULAT ===== */
/* ===== UNE INSTALLATION, UNE MARQUE (23/09/2026) ===== */
.cc-marque-conduit{display:block;margin:14px 0 0;padding:12px 16px;border:1px solid #e3d9c2;border-left:4px solid #c79a3a;
  border-radius:10px;background:#fdfaf3;color:#1f2933;font-size:15px;line-height:1.5}
.cc-marque-conduit b{display:block;font-size:15px;margin:0 0 3px}
.cc-marque-conduit span{display:block;color:#46525e;font-size:14px}
.cc-rayon-nav .pgc-marque{margin:10px 0 0;padding:10px 14px;border:1px solid #e3d9c2;border-left:4px solid #c79a3a;
  border-radius:10px;background:#fdfaf3;color:#46525e;font-size:15px}
.cc-rayon-nav .pgc-marque b{color:#1f2933}
/* ===== FIN UNE INSTALLATION, UNE MARQUE ===== */

/* ===== LES ICONES NE DOIVENT PAS S'ECRIRE EN TOUTES LETTRES (08/10/2026) =====

   NICO, 08/10/2026 : « attention, une fois sur deux quand j'actualise, la page est etiree,
   buguee » (capture de /SDB/constructeur/).

   CE QUI SE PASSAIT. Les icones du theme sont des LIGATURES : le HTML ecrit vraiment
   <i class="material-icons">shopping_cart</i>, et c'est la police « Material Icons » qui
   transforme ce mot en pictogramme. Or le theme la declare en `font-display: swap`, ce qui
   demande au navigateur d'afficher le texte AVEC LA POLICE DE SECOURS en attendant. Pendant
   ces quelques dixiemes de seconde le client lit « shopping_cart », « search », « clear », et
   comme un mot est bien plus large qu'une icone, l'en-tete s'etire. Une fois la police en
   cache on ne voit plus rien : d'ou le « une fois sur deux ».

   LA CORRECTION. On redeclare la meme police en `font-display: block` : le navigateur
   n'affiche alors RIEN tant qu'elle n'est pas la, puis pose l'icone. Pas de mot, pas
   d'etirement. La derniere declaration d'une meme famille l'emporte, et custom.css est charge
   en dernier.

   ⚠️ ON NE TOUCHE PAS A LA MISE EN FORME DES ICONES. Un `overflow:hidden` sur
      `.material-icons` aurait borne la largeur, mais il change aussi la ligne de base d'un
      inline-block et DECALE toutes les icones du site. La police suffit.
   ⚠️ LE NOM DES FICHIERS PORTE UNE EMPREINTE que la reconstruction du theme change. Si le
      theme est rebati, relire l'empreinte dans `themes/nico/assets/cache/theme-*.css` et la
      reporter ici. Sans ca on ne casse rien : on revient au comportement d'avant.
   ⚠️ CHEMINS RELATIFS : les fichiers de police sont dans le MEME dossier que ce custom.css.
      Pas de « /SDB/ » en dur, le site doit pouvoir passer a la racine.
*/
@font-face{
  font-family:"Material Icons";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:local("Material Icons"),
      local("MaterialIcons-Regular"),
      url(2d8017489da689caedc1.woff2) format("woff2"),
      url(08cefa1bc6566a650da7.woff) format("woff"),
      url(698bd8550d863c20a3e1.ttf) format("truetype");
}
/* ===== FIN ICONES ===== */

/* ── 26/10/2026 : la pastille de DELAI, SOUS LA DISPONIBILITE ───────────────
   Nico : « on peut se faire un petit truc joli pour mentionner le délais ? » puis
   « on essaye de le mettre plutot en dessous du stock ». Elle est donc sortie par le
   module nicostock, juste apres la pastille « Sur commande » / « Stock possible ».
   C'est une pastille d'INFORMATION, pas un bouton : fond doux, bordure fine, aucun
   survol, et elle reste plus discrete que la pastille de stock au-dessus.
   Repere : cc-pastille-delai  */
.nicostock-delai{
  display:inline-flex;align-items:center;gap:7px;margin:8px 0 0;
  background:var(--sanit-soft,#eef4fa);color:var(--sanit-brand,#0a5aa3);
  border:1px solid rgba(10,90,163,.18);
  border-radius:var(--sanit-radius-sm,9px);
  padding:7px 12px;font-size:13px;line-height:1.2;
}
.nicostock-delai svg{
  flex:0 0 auto;width:15px;height:15px;fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.nicostock-delai strong{font-weight:700}


/* ── 26/10/2026 : « Pour completer votre meuble », sous la fiche ──────────────
   Nico : « j'aimerais que quand il choisit un meuble, il soit suggere d'aller voir les
   robinets lavabo, les miroirs, etc. »
   Des cartes vers des RAYONS, pas vers des produits : on ne sait pas quel mitigeur ira
   avec son meuble, mais on sait ou il les trouve tous. Le contenu vit dans la base
   (clefs CC_COMPAGNONS_<rayon>).   Repere : cc-compagnons  */
.cc-compagnons{margin:28px 0 8px}
.cc-compagnons-titre{
  margin:0 0 12px;font-size:15px;font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;color:var(--sanit-ink,#39454f);
}
.cc-compagnons-liste{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.cc-compagnon{
  display:flex;flex-direction:column;gap:3px;
  background:var(--sanit-soft,#eef4fa);
  border:1px solid rgba(10,90,163,.18);
  border-radius:var(--sanit-radius-sm,9px);
  padding:14px 16px;text-decoration:none;
  transition:background .15s,border-color .15s,transform .15s;
}
.cc-compagnon:hover,.cc-compagnon:focus{
  background:#fff;border-color:var(--sanit-brand,#0a5aa3);
  text-decoration:none;transform:translateY(-1px);
}
.cc-compagnon-nom{font-weight:700;font-size:15px;color:var(--sanit-brand,#0a5aa3)}
.cc-compagnon-sous{font-size:13px;line-height:1.3;color:var(--sanit-muted,#69767f)}
.cc-compagnon-n{font-size:12px;color:var(--sanit-muted,#69767f);opacity:.85;margin-top:4px}


/* ── 26/10/2026 : L'EN-TETE SUIT QUAND ON DESCEND ────────────────────────
   Nico : « le menu du haut nous suit, comme chez Tereva ».

   🚨 LE DECALAGE NEGATIF EST TOUTE L'ASTUCE. `top: -50px` veut dire : colle-toi
      quand ton HAUT atteint -50px. Les 50 premiers pixels (la bande bleue : telephone,
      connexion, panier) sortent donc de l'ecran, et la barre utile (logo, Catalogue,
      recherche) se retrouve pile en haut. 87 px sur ordinateur, 97 sur telephone, soit
      12 % de l'ecran.
   🚨 ON NE PEUT PAS COLLER UN SEUL ENFANT DE L'EN-TETE : un element colle ne tient
      que dans la boite de son parent, et `#header` ne fait que 137 px de haut. Il se
      decollerait aussitot. C'est l'EN-TETE ENTIER qu'on colle, decale vers le haut.
   ⚠️ La hauteur a faire sortir est mesuree par six lignes de script dans `header.tpl`
      (le CSS ne sait pas lire une hauteur) et arrive ici par `--cc-entete-defile`. La
      valeur de repli, 50px, est celle d'aujourd'hui : sans le script on perd la mesure,
      jamais l'effet.
   ⚠️ `scroll-padding-top` evite qu'un lien d'ancre envoie sa cible SOUS l'en-tete.
   ✅ Verifie dans le navigateur avant d'ecrire : aucun ancetre en `overflow`, le menu
      Catalogue s'ouvre toujours par-dessus, et les fenetres (`.modal`, z-index 1050)
      passent encore devant.   Repere : cc-entete-colle  */
html{scroll-padding-top:110px}
#header{
  /* 🚨 LES DEUX LIGNES, DANS CET ORDRE. Safari sur iPhone ne connait
     `position:sticky` que sous sa forme prefixee tant qu'il n'est pas tres recent : sans
     `-webkit-sticky`, il IGNORE la declaration et l'en-tete ne suit pas. Un navigateur
     moderne lit les deux et garde la seconde. Nico, 26/10/2026 : « sur PC pas trop mal
     mais sur mobile ca ne fonctionne pas. » */
  position:-webkit-sticky;
  position:sticky;
  top:calc(-1 * var(--cc-entete-defile, 50px));
  z-index:1000;
  background:#fff;
}

/* 🚨 SUR TELEPHONE, LES DEUX BANDES SONT INVERSEES. Nico, 26/10/2026 :
   « non, sur ton emulation ca ne fonctionne pas, tu confonds avec la barre recherche. »
   Il avait raison, et la mesure le dit :

   |              | ordinateur                      | telephone                 |
   |--------------|---------------------------------|---------------------------|
   | .header-nav  | telephone, connexion, panier    | **burger, compte, panier**|
   | .header-top  | logo, Catalogue, recherche      | logo, **recherche**       |

   Le decalage negatif sort la PREMIERE bande. Sur ordinateur c'est la bonne : on perd le
   numero de telephone et on garde le Catalogue. Sur telephone c'est l'inverse : on
   sortait le BURGER et le PANIER pour ne garder que la recherche.
   Donc sur telephone, pas de decalage : tout l'en-tete suit. Il prend 147 px, 18 % d'un
   ecran de 812, mais tout ce qui reste sert a quelque chose. */
@media (max-width: 767px){
  html{scroll-padding-top:160px}
  #header{top:0}
}