/* ==========================================================================
   ShopDisplay — Écrans Publicitaires & Créatifs
   Main stylesheet
   ========================================================================== */

:root{
  --accent:#1D9E75;
  --accent-dark:#146650;
  --accent-light:#e6f6f0;
  --ink:#12181a;
  --ink-soft:#4b5a5c;
  --bg:#ffffff;
  --bg-alt:#f4f7f6;
  --bg-dark:#0c1412;
  --border:#e3e9e7;
  --radius:14px;
  --radius-sm:8px;
  --shadow:0 8px 30px rgba(12,20,18,.08);
  --shadow-lg:0 20px 60px rgba(12,20,18,.16);
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:hidden;
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"DM Sans", sans-serif;
  font-weight:700;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
button{font-family:inherit;cursor:pointer}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
section{padding:72px 0}
@media (max-width:700px){ section{padding:48px 0} }

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent-dark);background:var(--accent-light);
  padding:6px 14px;border-radius:999px;margin-bottom:18px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;
  border:2px solid transparent;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 20px rgba(29,158,117,.35)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-outline-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.btn-outline-light:hover{background:#fff;color:var(--ink)}
.btn-block{width:100%}
.btn-sm{padding:9px 16px;font-size:13px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.logo{display:flex;align-items:center;gap:10px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:20px}
.main-nav{display:flex;align-items:center;gap:28px}
.main-nav a{font-weight:600;font-size:14.5px;color:var(--ink-soft);padding:8px 0;border-bottom:2px solid transparent}
.main-nav a:hover,.main-nav a.active{color:var(--ink);border-color:var(--accent)}
.header-actions{display:flex;align-items:center;gap:14px}
.lang-switch{position:relative}
.lang-switch button{
  display:flex;align-items:center;gap:6px;background:var(--bg-alt);border:1px solid var(--border);
  padding:8px 12px;border-radius:999px;font-weight:700;font-size:13px;text-transform:uppercase;color:var(--ink);
}
.lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;min-width:150px;z-index:60;
}
.lang-menu.open{display:block}
.lang-menu button{display:flex;width:100%;background:none;border:none;padding:9px 12px;border-radius:8px;font-weight:600;font-size:14px;text-align:left;color:var(--ink)}
.lang-menu button:hover{background:var(--bg-alt)}
.country-menu{min-width:230px;max-height:340px;overflow-y:auto}
.country-menu button{gap:10px;text-transform:none}
#countryToggle{text-transform:none;max-width:190px}
#countryToggle .country-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
@media (max-width:480px){
  .header-actions{gap:8px}
  .lang-switch button{padding:8px 9px;font-size:12px}
  /* Not enough room for logo + language pill + "flag + country name" pill +
     cart + burger on a phone width — keep just the flag on this pill (the
     full name is still visible once the menu is opened). */
  #countryToggle{max-width:none;padding:8px 10px}
  #countryToggle .country-name{display:none}
}
.cart-link{position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;background:var(--bg-alt);border:1px solid var(--border)}
.cart-count{
  position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 4px;
}
.burger{display:none;background:none;border:none;padding:8px}
@media (max-width:860px){
  .main-nav{display:none}
  .burger{display:flex}
}
/* On narrow phones (~320-380px CSS width — e.g. iPhone SE, many entry-level
   Android phones), logo + language pill + country pill + cart + burger no
   longer fit on one row at the sizes above: the row was overflowing the
   viewport by ~40px, and because body has overflow-x:hidden (to avoid a
   page-wide horizontal scrollbar elsewhere), the burger button was pushed
   fully off-screen and invisible/unusable rather than just wrapping — the
   menu was silently unreachable on these phones. This tightens every
   dimension in the row so it fits with room to spare. */
@media (max-width:400px){
  .site-header .container{padding:0 14px;gap:8px;height:64px}
  .logo{font-size:16px;gap:6px}
  .header-actions{gap:5px}
  .lang-switch button{padding:7px 8px;font-size:11px;gap:3px}
  #countryToggle{padding:7px 8px}
  .cart-link{width:34px;height:34px}
  .burger{padding:5px}
  .burger svg{width:19px;height:19px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(1100px 500px at 85% -10%, #dff3ea 0%, transparent 60%), var(--bg-alt);
  padding:88px 0 64px;
}
.hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr} }
.hero h1{font-size:clamp(40px,6vw,72px);max-width:11ch}
.hero-sub{font-size:17px;color:var(--ink-soft);max-width:52ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-visual{display:flex;justify-content:center;align-items:center}
/* 4 individually-cut product renders (background removed, see README) laid
   out as a floating collage instead of one flat photo — positions are the
   originals' own relative placement on their source canvas (1228×1152),
   with a little extra clearance added between the panel and the two bands
   so the pieces never visually cross. Each render already has its own 3D
   tilt baked into the pixels, so we deliberately do NOT add any extra CSS
   rotate() here — stacking a second rotation on top of that baked-in tilt
   is what previously pushed the panel and the bottom band into each
   other. Every image keeps its own aspect ratio (width set, height auto),
   so nothing stretches. */
.hero-collage{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1228/1152}
/* IMPORTANT: don't set width here — a bare "img" rule has higher specificity
   than the single-class .hc-* rules below and would silently override each
   image's own width, which is exactly what previously made every piece
   render at the same size and crash into its neighbors. Width lives only
   in the per-image rules. */
.hero-collage img{position:absolute;height:auto;display:block;filter:drop-shadow(0 14px 26px rgba(12,20,18,.18))}
.hc-band-top{left:12.2%;top:15.8%;width:38.8%}
.hc-bracket{left:56.1%;top:14.5%;width:32.8%}
.hc-panel{left:10.5%;top:39%;width:29.2%}
.hc-band-bottom{left:44.8%;top:54.5%;width:48.5%}
@media (max-width:900px){ .hero-collage{max-width:340px} }

/* ---------- Trust bar (stock/shipping badges) ---------- */
.trust-bar{background:var(--accent-light);padding:22px 0}
.trust-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px}
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--accent-dark)}
.trust-icon{display:flex;color:var(--accent-dark)}
.trust-icon svg{width:20px;height:20px}
.trust-item.compact{
  font-size:13px;padding:10px 0;border-top:1px solid var(--border);color:var(--ink-soft);font-weight:600;
}
.trust-item.compact .trust-icon{color:var(--accent)}
.trust-list.compact{margin-top:18px}
.trust-list.compact .trust-item.compact:last-child{border-bottom:1px solid var(--border)}
@media (max-width:560px){ .trust-grid{gap:10px 20px;justify-content:flex-start} }

/* ---------- Marquee (brand strip) ---------- */
.marquee{
  overflow:hidden;background:var(--ink);border-top:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.marquee-track{display:inline-flex;align-items:center;animation:sd-marquee 22s linear infinite}
.marquee-track span{
  display:inline-block;padding:16px 28px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.9);
}
.marquee-track span.dot{color:var(--accent);padding:16px 8px}
@keyframes sd-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* ---------- Pillars ---------- */
.pillars{background:var(--bg)}
.pillars-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:36px}
@media (max-width:800px){ .pillars-grid{grid-template-columns:1fr} }
.pillar-card{
  border-radius:var(--radius);padding:36px;position:relative;overflow:hidden;
  border:1px solid var(--border);
}
.pillar-card.pub{background:linear-gradient(160deg,#0f6b52,#123f52)}
.pillar-card.creatif{background:linear-gradient(160deg,#331a5e,#5e1d1d)}
.pillar-card{color:#fff}
.pillar-card h3{font-size:32px;margin-bottom:10px}
.pillar-card p{color:rgba(255,255,255,.85);margin-bottom:20px;font-size:16px}
.pillar-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;position:relative;z-index:2}
.pillar-tags span{
  font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
}
.pillar-card .btn{position:relative;z-index:2}
.pillar-card::after{
  content:"";position:absolute;right:-40px;bottom:-40px;width:220px;height:220px;border-radius:50%;
  background:rgba(255,255,255,.08);
}

/* ---------- Section headers ---------- */
.section-head{max-width:640px;margin:0 auto 40px;text-align:center}
.section-head.left{margin:0 0 40px;text-align:left}
.section-head h2{font-size:clamp(26px,3vw,36px)}
.section-head p{color:var(--ink-soft)}

/* ---------- Why grid ---------- */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){ .why-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .why-grid{grid-template-columns:1fr} }
.why-card{padding:26px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-alt)}
.why-card h4{font-size:17px;margin-bottom:8px}
.why-card p{color:var(--ink-soft);font-size:14.5px;margin:0}
.why-num{
  display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:999px;
  background:var(--accent);color:#fff;font-weight:800;font-size:14px;margin-bottom:14px;
}

/* ---------- CTA band ---------- */
.cta-band{background:var(--bg-dark);color:#fff;text-align:center}
.cta-band h2{font-size:clamp(24px,3vw,34px);max-width:720px;margin:0 auto 14px}
.cta-band p{color:rgba(255,255,255,.7);max-width:560px;margin:0 auto 30px}

/* ---------- Product grid & cards ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.filter-pill{
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--border);font-weight:700;font-size:13.5px;
  background:#fff;color:var(--ink-soft);
}
.filter-pill.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:1050px){ .product-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .product-grid{grid-template-columns:1fr} }

.product-card{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;transition:box-shadow .2s ease, transform .2s ease;
}
.product-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.product-card .thumb{
  padding:26px 18px;display:flex;align-items:center;justify-content:center;background:var(--bg-alt);
  min-height:180px;position:relative;
}
/* Stock count itself is never shown (see sdLowStockBadge, js/render.js) —
   just this small warning-colour badge, only once stock has dropped below
   3 units. */
.low-stock-badge{
  display:inline-flex;align-items:center;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;background:#c94a2f;color:#fff;padding:5px 10px;border-radius:999px;white-space:nowrap;
}
.product-card .low-stock-badge{position:absolute;top:12px;right:12px;z-index:2}
#lowStockRow .low-stock-badge{display:inline-flex}
/* Real uploaded photo/video (see sdProductVisualHTML, js/render.js), used
   in place of the generated screen-mockup once a product has media. */
.product-media{width:100%;height:100%;overflow:hidden;border-radius:8px}
.product-media img,.product-media video{width:100%;height:100%;object-fit:cover;display:block;border-radius:8px}
.thumb.lg .product-media{aspect-ratio:4/3}
.mini-thumb .product-media{width:72px;height:72px}
.product-card .body{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-card .cat-tag{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-dark)}
.product-card h3{font-size:17px;margin:0}
.product-card .tagline{color:var(--ink-soft);font-size:13.5px;flex:1;margin:0}
.product-card .price-row{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.price{font-weight:800;font-size:16px}
.price-ttc{font-size:12.5px;color:var(--ink-soft)}
.price .from{font-weight:600;font-size:12px;color:var(--ink-soft);text-transform:uppercase;display:block;margin-bottom:2px}
.type-badge{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.04em;
  background:var(--ink);color:#fff;padding:5px 12px;border-radius:999px;text-transform:uppercase;
}

/* ---------- Screen mockup (illustrative product visuals) ---------- */
.screen-mockup{--w:200px;width:var(--w);position:relative}
.screen-mockup .bezel{
  background:#14201d;border-radius:10px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.screen-mockup .screen{
  border-radius:4px;aspect-ratio:16/9;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
}
.screen-mockup .screen::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(100deg, rgba(255,255,255,.09) 0 2px, transparent 2px 22px);
  mix-blend-mode:overlay;
}
.screen-mockup .glow-icon{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.92);
}
.screen-mockup .glow-icon svg{width:34%;height:34%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.25))}
.screen-mockup .stand{width:14%;height:22px;background:#14201d;margin:0 auto;border-radius:0 0 4px 4px}
.screen-mockup .base{width:34%;height:8px;background:#0a0f0e;margin:0 auto;border-radius:4px}

.screen-mockup.frame-totem{--w:120px}
.screen-mockup.frame-totem .screen{aspect-ratio:9/16}

.screen-mockup.frame-wall-grid .bezel{padding:6px}
.screen-mockup.frame-wall-grid .screen{aspect-ratio:1/1;
  background-image:
    linear-gradient(rgba(0,0,0,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.35) 1px, transparent 1px),
    linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
  background-size:33.33% 33.33%, 33.33% 33.33%, cover;
}

.screen-mockup.frame-outdoor .bezel{background:#2a1a12;border:3px solid #4a2f20}
.screen-mockup.frame-outdoor .screen{aspect-ratio:21/9}

.screen-mockup.frame-transparent .bezel{background:transparent;box-shadow:none;padding:0}
.screen-mockup.frame-transparent .screen{
  aspect-ratio:16/10;opacity:.55;border:2px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,var(--c1),var(--c2) 55%,var(--c3));
  backdrop-filter:blur(1px);
}
.screen-mockup.frame-transparent .screen::before{display:none}

.screen-mockup.frame-curve .bezel{border-radius:60px 20px 60px 20px;transform:perspective(500px) rotateY(10deg)}
.screen-mockup.frame-curve .screen{border-radius:50px 14px 50px 14px}

.screen-mockup.frame-custom-shape .bezel{background:transparent;box-shadow:none;padding:0;display:flex;align-items:center;justify-content:center}
.screen-mockup.frame-custom-shape .screen{
  width:100%;aspect-ratio:1/1;clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);border-radius:0;
}

.screen-mockup.frame-floor .bezel{transform:perspective(400px) rotateX(45deg);border-radius:6px}
.screen-mockup.frame-floor .screen{aspect-ratio:4/3;border-radius:2px}

/* Ceiling-hung: two thin cables drop from a ceiling line to the bezel,
   telling the placement story without needing a product photo. */
.screen-mockup.frame-hanging{padding-top:26px}
.screen-mockup.frame-hanging .ceiling-line{height:3px;background:var(--ink-soft);opacity:.35;border-radius:2px}
.screen-mockup.frame-hanging .cables{display:flex;justify-content:space-between;width:56%;margin:0 auto;height:22px}
.screen-mockup.frame-hanging .cables span{width:1.5px;background:var(--ink-soft);opacity:.45;height:100%}
.screen-mockup.frame-hanging .screen{aspect-ratio:16/10}

/* Storefront header sign: a wide fascia band + a small square projecting
   sign, sitting above a thin storefront baseline. */
.screen-mockup.frame-facade .facade-row{display:flex;align-items:flex-end;gap:8%;justify-content:center}
.screen-mockup.frame-facade .bezel.wide{flex:1;padding:5px}
.screen-mockup.frame-facade .bezel.wide .screen{aspect-ratio:16/4}
.screen-mockup.frame-facade .bezel.square{width:26%;padding:5px}
.screen-mockup.frame-facade .bezel.square .screen{aspect-ratio:1/1}
.screen-mockup.frame-facade .bezel.square .glow-icon svg{width:46%;height:46%}
.screen-mockup.frame-facade .storefront-line{
  height:4px;margin-top:14px;border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--ink-soft) 0 10px, transparent 10px 16px);
  opacity:.35;
}

.thumb.lg .screen-mockup{--w:340px}
@media (max-width:500px){ .thumb.lg .screen-mockup{--w:260px} }
.hero-visual .screen-mockup{--w:280px}
.hero-visual .screen-mockup.small{--w:170px}
@media (max-width:480px){
  .hero-visual .screen-mockup{--w:190px}
  .hero-visual .screen-mockup.small{--w:120px}
}

/* ---------- Product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media (max-width:860px){ .product-detail{grid-template-columns:1fr} }
.product-detail .visual{
  background:var(--bg-alt);border-radius:var(--radius);padding:56px;display:flex;align-items:center;justify-content:center;
}
/* Extra photos/videos (product.media beyond index 0) shown below the hero
   image on the product detail page — see sdProductGalleryHTML() in
   js/render.js. Empty (no extra element rendered) until a product has more
   than one uploaded photo, so it adds no space by default. */
.product-gallery-extra{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.gallery-item{border-radius:var(--radius);overflow:hidden;background:var(--bg-alt);aspect-ratio:4/3}
.gallery-item img,.gallery-item video{width:100%;height:100%;object-fit:cover;display:block}
.breadcrumb{font-size:13px;color:var(--ink-soft);margin-bottom:22px}
.breadcrumb a{color:var(--ink-soft);text-decoration:underline}
.sku{font-size:12.5px;color:var(--ink-soft);letter-spacing:.04em}
.qty-row{display:flex;align-items:center;gap:14px;margin:22px 0}
.qty-stepper{display:flex;align-items:center;border:1.5px solid var(--border);border-radius:999px;overflow:hidden}
.qty-stepper button{width:38px;height:38px;background:#fff;border:none;font-size:18px;font-weight:700}
.qty-stepper button:hover{background:var(--bg-alt)}
.qty-stepper input{width:44px;text-align:center;border:none;font-weight:700;font-size:15px}
.specs-list{margin:18px 0;border-top:1px solid var(--border)}
.specs-list li{padding:12px 0;border-bottom:1px solid var(--border);display:flex;gap:10px;font-size:14.5px;color:var(--ink-soft)}
.specs-list li::before{content:"✓";color:var(--accent);font-weight:800}
.detail-actions{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}

/* ---------- Cart ---------- */
.table-scroll{width:100%;overflow-x:auto;margin-bottom:28px}
.cart-table{width:100%;min-width:780px;border-collapse:collapse;margin-bottom:0}
.cart-table th{text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:10px 8px;border-bottom:2px solid var(--border)}
.cart-table td{padding:16px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.cart-item{display:flex;align-items:center;gap:14px}
.cart-item .mini-thumb{width:72px;flex:none}
.cart-item .mini-thumb .screen-mockup{--w:72px}
.cart-item h4{font-size:15px;margin:0}
.remove-link{font-size:12.5px;color:#b34747;font-weight:700}
.warranty-select{padding:9px 10px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:13px;background:#fff;min-width:152px;max-width:100%}
.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:40px}
@media (max-width:800px){ .checkout-grid{grid-template-columns:1fr} }
.cart-summary{border:1px solid var(--border);border-radius:var(--radius);padding:24px;align-self:start}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;font-size:14.5px}
.summary-row.total{font-weight:800;font-size:19px;border-top:1px solid var(--border);margin-top:8px;padding-top:14px}
.summary-note{font-size:12.5px;color:var(--ink-soft);margin-top:6px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}
.field select,.field input,.field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-family:inherit;font-size:14.5px;
}
.field textarea{resize:vertical;min-height:110px}

/* Custom flag-icon country picker (replaces a plain <select>, whose
   <option> list can only ever show text/emoji — never a real flag image —
   because of a hard browser limitation). Backed by a hidden native
   <select> for value/change-event compatibility; see sdCountryDropdownHTML()
   / sdInitCountryDropdown() in js/i18n.js. */
.country-field{position:relative}
.country-field-toggle{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14.5px;font-weight:600;background:#fff;color:var(--ink);
}
.country-field-toggle .country-field-name{flex:1}
.country-field-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;display:none;max-height:280px;overflow-y:auto;z-index:60;
}
.country-field-menu.open{display:block}
.country-field-menu button{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;padding:9px 12px;
  border-radius:8px;font-weight:600;font-size:14px;text-align:left;color:var(--ink);font-family:inherit;
}
.country-field-menu button:hover{background:var(--bg-alt)}
.fi{border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.08)}

/* Read-only country display (checkout delivery country — always locked to
   the header's flag selector, not independently editable there). */
.country-readonly{
  display:flex;align-items:center;gap:8px;width:100%;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-family:inherit;font-size:14.5px;font-weight:600;background:var(--bg-alt);color:var(--ink);
}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:560px){ .checkbox-grid{grid-template-columns:1fr} }
.checkbox-item{
  display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid var(--border);
  border-radius:var(--radius-sm);background:#fff;font-size:14px;font-weight:600;cursor:pointer;
}
.checkbox-item input{width:16px;height:16px;accent-color:var(--accent);flex:none}
.checkbox-item:has(input:checked){border-color:var(--accent);background:var(--accent-light)}
.empty-state{text-align:center;padding:60px 20px;color:var(--ink-soft)}
/* Bank-transfer details shown on the order confirmation screen (cart.html)
   once "Valider ma commande" is clicked — no online payment on this site,
   so this is what tells the customer where to send the money. */
.bank-details{
  text-align:left;max-width:420px;margin:24px auto;border:1.5px solid var(--border);
  border-radius:var(--radius);padding:18px 22px;background:var(--bg-alt);
}
.bank-details .bd-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.bank-details .bd-row:last-child{border-bottom:none}
.bank-details .bd-row span:first-child{color:var(--ink-soft);flex:none}
.bank-details .bd-row span:last-child{font-weight:700;text-align:right;word-break:break-all}
.bank-details .bd-ref-instruction{margin:0 0 6px;font-size:13px;color:var(--ink-soft)}
.bank-details .bd-ref-value{margin:0 0 16px;padding-bottom:14px;border-bottom:1.5px dashed var(--border);font-weight:800;font-size:15px;word-break:break-word}
/* Optional "I've paid" step (screenshot upload) shown below the bank
   details once an order is placed — see confirmPaymentBtn in cart.html. */
.payment-confirm-block input[type="file"]{
  display:block;width:100%;margin-top:8px;font-family:inherit;font-size:13.5px;
}
.checkout-divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-soft);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.checkout-divider::before,.checkout-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.amazon-block h4{font-size:15px;margin-bottom:4px}
.amazon-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:10px;
  font-size:13.5px;padding:12px 18px;white-space:normal;text-align:center;line-height:1.3;
  background:#232F3E;border-color:#232F3E;color:#fff;
}
.amazon-btn .amazon-logo{height:20px;width:auto;flex:none;display:block}
.amazon-btn:hover{background:#374b63;border-color:#374b63;color:#fff}

/* ---------- Forms (quote/contact) ---------- */
.form-card{max-width:640px;margin:0 auto;border:1px solid var(--border);border-radius:var(--radius);padding:36px;background:var(--bg-alt)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr} }
.form-success{background:var(--accent-light);color:var(--accent-dark);border-radius:var(--radius-sm);padding:16px 20px;font-weight:600;display:none}
.form-success.show{display:block}

/* ---------- Related products ---------- */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:800px){ .related-grid{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .related-grid{grid-template-columns:1fr} }

/* ---------- Footer ---------- */
.site-footer{background:var(--bg-dark);color:rgba(255,255,255,.75);padding:56px 0 28px}
.footer-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer-top .logo{color:#fff}
.footer-cols{display:flex;gap:56px;flex-wrap:wrap}
.footer-col h5{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px}
.footer-col a,.footer-col span{display:block;font-size:14px;color:rgba(255,255,255,.65);margin-bottom:10px}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:rgba(255,255,255,.45)}

/* ---------- Misc ---------- */
.badge-soon{font-size:11px;background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}
.divider{height:1px;background:var(--border);margin:40px 0}
.center{text-align:center}
.mt-lg{margin-top:40px}

/* ---------- Help / legal content pages (livraison, retours, paiement,
   mentions-legales, confidentialite, cgv, cookies) ---------- */
.help-page{max-width:760px;margin:0 auto}
.help-intro{color:var(--ink-soft);font-size:16px;margin-bottom:32px}
.help-section{padding:22px 0;border-top:1px solid var(--border)}
.help-section:first-of-type{border-top:none;padding-top:0}
.help-section h3{font-size:17px;margin-bottom:8px}
.help-section p{color:var(--ink-soft);line-height:1.6}
.help-placeholder{color:var(--accent-dark);font-weight:600}

/* ---------- Cookie notice (informational, no accept/reject choices —
   see js/main.js sdInitCookieBanner for the full reasoning, including why
   this is an in-flow bar above the header rather than a floating overlay:
   a "position:fixed" bottom banner can end up sitting directly on top of a
   short mobile page's own buttons (e.g. "Ajouter au panier"), making them
   untappable until dismissed — an in-flow bar can only push content down,
   never cover it. */
.cookie-bar{
  width:100%;background:var(--bg-dark);color:#fff;padding:14px 24px;
  opacity:0;transition:opacity .25s ease;
}
.cookie-bar.visible{opacity:1}
.cookie-bar-main,.cookie-bar-panel{align-items:center;gap:20px;flex-wrap:wrap}
.cookie-bar-main:not([hidden]),.cookie-bar-panel:not([hidden]){display:flex}
.cookie-bar-main[hidden],.cookie-bar-panel[hidden]{display:none}
.cookie-bar-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.cookie-emoji{font-size:16px;line-height:1}
.cookie-bar-main>div:first-child{flex:1;min-width:220px}
.cookie-bar p{flex:1;min-width:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.85);margin:0}
.cookie-bar p a{color:#fff;text-decoration:underline;white-space:nowrap}
.cookie-bar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap}
.cookie-bar-actions button{
  flex-shrink:0;border:none;border-radius:999px;
  padding:9px 16px;font-weight:700;font-size:12.5px;cursor:pointer;font-family:inherit;white-space:nowrap;
}
#cookieBannerAccept{background:var(--accent);color:#fff}
#cookieBannerAccept:hover{background:var(--accent-dark)}
.cookie-btn-secondary{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.cookie-btn-secondary:hover{background:rgba(255,255,255,.1)}
.cookie-btn-text{background:none;color:rgba(255,255,255,.8);text-decoration:underline;padding:9px 4px}
.cookie-btn-text:hover{color:#fff}
#cookieBannerSave{background:var(--accent);color:#fff}
#cookieBannerSave:hover{background:var(--accent-dark)}
.cookie-bar-category{display:flex;align-items:center;gap:16px;flex:1;min-width:220px}
.cookie-bar-category strong{font-size:13px}
.cookie-bar-category p{margin:4px 0 0;font-size:12px}
.cookie-toggle{position:relative;display:inline-block;width:38px;height:22px;flex-shrink:0}
.cookie-toggle input{opacity:0;width:0;height:0}
.cookie-toggle span{
  position:absolute;inset:0;background:rgba(255,255,255,.25);border-radius:999px;cursor:pointer;transition:background .2s ease;
}
.cookie-toggle span::before{
  content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s ease;
}
.cookie-toggle input:checked+span{background:var(--accent)}
.cookie-toggle input:checked+span::before{transform:translateX(16px)}
@media (max-width:600px){
  .cookie-bar{padding:12px 16px}
  .cookie-bar-main,.cookie-bar-panel{gap:12px}
  .cookie-bar-actions{width:100%;justify-content:flex-end}
  .cookie-bar-actions button{padding:8px 13px;font-size:12px}
}