/* =========================================================
   CONSMATE GROUP SARL — Feuille de style commune
   Quincaillerie industrielle — noir / rouge / béton clair
   ========================================================= */

:root{
  --noir: #161514;
  --rouge: #D42B1E;
  --rouge-fonce: #A82115;
  --blanc: #FFFFFF;
  --beton: #F1EFEC;
  --gris: #6B6862;
  --gris-clair: #DAD7D1;
  --ombre: rgba(22,21,20,.16);

  --font-titre: "Archivo Black", "Archivo", Arial, sans-serif;
  --font-corps: "Archivo", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --radius: 2px;
  --container: 1200px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Animations d'apparition (progressive enhancement) ---------- */
/* Sans JS ou robots d'indexation : le contenu reste visible immédiatement */
html.js .reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
}
html.js .reveal.is-visible{
  opacity: 1;
  transform: none;
}
html.js .reveal-groupe .reveal:nth-child(2){ transition-delay: .08s; }
html.js .reveal-groupe .reveal:nth-child(3){ transition-delay: .16s; }
html.js .reveal-groupe .reveal:nth-child(4){ transition-delay: .24s; }
html.js .reveal-groupe .reveal:nth-child(5){ transition-delay: .32s; }
html.js .reveal-groupe .reveal:nth-child(6){ transition-delay: .4s; }

html.js .hero-entree{
  animation: heroEntree .8s ease both;
}
html.js .hero-entree.hero-entree-retard{
  animation-delay: .15s;
}
@keyframes heroEntree{
  from{ opacity: 0; transform: translateY(20px); }
  to{ opacity: 1; transform: none; }
}

body{
  margin: 0;
  font-family: var(--font-corps);
  color: var(--noir);
  background: #F5EFE4;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3{
  font-family: var(--font-titre);
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 .5em;
  letter-spacing: .01em;
}

p{ margin: 0 0 1em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

:focus-visible{
  outline: 3px solid var(--rouge);
  outline-offset: 2px;
}

/* ---------- Boutons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--font-corps);
  font-weight: 700;
  font-size: .95rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border: 2px solid var(--noir);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn-rouge{
  background: var(--rouge);
  border-color: var(--rouge);
  color: var(--blanc);
}
.btn-rouge:hover{ background: var(--rouge-fonce); border-color: var(--rouge-fonce); }

.btn-noir{
  background: var(--noir);
  border-color: var(--noir);
  color: var(--blanc);
}
.btn-noir:hover{ background: #000; }

.btn-blanc{
  background: var(--blanc);
  border-color: var(--blanc);
  color: var(--noir);
}
.btn-blanc:hover{ background: var(--beton); }

.btn-outline{
  background: transparent;
  border-color: var(--noir);
  color: var(--noir);
}
.btn-outline:hover{ background: var(--noir); color: var(--blanc); }

.btn-sm{ padding: 9px 14px; font-size: .78rem; }
.btn-block{ width: 100%; }

/* ---------- Logo losange ---------- */
.logo{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-titre);
  font-size: 1.3rem;
  letter-spacing: .01em;
  color: var(--blanc);
}
.logo-mark{
  width: 34px;
  height: 34px;
  flex: none;
}
.logo small{
  display: block;
  font-family: var(--font-mono);
  font-size: .55rem;
  letter-spacing: .18em;
  color: var(--gris-clair);
  text-transform: uppercase;
}

.logo-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blanc);
  border-radius: var(--radius);
  padding: 4px 10px;
  flex: none;
}
.logo-badge img{
  display: block;
  height: 40px;
  width: auto;
}
.site-footer .logo-badge img{ height: 52px; }
.logo-sub{
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--gris-clair);
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header{
  background: var(--noir);
  color: var(--blanc);
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 3px solid var(--rouge);
}
.site-header .topbar{
  background: #000;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--gris-clair);
}
.site-header .topbar .container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
  gap: 12px;
  flex-wrap: wrap;
}
.site-header .topbar a{ color: var(--blanc); }
.site-header .topbar a:hover{ color: var(--rouge); }
.topbar-links{ display: flex; gap: 18px; flex-wrap: wrap; }
.topbar-links-mobile{
  display: none;
  align-items: center;
  gap: 8px;
}
.topbar-mobile-sep{ color: var(--rouge); }
@media (max-width: 768px){
  .topbar-links-desktop{ display: none; }
  .topbar-links-mobile{ display: flex; }
  .site-header .topbar .container{ justify-content: center; }
}

.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 16px;
}

.nav-links{
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.nav-links a{
  display: inline-block;
  padding: 10px 14px;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: var(--radius);
  border-bottom: 3px solid transparent;
}
.nav-links a:hover,
.nav-links a[aria-current="page"]{
  border-bottom-color: var(--rouge);
  color: var(--rouge);
}

.nav-cta{ display: flex; align-items: center; gap: 10px; }

.lien-panier{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--blanc);
  border: 2px solid #2a2927;
  border-radius: var(--radius);
  flex: none;
}
.lien-panier:hover{ border-color: var(--rouge); color: var(--rouge); }
.lien-panier svg{ width: 20px; height: 20px; }
.panier-badge{
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.nav-toggle{
  display: none;
  background: transparent;
  border: 2px solid var(--blanc);
  color: var(--blanc);
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 1.1rem;
}

@media (max-width: 860px){
  .nav-toggle{ display: inline-flex; }
  .nav-links{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--noir);
    flex-direction: column;
    align-items: stretch;
    padding: 10px 20px 18px;
    display: none;
    border-bottom: 3px solid var(--rouge);
  }
  .nav-links.is-open{ display: flex; }
  .nav-links a{ padding: 12px 6px; border-bottom: 1px solid #2a2927; }
  .topbar-links{ gap: 12px; }
  .nav-cta .btn span.txt-full{ display: none; }
}

/* ---------- Téléphone header ---------- */
.btn-tel{
  background: transparent;
  border-color: #2a2927;
  color: var(--blanc);
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
  flex: none;
}
.btn-tel:hover{ border-color: var(--rouge); color: var(--rouge); }
.btn-tel svg{ width: 18px; height: 18px; flex: none; }
.btn-tel .txt-tel{ display: none; }
@media (min-width: 640px){
  .btn-tel{ width: auto; height: auto; padding: 9px 14px; gap: 8px; }
  .btn-tel .txt-tel{ display: inline; }
}

/* ---------- Barre de recherche header ---------- */
.recherche-header{
  background: #000;
  padding: 10px 0;
  border-top: 1px solid #2a2927;
}
.form-recherche-header{
  display: flex;
  max-width: 640px;
  margin: 0 auto;
}
.form-recherche-header input{
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 2px solid var(--gris-clair);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font-corps);
  font-size: .9rem;
  background: var(--blanc);
  color: var(--noir);
}
.form-recherche-header input:focus-visible{ outline-offset: -2px; }
.form-recherche-header button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  flex: none;
  background: var(--rouge);
  border: 2px solid var(--rouge);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--blanc);
  cursor: pointer;
}
.form-recherche-header button:hover{ background: var(--rouge-fonce); border-color: var(--rouge-fonce); }
.form-recherche-header svg{ width: 18px; height: 18px; }

/* ---------- Bandeau rayons ---------- */
.rayons-bar{
  background: var(--beton);
  border-bottom: 1px solid var(--gris-clair);
  color: var(--noir);
}
.rayons-bar .container{ padding-top: 0; padding-bottom: 0; }

.rayons-bar-desktop,
.rayons-bar-mobile{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.rayons-bar-desktop a,
.rayons-bar-mobile a,
.rayons-bar-dropdown a{
  white-space: nowrap;
  padding: 8px 14px;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
}
.rayons-bar-desktop a:hover,
.rayons-bar-mobile a:hover{ border-color: var(--rouge); color: var(--rouge); }

.rayons-bar-desktop{
  display: none;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.rayons-bar-plus{ position: relative; }
.rayons-bar-plus-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 14px;
  background: var(--noir);
  color: var(--blanc);
  border: 1px solid var(--noir);
  border-radius: var(--radius);
  cursor: pointer;
}
.rayons-bar-plus-btn:hover{ background: var(--rouge); border-color: var(--rouge); }
.rayons-bar-plus-btn .fleche-plus{ transition: transform .15s ease; }
.rayons-bar-plus-btn.est-ouvert .fleche-plus{ transform: rotate(180deg); }
.rayons-bar-dropdown{
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px var(--ombre);
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
}
.rayons-bar-dropdown[hidden]{ display: none; }
.rayons-bar-dropdown a{ border: none; background: transparent; }
.rayons-bar-dropdown a:hover{ background: var(--beton); color: var(--rouge); }

.rayons-bar-mobile-wrap{ display: none; position: relative; }
.rayons-bar-mobile{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-top: 12px;
  padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
}
.rayons-bar-mobile-wrap::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(90deg, transparent, var(--beton) 75%);
  pointer-events: none;
}

@media (min-width: 861px){
  .rayons-bar-desktop{ display: flex; }
}
@media (max-width: 860px){
  .rayons-bar-mobile-wrap{ display: block; }
}

/* ---------- Hero ---------- */
.hero{
  background: var(--noir);
  color: var(--blanc);
  position: relative;
  overflow: hidden;
  background-image:
    repeating-linear-gradient(135deg, rgba(212,43,30,.06) 0 2px, transparent 2px 26px);
}
.hero .container{
  padding-top: 64px;
  padding-bottom: 64px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 40px;
  align-items: center;
}

.hero-plein{ min-height: 320px; display: flex; align-items: center; }
.hero-fond{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-voile{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 40%, rgba(0,0,0,.62) 75%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.hero-plein .container{
  position: relative;
  z-index: 2;
  display: block;
  padding-top: 32px;
  padding-bottom: 32px;
}
.hero-plein .hero-entree{ max-width: 620px; }
@media (max-width: 700px){
  .hero-voile{ background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.9) 65%, rgba(0,0,0,1) 100%); }
  .hero-plein{ min-height: 340px; align-items: flex-end; }
}
.hero-eyebrow{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rouge);
  border: 1px solid var(--rouge);
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.hero h1{
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--blanc);
}
.hero h1 em{
  font-style: normal;
  color: var(--rouge);
}
.hero p.lead{
  font-size: .95rem;
  color: var(--blanc);
  max-width: 52ch;
  margin-bottom: .6em;
}
.hero-actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.hero-actions .btn{ padding: 11px 18px; font-size: .85rem; }
.hero-stats{
  display: flex;
  gap: 24px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.hero-stats div{ font-family: var(--font-mono); }
.hero-stats strong{
  display: block;
  font-family: var(--font-titre);
  font-size: 1.3rem;
  color: var(--blanc);
}
.hero-stats span{
  font-size: .72rem;
  color: var(--gris-clair);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hero-stats-souligne{
  display: block;
  font-size: .64rem;
  color: var(--gris-clair);
  opacity: .7;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 2px;
}

.hero-visual{
  background: #0c0b0a;
  border: 1px solid #2a2927;
  border-radius: var(--radius);
  padding: 30px;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 380px;
  justify-self: end;
}
.hero-visual svg{ width: 100%; height: 100%; }

.hero-photo{
  align-self: stretch;
  height: 100%;
  min-height: 420px;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #2a2927;
  background: #0c0b0a;
}
.hero-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-carousel{
  position: relative;
  align-self: stretch;
  height: 100%;
  min-height: 420px;
  width: 100%;
  justify-self: end;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid #2a2927;
  background: #0c0b0a;
}
.hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.is-active{ opacity: 1; }
.hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-slide-legende{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 22px 24px;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,0));
  color: var(--blanc);
  font-family: var(--font-titre);
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.3;
}

@media (max-width: 900px){
  .hero .container{ grid-template-columns: 1fr; }
  .hero-visual{ justify-self: center; max-width: 260px; }
  .hero-carousel{ justify-self: center; max-width: 100%; min-height: 320px; height: 320px; }
  .hero-photo{ justify-self: center; max-width: 100%; min-height: 280px; height: 280px; }
}

/* ---------- Bande des marques (défilement) ---------- */
.marques-section{
  background: var(--noir);
  border-top: 3px solid var(--rouge);
  border-bottom: 1px solid #2a2927;
  padding: 18px 0;
  overflow: hidden;
}
.marques-bande{
  display: flex;
  width: max-content;
  animation: defilerMarques 55s linear infinite;
}
.marques-piste{
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.marque-nom{
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .08em;
  color: var(--gris-clair);
  white-space: nowrap;
  padding: 0 8px;
}
.marque-sep{
  color: var(--rouge);
  padding: 0 10px;
}
.marque-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 8px 18px;
  margin: 0 6px;
  background: var(--blanc);
  border-radius: var(--radius);
  flex: none;
}
.marque-logo img{
  max-height: 32px;
  max-width: 110px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@keyframes defilerMarques{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .marques-bande{ animation: none; }
  .marques-bande .marques-piste[aria-hidden="true"]{ display: none; }
}

/* ---------- Sections génériques ---------- */
section{ padding: 64px 0; }
.section-alt{ background: var(--beton); }
.section-noir{ background: var(--noir); color: var(--blanc); }

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.section-head .tag{
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rouge);
  display: block;
  margin-bottom: 8px;
}
.section-head h2{ margin: 0; }

/* ---------- Offres du moment (accueil) ---------- */
.promo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 380px));
  gap: 20px;
}
.promo-card{
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gris-clair);
  background: var(--blanc);
  display: flex;
  flex-direction: column;
}
.promo-card img{
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  background: var(--beton);
}
.promo-card .promo-cta{
  padding: 18px;
  background: var(--noir);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.promo-card .promo-cta strong{
  color: var(--blanc);
  font-family: var(--font-titre);
  font-size: 1.05rem;
  text-transform: uppercase;
  line-height: 1.2;
}
.promo-card .promo-cta .btn{ align-self: flex-start; margin-top: auto; }

/* ---------- Rayons + Produits vedettes (accueil, deux colonnes) ---------- */
.rayons-vedettes-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px){
  .rayons-vedettes-layout{ grid-template-columns: 1fr; }
}

.rayons-liste{
  display: grid;
  gap: 6px;
  max-width: 520px;
}
.rayon-ligne{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-left: 4px solid var(--couleur-rayon, var(--rouge));
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--noir);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.rayon-ligne:hover{ border-color: var(--couleur-rayon, var(--rouge)); border-left-color: var(--couleur-rayon, var(--rouge)); transform: translateX(4px); background: var(--beton); }
.rayon-ligne .icone-rayon{
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--couleur-rayon, var(--rouge));
}

/* ---------- Couleurs par rayon (20 rayons principaux) ---------- */
.rayon-ligne[data-rayon="carrelage"], .chip-lm[data-rayon="carrelage"]{ --couleur-rayon: #92400E; }
.rayon-ligne[data-rayon="salle-de-bain"], .chip-lm[data-rayon="salle-de-bain"]{ --couleur-rayon: #2563EB; }
.rayon-ligne[data-rayon="cuisine"], .chip-lm[data-rayon="cuisine"]{ --couleur-rayon: #DC2626; }
.rayon-ligne[data-rayon="plomberie"], .chip-lm[data-rayon="plomberie"]{ --couleur-rayon: #059669; }
.rayon-ligne[data-rayon="electricite"], .chip-lm[data-rayon="electricite"]{ --couleur-rayon: #D97706; }
.rayon-ligne[data-rayon="outillage"], .chip-lm[data-rayon="outillage"]{ --couleur-rayon: #4B5563; }
.rayon-ligne[data-rayon="quincaillerie"], .chip-lm[data-rayon="quincaillerie"]{ --couleur-rayon: #78350F; }
.rayon-ligne[data-rayon="peinture"], .chip-lm[data-rayon="peinture"]{ --couleur-rayon: #DB2777; }
.rayon-ligne[data-rayon="portes-fenetres"], .chip-lm[data-rayon="portes-fenetres"]{ --couleur-rayon: #0EA5E9; }
.rayon-ligne[data-rayon="toiture"], .chip-lm[data-rayon="toiture"]{ --couleur-rayon: #7C2D12; }
.rayon-ligne[data-rayon="jardin"], .chip-lm[data-rayon="jardin"]{ --couleur-rayon: #16A34A; }
.rayon-ligne[data-rayon="climatisation-ventilation"], .chip-lm[data-rayon="climatisation-ventilation"]{ --couleur-rayon: #0891B2; }
.rayon-ligne[data-rayon="securite"], .chip-lm[data-rayon="securite"]{ --couleur-rayon: #1E293B; }
.rayon-ligne[data-rayon="energie-solaire"], .chip-lm[data-rayon="energie-solaire"]{ --couleur-rayon: #CA8A04; }
.rayon-ligne[data-rayon="fer-acier"], .chip-lm[data-rayon="fer-acier"]{ --couleur-rayon: #64748B; }
.rayon-ligne[data-rayon="ciment-gros-oeuvre"], .chip-lm[data-rayon="ciment-gros-oeuvre"]{ --couleur-rayon: #78716C; }
.rayon-ligne[data-rayon="menuiserie"], .chip-lm[data-rayon="menuiserie"]{ --couleur-rayon: #B45309; }
.rayon-ligne[data-rayon="revetements-exterieurs"], .chip-lm[data-rayon="revetements-exterieurs"]{ --couleur-rayon: #57534E; }
.rayon-ligne[data-rayon="piscine"], .chip-lm[data-rayon="piscine"]{ --couleur-rayon: #06B6D4; }
.rayon-ligne[data-rayon="promotions-destockage"], .chip-lm[data-rayon="promotions-destockage"]{ --couleur-rayon: #E11D48; }
.chip-lm .icone-rayon{ color: var(--couleur-rayon, var(--gris)); }
.chip-lm.is-active .icone-rayon{ color: var(--rouge); }

/* ---------- Arborescence 2 niveaux (sidebar catalogue) ---------- */
.chip-lm-principal{ font-weight: 700; }
.chip-lm-principal .fleche-groupe{
  transition: transform .15s ease;
  color: var(--gris-clair);
  flex-shrink: 0;
}
.groupe-rayon.est-ouvert .chip-lm-principal .fleche-groupe{ transform: rotate(90deg); }
.sous-rayons-liste{
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: none;
}
.groupe-rayon.est-ouvert .sous-rayons-liste{ display: grid; gap: 1px; }
.chip-lm-sous{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  padding: 7px 12px 7px 32px;
  font-family: var(--font-corps);
  font-size: .8rem;
  color: var(--gris);
  cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.chip-lm-sous:hover{ background: var(--beton); color: var(--noir); }
.chip-lm-sous.is-active{
  background: var(--beton);
  border-left-color: var(--rouge);
  color: var(--rouge);
  font-weight: 600;
}
.rayon-ligne-texte{ flex: 1; min-width: 0; }
.rayon-ligne-texte strong{
  display: block;
  font-family: var(--font-titre);
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.rayon-ligne-texte span{
  display: block;
  font-size: .8rem;
  color: var(--gris);
  margin-top: 2px;
}
.rayon-ligne .fleche{
  color: var(--gris-clair);
  font-size: 1.1rem;
  flex-shrink: 0;
}
/* ---------- Cartes produit ---------- */
.produits-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.produit-card{
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.produit-card:hover{ border-color: var(--rouge); box-shadow: 0 6px 18px var(--ombre); }

.produit-ref{
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.produit-ref .cat{
  color: var(--rouge);
  text-transform: uppercase;
  font-size: .66rem;
}

.produit-img{
  aspect-ratio: 1/1;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  padding: 8%;
  box-sizing: border-box;
}
.produit-img img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.produit-placeholder{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  background:
    linear-gradient(var(--beton), var(--beton));
}
.produit-placeholder svg{ width: 56px; height: 56px; opacity: .18; margin-bottom: 8px; }
.produit-placeholder span{
  display: block;
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gris);
}

.produit-body{
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.produit-body h3{
  font-family: var(--font-corps);
  text-transform: none;
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  min-height: 2.6em;
}
.produit-body h3 a{ color: inherit; text-decoration: none; }
.produit-body h3 a:hover{ color: var(--rouge); }
.produit-cat-tag{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.produit-prix{
  font-family: var(--font-titre);
  font-size: 1.25rem;
  color: var(--rouge);
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.produit-prix-demande{
  font-size: 1rem;
  color: var(--noir);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.produit-prix .fcfa{
  font-family: var(--font-mono);
  font-size: .68rem;
  color: var(--gris);
  margin-left: -4px;
  text-transform: uppercase;
}
.badge-reduc{
  display: inline-block;
  background: var(--rouge);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  line-height: 1.5;
}
.badge-reduc-grand{ font-size: .85rem; padding: 4px 10px; }
.produit-prix-avant{
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--gris);
  text-decoration: line-through;
  margin: -6px 0 8px;
}
.fiche-produit-prix-avant{
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--gris);
  text-decoration: line-through;
  margin: -16px 0 16px;
}
.produit-card .btn{ margin-top: 4px; }
.lien-devis-rapide{
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
  margin-top: 6px;
}
.lien-devis-rapide:hover{ color: var(--rouge); }

.produit-spec{
  font-size: .78rem;
  color: var(--gris);
  line-height: 1.35;
  margin: -4px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.produit-stock{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #1a7d3c;
  margin: 0;
}
.produit-stock .point-stock{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1a7d3c;
  flex: none;
}
.fiche-produit-stock{ font-size: .78rem; margin: 0 0 12px; }
.fiche-produit-stock .point-stock{ width: 9px; height: 9px; }

.produit-garantie{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .68rem;
  color: #0d5c2f;
  margin: 2px 0 0;
}
.produit-garantie svg{ width: 13px; height: 13px; flex: none; }
.fiche-produit-info .produit-garantie{ font-size: .82rem; margin: 0 0 12px; }
.fiche-produit-info .produit-garantie svg{ width: 16px; height: 16px; }

.produit-vide{
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--gris);
  font-family: var(--font-mono);
}

/* ---------- Bandeau Espace Pro ---------- */
.bandeau-pro{
  background: var(--rouge);
  color: var(--blanc);
}
.bandeau-pro .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.bandeau-pro h2{ color: var(--blanc); margin-bottom: 6px; }
.bandeau-pro p{ color: rgba(255,255,255,.9); margin: 0; max-width: 52ch; }

/* ---------- Modes de paiement ---------- */
.paiement-section{ background: var(--beton); }
.paiement-liste{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.paiement-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--noir);
}
.paiement-badge svg{ width: 20px; height: 20px; color: var(--rouge); flex: none; }

/* ---------- Page "Par projet" ---------- */
.projet-bloc{ margin-bottom: 52px; }
.projet-bloc:last-child{ margin-bottom: 0; }
.projet-intro{ max-width: 62ch; color: var(--gris); }
.projet-vide{
  border: 1px dashed var(--gris-clair);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--gris);
}
.projet-vide strong{ display: block; color: var(--noir); margin-bottom: 4px; }
.projets-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.projets-nav a{
  padding: 10px 16px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.projets-nav a:hover{ border-color: var(--rouge); color: var(--rouge); }

/* ---------- Page SAV & Garanties ---------- */
.sav-etapes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 32px;
}
.sav-etape{
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: 12px;
  padding: 22px;
}
.sav-etape-num{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-titre);
  font-size: 1rem;
  margin-bottom: 12px;
}
.sav-etape h3{ font-family: var(--font-corps); text-transform: none; font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.sav-etape p{ color: var(--gris); font-size: .9rem; margin: 0; }

.sav-table-wrap{ overflow-x: auto; margin-bottom: 16px; }
.sav-table{ width: 100%; border-collapse: collapse; background: var(--blanc); min-width: 460px; }
.sav-table th, .sav-table td{ padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--gris-clair); }
.sav-table th{ font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); }
.sav-table td:last-child{ font-weight: 700; }
.sav-note{ font-size: .84rem; color: var(--gris); max-width: 72ch; margin: 0; }

.sav-conseils{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.sav-conseil{
  border-left: 3px solid var(--rouge);
  padding: 4px 0 4px 16px;
}
.sav-conseil h3{ font-family: var(--font-corps); text-transform: none; font-size: .95rem; font-weight: 700; margin-bottom: 4px; }
.sav-conseil p{ color: var(--gris); font-size: .88rem; margin: 0; }

/* ---------- Préparez votre visite ---------- */
.visite-showroom{ background: var(--noir); }
.visite-showroom .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 40px;
  padding-bottom: 40px;
}
.visite-showroom h2{ color: var(--blanc); margin-bottom: 6px; }
.visite-showroom p{ color: rgba(255,255,255,.85); margin: 0; max-width: 52ch; }

/* ---------- Page À propos ---------- */
.apropos-texte{ max-width: 72ch; }
.apropos-texte p{ color: var(--gris); line-height: 1.7; margin-bottom: 1.2em; }
.apropos-texte p:last-child{ margin-bottom: 0; }

.apropos-photos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.apropos-photo{ margin: 0; }
.apropos-photo-placeholder{
  aspect-ratio: 4/3;
  background: var(--beton);
  border: 1px dashed var(--gris-clair);
  border-radius: 12px;
  display: grid;
  place-items: center;
}
.apropos-photo-placeholder span{
  font-family: var(--font-mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
}
.apropos-photo figcaption{
  margin-top: 8px;
  font-size: .82rem;
  color: var(--gris);
  text-align: center;
}

.apropos-chiffres{
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}
.apropos-chiffres div{ font-family: var(--font-mono); }
.apropos-chiffres strong{
  display: block;
  font-family: var(--font-titre);
  font-size: 2rem;
  color: var(--rouge);
}
.apropos-chiffres span{
  font-size: .78rem;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.apropos-legal{ list-style: none; margin: 0; padding: 0; max-width: 60ch; }
.apropos-legal li{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gris-clair);
  flex-wrap: wrap;
}
.apropos-legal li:last-child{ border-bottom: none; }
.apropos-legal strong{ font-weight: 700; }
.apropos-legal span{ color: var(--gris); text-align: right; }
.apropos-legal a{ color: inherit; }

/* ---------- Catalogue façon sidebar (structure Leroy Merlin) ---------- */
.recherche-wrap-top{ margin-bottom: 28px; }
.recherche-wrap-top input[type="search"]{
  width: 100%;
  padding: 17px 20px;
  font-family: var(--font-corps);
  font-size: 1.05rem;
  border: 2px solid var(--noir);
  border-radius: var(--radius);
  background: var(--blanc);
}
.recherche-wrap-top input[type="search"]:focus{
  border-color: var(--rouge);
}

.catalogue-layout{
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 32px;
  align-items: start;
}

.filtres-sidebar{
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  padding: 20px;
  position: sticky;
  top: 90px;
}
.filtres-titre{
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gris-clair);
}
.filtres-liste{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.chip-lm{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  padding: 10px 12px;
  font-family: var(--font-corps);
  font-size: .88rem;
  font-weight: 600;
  color: var(--noir);
  cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.chip-lm:hover{ background: var(--beton); }
.chip-lm.is-active{
  background: var(--beton);
  border-left-color: var(--rouge);
  color: var(--rouge);
}
.chip-count{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--gris);
  font-weight: 400;
}
.chip-lm.is-active .chip-count{ color: var(--rouge); }
.chip-lm-label{ display: flex; align-items: center; gap: 10px; }
.icone-rayon{ width: 18px; height: 18px; flex-shrink: 0; color: var(--gris); }
.chip-lm.is-active .icone-rayon{ color: var(--rouge); }

.resultats-compte{
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gris);
  margin-bottom: 16px;
}

@media (max-width: 900px){
  .catalogue-layout{ grid-template-columns: 1fr; }
  .filtres-sidebar{
    position: static;
    margin-bottom: 20px;
    max-height: 60vh;
    overflow-y: auto;
  }
  .chip-lm.is-active{ border-color: var(--rouge); }
}

/* ---------- Cards génériques (pro / contact) ---------- */
.cards-3{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}
.card{
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  padding: 28px;
}
.card .num{
  font-family: var(--font-mono);
  color: var(--rouge);
  font-size: .8rem;
  margin-bottom: 10px;
  display: block;
}
.card h3{ font-size: 1.1rem; margin-bottom: 10px; }
.card p{ color: var(--gris); font-size: .92rem; }

.card-noir{
  background: var(--noir);
  color: var(--blanc);
  border-color: var(--noir);
}
.card-noir p{ color: var(--gris-clair); }

/* ---------- Table remises ---------- */
.table-remises{
  width: 100%;
  border-collapse: collapse;
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
}
.table-remises th, .table-remises td{
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--gris-clair);
  font-size: .92rem;
}
.table-remises th{
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .05em;
}
.table-remises tr:last-child td{ border-bottom: none; }
.table-wrap{ overflow-x: auto; }

/* ---------- Formulaire ---------- */
.form-pro{
  background: var(--blanc);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 16px;
}
.form-pro label{
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
  color: var(--gris);
}
.form-pro input,
.form-pro select,
.form-pro textarea{
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-corps);
  font-size: .95rem;
  border: 2px solid var(--gris-clair);
  border-radius: var(--radius);
  background: var(--blanc);
}
.form-pro input:focus,
.form-pro select:focus,
.form-pro textarea:focus{
  border-color: var(--rouge);
}
.form-row-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px){
  .form-row-2{ grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}
.infos-liste{ list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.infos-liste li{
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--gris-clair);
}
.infos-liste strong{
  display: block;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rouge);
  margin-bottom: 4px;
}
.infos-icone{
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--noir);
  color: var(--blanc);
  border-radius: var(--radius);
  font-size: 1.1rem;
}
.map-wrap{
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
}
.map-wrap iframe{ width: 100%; height: 100%; border: 0; }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--noir);
  color: var(--gris-clair);
  padding: 56px 0 24px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 800px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.site-footer h4{
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 16px;
}
.site-footer p{ font-size: .88rem; }
.footer-tagline{
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--rouge);
  margin: 0 0 12px;
}
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a{ font-size: .88rem; }
.site-footer a:hover{ color: var(--rouge); }
.footer-bas{
  border-top: 1px solid #2a2927;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--gris);
}

/* ---------- Bouton WhatsApp flottant ---------- */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: var(--blanc);
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  font-size: 1.6rem;
  border: 2px solid #1ea952;
}
.whatsapp-float:hover{ background: #1ea952; }

/* ---------- Fil d'ariane simple ---------- */
.page-intro{
  background: var(--noir);
  color: var(--blanc);
  padding: 44px 0;
  border-bottom: 3px solid var(--rouge);
}
.page-intro .tag{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--rouge);
  text-transform: uppercase;
  letter-spacing: .1em;
  display: block;
  margin-bottom: 10px;
}
.page-intro h1{ color: var(--blanc); margin-bottom: 8px; }
.page-intro p{ color: var(--gris-clair); max-width: 60ch; margin: 0; }

/* ---------- Panier ---------- */
.panier-vide{
  padding: 40px 0;
  text-align: center;
  color: var(--gris);
}
.panier-vide p{ font-family: var(--font-mono); margin-bottom: 20px; }

.panier-liste{
  display: grid;
  gap: 2px;
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  overflow: hidden;
}
.panier-ligne{
  display: grid;
  grid-template-columns: 64px 1fr auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--blanc);
  border-bottom: 1px solid var(--gris-clair);
}
.panier-ligne:last-child{ border-bottom: none; }
.panier-ligne-img{
  width: 64px;
  height: 64px;
  background: var(--beton);
  border-radius: var(--radius);
  overflow: hidden;
}
.panier-ligne-img img{ width: 100%; height: 100%; object-fit: cover; }
.panier-ligne-img .produit-placeholder{ height: 100%; padding: 4px; }
.panier-ligne-img .produit-placeholder svg{ width: 24px; height: 24px; margin-bottom: 2px; }
.panier-ligne-img .produit-placeholder span{ font-size: .5rem; }
.panier-ligne-info{ min-width: 0; display: grid; gap: 4px; }
.panier-ligne-info a{ font-weight: 700; font-size: .92rem; }
.panier-ligne-info a:hover{ color: var(--rouge); }
.panier-ligne-ref{
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--gris);
}
.panier-ligne-qte{
  display: flex;
  align-items: center;
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
}
.panier-qte-btn{
  width: 30px;
  height: 32px;
  background: var(--beton);
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  font-family: var(--font-corps);
}
.panier-qte-btn:hover{ background: var(--gris-clair); }
.panier-qte-input{
  width: 42px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--gris-clair);
  border-right: 1px solid var(--gris-clair);
  text-align: center;
  font-family: var(--font-mono);
  -moz-appearance: textfield;
}
.panier-ligne-total{
  font-family: var(--font-titre);
  font-size: 1rem;
  white-space: nowrap;
}
.panier-ligne-total .fcfa{
  font-family: var(--font-mono);
  font-size: .62rem;
  color: var(--gris);
  margin-left: 3px;
}
.panier-ligne-supprimer{
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--gris);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.panier-ligne-supprimer:hover{ color: var(--rouge); }

.panier-recap{
  margin-top: 24px;
  padding: 24px;
  background: var(--beton);
  border-radius: var(--radius);
}
.panier-recap-total{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gris);
  margin-bottom: 18px;
}
.panier-recap-total strong{
  font-family: var(--font-titre);
  font-size: 1.6rem;
  color: var(--noir);
  text-transform: none;
  letter-spacing: normal;
}
.panier-recap-total .fcfa{ font-size: .7rem; margin-left: 6px; }
.panier-recap-actions{ display: flex; gap: 14px; flex-wrap: wrap; }
.panier-recap-note{
  margin: 14px 0 0;
  font-size: .8rem;
  color: var(--gris);
}

@media (max-width: 640px){
  .panier-ligne{
    grid-template-columns: 48px 1fr auto;
    grid-template-areas: "img info supprimer" "qte qte total";
    row-gap: 10px;
  }
  .panier-ligne-img{ grid-area: img; width: 48px; height: 48px; }
  .panier-ligne-info{ grid-area: info; }
  .panier-ligne-supprimer{ grid-area: supprimer; }
  .panier-ligne-qte{ grid-area: qte; justify-self: start; }
  .panier-ligne-total{ grid-area: total; justify-self: end; }
}

/* ---------- Fiche produit ---------- */
.fil-ariane{
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--gris);
  padding: 20px 0 0;
}
.fil-ariane a{ color: var(--gris); }
.fil-ariane a:hover{ color: var(--rouge); }
.fil-ariane .separateur{ margin: 0 6px; color: var(--gris-clair); }

.chargement-produit, .produit-introuvable{
  padding: 60px 0;
  text-align: center;
  color: var(--gris);
  font-family: var(--font-mono);
}

.fiche-produit{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  padding: 32px 0 56px;
  align-items: start;
}
.fiche-produit-image{
  aspect-ratio: 1;
  background: var(--beton);
  border: 1px solid var(--gris-clair);
  border-radius: var(--radius);
  overflow: hidden;
  position: sticky;
  top: 100px;
}
.fiche-produit-image img{ width: 100%; height: 100%; object-fit: cover; }
.fiche-produit-image .produit-placeholder{ height: 100%; }
.fiche-produit-info .ref-badge{
  display: inline-block;
  background: var(--noir);
  color: var(--blanc);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 7px 14px;
}
.fiche-produit-info .cat-tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--rouge);
  margin-left: 10px;
}
.fiche-produit-info h1{
  margin: 18px 0 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: none;
  font-family: var(--font-corps);
  font-weight: 800;
}
.fiche-produit-prix{
  font-family: var(--font-titre);
  font-size: 2.2rem;
  color: var(--rouge);
  margin: 10px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.fiche-produit-prix .fcfa{
  font-family: var(--font-mono);
  font-size: .9rem;
  color: var(--gris);
  text-transform: uppercase;
  margin-left: 6px;
}
.fiche-produit-desc{
  color: var(--gris);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 52ch;
}
.fiche-produit-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.fiche-confiance{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px;
  margin-bottom: 24px;
  background: var(--beton);
  border-radius: var(--radius);
}
.fiche-confiance-item{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  line-height: 1.35;
  color: var(--gris);
}
.fiche-confiance-item svg{
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--rouge);
}
@media (max-width: 640px){
  .fiche-confiance{ grid-template-columns: 1fr; }
}
.fiche-produit-meta{
  border-top: 1px solid var(--gris-clair);
  padding-top: 20px;
  display: grid;
  gap: 10px;
  font-size: .9rem;
}
.fiche-produit-meta div{ display: flex; justify-content: space-between; max-width: 360px; }
.fiche-produit-meta strong{ color: var(--gris); font-weight: 600; }

@media (max-width: 800px){
  .fiche-produit{ grid-template-columns: 1fr; gap: 28px; }
  .fiche-produit-image{ position: static; }
}

/* ---------- Utilitaires ---------- */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.center-txt{ text-align: center; }
.mt-0{ margin-top: 0; }