/* ==========================================================================
   SEDIXIA SERVICES — Feuille de style principale
   Archétype : grande enseigne / bazar du bricolage (big-box DIY retail)
   Palette : orange chaud + teal + indigo sur fond blanc. Haute énergie.
   Typographie : Bricolage Grotesque (display humaniste) + Inter (corps).
   Mobile-first · sémantique · sans image externe (SVG inline + CSS).
   ========================================================================== */

/* ---------- Import Google Fonts (repli système lisible si hors ligne) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Jetons de design ---------- */
:root{
  --orange:       #ff6b35;   /* orange chaud */
  --orange-dark:  #e8541f;
  --orange-soft:  #ffeadc;
  --teal:         #0fa8a0;
  --teal-dark:    #0b7f79;
  --teal-soft:    #d9f4f1;
  --indigo:       #4f46e5;
  --indigo-dark:  #3730a8;
  --indigo-deep:  #211c4e;   /* pied de page / bandeaux */
  --indigo-soft:  #eae8fb;
  --gold:         #ffc14d;
  --ink:          #1f1a3a;
  --ink-soft:     #565070;
  --muted:        #8b86a2;
  --bg:           #ffffff;   /* fond blanc, énergie big-box */
  --bg-tint:      #f7f5f1;
  --surface:      #ffffff;
  --line:         #e8e4de;
  --danger:       #d94b3d;
  --promo:        #e02929;
  --success:      #2e9e5b;
  --low:          #f0a22e;

  --radius:   14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --shadow-sm: 0 1px 2px rgba(31,26,58,.05), 0 2px 8px rgba(31,26,58,.06);
  --shadow:    0 10px 30px rgba(31,26,58,.10);
  --shadow-lg: 0 22px 50px rgba(31,26,58,.18);

  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Alias rétro-compatibles (styles inline existants) */
  --brand: var(--orange);
  --brand-dark: var(--orange-dark);
  --brand-soft: var(--orange-soft);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--indigo); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{
  font-family:var(--font-display); line-height:1.08; margin:0 0 .4em; color:var(--ink);
  font-weight:800; letter-spacing:-.015em;
}
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.25rem; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:3px solid var(--teal); outline-offset:2px; border-radius:4px; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:1rem; }
.section{ padding-block:3rem; }
.section--alt{ background:var(--bg-tint); border-block:1px solid var(--line); }
.section--tint{ background:var(--bg-tint); }
.section--indigo{ background:linear-gradient(120deg,var(--indigo-deep),var(--indigo-dark)); color:#fff; }
.section-head{ max-width:760px; margin-bottom:1.6rem; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size:clamp(1.55rem,3.4vw,2.35rem); }
.section-head p{ color:var(--ink-soft); font-size:1.02rem; }
.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-display); font-weight:700; font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-dark); background:var(--orange-soft);
  padding:.32rem .8rem; border-radius:999px; margin-bottom:.8rem;
}
.kicker::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--orange); }
.kicker--on-dark{ color:#fff; background:rgba(255,255,255,.16); }
.kicker--on-dark::before{ background:var(--gold); }
.lead{ font-size:1.1rem; color:var(--ink-soft); }

/* ---------- Barre d'annonce ---------- */
.topbar{
  background:linear-gradient(90deg,var(--indigo-deep),var(--indigo-dark));
  color:#fff; font-size:.82rem; font-weight:500;
  padding:.44rem 0; text-align:center;
}
.topbar span{ opacity:.96; }
.topbar strong{ color:var(--gold); font-weight:700; }

/* ---------- En-tête (non collant : la barre rayons reste l'élément fixe) ---------- */
.site-header{
  position:relative; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
}
.site-header__inner{ display:flex; align-items:center; gap:1rem; padding-block:.65rem; }
.brand{ display:flex; align-items:center; gap:.6rem; margin-right:auto; }
.brand__mark{ width:42px; height:42px; flex:0 0 auto; }
.brand__text{ line-height:1; }
.brand__name{ font-family:var(--font-display); font-weight:800; font-size:1.2rem; letter-spacing:-.01em; color:var(--ink); display:block; }
.brand__sub{ font-family:var(--font-display); font-weight:700; font-size:.64rem; letter-spacing:.24em; color:var(--orange-dark); text-transform:uppercase; display:block; margin-top:.15rem; }

.main-nav{ display:none; }
.main-nav ul{ display:flex; gap:.15rem; list-style:none; margin:0; padding:0; }
.main-nav a{
  display:block; padding:.45rem .8rem; border-radius:8px;
  color:var(--ink); font-weight:600; font-size:.92rem;
}
.main-nav a:hover{ background:var(--orange-soft); color:var(--orange-dark); text-decoration:none; }
.main-nav a[aria-current="page"]{ background:var(--ink); color:#fff; }

.header-actions{ display:flex; align-items:center; gap:.5rem; }
.lang-switch{ display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.02em; }
.lang-switch__link{ color:var(--muted); padding:.18rem .34rem; border-radius:6px; }
a.lang-switch__link:hover{ color:var(--orange-dark); text-decoration:none; }
.lang-switch__link.is-active{ color:var(--ink); background:var(--orange-soft); }
.lang-switch__sep{ color:var(--line); }
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink); transition:.18s;
}
.icon-btn:hover{ border-color:var(--orange); color:var(--orange-dark); }
.icon-btn svg{ width:21px; height:21px; }
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:19px; height:19px;
  padding:0 4px; border-radius:999px; background:var(--orange); color:#fff;
  font-size:.7rem; font-weight:700; display:grid; place-items:center; border:2px solid #fff;
}
.nav-toggle{ background:var(--ink); color:#fff; border:none; }
.nav-toggle svg{ stroke:#fff; }

.mobile-nav{ display:none; border-top:1px solid var(--line); background:var(--surface); }
.mobile-nav.open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding:.4rem 0; }
.mobile-nav a{ display:block; padding:.72rem 1rem; font-weight:600; color:var(--ink); border-bottom:1px solid #f4f0ea; }
.mobile-nav a[aria-current="page"]{ color:var(--orange-dark); }

/* ---------- Barre rayons (STICKY — l'élément signature) ---------- */
.category-bar{
  position:sticky; top:-1px; z-index:55;
  background:#fff; border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(31,26,58,.07);
}
.category-bar__inner{
  display:flex; gap:.5rem; overflow-x:auto; padding-block:.55rem;
  scrollbar-width:none; scroll-snap-type:x proximity;
}
.category-bar__inner::-webkit-scrollbar{ display:none; }
.category-bar__chip{
  flex:0 0 auto; scroll-snap-align:start;
  display:inline-flex; align-items:center; gap:.45rem; white-space:nowrap;
  padding:.5rem .95rem; border-radius:999px; border:1.5px solid var(--line);
  background:#fbfaf7; color:var(--ink); font-family:var(--font-display);
  font-weight:700; font-size:.88rem; transition:.16s;
}
.category-bar__chip:hover{
  border-color:var(--orange); color:var(--orange-dark);
  background:var(--orange-soft); text-decoration:none;
}
.category-bar__chip[aria-current="page"],
.category-bar__chip.is-active{ background:var(--ink); border-color:var(--ink); color:#fff; }

/* ---------- Carrousel promo (accueil) ---------- */
.carousel{ position:relative; overflow:hidden; }
.carousel__track{ display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.carousel__slide{
  flex:0 0 100%; min-width:0; position:relative; overflow:hidden; color:#fff;
  display:grid; grid-template-columns:1.25fr 1fr; align-items:center; gap:1.5rem;
  padding:2.2rem max(4rem, env(safe-area-inset-right)) 2.5rem 1.4rem;
}
.carousel__content{ position:relative; z-index:2; max-width:640px; padding-left:.6rem; }
.carousel__slide h2{ color:#fff; font-size:clamp(1.6rem,4vw,2.7rem); font-weight:800; }
.carousel__slide p{ color:rgba(255,255,255,.92); font-size:1.06rem; max-width:520px; margin-bottom:1.2rem; }
.carousel__art{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4rem; }
.carousel__art svg{ width:110px; height:110px; opacity:.9; filter:drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.carousel__tag{
  font-family:var(--font-display); font-weight:800; font-size:1.5rem; line-height:1;
  background:rgba(255,255,255,.16); border:1.5px solid rgba(255,255,255,.35);
  padding:.55rem 1rem; border-radius:14px;
}
.carousel__tag small{ display:block; font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.85; margin-bottom:.2rem; }
.carousel__slide--orange{ background:linear-gradient(120deg,#ff7a3c,#e8541f); }
.carousel__slide--teal  { background:linear-gradient(120deg,#13b8ac,#0b7f79); }
.carousel__slide--indigo{ background:linear-gradient(120deg,#6a63f0,#3730a8); }
.carousel__dots{ position:absolute; left:0; right:0; bottom:.9rem; z-index:3; display:flex; justify-content:center; gap:.5rem; }
.carousel__dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.45); border:0; padding:0; transition:.2s; }
.carousel__dot.is-active{ width:24px; background:#fff; }
.carousel__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.9);
  color:var(--ink); font-size:1.6rem; line-height:1; display:grid; place-items:center;
  box-shadow:var(--shadow-sm); transition:.18s;
}
.carousel__nav:hover{ background:#fff; color:var(--orange-dark); }
.carousel__nav--prev{ left:.6rem; }
.carousel__nav--next{ right:.6rem; }

/* ---------- Bandes rayons populaires (strip) ---------- */
.cat-strip{ display:flex; gap:.85rem; overflow-x:auto; padding-bottom:.6rem; scroll-snap-type:x mandatory; }
.cat-tile{
  flex:0 0 auto; scroll-snap-align:start; width:150px;
  display:flex; flex-direction:column; gap:.55rem; align-items:flex-start;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:1rem; min-height:150px; color:var(--ink); transition:.18s; box-shadow:var(--shadow-sm);
}
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); text-decoration:none; border-color:var(--orange); }
.cat-tile .cat-tile__ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; }
.cat-tile .cat-tile__ic svg{ width:24px; height:24px; }
.cat-tile strong{ font-family:var(--font-display); font-weight:800; font-size:1.05rem; line-height:1.15; }
.cat-tile span{ font-size:.78rem; color:var(--muted); }
.cat-tile__ic--orange{ background:var(--orange-soft); color:var(--orange-dark); }
.cat-tile__ic--teal  { background:var(--teal-soft); color:var(--teal-dark); }
.cat-tile__ic--indigo{ background:var(--indigo-soft); color:var(--indigo-dark); }
.cat-tile__ic--gold  { background:#fff0cf; color:#c07a00; }
.cat-tile__ic--plum  { background:#f3e8fa; color:#7c3aed; }
.cat-tile__ic--blue  { background:#e3f0fc; color:#2a6fc9; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--font-display); font-weight:800; font-size:.95rem;
  padding:.7rem 1.3rem; border-radius:12px; border:2px solid transparent;
  transition:.18s; text-decoration:none; line-height:1.2; letter-spacing:.01em;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:linear-gradient(135deg,var(--orange),var(--orange-dark)); color:#fff; box-shadow:0 8px 20px rgba(255,107,53,.32); }
.btn--primary:hover{ box-shadow:0 10px 26px rgba(255,107,53,.4); }
.btn--teal{ background:linear-gradient(135deg,#13b8ac,var(--teal-dark)); color:#fff; box-shadow:0 8px 20px rgba(15,168,160,.3); }
.btn--indigo{ background:linear-gradient(135deg,var(--indigo),var(--indigo-dark)); color:#fff; box-shadow:0 8px 20px rgba(79,70,229,.3); }
.btn--ghost{ background:#fff; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange-dark); }
.btn--light{ background:#fff; color:var(--indigo-dark); }
.btn--light:hover{ color:var(--orange-dark); }
.btn--lg{ padding:.85rem 1.6rem; font-size:1.04rem; }
.btn--sm{ padding:.46rem .9rem; font-size:.82rem; }
.btn--block{ width:100%; }
.btn svg{ width:18px; height:18px; }

/* ---------- Grille produits (dense) ---------- */
.grid{ display:grid; gap:1rem; }
.products-grid{ display:grid; gap:1rem; }
.product-card{
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:.2s; position:relative;
  box-shadow:var(--shadow-sm);
}
.product-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:#ddd6cd; }
.product-visual{ position:relative; height:172px; display:grid; place-items:center; overflow:hidden; }
.product-visual svg{ width:58px; height:58px; opacity:.94; filter:drop-shadow(0 3px 6px rgba(0,0,0,.18)); }
.product-card__body{ padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.product-card__cat{ font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.product-card h3{ font-size:1rem; margin:0; line-height:1.25; }
.product-card h3 a{ color:inherit; }
.product-card h3 a:hover{ color:var(--orange-dark); text-decoration:none; }
.price-row{ display:flex; align-items:baseline; gap:.55rem; margin-top:.1rem; flex-wrap:wrap; }
.price{
  font-family:var(--font-display); font-weight:800; font-size:1.42rem; color:var(--ink);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; line-height:1;
}
.price--old{ color:var(--muted); font-weight:600; font-size:.92rem; text-decoration:line-through; line-height:1; }
.price-note{ font-size:.7rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.stars{ position:relative; display:inline-block; font-size:.92rem; color:#ded7cd; letter-spacing:1px; line-height:1; }
.stars-fill{ position:absolute; top:0; left:0; overflow:hidden; white-space:nowrap; color:#f5a623; }
.reviews{ font-size:.76rem; color:var(--muted); }
.add-row{ margin-top:auto; padding-top:.55rem; display:flex; gap:.55rem; }
.add-cart{
  flex:1; border:0; background:var(--ink); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:.88rem; padding:.62rem .8rem; border-radius:10px; transition:.18s;
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; letter-spacing:.01em;
}
.add-cart:hover{ background:var(--orange-dark); }
.product-card:hover .add-cart{ background:var(--orange); box-shadow:0 6px 16px rgba(255,107,53,.35); }
.add-cart svg{ width:17px; height:17px; }
.badge{
  position:absolute; top:10px; left:10px; z-index:2;
  font-family:var(--font-display); font-weight:800; font-size:.7rem; letter-spacing:.04em;
  padding:.28rem .62rem; border-radius:999px; color:#fff; box-shadow:var(--shadow-sm);
}
.badge--promo{ background:linear-gradient(135deg,#ff5a5a,var(--promo)); }
.badge--new{ background:linear-gradient(135deg,#13b8ac,var(--teal-dark)); }
.badge--priv{ background:var(--indigo); }
.stock{ display:inline-flex; align-items:center; gap:.45rem; font-size:.76rem; font-weight:700; width:fit-content; padding:.18rem .6rem; border-radius:999px; }
.stock::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--muted); }
.stock--in{ background:#eaf7ef; color:#237a49; }
.stock--in::before{ background:#35b36a; box-shadow:0 0 0 3px rgba(53,179,106,.18); }
.stock--low{ background:#fff3e0; color:#9c6a12; }
.stock--low::before{ background:var(--low); }
.stock--out{ background:#fdece9; color:#b13a2f; }
.stock--out::before{ background:var(--danger); }

/* ---------- Ruban bénéfices ---------- */
.benefits{ display:grid; gap:.9rem; }
.benefit{ display:flex; gap:.85rem; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; }
.benefit__ic{ width:44px; height:44px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; }
.benefit__ic svg{ width:22px; height:22px; }
.benefit__ic--orange{ background:var(--orange-soft); color:var(--orange-dark); }
.benefit__ic--teal{ background:var(--teal-soft); color:var(--teal-dark); }
.benefit__ic--indigo{ background:var(--indigo-soft); color:var(--indigo-dark); }
.benefit__ic--gold{ background:#fff0cf; color:#c07a00; }
.benefit h3{ font-size:.98rem; margin:0 0 .15rem; }
.benefit p{ margin:0; font-size:.85rem; color:var(--ink-soft); }

/* ---------- Bandeau promo & B2B ---------- */
.promo-band{
  display:grid; gap:1.25rem; align-items:center;
  background:linear-gradient(120deg,var(--orange),var(--orange-dark));
  color:#fff; border-radius:var(--radius); padding:1.7rem; position:relative; overflow:hidden;
}
.promo-band::after{ content:""; position:absolute; right:-40px; top:-40px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.14); }
.promo-band h2{ color:#fff; font-size:1.7rem; }
.promo-band p{ margin:0 0 1rem; }
.promo-band .price{ color:#fff; font-size:2rem; font-variant-numeric:tabular-nums; }

.b2b-band{
  display:grid; gap:1.5rem; align-items:center;
  background:linear-gradient(120deg,var(--indigo-deep),var(--indigo-dark)); color:#fff;
  border-radius:var(--radius); padding:1.8rem;
}
.b2b-band h2{ color:#fff; font-size:1.6rem; }
.b2b-band p{ color:#d9d5f0; margin:0 0 1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; }
.chip{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); color:#fff; padding:.35rem .8rem; border-radius:999px; font-size:.82rem; font-weight:600; }

/* ---------- Marques & gammes (strip) ---------- */
.brands-strip{ display:grid; gap:.85rem; grid-template-columns:repeat(2,1fr); }
.brand-item{
  display:flex; align-items:center; gap:.9rem;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:.95rem 1.1rem; transition:.16s;
}
.brand-item:hover{ border-color:var(--orange); box-shadow:var(--shadow-sm); }
.brand-item__logo{
  width:46px; height:46px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:800; font-size:1.02rem; color:#fff; letter-spacing:.02em;
}
.brand-item strong{ display:block; font-family:var(--font-display); font-weight:800; font-size:1rem; line-height:1.1; }
.brand-item span{ font-size:.78rem; color:var(--muted); }

/* ---------- Pilules de filtre (boutique) ---------- */
.filter-bar{ display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.4rem; }
.filter-btn{
  border:1.5px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  padding:.5rem 1rem; border-radius:999px; transition:.16s;
}
.filter-btn:hover{ border-color:var(--orange); color:var(--orange-dark); }
.filter-btn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
#shopSearch{ border:1.5px solid var(--line); border-radius:999px; padding:.5rem .9rem; font-size:.92rem; font-family:inherit; }

/* ---------- Témoignages / avis ---------- */
.review-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; }
.review-card__head{ display:flex; align-items:center; gap:.7rem; margin-bottom:.5rem; }
.avatar{
  width:40px; height:40px; border-radius:12px; flex:0 0 auto; color:#fff;
  font-family:var(--font-display); font-weight:800; display:grid; place-items:center; font-size:.9rem;
}
.review-card__head .who{ line-height:1.2; }
.review-card__head .who strong{ display:block; font-size:.92rem; }
.review-card__head .who span{ font-size:.76rem; color:var(--muted); }

/* ---------- Blog / inspiration ---------- */
.post-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.post-card__media{ height:150px; display:grid; place-items:center; position:relative; }
.post-card__media svg{ width:52px; height:52px; color:#fff; }
.post-card__body{ padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.post-card__body h3{ font-size:1.06rem; margin:0; }
.post-card__meta{ font-size:.76rem; color:var(--muted); display:flex; gap:.6rem; flex-wrap:wrap; }
.post-card__body p{ font-size:.9rem; color:var(--ink-soft); margin:0; }
.read-more{ margin-top:auto; padding-top:.5rem; font-weight:700; font-size:.9rem; color:var(--orange-dark); }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); }
table{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px; }
th,td{ text-align:left; padding:.75rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
thead th{ background:var(--bg-tint); font-family:var(--font-display); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
tr:last-child td{ border-bottom:0; }
td strong{ font-weight:700; }

/* ---------- Cartes "pricing" (professionnels) ---------- */
.tier-grid{ display:grid; gap:1.1rem; }
.tier{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.5rem; display:flex; flex-direction:column; position:relative;
}
.tier--hero{ border:2px solid var(--teal); box-shadow:var(--shadow); }
.tier__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--teal); color:#fff; font-family:var(--font-display); font-weight:800;
  font-size:.72rem; padding:.3rem .9rem; border-radius:999px; letter-spacing:.04em;
}
.tier h3{ font-size:1.18rem; }
.tier .tier__price{ font-family:var(--font-display); font-weight:800; font-size:2rem; color:var(--indigo-dark); font-variant-numeric:tabular-nums; }
.tier .tier__price small{ font-size:.85rem; font-weight:600; color:var(--muted); }
.tier ul{ list-style:none; padding:0; margin:0 0 1.2rem; }
.tier li{ display:flex; gap:.55rem; padding:.45rem 0; font-size:.9rem; border-bottom:1px dashed var(--line); }
.tier li svg{ width:18px; height:18px; color:var(--teal-dark); flex:0 0 auto; margin-top:2px; }

/* ---------- Formulaires ---------- */
.form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.form-grid{ display:grid; gap:1rem; }
.form label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:.32rem; }
.form .req{ color:var(--orange-dark); }
.form input,.form select,.form textarea{
  width:100%; padding:.7rem .85rem; border:1.5px solid var(--line); border-radius:var(--radius-xs);
  font-family:inherit; font-size:1rem; background:#fff; color:var(--ink); transition:.15s;
}
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--teal); outline:none; box-shadow:0 0 0 3px rgba(15,168,160,.16); }
.form textarea{ min-height:130px; resize:vertical; }
.form .hint{ font-size:.76rem; color:var(--muted); margin-top:.3rem; }
.form-note{ font-size:.82rem; color:var(--ink-soft); background:var(--bg-tint); border-radius:var(--radius-xs); padding:.8rem 1rem; margin-top:.4rem; }
.form-success{
  display:none; text-align:center; padding:1.4rem; border-radius:var(--radius);
  background:var(--teal-soft); border:1.5px solid var(--teal); color:var(--teal-dark);
}
.form-success.show{ display:block; }
.form-success svg{ width:44px; height:44px; margin:0 auto .6rem; }
.form-success h3{ color:var(--teal-dark); }
.consent{ display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--ink-soft); }
.consent input{ width:auto; margin-top:3px; }

/* ---------- Accordéon FAQ ---------- */
.faq-item{ border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:.7rem; overflow:hidden; }
.faq-item summary{ list-style:none; cursor:pointer; padding:1rem 1.15rem; font-weight:700; font-family:var(--font-display); display:flex; justify-content:space-between; gap:.8rem; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.4rem; color:var(--orange-dark); line-height:1; }
.faq-item[open] summary::after{ content:"–"; }
.faq-item .faq-body{ padding:0 1.15rem 1.1rem; color:var(--ink-soft); }

/* ---------- Page produit ---------- */
.product-layout{ display:grid; gap:2rem; }
.product-gallery{ display:grid; gap:.8rem; }
.product-gallery__main{ border-radius:var(--radius); min-height:300px; display:grid; place-items:center; position:relative; overflow:hidden; }
.product-gallery__main svg{ width:96px; height:96px; }
.thumbs{ display:flex; gap:.7rem; }
.thumb{ width:72px; height:64px; border-radius:var(--radius-xs); border:2px solid transparent; overflow:hidden; display:grid; place-items:center; }
.thumb.is-active{ border-color:var(--orange); box-shadow:var(--shadow-sm); }
.product-summary h1{ font-size:1.85rem; }
.spec-swatch-row{ display:flex; flex-wrap:wrap; gap:.7rem; margin:.8rem 0 1rem; align-items:center; }
.swatch{ width:38px; height:38px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px var(--line), inset 0 0 0 1px rgba(0,0,0,.05); cursor:pointer; }
.swatch.is-active{ outline:2px solid var(--ink); outline-offset:2px; }
.spec-table td:first-child{ color:var(--muted); font-weight:600; width:40%; }
.qty{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:12px; overflow:hidden; }
.qty button{ width:40px; height:46px; background:#fff; border:0; font-size:1.2rem; color:var(--ink); }
.qty input{ width:54px; height:46px; text-align:center; border:0; border-inline:1.5px solid var(--line); font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; }

/* ---------- Étapes ---------- */
.step-grid{ display:grid; gap:1rem; }
.step{ display:grid; gap:1rem; }
.step__num{
  width:46px; height:46px; border-radius:14px; background:var(--orange); color:#fff;
  font-family:var(--font-display); font-weight:800; font-size:1.25rem; display:grid; place-items:center; margin-bottom:.6rem;
}
.step h3{ font-size:1.08rem; }
.step p{ font-size:.9rem; color:var(--ink-soft); }

/* ---------- Prose (pages légales / contenus) ---------- */
.prose{ max-width:820px; }
.prose h2{ font-size:1.4rem; margin-top:2rem; }
.prose h3{ font-size:1.1rem; margin-top:1.5rem; }
.prose p,.prose li{ color:var(--ink-soft); }
.prose a{ text-decoration:underline; }
.prose .closed{ color:var(--orange-dark); background:var(--orange-soft); padding:.15rem .4rem; border-radius:6px; font-weight:600; }

/* ---------- Alerte / encadrés ---------- */
.callout{ border-radius:var(--radius-sm); padding:1.05rem 1.2rem; display:flex; gap:.8rem; align-items:flex-start; margin:1.2rem 0; font-size:.93rem; }
.callout svg{ width:22px; height:22px; flex:0 0 auto; margin-top:2px; }
.callout--teal{ background:var(--teal-soft); color:#07514c; border:1px solid #b5e4df; }
.callout--indigo{ background:var(--indigo-soft); color:#352f8f; border:1px solid #cbc7f5; }
.callout--warn{ background:#fff3e2; color:#8a5a00; border:1px solid #ffd9a3; }
.callout--danger{ background:#fdece9; color:#9c2f24; border:1px solid #f6c6be; }

/* ---------- Pied de page (méga-footer) ---------- */
.site-footer{ background:var(--indigo-deep); color:#cfcbe8; margin-top:3rem; }
.site-footer a{ color:#e9e6f8; }
.site-footer a:hover{ color:var(--gold); text-decoration:none; }
.footer-top{ display:grid; gap:2.2rem; padding-block:2.8rem 2rem; }
.footer-brand{ display:flex; flex-direction:column; gap:.6rem; }
.brand--footer .brand__name{ color:#fff; }
.brand--footer .brand__sub{ color:var(--gold); }
.footer-brand p{ font-size:.9rem; color:#b3adcf; max-width:560px; margin:0; }
.footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.7rem 1.4rem; }
.footer-contact li{ display:flex; gap:.55rem; font-size:.88rem; align-items:center; }
.footer-contact svg{ width:18px; height:18px; color:var(--gold); flex:0 0 auto; }
.footer-contact a{ color:#e9e6f8; }
.footer-grid{ display:grid; gap:1.5rem; list-style:none; padding:0; margin:0; }
.footer-col h3{
  color:#fff; font-size:.84rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:.85rem; font-weight:800; font-family:var(--font-display);
}
.footer-col ul{ list-style:none; margin:0; padding:0; }
.footer-col li{ margin-bottom:.5rem; }
.footer-col li a{ font-size:.9rem; }
.footer-legal{
  border-top:1px solid rgba(255,255,255,.14); padding-block:1.3rem; font-size:.8rem;
  color:#b3adcf; line-height:1.9;
}
.footer-legal strong{ color:#fff; }
.footer-legal .row{ display:flex; flex-wrap:wrap; gap:.15rem .55rem; justify-content:center; text-align:center; }
.footer-legal .sep{ opacity:.4; }

/* ---------- Bandeau cookies ---------- */
.cookie-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(31,26,58,.14);
  padding:1.1rem 1rem 1.15rem; display:none;
}
.cookie-bar.show{ display:block; }
.cookie-bar__inner{ max-width:1240px; margin-inline:auto; display:grid; gap:1rem; align-items:center; }
.cookie-bar__text{ font-size:.86rem; color:var(--ink-soft); }
.cookie-bar__text strong{ color:var(--ink); }
.cookie-bar__text a{ color:var(--indigo); text-decoration:underline; }
.cookie-bar__actions{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:flex-end; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; right:1rem; bottom:1rem; z-index:110;
  background:var(--ink); color:#fff; padding:.85rem 1.15rem; border-radius:14px;
  font-weight:600; font-size:.9rem; box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:.6rem; transform:translateY(20px); opacity:0; transition:.25s; pointer-events:none;
}
.toast.show{ transform:translateY(0); opacity:1; }
.toast svg{ width:18px; height:18px; color:var(--gold); }

/* ---------- Tiroir panier ---------- */
.drawer-overlay{ position:fixed; inset:0; background:rgba(31,26,58,.5); z-index:90; opacity:0; pointer-events:none; transition:.25s; }
.drawer-overlay.show{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,100%); z-index:95;
  background:var(--surface); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:.28s;
  display:flex; flex-direction:column;
}
.cart-drawer.show{ transform:translateX(0); }
.cart-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.2rem; border-bottom:1px solid var(--line); }
.cart-drawer__head h2{ font-size:1.25rem; margin:0; }
.cart-drawer__body{ flex:1; overflow-y:auto; padding:1.1rem 1.2rem; }
.cart-drawer__foot{ padding:1rem 1.2rem 1.2rem; border-top:1px solid var(--line); }
.cart-line{ display:flex; gap:.8rem; padding:.8rem 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-line .pthumb{ width:54px; height:54px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; }
.cart-line .pthumb svg{ width:26px; height:26px; color:#fff; }
.cart-line__info{ flex:1; }
.cart-line__info strong{ display:block; font-size:.9rem; line-height:1.25; }
.cart-line__info .q{ font-size:.8rem; color:var(--muted); }
.cart-line .lprice{ font-weight:800; font-size:.92rem; font-variant-numeric:tabular-nums; }
.cart-line button{ background:none; border:0; color:var(--muted); font-size:1.1rem; }
.cart-empty{ text-align:center; padding:2.5rem 1rem; color:var(--muted); }
.cart-total{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:.2rem; }
.cart-total span:last-child{ font-family:var(--font-display); font-weight:800; font-size:1.15rem; font-variant-numeric:tabular-nums; }
.cart-note{ font-size:.76rem; color:var(--muted); margin:.5rem 0 .8rem; }

/* ---------- Divers ---------- */
.text-center{ text-align:center; }
.mt-1{ margin-top:.6rem; } .mt-2{ margin-top:1.2rem; } .mt-3{ margin-top:2rem; }
.mb-1{ margin-bottom:.6rem; } .mb-2{ margin-bottom:1.2rem; } .mb-3{ margin-bottom:2rem; }
.flex{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.muted{ color:var(--muted); }
.small{ font-size:.85rem; }
.breadcrumb{ font-size:.85rem; color:var(--muted); margin-bottom:1.2rem; }
.breadcrumb a{ color:var(--ink-soft); }
.breadcrumb span{ margin-inline:.3rem; color:var(--muted); }

/* ---------- Grilles adaptatives ---------- */
@media (min-width:560px){
  .products-grid{ grid-template-columns:repeat(2,1fr); }
  .cat-strip{ display:grid; grid-template-columns:repeat(2,1fr); overflow:visible; }
  .cat-tile{ width:auto; }
  .benefits{ grid-template-columns:repeat(2,1fr); }
  .form-grid--2{ grid-template-columns:1fr 1fr; }
  .brands-strip{ grid-template-columns:repeat(2,1fr); }
  .promo-band{ grid-template-columns:1fr auto; }
}
@media (min-width:768px){
  .section{ padding-block:4rem; }
  .products-grid{ grid-template-columns:repeat(3,1fr); }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .step-grid{ grid-template-columns:repeat(4,1fr); }
  .tier-grid{ grid-template-columns:repeat(3,1fr); }
  .b2b-band{ grid-template-columns:1.4fr .6fr; }
  .cat-strip{ grid-template-columns:repeat(3,1fr); }
  .brands-strip{ grid-template-columns:repeat(3,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .cookie-bar__inner{ grid-template-columns:1fr auto; }
  .carousel__slide{ padding:2.6rem 3.5rem 3rem; }
}
@media (min-width:1024px){
  .main-nav{ display:block; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
  .carousel__slide{ grid-template-columns:1.4fr 1fr; }
  .products-grid{ grid-template-columns:repeat(4,1fr); }
  .post-grid{ grid-template-columns:repeat(3,1fr); }
  .cat-strip{ grid-template-columns:repeat(6,1fr); }
  .brands-strip{ grid-template-columns:repeat(6,1fr); }
  .benefits{ grid-template-columns:repeat(4,1fr); }
  .product-layout{ grid-template-columns:1fr 1fr; align-items:start; }
  .contact-grid{ grid-template-columns:1fr 1.2fr; }
  .footer-grid{ grid-template-columns:repeat(5,1fr); }
  .footer-brand{ max-width:680px; }
}