:root{
  --ink:#1F2937;
  --dark-surface:#1F2937;
  --concrete:#6B7280;
  --concrete-light:#F1F5F9;
  --paper:#F8FAFC;
  --card-soft:#FFF7ED;
  --card-soft-strong:#FFEDD5;
  --signal:#F97316;
  --signal-hover:#EA580C;
  --blue:#2563EB;
  --blue-bg:#EFF6FF;
  --ok:#22C55E;
  --ok-bg:#EAFBF1;
  --warn:#D97706;
  --warn-bg:#FEF3E2;
  --danger:#DC2626;
  --danger-bg:#FDEAEA;
  --white:#FFFFFF;
  --display:'Poppins', sans-serif;
  --body:'Poppins', sans-serif;
  --mono:'Poppins', sans-serif;
  --radius-sm:14px;
  --radius-md:18px;
  --radius-lg:24px;
  --shadow-soft:0 2px 16px rgba(31,41,55,0.06);
  --shadow-hover:0 8px 28px rgba(31,41,55,0.12);
}

[data-theme="dark"]{
  --ink:#F1F5F9;
  --concrete:#9CA3AF;
  --concrete-light:#374151;
  --paper:#0F172A;
  --card-soft:#1F2937;
  --card-soft-strong:#3F2A1A;
  --signal:#F97316;
  --signal-hover:#FB923C;
  --blue:#60A5FA;
  --blue-bg:#1E3A5F;
  --ok:#4ADE80;
  --ok-bg:#14532D;
  --warn:#FBBF24;
  --warn-bg:#78350F;
  --danger:#F87171;
  --danger-bg:#7F1D1D;
  --white:#1E293B;
  --shadow-soft:0 2px 16px rgba(0,0,0,0.25);
  --shadow-hover:0 8px 28px rgba(0,0,0,0.4);
}
[data-theme="dark"] .hero-banner{
  background:linear-gradient(135deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.65) 55%, rgba(249,115,22,0.3) 145%), url('/img/hero/construction-site.jpg');
  background-size:cover; background-position:center;
}
[data-theme="dark"] .brand-mark line{ stroke:#F1F5F9; }
*{box-sizing:border-box; margin:0; padding:0;}
html{ background:var(--paper); scroll-behavior:smooth; overflow-x:hidden; }
body{
  font-family:var(--body); background:var(--paper); color:var(--ink);
  max-width:480px; margin:0 auto; min-height:100vh; padding-bottom:84px;
}

/* Pages "flux" (panier, stock, livraison, point de vente) restent lisibles
   sans devenir un formulaire démesurément large sur grand écran. */
body.narrow{ max-width:480px; }
@media (min-width:700px){ body.narrow{ max-width:620px; } }
@media (min-width:1024px){ body.narrow{ max-width:720px; } }

/* Le catalogue, lui, exploite l'espace disponible avec une grille de cartes. */
@media (min-width:700px){ body{ max-width:760px; } }
@media (min-width:1024px){ body{ max-width:1120px; } }

.app-header{ padding:22px 18px 6px; }
.header-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.auth-status{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; flex-shrink:1; min-width:0; }
.theme-toggle-btn{
  background:var(--concrete-light); border:none; width:32px; height:32px; border-radius:50%;
  font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform 0.15s;
}
.theme-toggle-btn:hover{ transform:scale(1.08); }

@keyframes skeletonShimmer{
  0%{ background-position:-200px 0; }
  100%{ background-position:calc(200px + 100%) 0; }
}
.skeleton{
  background:linear-gradient(90deg, var(--concrete-light) 25%, rgba(255,255,255,0.7) 37%, var(--concrete-light) 63%);
  background-size:400px 100%; animation:skeletonShimmer 1.4s ease-in-out infinite; border-radius:8px;
}
[data-theme="dark"] .skeleton{
  background:linear-gradient(90deg, var(--concrete-light) 25%, rgba(255,255,255,0.08) 37%, var(--concrete-light) 63%);
  background-size:400px 100%;
}
.skeleton-card{ background:var(--white); border-radius:var(--radius-lg); padding:18px; margin:0 18px 16px; box-shadow:var(--shadow-soft); border:1px solid rgba(31,41,55,0.06); }
.skeleton-line{ height:12px; margin-bottom:8px; }
.skeleton-line.w-60{ width:60%; }
.skeleton-line.w-40{ width:40%; }
.skeleton-line.w-30{ width:30%; }
.skeleton-row{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.skeleton-circle{ width:34px; height:34px; border-radius:50%; flex-shrink:0; }

.sidebar{
  display:none; position:fixed; top:0; left:0; bottom:0; width:220px; z-index:50;
  background:var(--white); border-right:1px solid rgba(31,41,55,0.07);
  padding:26px 16px; flex-direction:column; gap:6px;
  overflow-y:auto;
}
.sidebar-brand{
  font-family:var(--display); font-weight:800; font-size:18px; display:flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--ink); margin-bottom:22px; padding:0 10px;
}
.sidebar-brand span{ color:var(--signal); }
.sidebar-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
.sidebar-link{
  display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px;
  text-decoration:none; color:var(--concrete); font-size:13.5px; font-weight:600;
  transition:background 0.2s, color 0.2s;
}
.sidebar-link:hover{ background:var(--concrete-light); }
.sidebar-link.active{ background:var(--card-soft); color:var(--signal); }
.sidebar-icon{ font-size:16px; width:20px; text-align:center; }
.sidebar-footer{ border-top:1px solid rgba(31,41,55,0.07); padding-top:10px; margin-top:10px; }
.sidebar-link-muted{ color:var(--concrete); }

@media (min-width:1024px){
  .sidebar{ display:flex; }
  body{ margin-left:236px; margin-right:auto; }
}
.auth-hello{ font-family:var(--mono); font-size:11px; color:var(--concrete); max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.auth-link{ font-family:var(--mono); font-size:11px; text-decoration:none; color:var(--concrete); font-weight:600; }
.auth-link-primary{ color:var(--signal); font-weight:700; }

.btn-primary{
  display:block; width:calc(100% - 36px); margin:0 18px 24px; background:var(--signal); color:white;
  border:none; padding:15px; border-radius:100px; font-size:14px; font-weight:700; cursor:pointer; font-family:var(--body);
  text-align:center; transition:background 0.2s, transform 0.15s; box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ background:var(--signal-hover); transform:translateY(-1px); }
.btn-primary:active{ transform:scale(0.97); }
.btn-primary:disabled{ background:var(--concrete-light); color:var(--concrete); cursor:not-allowed; transform:none; box-shadow:none; }
.btn-outline{
  display:block; width:calc(100% - 36px); margin:0 18px 24px; background:none; color:var(--ink);
  border:1.5px solid var(--concrete-light); padding:14px; border-radius:100px; font-size:13.5px; font-weight:600;
  cursor:pointer; font-family:var(--body); text-align:center; transition:border-color 0.2s, transform 0.15s;
}
.btn-outline:hover{ border-color:var(--ink); transform:translateY(-1px); }
.btn-outline:active{ transform:scale(0.97); }
.app-header .brand{ font-family:var(--display); font-weight:800; font-size:20px; display:flex; align-items:center; gap:7px; }
.brand-mark{ flex-shrink:0; }

@keyframes brandDotPulse{
  0%, 100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.55; transform:scale(1.25); }
}
.brand-dot{
  transform-box:fill-box; transform-origin:center;
  animation:brandDotPulse 2s ease-in-out infinite;
}
.app-header .brand span{ color:var(--signal); }
.app-header h2{ font-family:var(--display); font-weight:800; font-size:21px; margin-top:12px; letter-spacing:-0.3px; }
.loc{ font-family:var(--mono); font-size:11px; color:var(--concrete); font-weight:600; }

@media (min-width:700px){
  .app-header h2{ font-size:25px; }
}

.catrow{ display:flex; gap:8px; overflow-x:auto; padding:12px 18px; }
.catrow::-webkit-scrollbar{ display:none; }

.catrow-wrap{ position:relative; }
.catrow-wrap::before, .catrow-wrap::after{
  content:""; position:absolute; top:0; bottom:0; width:36px; z-index:2; pointer-events:none;
}
.catrow-wrap::before{ left:0; background:linear-gradient(to right, var(--paper), rgba(255,255,255,0)); }
.catrow-wrap::after{ right:0; background:linear-gradient(to left, var(--paper), rgba(255,255,255,0)); }
.catrow-wrap.no-scroll-left::before{ display:none; }
.catrow-wrap.no-scroll-right::after{ display:none; }
.catrow-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:36px; height:36px; border-radius:100px; border:none; background:var(--dark-surface); color:#fff;
  font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.2); opacity:0.92;
}
.catrow-arrow-left{ left:6px; }
.catrow-arrow-right{ right:6px; }
.catrow-arrow.hidden{ display:none; }

.banner-scroll{ display:flex; gap:10px; overflow-x:auto; padding:2px 18px 14px; }
.banner-scroll::-webkit-scrollbar{ display:none; }
.banner-item{
  flex-shrink:0; background:var(--card-soft); border-radius:16px; padding:10px 8px 9px;
  display:flex; flex-direction:column; align-items:center; gap:6px; width:88px;
}
.banner-item span{ font-size:10px; font-weight:600; color:var(--concrete); text-align:center; line-height:1.25; }
.banner-item-photo{ width:96px; padding:8px 8px 9px; }
.banner-item-photo img{ width:100%; height:96px; object-fit:cover; border-radius:10px; display:block; }
.banner-item-wide{ width:210px; padding:0; background:none; }
.banner-item-wide img{ width:100%; height:130px; object-fit:cover; border-radius:16px; display:block; }
.banner-caption{ font-size:11.5px; font-weight:600; color:var(--concrete); text-align:center; margin:2px 18px 14px; }

.banner-carousel{
  position:relative; margin:2px 18px 6px; border-radius:18px; overflow:hidden;
  background:var(--card-soft); max-width:700px;
}
.banner-carousel-track{
  display:flex; transition:transform 0.6s cubic-bezier(0.65,0,0.35,1);
}
.banner-carousel-slide{
  flex:0 0 100%; position:relative; height:170px;
}
@media (min-width:700px){ .banner-carousel-slide{ height:240px; } }
@media (min-width:1024px){ .banner-carousel-slide{ height:290px; } }
.banner-carousel-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.banner-carousel-slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:20px 16px 12px;
  background:linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color:#fff; font-size:12.5px; font-weight:700;
}
.banner-carousel-dots{
  position:absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px;
}
.banner-dot{
  width:6px; height:6px; border-radius:100px; background:rgba(255,255,255,0.55); cursor:pointer;
  transition:width 0.3s, background 0.3s;
}
.banner-dot.active{ width:18px; background:#fff; }

.banner-scene{
  margin:2px 18px 14px; background:var(--card-soft); border-radius:20px; padding:14px 14px 12px;
  display:flex; flex-direction:column; gap:8px;
}
.banner-scene span{ font-size:11.5px; font-weight:600; color:var(--concrete); text-align:center; }
.catchip{
  font-family:var(--body); font-size:12.5px; font-weight:600; border:none;
  padding:10px 16px; border-radius:100px; color:var(--concrete); white-space:nowrap; flex-shrink:0; cursor:pointer;
  background:var(--concrete-light); transition:background 0.2s, color 0.2s, transform 0.15s;
}
.catchip:hover{ transform:translateY(-1px); }
.catchip.active{ background:var(--signal); color:white; }
.catchip.disabled{ opacity:0.45; }

.hero-banner{
  margin:14px 18px 16px; border-radius:var(--radius-lg); padding:28px 22px 20px;
  background:linear-gradient(135deg, rgba(31,41,55,0.88) 0%, rgba(31,41,55,0.55) 55%, rgba(249,115,22,0.35) 145%), url('/img/hero/construction-site.jpg');
  background-size:cover; background-position:center;
  position:relative; overflow:hidden;
}
.hero-banner::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(120deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 18px);
  pointer-events:none;
}
.hero-title{
  position:relative; font-family:var(--display); font-weight:700; font-size:23px; line-height:1.28;
  color:#fff; letter-spacing:-0.01em;
}
.hero-accent{ color:var(--signal); }
.hero-trust-row{
  position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;
}
.hero-trust-item{
  display:flex; align-items:center; gap:6px; background:rgba(255,255,255,0.12); backdrop-filter:blur(4px);
  color:#fff; font-size:11px; font-weight:600; padding:8px 12px; border-radius:100px;
}
.hero-trust-icon{ font-size:12px; }

.section-h2{ font-family:var(--display); font-weight:700; font-size:19px; margin:4px 18px 12px; letter-spacing:-0.01em; }

.searchbar{
  display:flex; align-items:center; gap:8px; background:var(--white); border-radius:100px;
  padding:13px 18px; margin:0 18px 18px; box-shadow:var(--shadow-soft);
  border:1px solid rgba(31,41,55,0.06); transition:box-shadow 0.15s, border-color 0.15s;
}
.searchbar:focus-within{ border-color:var(--signal); box-shadow:0 0 0 3px rgba(249,115,22,0.15); }
.searchbar input{ border:none; background:none; outline:none; font-size:13.5px; flex:1; color:var(--ink); font-family:var(--body); }

.filtergroup{ margin:0 18px 16px; }
.flabel{ font-family:var(--body); font-size:11px; font-weight:700; color:var(--concrete); margin-bottom:8px; text-transform:uppercase; letter-spacing:0.03em; }
.chiprow-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.chiprow-scroll::-webkit-scrollbar{ display:none; }

.chiprow-wrap{ position:relative; min-width:0; }
.chiprow-wrap::before, .chiprow-wrap::after{
  content:""; position:absolute; top:0; bottom:2px; width:36px; z-index:2; pointer-events:none;
}
.chiprow-wrap::before{ left:0; background:linear-gradient(to right, var(--paper), rgba(255,255,255,0)); }
.chiprow-wrap::after{ right:0; background:linear-gradient(to left, var(--paper), rgba(255,255,255,0)); }
.chiprow-wrap.no-scroll-left::before{ display:none; }
.chiprow-wrap.no-scroll-right::after{ display:none; }
.chiprow-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:34px; height:34px; border-radius:100px; border:none; background:var(--signal); color:#fff;
  font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.2); opacity:0.92;
}
.chiprow-arrow-left{ left:2px; }
.chiprow-arrow-right{ right:2px; }
.chiprow-arrow.hidden{ display:none; }
.chip{
  font-family:var(--body); font-size:11.5px; font-weight:600; border:none; padding:8px 14px;
  border-radius:100px; color:var(--concrete); white-space:nowrap; flex-shrink:0; cursor:pointer; background:var(--concrete-light);
  transition:background 0.2s, color 0.2s;
}
.chip.active{ background:var(--signal); color:white; }
.brandchip{
  display:flex; align-items:center; gap:6px; font-family:var(--body); font-size:11.5px; font-weight:600;
  border:none; padding:7px 13px 7px 9px; border-radius:100px; color:var(--concrete);
  white-space:nowrap; flex-shrink:0; cursor:pointer; background:var(--concrete-light);
  transition:background 0.2s, color 0.2s;
}
.brandchip .swatch{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.brandchip.active{ background:var(--signal); color:white; }

.sectiontitle{
  font-family:var(--body); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  color:var(--concrete); margin:8px 18px 12px;
}

@keyframes cardFadeIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.card{
  background:var(--white); border:1px solid rgba(31,41,55,0.06); border-radius:var(--radius-lg); padding:18px;
  margin:0 18px 16px; box-shadow:var(--shadow-soft); transition:box-shadow 0.25s, transform 0.25s;
  animation:cardFadeIn 0.4s ease both;
}
.card:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.card.best{ background:var(--card-soft-strong); position:relative; border-color:rgba(249,115,22,0.18); }
.card.card-compact{ padding-bottom:12px; }
.card-compact .offer-row:first-child{ padding-top:6px; }

/* À partir de la tablette, le catalogue passe en grille de 2 puis 3 colonnes. */
@media (min-width:700px){
  #results{ display:grid; grid-template-columns:repeat(2, 1fr); gap:0 14px; padding:0 18px; align-items:start; }
  #results .card{ margin:0 0 14px; min-width:0; }
  #results .soonstate, #results > div:only-child{ grid-column:1 / -1; }
}
@media (min-width:1024px){
  #results{ grid-template-columns:repeat(3, 1fr); gap:0 16px; }
}
.best-badge{
  position:absolute; top:-10px; right:14px; background:var(--signal); color:white;
  font-family:var(--body); font-size:10px; font-weight:700; padding:4px 11px; border-radius:100px;
}
.dname{ font-weight:700; font-size:14.5px; }
.verified-badge{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  background:var(--blue); color:white; border-radius:50%; font-size:10px; font-weight:800;
  margin-left:5px; vertical-align:middle; line-height:1;
}
.ddist{ font-family:var(--body); font-size:11px; color:var(--concrete); margin-top:2px; }
.card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.card-top-info{ min-width:0; }
.card-top-clickable{ cursor:pointer; }
.card-top-clickable:hover .dname{ color:var(--signal); }
.dname-arrow{ color:var(--signal); font-weight:700; }
.depot-logo{ width:36px; height:36px; border-radius:10px; object-fit:cover; flex-shrink:0; }

/* Vue dédiée à un dépôt : chaque bloc (en-tête, puis un par catégorie) doit
   occuper toute la largeur, même quand le catalogue normal est en grille de
   2-3 colonnes — sinon titres et cartes se retrouvent dispersés dans des
   cellules séparées. */
#results.depot-view-active{ display:block; }
.depot-view-block{ width:100%; }
#results.depot-view-active .card{ margin:0 0 14px; }

.depot-trust-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.depot-trust-chip{
  font-size:11px; font-weight:600; color:var(--concrete); background:var(--concrete-light);
  padding:6px 11px; border-radius:100px;
}

.depotinfo-toggle{
  font-family:var(--body); font-size:11px; font-weight:600; color:var(--signal);
  padding:8px 0; cursor:pointer;
}
.depotinfo-panel{
  background:var(--white); border-radius:14px; padding:12px 14px; margin-bottom:8px;
}
.depotinfo-panel p{ font-size:12px; color:var(--concrete); line-height:1.5; margin-bottom:8px; }
.depotinfo-row{ font-size:12px; margin-bottom:4px; }
.depotinfo-row a{ color:var(--signal); text-decoration:none; }
.depotinfo-row:last-child{ margin-bottom:0; }

.depot-rating{ font-size:11px; font-weight:600; color:var(--ink); }
.depot-rating-count{ color:var(--concrete); font-weight:400; }
.depot-rating-none{ color:var(--concrete); font-weight:400; }
.depotinfo-reviews{ margin-top:10px; border-top:1px solid rgba(22,21,15,0.08); padding-top:10px; }
.review-item{ margin-bottom:10px; }
.review-item:last-child{ margin-bottom:0; }
.review-stars{ font-size:11px; }
.review-author{ font-size:11px; font-weight:600; color:var(--ink); margin-top:2px; }
.review-comment{ font-size:11.5px; color:var(--concrete); margin-top:2px; line-height:1.5; }
.review-photos{ display:flex; gap:6px; margin-top:8px; }
.review-photo{ width:48px; height:48px; object-fit:cover; border-radius:10px; cursor:pointer; transition:transform 0.15s; }
.review-photo:hover{ transform:scale(1.08); }
.btn-call{
  font-family:var(--body); font-size:11px; font-weight:700; color:white; text-decoration:none;
  background:var(--signal); padding:8px 14px; border-radius:100px; white-space:nowrap; flex-shrink:0;
  transition:background 0.2s, transform 0.15s;
}
.btn-call:hover{ background:var(--signal-hover); transform:translateY(-1px); }

.offer-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 0; border-top:1px solid rgba(22,21,15,0.06); flex-wrap:wrap; }
.offer-row:first-child{ border-top:none; padding-top:10px; }
.offer-thumb{ width:34px; height:34px; border-radius:9px; object-fit:cover; flex-shrink:0; }
.offer-thumb-wrap{ position:relative; flex-shrink:0; cursor:pointer; }
.offer-thumb-count{
  position:absolute; bottom:-4px; right:-4px; background:var(--dark-surface); color:white;
  font-family:var(--body); font-size:8.5px; font-weight:700; padding:1px 4px; border-radius:100px;
}

.gallery-overlay{
  position:fixed; inset:0; background:rgba(22,21,15,0.85); z-index:9999;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.gallery-box{ background:white; border-radius:20px; max-width:480px; width:100%; max-height:80vh; overflow-y:auto; padding:16px; }
.gallery-header{ display:flex; justify-content:space-between; align-items:center; font-weight:700; font-size:14px; margin-bottom:12px; }
.gallery-close{ background:none; border:none; font-size:16px; cursor:pointer; color:var(--concrete); }
.gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.gallery-grid img{ width:100%; height:150px; object-fit:cover; border-radius:12px; }
.offer-tags{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.brandbadge{ font-family:var(--body); font-size:10px; font-weight:700; color:white; padding:4px 9px; border-radius:100px; white-space:nowrap; }
.qualitytag{ font-family:var(--body); font-size:10.5px; font-weight:600; color:var(--concrete); background:rgba(22,21,15,0.05); padding:3px 9px; border-radius:100px; white-space:nowrap; }
.offer-price-group{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.stockdotmini{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.outofstock-badge{
  font-family:var(--body); font-size:11.5px; font-weight:700; color:var(--danger);
  background:var(--danger-bg); padding:6px 12px; border-radius:100px; white-space:nowrap;
}

.follow-bell{
  background:none; border:none; cursor:pointer; font-size:14px; padding:4px;
  border-radius:50%; color:var(--concrete); flex-shrink:0; transition:transform 0.15s, color 0.15s;
  line-height:1;
}
.follow-bell:hover{ transform:scale(1.15); }
.follow-bell.active{ color:var(--signal); }
.follow-bell-text{
  display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  color:var(--concrete); background:var(--concrete-light); padding:6px 12px; border-radius:100px;
  margin-left:6px; white-space:nowrap;
}
.follow-bell-text.active{ color:var(--signal); background:var(--card-soft); }

.follow-confirm-bubble{
  position:absolute; z-index:200; background:var(--ink); color:white;
  font-family:var(--body); font-size:11.5px; font-weight:600; padding:8px 14px;
  border-radius:100px; white-space:nowrap; pointer-events:none;
  opacity:0; transform:translateY(4px) scale(0.96);
  transition:opacity 0.2s ease, transform 0.2s ease;
  box-shadow:0 6px 18px rgba(22,21,15,0.22);
}
.follow-confirm-bubble.visible{ opacity:1; transform:translateY(0) scale(1); }

.share-btn{
  display:flex; align-items:center; justify-content:center; width:24px; height:24px;
  background:none; border:none; cursor:pointer; color:var(--concrete);
  border-radius:50%; flex-shrink:0; transition:color 0.15s, transform 0.15s, background 0.15s;
}
.share-btn:hover{ color:#25D366; background:rgba(37,211,102,0.1); transform:scale(1.1); }

@keyframes offer-row-glow{
  0%{ box-shadow:0 0 0 0 rgba(249,115,22,0); background:var(--white); }
  15%{ box-shadow:0 0 0 3px rgba(249,115,22,0.35); background:var(--card-soft); }
  100%{ box-shadow:0 0 0 0 rgba(249,115,22,0); background:var(--white); }
}
.offer-row-highlight{
  animation:offer-row-glow 2.2s ease-out; border-radius:var(--radius-md);
}
.offer-price{ font-family:var(--body); font-weight:700; font-size:14px; white-space:nowrap; }
.offer-price .unit{ font-size:9px; color:var(--concrete); font-weight:400; margin-left:2px; }
.btn-mini{ background:var(--signal); color:white; border:none; width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer; flex-shrink:0; transition:background 0.2s, transform 0.15s; }
.btn-mini:hover{ transform:scale(1.08); }
.btn-mini:active{ transform:scale(0.92); }
.btn-mini.added{ background:var(--ok); }

/* Sélecteur de quantité — par tonnage OU directement par unité (sac/barre/m²/m³) */
.qtypanel{
  width:100%; background:var(--white); border:none; border-radius:16px;
  padding:14px; margin-top:8px; order:99;
}
.qty-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.qty-tab{
  flex:1; background:var(--concrete-light); border:none; border-radius:100px;
  padding:9px 4px; font-size:11.5px; font-weight:600; font-family:var(--body); cursor:pointer; color:var(--concrete);
}
.qty-tab.active{ background:var(--signal); color:white; }
.qp-row{ display:flex; align-items:center; gap:10px; }
.qp-step{
  width:32px; height:32px; border-radius:100px; border:none;
  background:var(--concrete-light); font-size:16px; cursor:pointer; flex-shrink:0;
}
.qp-input{
  flex:1; text-align:center; font-family:var(--body); font-weight:700; font-size:15px;
  border:none; background:var(--concrete-light); border-radius:100px; padding:8px 4px; min-width:0;
}
.qp-unitlabel{ font-size:11.5px; color:var(--concrete); white-space:nowrap; }
.qp-quick{ display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.qp-chip{
  font-family:var(--body); font-size:11px; font-weight:600; border:none; background:var(--concrete-light); color:var(--concrete);
  padding:6px 12px; border-radius:100px; cursor:pointer;
}
.qp-chip:hover{ background:var(--card-soft-strong); color:var(--signal); }
.qp-conv{ font-family:var(--body); font-size:11px; color:var(--concrete); margin-top:10px; }
.qp-total{
  display:flex; justify-content:space-between; align-items:center; margin-top:8px;
  font-weight:700; font-size:15px; font-family:var(--body);
}
.qp-actions{ display:flex; gap:8px; margin-top:12px; }

.qp-calc-link{
  display:block; width:100%; text-align:left; background:none; border:none; color:var(--signal);
  font-family:var(--body); font-size:12px; font-weight:700; padding:8px 0; cursor:pointer;
}
.qp-calc-link:hover{ text-decoration:underline; }

.qty-calc-box{ max-width:380px; }
.qty-calc-field{ margin-bottom:12px; }
.qty-calc-field label{ font-family:var(--mono); font-size:11px; color:var(--concrete); display:block; margin-bottom:5px; }
.qty-calc-field input{
  width:100%; border:1px solid transparent; background:var(--concrete-light); border-radius:12px;
  padding:11px 14px; font-size:14px; font-family:var(--body); color:var(--ink); outline:none;
  transition:border-color 0.15s, background 0.15s;
}
.qty-calc-field input:focus{ border-color:var(--signal); background:var(--white); }

.qty-calc-result{
  background:var(--card-soft); border-radius:var(--radius-md); padding:18px; margin:14px 0; text-align:center;
}
.qty-calc-qty{ font-family:var(--display); font-weight:800; font-size:32px; color:var(--signal); line-height:1.1; }
.qty-calc-qty span{ font-size:15px; font-weight:700; color:var(--concrete); margin-left:4px; }
.qty-calc-detail{ font-size:11.5px; color:var(--concrete); margin-top:6px; line-height:1.4; }

.brique-mode-toggle{ display:flex; gap:6px; margin-bottom:14px; background:var(--concrete-light); padding:4px; border-radius:14px; }
.brique-mode-btn{
  flex:1; background:none; border:none; padding:9px 10px; border-radius:10px; cursor:pointer;
  font-family:var(--body); font-size:11.5px; font-weight:700; color:var(--concrete); transition:background 0.15s, color 0.15s;
}
.brique-mode-btn.active{ background:var(--white); color:var(--signal); box-shadow:0 1px 4px rgba(22,21,15,0.1); }

.brique-plan-hint{ font-size:11px; color:var(--concrete); line-height:1.5; margin-top:2px; }

.brique-wall-card{
  background:var(--card-soft); border-radius:var(--radius-md); padding:14px; margin-bottom:10px;
}
.brique-wall-row{ display:flex; gap:10px; }
.brique-wall-row .qty-calc-field{ flex:1; min-width:0; }
.brique-wall-remove{
  display:block; width:100%; text-align:center; background:none; border:none; color:var(--danger);
  font-family:var(--body); font-size:11px; font-weight:700; padding:8px 0 0; cursor:pointer;
}
.brique-wall-remove:hover{ text-decoration:underline; }
.qp-add{
  flex:1; background:var(--signal); color:white; border:none;
  padding:12px; border-radius:100px; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--body);
}
.qp-add:hover{ background:var(--signal-hover); }
.qp-remove{
  background:none; border:1.5px solid var(--danger); color:var(--danger);
  padding:12px 16px; border-radius:100px; font-weight:700; font-size:13px; cursor:pointer; font-family:var(--body);
}
.qtybadge{
  font-family:var(--body); font-size:10.5px; font-weight:700; background:var(--ok); color:white;
  padding:4px 10px; border-radius:100px;
}
.best-tag-inline{ font-family:var(--body); font-size:9.5px; font-weight:700; background:var(--signal); color:white; padding:3px 8px; border-radius:100px; }

.soonstate{ text-align:center; padding:56px 24px; display:flex; flex-direction:column; align-items:center; gap:12px; }
.soon-icon{ width:60px; height:60px; border-radius:20px; background:var(--card-soft-strong); display:flex; align-items:center; justify-content:center; font-size:26px; }
.soonstate b{ font-family:var(--display); font-weight:800; font-size:16px; }
.soonstate span{ font-size:12.5px; color:var(--concrete); max-width:260px; line-height:1.5; }

.cartbar{
  position:fixed; bottom:12px; left:12px; right:12px; margin:0 auto; max-width:456px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--dark-surface); color:white; padding:15px 18px; border-radius:100px;
}
.cartbar.hidden{ display:none; }
@media (min-width:700px){ .cartbar{ max-width:736px; } }
@media (min-width:1024px){ .cartbar{ max-width:1096px; left:248px; } }
.cartbar.split{ background:#3A362E; }
.cart-left{ display:flex; align-items:center; gap:9px; min-width:0; }
.cart-icon{ width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,0.14); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.cartbar.split .cart-icon{ background:rgba(217,119,6,0.3); }
.cart-text b{ display:block; font-size:13px; }
.cart-text span{ font-size:10px; font-family:var(--mono); color:#C9C4B8; }
.cartbar.split .cart-text span{ color:#F0D9A8; }
.cart-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.cart-total{ font-family:var(--body); font-weight:700; font-size:14px; }
.btn-cart{ background:var(--signal); color:white; border:none; padding:9px 16px; border-radius:100px; font-size:11.5px; font-weight:700; cursor:pointer; }

.loading{ text-align:center; padding:40px; color:var(--concrete); font-family:var(--mono); font-size:12px; }

.site-footer{ margin:32px 18px 24px; padding-top:20px; border-top:1px solid rgba(22,21,15,0.08); }
.site-footer-links{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.site-footer-links a{ font-size:12.5px; font-weight:600; color:var(--signal); text-decoration:none; }
.site-footer-disclaimer{ font-size:11px; color:var(--concrete); line-height:1.6; margin-bottom:16px; }
.site-footer-contact{ margin-bottom:14px; }
.site-footer-row{ font-size:12px; color:var(--ink); margin-bottom:4px; }
.site-footer-row a{ color:var(--signal); text-decoration:none; font-weight:600; }
.site-footer-copyright{ font-family:var(--mono); font-size:10px; color:var(--concrete); }

/* Bloc d'information générique (état vide, message d'erreur récupérable...),
   utilisé sur plusieurs pages — pas seulement le panier, d'où sa présence ici
   plutôt que dans panier.css. */
.callinfo{ margin:0 18px 18px; }
.callinfo p{ font-size:13px; color:var(--concrete); line-height:1.6; }

/* ===========================================================================
   CLOCHE DE NOTIFICATION + PANNEAU DÉROULANT — partagés par l'espace admin
   (signalements, stock faible) et l'en-tête acheteur (suivi de commande).
   =========================================================================== */
.admin-icon-btn{
  position:relative; width:38px; height:38px; border-radius:50%; border:none; background:var(--concrete-light);
  display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; flex-shrink:0;
  transition:transform 0.15s;
}
.admin-icon-btn:hover{ transform:scale(1.06); }
.admin-icon-dot{
  position:absolute; top:6px; right:7px; width:8px; height:8px; border-radius:50%;
  background:var(--signal); border:2px solid var(--paper); display:none;
}
.admin-notif-panel{
  position:absolute; top:46px; right:0; width:300px; max-width:calc(100vw - 36px); z-index:60;
  background:var(--white); border-radius:var(--radius-md); box-shadow:var(--shadow-hover);
  border:1px solid rgba(31,41,55,0.08); padding:8px; display:none; text-align:left;
}
.admin-notif-panel.open{ display:block; }
.admin-notif-item{
  display:flex; gap:10px; padding:10px 8px; border-radius:12px; font-size:12.5px; align-items:flex-start;
}
.admin-notif-item:hover{ background:var(--concrete-light); }
.admin-search-group-title{
  font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--concrete);
  padding:8px 8px 4px;
}
.admin-search-result{ cursor:pointer; justify-content:space-between; }
.admin-search-result-sub{ color:var(--concrete); font-size:11px; margin-left:auto; padding-left:10px; white-space:nowrap; }
.admin-notif-icon{ font-size:15px; flex-shrink:0; }
.admin-notif-empty{ padding:16px; text-align:center; color:var(--concrete); font-size:12.5px; }