/* === VARIABLES & RESET === */
:root{
  --bg:#f5f5f5;
  --text:#222;
  --muted:#333;
  --border:#ddd;
  --border-soft:#e0e0e0;
  --primary:#0077ff;
  --primary-2:#00bbff;
  --accent:#00ffb3;
  --accent-2:#00eb33;
  --success:#25dc14;
  --danger:#e22020;
  --shadow:0 2px 6px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 20px rgba(0,119,255,0.2);
  --shadow-soft:0 4px 12px rgba(0,0,0,0.07);
  --radius-s:6px;
  --radius-m:8px;
  --radius-l:10px;
  --radius-xl:12px;
  --radius-xxl:16px;
  --pad-s:6px;
  --pad-m:10px;
  --pad-l:14px;
  --pad-xl:16px;
  --pad-xxl:25px;
  --w-max:1200px;
}

*{margin:0;padding:0;box-sizing:border-box}
a,button,select,input{transition:all .3s ease-in-out}

body{
  font-family:'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  padding-top:130px; /* espace nav fixe */
}

/* === HEADER MASQUÉ & LOGO === */
.boutique-header{height:0;overflow:hidden;position:relative}
.boutique-header::before{
  content:"";
  position:fixed; top:0vw; left:5vw;
  width:6vw; height:6vw;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  z-index:1001;
}

/* === NAV SHOWROOM FIXE === */
.footer-nav{
  position:fixed; inset:0 auto auto 0;
  width:100vw; min-height:150px;
  background:#000; border-bottom:2px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px;
  padding:18px 20px; z-index:1000;
}
.footer-nav a{
  color:#fff; text-decoration:none; font-weight:bold; font-size:20px;
  padding:var(--pad-l) 20px; border-radius:var(--radius-s);
  border:1px solid transparent; transition:all .3s ease;
}
.footer-nav a:hover{color:var(--accent-2); border-color:var(--accent)}
.footer-nav a.active{background:var(--primary); color:#fff; border-color:var(--primary)}

/* === ZONE FILTRES === */
.filter-bar-wrapper{
  background:#fff; border:1px solid var(--border-soft);
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:var(--pad-xxl) 30px; margin:40px auto; border-radius:var(--radius-xxl);
  max-width:1100px; transition:all .3s ease-in-out;
}
.filter-bar-wrapper:hover{box-shadow:0 6px 18px rgba(0,119,255,.1)}
.filter-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:16px}
.filter-bar select,.filter-bar button{
  padding:var(--pad-m) 16px; font-size:1rem; font-weight:bold;
  background:#fff; color:var(--muted); border:2px solid #ccc; border-radius:var(--radius-m);
  cursor:pointer; min-width:150px; box-shadow:0 2px 5px rgba(0,0,0,.05)
}
.filter-bar select:hover,.filter-bar button:hover{
  background:var(--primary); color:#fff; border-color:var(--primary)
}

/* === SECTIONS / TITRES === */
.category-section{
  max-width:var(--w-max); margin:50px auto; background:#fff; border-radius:var(--radius-xxl);
  box-shadow:0 2px 12px rgba(0,0,0,.08); padding:30px; border:1px solid var(--border-soft)
}
.category-section h2{
  font-size:1.6rem; color:var(--primary); margin-bottom:20px; text-align:center;
  border-bottom:1px solid var(--border); padding-bottom:10px; text-shadow:0 1px 2px rgba(0,0,0,.15)
}

/* === GRILLE PRODUITS (colonnes dynamiques) === */
.category-block{display:grid; gap:20px; justify-items:center}
body.columns-1 .category-block{grid-template-columns:1fr}
body.columns-2 .category-block{grid-template-columns:repeat(2,1fr)}
body.columns-3 .category-block{grid-template-columns:repeat(3,1fr)}
body.columns-4 .category-block{grid-template-columns:repeat(4,1fr)}

/* === CARTE PRODUIT === */
.product-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-l);
  box-shadow:var(--shadow); overflow:hidden; width:100%; max-width:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  min-height:340px; transition:transform .2s ease, box-shadow .2s ease;
}
.product-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}

.product-image{width:100%; height:460px; position:relative; overflow:hidden}
.product-image img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease}
.product-image:hover img{transform:scale(1.05)}

.product-info{padding:16px; display:flex; flex-direction:column; gap:8px}
.product-info h3{font-size:1.1rem; color:var(--text); margin:0}
.product-price{font-weight:bold; color:var(--primary)}

.product-info button{
  padding:6px 12px; border:none; border-radius:var(--radius-m); cursor:pointer;
  background:linear-gradient(to right, var(--primary), var(--primary-2)); color:#fff;
}
.product-info button:hover{filter:brightness(1.1)}

.extra-info{font-size:.9rem; color:#444; margin-top:10px; list-style:none; padding-left:0}
.hidden{display:none}

/* === LIGHTBOX === */
.lightbox{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.85); z-index:1000;
  justify-content:center; align-items:center; flex-direction:column;
}
.lightbox:not(.hidden){display:flex}
#lightboxContent img,#lightboxContent video{
  max-width:90vw; max-height:90vh; border-radius:8px; box-shadow:0 0 15px rgba(255,255,255,.3)
}
.close-btn,.nav.prev,.nav.next{
  position:absolute; font-size:2rem; color:#fff; cursor:pointer; user-select:none; display:none;
  transition:transform .2s ease
}
.lightbox:not(.hidden) .close-btn,
.lightbox:not(.hidden) .nav.prev,
.lightbox:not(.hidden) .nav.next{display:block}
.close-btn{top:20px; right:30px}
.nav.prev{top:50%; left:30px; transform:translateY(-50%)}
.nav.next{top:50%; right:30px; transform:translateY(-50%)}
.close-btn:hover,.nav.prev:hover,.nav.next:hover{transform:scale(1.2)}

/* === CONTACT === */
#contactSection{
  max-width:600px; margin:60px auto; background:#fff; padding:20px 30px;
  border-radius:var(--radius-xl); box-shadow:0 2px 10px rgba(0,0,0,.08); border:1px solid var(--border); color:#333
}
#contactSection p{margin:10px 0}
#contactSection input{
  width:60%; padding:6px 10px; margin-right:8px; border:1px solid #ccc; border-radius:var(--radius-m)
}
#contactSection button{
  padding:6px 12px; background:var(--primary); border:none; color:#fff; border-radius:var(--radius-m); cursor:pointer
}
#copyMsg{display:inline-block; margin-left:10px; color:green; font-weight:bold}

/* === BOUTON RETOUR FIXE === */
.back-btn{
  position:fixed; bottom:20px; left:20px;
  background:#fff; padding:10px 16px; border-radius:10px; font-weight:bold; text-align:center; text-decoration:none;
  border:1px solid #ccc; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:1500; color:var(--primary);
  font-size:1rem; max-width:250px; width:fit-content; transition:all .3s ease
}
.back-btn:hover{background:var(--primary); color:#fff; border-color:var(--primary)}

/* === PRIX / SOLDES === */
.prix-original{text-decoration:line-through; color:var(--danger); margin-right:8px}
.prix-solde{color:var(--success); font-weight:bold; font-size:1.2em}

.banniere-soldes{
  overflow:hidden; background:#222; padding:10px 0;
  border-top:2px solid red; border-bottom:2px solid red; /* conserve tes couleurs actuelles */
}
.banniere-soldes .defilement{display:flex; gap:20px; animation:defilement 30s linear infinite}
.item-solde{
  flex:0 0 auto; display:flex; align-items:center; background:#111; border:1px solid #444;
  border-radius:6px; padding:6px 10px; color:#fff
}
.item-solde img{width:40px; height:40px; object-fit:cover; margin-right:8px; border-radius:4px}
.item-solde .info{font-size:.9em}
.item-solde .old{text-decoration:line-through; color:#888; margin-right:5px}
.item-solde .new{color:#ff4444; font-weight:bold}

@keyframes defilement{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* === TABLETTE (601–1024px) === */
@media (min-width:601px) and (max-width:1024px){
  body.columns-3 .category-block{grid-template-columns:repeat(3,1fr)}
  body.columns-4 .category-block{grid-template-columns:repeat(4,1fr)}
}

/* === MOBILE (<=768px) — tout regroupé === */
@media (max-width:768px){
  /* Logo */
  .boutique-header::before{top:2vw; left:2vw; width:17vw; height:17vw}

  /* Grilles */
  body.columns-1 .category-block{grid-template-columns:1fr}
  body.columns-2 .category-block{grid-template-columns:repeat(2,1fr)}
  body.columns-3 .category-block{grid-template-columns:repeat(2,1fr)}
  body.columns-4 .category-block{grid-template-columns:repeat(2,1fr)}

  .category-block{justify-items:center}
  .product-card{min-height:auto}
  .product-image{height:180px}
  .product-info{padding:8px; gap:4px}
  .product-info h3{font-size:1rem}
  .product-price{font-size:.95rem}
  .product-info button{font-size:.9rem; padding:5px 10px}

  /* Nav / titres / boutons */
  .footer-nav a{font-size:16px; padding:10px 14px}
  .boutique-title{font-size:1.2rem; text-align:center}
  .btn-group a{display:block; margin:4px auto; font-size:.9rem}

  /* Filtres */
  .filtrage-container{flex-direction:column; align-items:center}
  .filtrage-container input,.filtrage-container select{width:90%; margin-bottom:10px}
  #colSelect{width:100%}

  /* Bannière soldes */
  .banniere-soldes .defilement{gap:10px; animation-duration:15s}
  .item-solde{padding:4px 6px; font-size:.8rem}
  .item-solde img{width:30px; height:30px}

  /* Contact */
  #contactSection input{width:100%; margin:10px 0}

  /* Bouton retour centré en bas */
  .back-btn{
    font-size:.9rem; padding:8px 12px; border-radius:8px; max-width:90%;
    left:50%; transform:translateX(-50%)
  }

  /* Grille utilitaire */
  .grid{display:grid; grid-template-columns:1fr !important; gap:20px}

  /* Infos boutique */
  .infos-boutique{flex-direction:column; gap:10px}
  .infos-boutique .col{width:100%}
}

/* === NAV + LOGO (version unifiée) =================================== */
:root{
  --nav-logo-size: 250px;          /* ← change juste ça pour agrandir/rétrécir */
  --nav-left-gap: 32px;           /* espace entre logo et liens */
}

/* Nav fixée en haut */
.footer-nav{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100vw !important;
  z-index: 2000;
  border-radius: 0 !important;
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 2px 12px rgba(0,255,221,1);
  padding: 16px 20px;
  /* on réserve la place du logo à gauche */
  padding-left: calc(var(--nav-logo-size) + var(--nav-left-gap)) !important;
}

/* Logo toujours dans la barre (desktop + mobile) */
.footer-nav::before{
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--nav-logo-size);
  height: var(--nav-logo-size);
  background: url('/BizCreator/Modules/Boutiques/uploads/Eden_Carrelages_eden_carrelages/logo_68a4978246b0d.png')
              center / contain no-repeat;
  pointer-events: none;
  z-index: 2001;
  image-rendering: -webkit-optimize-contrast; /* rendu plus net sur écrans denses */
}

/* on désactive l’ancien logo flottant */
.boutique-header::before{ display: none !important; }

/* Décalage du contenu sous la nav (ajuste si besoin) */
body{ padding-top: 190px !important; }

/* Mobile : tailles légèrement réduites (optionnel) */
@media (max-width: 768px){
  :root{
    --nav-logo-size: 100px;        /* mets 64/72 si tu veux aussi gros sur mobile */
    --nav-left-gap: 24px;
  }
  .footer-nav::before{ left: 12px; }
  /* si la nav devient plus haute, ajuste ici */
  body{ padding-top: 190px !important; }
}