/* Décalage global du contenu sous le header (évite le chevauchement) */
    main{margin-top:24px}
    @media (max-width:600px){
      main{margin-top:16px}
    }

    :root{
      --gap-lg: 32px; --gap-md: 22px; --gap-sm: 14px;
      --text-dim:#666; --footer-bg:#333; --card-bg:#fff; --surface:#f7f7f8;
      --brand:#0066cc; --brand-hover:#004c99; --shadow:0 4px 12px rgba(0,0,0,.1); --radius:12px;
    }
    *{box-sizing:border-box} html,body{height:100%}
    body{margin:0;padding:0;padding-top:var(--sc-header-h,0px);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--surface);color:#333;overflow-x:hidden}

    /* Header */
    header.sc-header{background:#fff;border-bottom:0;position:fixed;top:0;left:0;right:0;z-index:9999;padding:0}

    /* Bandeau menu (2 tons) */

    /* Mega menu */

    /* Navbar (bandeau bleu) */
    .sc-navbar{background:var(--brand);padding:12px 0;overflow:visible}
    .sc-nav-inner{display:flex;align-items:center;justify-content:flex-start;gap:14px;width:100%;max-width:1100px;margin:0 auto;padding:0 18px}
    /* On garde le header propre : le logo principal n'est pas affiché ici (le petit logo est dans le bouton Produits) */
    .sc-brand-link{display:none}

    .sc-navbar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}
    .sc-mega{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
    .sc-mega-btn{display:inline-flex;align-items:center;gap:10px;border:0;background:#fff;color:#0a0a0a;font-weight:800;
      padding:10px 12px;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.10);cursor:pointer;overflow:visible}
    .sc-mega-btn:active{transform:translateY(1px)}

    /* Logo et bouton "Produits" séparés (2 entités distinctes) */
    .sc-nav-logo-badge{
      width:56px;height:56px;flex:0 0 56px;
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.35));
      box-shadow:0 10px 25px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6);
      display:inline-flex;align-items:center;justify-content:center;
      margin-right:14px;
      overflow:hidden;
    }
    .sc-nav-logo-badge img{width:100%;height:100%;object-fit:contain;padding:2px;display:block;background:#fff}

    /* Le bouton garde sa taille normale : l'espace entre les deux reste bleu (fond du bandeau) */
    .sc-mega-btn{position:relative;padding:10px 12px;border-radius:999px;margin-right:14px}
    .sc-mega-btn::before{content:none}

    @media (max-width:600px){
      .sc-nav-logo-badge{width:52px;height:52px;flex-basis:52px;border-radius:12px;margin-right:10px}
      .sc-nav-logo-badge img{padding:7px}
      .sc-mega-btn{margin-right:10px}
    }
    .sc-burger{display:inline-flex;flex-direction:column;gap:4px}
    .sc-burger span{width:18px;height:2px;background:#111;border-radius:2px;display:block}
    .sc-home-link{color:#fff;text-decoration:none;font-weight:800;padding:8px 10px;border-radius:10px}
    .sc-home-link:hover{background:rgba(255,255,255,.14)}

    /* Recherche globale (header)
       - sans bouton (entrée clavier)
       - champ plus large / plus "propre" comme sur la capture
    */
    .sc-search{display:flex;align-items:center;margin-left:auto;flex:0 0 auto;padding:6px 8px;border-radius:999px;background:#f1f5f9;border:1px solid rgba(0,0,0,.10);box-shadow:0 8px 18px rgba(0,0,0,.10);max-width:320px}
    .sc-search-label{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
    .sc-search-input{
      height:38px;
      width:clamp(160px, 18vw, 260px);
      border-radius:999px;
      border:none;
      background:transparent;
      color:#111;
      padding:0 12px;
      outline:none;
    }
    .sc-search-input::placeholder{color:rgba(0,0,0,.45)}
    .sc-search-input:focus::placeholder{color:rgba(0,0,0,.30)}
    /* Mobile : la recherche passe sous la rangée Logo / Produits (évite le chevauchement) */
    @media (max-width:760px){
      .sc-header-center{display:none}
      .sc-nav-inner{flex-wrap:wrap;gap:10px}
      .sc-mega{flex:1 1 auto;min-width:0}
      .sc-search{flex:1 1 100%;width:100%;margin-left:0;border-radius:16px;background:#f1f5f9}
      .sc-search-input{width:100%;flex:1 1 auto}
    }

    /* Ecrans moyens : on réduit encore pour éviter que ça touche le logo central */
    @media (max-width:1180px){
      .sc-search{max-width:300px}
      .sc-search-input{width:clamp(150px, 18vw, 240px)}
    }
    .sc-mega-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9998}
    /*
      Mega-menu (burger) : doit toujours pouvoir scroller jusqu'en bas (PC + mobile).
      On ancre aussi le bas de l'overlay pour que la hauteur soit calculée
      correctement sur tous les navigateurs.
    */
    .sc-mega-panel{
      position:fixed;
      left:50%;
      transform:translateX(-50%);
      top:70px;
      bottom:12px;
      width:min(1100px, calc(100% - 18px));
      background:#fff;
      border-radius:16px;
      box-shadow:0 18px 60px rgba(0,0,0,.25);
      z-index:9999;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
    }
    .sc-mega-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08)}
    .sc-mega-title{font-weight:900}
    .sc-mega-close{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;padding:0 6px}
    .sc-mega-body{display:grid;grid-template-columns: 1fr 1.2fr;min-height:320px}
    .sc-mega-families{padding:10px;border-right:1px solid rgba(0,0,0,.08);background:#fafafa}
    .sc-mega-family{width:100%;display:flex;align-items:center;gap:10px;border:0;background:transparent;
      padding:12px 12px;border-radius:14px;cursor:pointer;text-align:left}
    .sc-mega-family:hover{background:rgba(0,0,0,.06)}
    .sc-mega-family.active{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.10)}
    .sc-mega-ico{width:28px;height:28px;object-fit:contain}
    .sc-mega-emoji{font-size:22px;width:28px;display:inline-flex;justify-content:center}
    .sc-mega-family-label{font-weight:800;font-size:15px}
    .sc-mega-chevron{margin-left:auto;color:#555;font-size:22px}
    .sc-mega-cats{padding:12px 14px}
    .sc-mega-cats-panel{display:none}
    .sc-mega-cats-panel.active{display:block}
    .sc-mega-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
    .sc-mega-link{display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:#111;
      padding:12px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.08)}
    .sc-mega-link:hover{background:rgba(0,0,0,.04)}
    .sc-mega-has-children{list-style:none}
    .sc-mega-subbtn{width:100%;display:flex;align-items:center;justify-content:space-between;
      background:#fff;color:#111;padding:12px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.08);
      cursor:pointer;font:inherit;text-align:left}
    .sc-mega-subbtn:hover{background:rgba(0,0,0,.04)}
    .sc-mega-subbtn-label{display:block}
    .sc-mega-subwrap{display:block}
    .sc-mega-empty{padding:14px;color:#666}

    /* Mega menu : navigation "drill-down" (familles -> sous-catégories) */
    .sc-mega-body{min-height:0}
    .sc-mega-families, .sc-mega-cats{min-height:0}

    .sc-mega-back{
      border:0;background:transparent;cursor:pointer;
      width:40px;height:40px;border-radius:12px;
      display:inline-flex;align-items:center;justify-content:center;
      font-size:26px;line-height:1;color:#111;
    }
    .sc-mega-back:hover{background:rgba(0,0,0,.06)}

    @media (max-width: 860px){
      /* un seul écran à la fois */
      .sc-mega-body{grid-template-columns:1fr}
      .sc-mega-families{border-right:0;border-bottom:0}
      .sc-mega-cats{display:none}
      .sc-mega-panel.sc-drill .sc-mega-families{display:none}
      .sc-mega-panel.sc-drill .sc-mega-cats{display:block}
      .sc-mega-panel.sc-drill #scMegaBack{display:inline-flex !important}
      .sc-mega-panel.sc-drill #scMegaBack[hidden]{display:inline-flex !important}
    }


    @media (max-width: 860px){
      .sc-mega-panel{top:64px;bottom:10px}
      .sc-mega-body{grid-template-columns: 1fr}
      .sc-mega-families{border-right:0;border-bottom:1px solid rgba(0,0,0,.08)}
    }

    /* Menu modules (en haut) */
    .modules-menu{max-width:1100px;margin:0 auto;display:flex;gap:10px;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding:10px 12px}
    .modules-menu a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;text-decoration:none;font-weight:800;font-size:12px;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.22);white-space:nowrap}
    .modules-menu a:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.28)}
    .modules-menu a.active{background:#fff;border-color:#fff;color:#0b3a78}
    .modules-menu{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.38) transparent; }
    .modules-menu::-webkit-scrollbar{ height: 6px; }
    .modules-menu::-webkit-scrollbar-track{ background: transparent; }
    .modules-menu::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.38); border-radius: 999px; }
    

    /* Layout */
    .wrap{max-width:1100px;margin:0 auto;padding:22px 16px 28px}
    .card{background:var(--card-bg);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:18px}
    h1{margin:0 0 8px;font-size:26px} h2{margin:0 0 10px;font-size:20px} p.hint{color:#555;margin:0 0 12px}
    label{display:block;margin:8px 0 4px;font-weight:600}.req::after{content:" *";color:#d00;font-weight:700}
    input[type=text],input[type=number],select,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;background:#fff}
    textarea{min-height:100px}
    .grid{display:grid;gap:16px}
    .grid-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
    .grid-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
    .row{display:flex;gap:10px;align-items:center}
    .qty{width:110px}
    .actions{text-align:center;margin-top:16px}

    /* Boutons */
    button[type=submit],.btn{cursor:pointer;border:0;border-radius:10px;padding:12px 20px;background:var(--brand);color:#fff;font-weight:700;box-shadow:0 2px 0 rgba(0,0,0,.08)}
    button[type=submit]:hover,.btn:hover{background:var(--brand-hover)} small.muted{color:#777}
    .btn.outline{background:transparent;border:1px solid #fff;color:#fff}

    /* Instagram button */
    .ig-btn{
      display:inline-flex; align-items:center; gap:10px;
      padding:10px 16px; border-radius:999px; border:0; text-decoration:none;
      color:#fff; font-weight:700; line-height:1; cursor:pointer;
      background: radial-gradient(109% 109% at 14% 100%,
                  #feda75 0%, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5 100%);
      box-shadow:0 4px 14px rgba(0,0,0,.18); transform:translateY(0);
      transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
    }
    .ig-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.22); filter:saturate(1.05) }
    .ig-btn:focus-visible{ outline:3px solid #99c2f0; outline-offset:3px }
    .ig-icon{
      width:20px; height:20px; display:inline-block; flex:0 0 20px;
      filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
    }
    .ig-text{ letter-spacing:.2px; white-space:nowrap }

    /* Vignettes produits */
    .product{border:1px solid #eee;border-radius:12px;padding:12px 12px 12px 64px;background:#fff;display:flex;flex-direction:column;gap:10px;position:relative}
    .product::before{content:"";position:absolute;left:-20px;top:-6px;bottom:-6px;width:56px;background:url('/images/Logo.png') center/contain no-repeat;pointer-events:none}
    @media (max-width:600px){.product{padding-left:56px}.product::before{left:-16px;width:48px}}
    .thumb{width:100%;height:160px;background:#fafafa;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
    .product img{width:100%;height:100%;object-fit:contain;display:block}

    /* Cartes d'accueil */
    .container{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;padding:28px 16px 40px}
    .card.home{background:#fff;border-radius:12px;width:300px;box-shadow:0 4px 12px rgba(0,0,0,0.1);text-align:center;overflow:hidden;transition:transform .2s}
    .card.home:hover{transform:translateY(-5px)}
    .card.home img{width:100%;height:200px;object-fit:cover;display:block}
    .card.home h2{font-size:20px;margin:15px 12px 8px}
    .card.home p{font-size:14px;padding:0 15px 16px;color:#555;margin:0}
    .card.home .cta{display:inline-block;margin:0 0 18px;padding:10px 18px;background:var(--brand);color:#fff;text-decoration:none;border-radius:6px}
    .card.home > a.wrap{display:block;color:inherit;text-decoration:none}
    .card.home > a.wrap:focus-visible{outline:3px solid #99c2f0;outline-offset:3px}

    /* Footer */
    footer.sc-footer{background:var(--footer-bg);color:#fff;padding:28px 16px 34px;font-size:14px;margin-top:22px}
    .footer-container{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--gap-lg);max-width:1100px;margin:0 auto;align-items:start}
    .footer-block{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:16px;box-shadow:0 8px 24px rgba(0,0,0,0.25) inset,0 2px 10px rgba(0,0,0,0.08);backdrop-filter:blur(4px)}
    .footer-block h3{margin:0 0 10px;font-size:18px}.footer-block p{margin:4px 0}
    .footer-block a{color:#fff;text-decoration:none}.footer-block a:hover{text-decoration:underline}
    .dot{display:inline-block;width:10px;height:10px;border-radius:50%}.dot-open{background:#29d64c;box-shadow:0 0 6px rgba(41,214,76,.7)}.dot-closed{background:#d62929;box-shadow:0 0 6px rgba(214,41,41,.7)}
    .hours-list{margin-top:10px;display:grid;grid-template-columns:14px 100px 1fr;align-items:center;column-gap:12px;row-gap:8px}
    .hours-row{display:contents}.hours-row .day{font-weight:600;white-space:nowrap}.hours-row .time{color:#ddd}.hours-row.current .day{text-decoration:underline}.hours-row.current .time{color:#fff}
    .sanit-brand{display:flex;align-items:center;gap:12px}.sanit-logo{width:48px;height:48px;object-fit:contain;border-radius:10px;background:#fff;padding:4px}
    .sanit-title{margin:0;font-size:20px;line-height:1.1}.sanit-sub{margin:4px 0 0;font-size:12px;opacity:.9}
    .sanit-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
    .sanit-info p.address{margin:0 0 10px;line-height:1.4}
    .legal{margin-top:8px;opacity:.8;font-size:12px}

    @media (max-width:900px){.footer-container{grid-template-columns:1fr 1fr;gap:var(--gap-md)}.hours-list{grid-template-columns:14px 90px 1fr}}
    @media (max-width:600px){.sc-nav-inner{padding:8px 10px}.sc-brand-logo{height:30px}.footer-container{grid-template-columns:1fr;gap:var(--gap-sm)}.hours-list{grid-template-columns:14px auto 1fr}.hours-row .time{white-space:normal;line-height:1.4}}
  
    /* Safety: keep menu bar sticky in viewport */


    /* Header image centering */
    .sc-header-center{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      pointer-events:none;
    }
    .sc-header-center img{
      max-height:40px;
      width:auto;
      display:block;
    }
    @media (max-width:600px){
      .sc-header-center img{max-height:36px}
    }


    /* Mobile: replace logo with header image in the bar */
    @media (max-width:600px){
      .sc-nav-logo-badge{display:none !important}
      .sc-header-center{
        position:static;
        transform:none;
        margin-right:10px;
        pointer-events:auto;
      }
      .sc-nav-inner{
        justify-content:flex-start;
      }
    }


/* ==============================
   ROBINETTERIE (migré depuis /robinet/*.php)
   Objectif : aucun style inline, tout centralisé ici.
   ============================== */

/* --- /robinet/menu-robinet.php --- */
      .sc-r-wrap{max-width:1240px;margin:0 auto;padding:0 14px;}
      .sc-band{margin:10px auto 12px;}
      .sc-band-inner{
        display:flex;gap:0;overflow:auto;
        border-radius:14px;border:1px solid rgba(0,0,0,.14);
        background:rgba(255,255,255,.92);
        box-shadow:0 10px 24px rgba(0,0,0,.06);
        scrollbar-width:thin;
      }
      .sc-band-inner a{
        display:inline-flex;align-items:center;justify-content:center;
        padding:12px 16px;white-space:nowrap;
        font-weight:950;font-size:13px;letter-spacing:.02em;
        text-decoration:none;color:#1e232b;
        border-right:1px solid rgba(0,0,0,.08);
        transition:transform .12s ease, background .12s ease;
      }
      .sc-band-inner a:last-child{border-right:0;}
      .sc-band-inner a:hover{background:rgba(0,0,0,.04);}
      .sc-band-inner a.active{background:#1e232b;color:#fff;}
      .sc-band-inner a .mini{opacity:.7;font-weight:800;margin-left:8px;font-size:12px}
      /*
        IMPORTANT :
        Le header global (config.php) utilise aussi la classe .sc-mega pour le menu "Produits" (burger).
        Ici, c'est un mega-menu interne à /robinet : on préfixe en sc-r-mega* pour éviter tout conflit.
      */
      .sc-r-mega-wrap{position:relative;}
      .sc-r-mega{
        display:none;
        margin-top:10px;
        border-radius:16px;
        border:1px solid rgba(0,0,0,.14);
        background:rgba(255,255,255,.96);
        box-shadow:0 18px 40px rgba(0,0,0,.10);
        overflow:hidden;
      }
      .sc-r-mega.open{display:block;}
      .sc-r-mega-head{
        display:flex;align-items:center;justify-content:space-between;
        padding:12px 14px;border-bottom:1px solid rgba(0,0,0,.08);
      }
      .sc-r-mega-title{font-weight:950;letter-spacing:.02em;font-size:13px;opacity:.86}
      .sc-r-mega-close{border:0;background:transparent;font-size:18px;cursor:pointer;opacity:.7}
      .sc-r-mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:12px;}
      @media (max-width:980px){.sc-r-mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
      @media (max-width:520px){.sc-r-mega-grid{grid-template-columns:1fr;}}
      .sc-r-mega-col{
        border-radius:14px;border:1px solid rgba(0,0,0,.10);
        background:rgba(0,0,0,.02);padding:10px;
      }
      .sc-r-mega-col h4{margin:0 0 8px 0;font-size:12px;font-weight:950;letter-spacing:.02em;opacity:.82}
      .sc-r-mega-links{display:flex;flex-wrap:wrap;gap:8px;}
      .sc-r-mega-links a{
        display:inline-flex;align-items:center;
        padding:8px 10px;border-radius:999px;
        border:1px solid rgba(0,0,0,.12);
        background:rgba(255,255,255,.90);
        text-decoration:none;color:#1e232b;font-weight:850;font-size:12px;
      }
      .sc-r-mega-links a:hover{background:#1e232b;color:#fff;border-color:#1e232b;}
      .sc-r-mega-panel{display:none;}
    
/* Mega-menu : blocs par famille (sans marque) */
.sc-r-mega-all{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding:14px;
}
@media (max-width: 980px){
  .sc-r-mega-all{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 640px){
  .sc-r-mega-all{grid-template-columns: 1fr;}
}
.sc-r-mega-block{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  overflow:hidden;
}
.sc-r-mega-block-head{
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:rgba(0,0,0,.02);
}
.sc-r-mega-block h4{
  margin:0;
  font-size:13px;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:950;
  opacity:.9;
}
.sc-r-mega-block .sc-r-mega-links{padding:10px 12px 12px;}
.sc-r-mega-empty{padding:10px 12px 12px;opacity:.78;font-weight:800;}
    

/* --- /robinet/product-robinet.php --- */
      :root{
        --sc-max:1240px;
        --sc-pad:14px;
        --sc-radius:18px;
        --sc-radius-sm:14px;
        --sc-bd: rgba(0,0,0,.12);
        --sc-bg: rgba(255,255,255,.92);
        --sc-ink:#1e232b;
        --sc-muted: rgba(30,35,43,.72);
        --sc-shadow: 0 18px 40px rgba(0,0,0,.10);
        --sc-shadow-sm: 0 10px 24px rgba(0,0,0,.06);
        --sc-primary:#0b6dcf;
        --sc-primary-2:#0856a4;
        --sc-ring: 0 0 0 4px rgba(11,109,207,.18);
      }
      .sc-container{max-width:var(--sc-max);margin:0 auto;padding:0 var(--sc-pad);}
      .sc-centerline{display:flex;justify-content:center;}
      .update-badge{
        display:inline-flex;align-items:center;gap:10px;
        padding:10px 14px;border-radius:999px;
        border:1px solid var(--sc-bd);
        background:var(--sc-bg);
        backdrop-filter: blur(8px);
        box-shadow: var(--sc-shadow-sm);
        font-weight:950;font-size:12px;letter-spacing:.02em;
        margin:10px auto 14px;
      }
      .update-badge .dot{width:10px;height:10px;border-radius:999px;background:#1e232b;display:inline-block;}
      .update-badge .label{opacity:.72}
      .update-badge .date{font-weight:1000}

      .sc-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 10px;}
      .sc-h1{font-size:18px;font-weight:1000;letter-spacing:.01em;color:var(--sc-ink);margin:0;}
      .sc-sub{font-size:12px;font-weight:850;color:var(--sc-muted);margin:0;}
      .sc-kpis{display:flex;gap:8px;flex-wrap:wrap;}
      .sc-pill{
        display:inline-flex;gap:8px;align-items:center;
        padding:8px 10px;border-radius:999px;
        border:1px solid var(--sc-bd);
        background:var(--sc-bg);
        box-shadow: var(--sc-shadow-sm);
        font-weight:900;font-size:12px;color:var(--sc-ink);
      }
      .sc-pill b{font-weight:1000}

      .sc-tools{
        display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;
        margin: 10px 0 12px;
        padding:14px 14px;
        border-radius:var(--sc-radius);
        border:1px solid rgba(11, 109, 207, 0.77);
        background: linear-gradient(180deg, rgba(11, 109, 207, 0), var(--sc-bg));
        box-shadow: var(--sc-shadow-sm);
      }
      .sc-tools .left{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;}
      .sc-field{display:flex;flex-direction:column;gap:6px;min-width:220px;}
      .sc-field label{font-size:11px;font-weight:950;color:var(--sc-muted);letter-spacing:.01em;}
      .sc-field select{
        border:1px solid rgba(0,0,0,.14);
        border-radius:12px;
        padding:11px 40px 11px 12px;
        font-weight:900;
        outline:none;
        background:#fff;
        appearance:none;
        background-image:
          linear-gradient(45deg, transparent 50%, rgba(0,0,0,.45) 50%),
          linear-gradient(135deg, rgba(0,0,0,.45) 50%, transparent 50%);
        background-position:
          calc(100% - 18px) 50%,
          calc(100% - 12px) 50%;
        background-size:6px 6px, 6px 6px;
        background-repeat:no-repeat;
      }
      .sc-field select:focus{
        border-color: rgba(11,109,207,.55);
        box-shadow: var(--sc-ring);
      }
      .sc-btn{
        border:1px solid rgba(11,109,207,.45);
        border-radius:12px;
        padding:11px 14px;
        font-weight:1000;
        cursor:pointer;
        background:var(--sc-primary);
        color:#fff;
        display:inline-flex;align-items:center;gap:8px;
        text-decoration:none;
        transition: transform .08s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
      }
      .sc-btn:hover{background:var(--sc-primary-2);border-color: rgba(11,109,207,.65);}
      .sc-btn:focus-visible{outline:none;box-shadow: var(--sc-ring);}
      .sc-btn.secondary{
        background:#fff;
        color:var(--sc-ink);
        border-color: rgba(0,0,0,.14);
      }
      .sc-btn.secondary:hover{background:rgba(11,109,207,.06);border-color: rgba(11,109,207,.28);}
      .sc-btn.stock{
        background:#fff;
        color:var(--sc-ink);
        border-color: rgba(0,0,0,.14);
      }
      .sc-btn.stock:hover{background:rgba(11,109,207,.06);border-color: rgba(11,109,207,.28);}
      .sc-btn.stock.on{
        background:#0c5a2a;
        border-color:#0c5a2a;
        color:#fff;
      }
      .sc-btn.stock.on:hover{background:#09451f;border-color:#09451f;}
      .sc-btn:active{transform: translateY(1px);}

      /* WC (et réutilisable) : filtre "En stock" plus visible (case cochée / case vide) */
      .sc-stock-check{display:inline-flex;}
      .sc-stock-check input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
      .sc-stock-ui{
        display:inline-flex;align-items:center;gap:10px;
        padding:12px 16px;
        border:1px solid rgba(11,109,207,.22);
        border-radius:12px;
        font-weight:1000;
        cursor:pointer;
        user-select:none;
        background:#fff;
        color:var(--sc-ink);
        transition: transform .08s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
      }
      .sc-stock-ui:hover{background:rgba(11,109,207,.06);border-color: rgba(11,109,207,.28);}
      .sc-stock-ui:active{transform: translateY(1px);}

      .sc-stock-box{
        width:18px;height:18px;border-radius:4px;
        display:inline-flex;align-items:center;justify-content:center;
        border:2px solid rgba(11,109,207,.38);
        background:#fff;
        flex:0 0 18px;
      }

      .sc-stock-ui.is-on{
        background:var(--sc-primary);
        border-color: rgba(11,109,207,.65);
        color:#fff;
      }
      .sc-stock-ui.is-on:hover{background:var(--sc-primary-2);border-color: rgba(11,109,207,.65);}
      .sc-stock-ui.is-on .sc-stock-box{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.12);}
      .sc-stock-ui.is-on .sc-stock-box::after{content:"✓";font-weight:900;line-height:1;color:#fff;font-size:14px;}
      .sc-tools .right{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}


      .sc-search{
        display:flex;gap:10px;align-items:center;flex-wrap:wrap;
        margin: 10px 0 12px;
        padding:12px;
        border-radius:var(--sc-radius);
        border:1px solid var(--sc-bd);
        background:var(--sc-bg);
        box-shadow: var(--sc-shadow-sm);
      }
      .sc-search input[type="search"]{
        flex:1 1 320px;
        border:1px solid rgba(0,0,0,.14);
        border-radius:12px;
        padding:12px 12px;
        font-weight:850;
        outline:none;
      }
      .sc-search .btn{
        border:1px solid rgba(0,0,0,.14);
        background:#1e232b;color:#fff;
        border-radius:12px;
        padding:12px 14px;
        font-weight:950;cursor:pointer;
      }
      .sc-search .btn.secondary{
        background:rgba(0,0,0,.04);color:var(--sc-ink);
      }
      .sc-search .hint{font-size:12px;font-weight:850;color:var(--sc-muted);}

      .sc-grid{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        gap:14px;
        margin: 14px 0 18px;
      }
      @media (max-width:1100px){.sc-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
      @media (max-width:820px){.sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
      @media (max-width:520px){.sc-grid{grid-template-columns:1fr;}}

      .sc-card{
        border-radius:var(--sc-radius);
        border:1px solid var(--sc-bd);
        background:rgba(255,255,255,.96);
        box-shadow: var(--sc-shadow-sm);
        overflow:hidden;
        display:flex;flex-direction:column;
        min-height: 380px;
        transition: transform .12s ease, box-shadow .12s ease;
      }
      .sc-card:hover{transform: translateY(-2px); box-shadow: var(--sc-shadow);}
      .sc-media{
        position:relative;
        aspect-ratio: 4 / 3;
        background:rgba(0,0,0,.03);
        overflow:hidden;
      }
      .sc-media img{width:100%;height:100%;object-fit:contain;display:block;}
      .sc-badges{
        position:absolute;left:10px;top:10px;display:flex;gap:8px;flex-wrap:wrap;
      }
      .sc-badge{
        display:inline-flex;align-items:center;
        padding:7px 10px;border-radius:999px;
        border:1px solid rgba(0,0,0,.12);
        background:rgba(255,255,255,.92);
        font-weight:1000;font-size:11px;letter-spacing:.02em;
      }
      .sc-badge.new{background:#e8f1ff;border-color:#b7d3ff;color:#123a7a;}
      .sc-badge.top{background:#fff3d6;border-color:#ffd48a;color:#6b3e00;}
      .sc-badge.stock{background:#e9fff2;border-color:#bff3d4;color:#0c5a2a;}
      .sc-body{padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;flex:1;}
      .sc-title{
  font-weight:700;
  color:#fff;
  font-size:13px;
  line-height:1.35;

  white-space:normal;
  overflow:visible;

  padding:6px 8px;
  border:1px solid rgba(0,102,204,.25);
  border-radius:8px;
  background:rgba(0, 102, 204, 0.9);
}

      .sc-meta{display:flex;flex-wrap:wrap;gap:8px;font-weight:850;font-size:12px;color:var(--sc-muted);}
      .sc-meta span{padding:6px 8px;border-radius:999px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);}
      .sc-desc{
        color:rgba(30,35,43,.78);font-weight:800;font-size:12px;
        display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
        min-height: 3.6em;
      }
      .sc-foot{
        margin-top:auto;
        display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
      }
      .price{
  font-size:13px;
  font-weight:800;
  color:#0066cc;
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,102,204,.28);
  background:rgba(0,102,204,.08);
  line-height:1;
}
.price + .price{
  margin-left:6px;
  color:#fff;
  border-color:#0066cc;
  background:#0066cc;
  display:none;
}

      
      .price-na{font-size:13px;font-weight:950;color:rgba(30,35,43,.70);}
      .sc-ref{font-size:12px;font-weight:950;color:rgba(30,35,43,.70);}
      .sc-cta{
        display:inline-flex;align-items:center;justify-content:center;
        padding:10px 12px;border-radius:12px;
        border:1px solid rgba(0,0,0,.14);
        background:#1e232b;color:#fff;
        text-decoration:none;font-weight:1000;font-size:12px;
        white-space:nowrap;
      }

      .sc-empty{
        border-radius:var(--sc-radius);
        border:1px solid var(--sc-bd);
        background:var(--sc-bg);
        box-shadow:var(--sc-shadow-sm);
        padding:18px;
        font-weight:900;color:var(--sc-ink);
      }
      .sc-empty p{margin:6px 0 0;color:var(--sc-muted);font-weight:850}

      .sc-pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:10px 0 22px;}
      .sc-page{
        display:inline-flex;align-items:center;justify-content:center;
        min-width:42px;height:38px;
        padding:0 12px;border-radius:12px;
        border:1px solid rgba(0,0,0,.14);
        background:rgba(255,255,255,.92);
        text-decoration:none;font-weight:950;color:var(--sc-ink);
      }
      .sc-page.active{background:#1e232b;color:#fff;border-color:#1e232b;}
      .sc-page:hover{background:rgba(0,0,0,.04);}

      /* ===== Detail ===== */
      .sc-breadcrumb{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 10px;}
      .sc-breadcrumb a{color:var(--sc-ink);text-decoration:none;font-weight:950;font-size:12px;opacity:.85}
      .sc-breadcrumb .sep{opacity:.55;font-weight:1000}
      .sc-breadcrumb-ref{font-weight:1000;font-size:12px;opacity:.85}
      .sc-detail{
        display:grid;
        grid-template-columns: 1.1fr .9fr;
        gap:14px;
        margin: 10px 0 18px;
      }
      @media (max-width:980px){.sc-detail{grid-template-columns:1fr;}}
      .sc-panel{
        border-radius:var(--sc-radius);
        border:1px solid var(--sc-bd);
        background:rgba(255,255,255,.96);
        box-shadow: var(--sc-shadow-sm);
        overflow:hidden;
      }
      .sc-panel .pad{padding:14px;}
      .sc-gal{
        display:grid;
        grid-template-columns: 1fr;
        gap:10px;
      }
      .sc-gal-main{
        aspect-ratio: 4/3;
        background:rgba(0,0,0,.03);
        display:flex;align-items:center;justify-content:center;
      }
      .sc-gal-main img{max-width:100%;max-height:100%;object-fit:contain;}
      .sc-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
      .sc-thumb{
        width:72px;height:72px;border-radius:14px;
        border:1px solid rgba(0,0,0,.12);
        background:rgba(0,0,0,.03);
        display:flex;align-items:center;justify-content:center;
        overflow:hidden;cursor:pointer;
      }
      .sc-thumb img{width:100%;height:100%;object-fit:contain;}
      .sc-thumb.active{outline:3px solid rgba(30,35,43,.25);}

      .sc-h2{margin:0;font-size:18px;font-weight:1100;color:var(--sc-ink);line-height:1.2;}
      .sc-kv{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0;}
      .sc-kv .kv{
        padding:8px 10px;border-radius:14px;
        border:1px solid rgba(0,0,0,.10);
        background:rgba(0,0,0,.02);
        font-weight:950;font-size:12px;color:var(--sc-ink);
      }

      .sc-priceblock{margin:10px 0 0;}
      .sc-priceblock .sc-price{
        font-size:20px;
        font-weight:1200;
        color:#0066cc;
        letter-spacing:-.02em;
      }
      .sc-priceblock .sc-price-sub{
        margin-top:4px;
        font-size:14px;
        font-weight:1000;
        color:rgba(30,35,43,.80);
      }
      .sc-stockline{margin-top:6px;font-size:12px;font-weight:900;color:rgba(30,35,43,.72);}
      .sc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
      .sc-actions a,.sc-actions button{
        border:1px solid rgba(0,0,0,.14);
        border-radius:12px;
        padding:12px 14px;
        font-weight:1000;
        cursor:pointer;
        background:#1e232b;
        color:#fff;
        text-decoration:none;
      }
      .sc-actions .secondary{background:rgba(0,0,0,.04);color:var(--sc-ink);}
      .sc-specs{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:10px;
        margin-top:12px;
      }
      @media (max-width:520px){.sc-specs{grid-template-columns:1fr;}}
      .sc-spec{
        border-radius:14px;border:1px solid rgba(0,0,0,.10);
        background:rgba(0,0,0,.02);padding:10px;
      }
      .sc-spec .k{font-size:11px;font-weight:950;opacity:.7;margin-bottom:6px}
      .sc-spec .v{font-size:12px;font-weight:950;color:var(--sc-ink);white-space:pre-line}
      .sc-long{
        margin-top:12px;
        border-top:1px solid rgba(0,0,0,.08);
        padding-top:12px;
      }
      .sc-long h3{margin:0 0 8px;font-size:13px;font-weight:1100;color:var(--sc-ink);}
      .sc-long pre{
        margin:0;
        white-space:pre-wrap;
        font-family:inherit;
        font-weight:850;
        font-size:12px;
        color:rgba(30,35,43,.82);
        line-height:1.35;
      }
    

/* ==============================
   RECHERCHE GLOBALE (/recherche)
   ============================== */
.sc-search-page{max-width:1100px;margin:0 auto 60px;padding:0 16px}
.sc-page-title{margin:18px 0 10px;font-size:28px;font-weight:950;letter-spacing:.2px}
.sc-search-page-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 14px}
.sc-search-page-input{height:46px;flex:1 1 360px;min-width:240px;border-radius:999px;border:1px solid rgba(0,0,0,.14);padding:0 14px;background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.06)}
.sc-search-page-btn{height:46px;border-radius:999px;border:1px solid rgba(0,0,0,.14);background:#1e232b;color:#fff;font-weight:950;padding:0 16px;cursor:pointer}
.sc-search-page-btn:hover{filter:brightness(1.05)}
.sc-search-kpi{margin:8px 0 12px;font-weight:900;opacity:.85}
.sc-search-block{margin:16px 0 18px}
.sc-search-block-title{margin:0 0 10px;font-size:16px;font-weight:950;display:flex;align-items:center;gap:10px}
.sc-search-count{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:24px;border-radius:999px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.10);font-size:12px;padding:0 8px}
.sc-search-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:900px){.sc-search-list{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:560px){.sc-search-list{grid-template-columns:1fr;}}
.sc-search-item{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid rgba(0,0,0,.10);border-radius:16px;padding:12px 12px;box-shadow:0 12px 28px rgba(0,0,0,.06);transition:transform .12s ease, box-shadow .12s ease}
.sc-search-item:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(0,0,0,.09)}
.sc-search-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sc-search-item-label{font-weight:950;line-height:1.2}
.sc-search-item-ref{font-weight:950;opacity:.75;white-space:nowrap}
.sc-search-item-sub{margin-top:8px;font-size:13px;opacity:.75}

/* Résultats de recherche : vignette + texte (PC + mobile) */
.sc-search-item{display:flex;align-items:center;gap:12px}
.sc-search-thumb{width:64px;height:64px;flex:0 0 64px;border-radius:14px;border:1px solid rgba(0,0,0,.10);background:rgba(0,0,0,.04);object-fit:contain;display:block}
.sc-search-item-main{flex:1;min-width:0}
.sc-search-item-top{margin:0}
.sc-search-item-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-search-item-sub{margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-muted{opacity:.75}