:root{
  --bg:#0b0f14;
  --panel:#101724;
  --panel2:#0f1520;
  --text:#ffffff;
  --muted:rgba(255,255,255,.82);
  --accent:#4169E1;
  --line:rgba(255,255,255,.08);
  --shadow: 0 12px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{
  margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #070a0f, var(--bg));
  color:var(--text);
}
a{color:inherit}
.container{width:min(1100px, 92%); margin:0 auto}
.header{
  position:sticky; top:0; z-index:5;
  background:rgba(11,15,20,.82); border-bottom:1px solid var(--line);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0}
.brand{text-decoration:none; font-weight:800; letter-spacing:.5px}
.brand span{color:var(--accent)}
.nav{display:flex; gap:14px}
.nav a{opacity:.85; text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a.active,.nav a:hover{background:rgba(255,255,255,.06); opacity:1}
.cartBtn{text-decoration:none; display:flex; align-items:center; gap:8px}
.badge{
  display:inline-flex; min-width:22px; height:22px; padding:0 6px;
  align-items:center; justify-content:center; border-radius:999px;
  background:rgba(65,105,225,.16); border:1px solid rgba(65,105,225,.35);
  color:var(--accent); font-weight:700; font-size:12px;
}

.hero{padding:44px 0 26px; border-bottom:1px solid var(--line)}
.hero__inner{display:grid; grid-template-columns: 1.3fr .9fr; gap:22px; align-items:start}
h1{margin:0 0 10px; font-size: clamp(28px, 4vw, 44px); line-height:1.05}
.accent{color:var(--accent)}
.lead{color:var(--muted); font-size:16px; max-width:56ch}
.cta{display:flex; gap:12px; margin:18px 0 14px; flex-wrap:wrap}
.btn{
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
  color:var(--text); border-radius:14px; padding:12px 14px;
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: none;
}

.btn--primary{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(65,105,225,.98), rgba(20,60,180,.98));
  border-color: rgba(65,105,225,.55);
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 1px 0 rgba(0,0,0,.28);
  box-shadow:
    0 10px 22px rgba(0,0,0,.25),
    0 0 22px rgba(65,105,225,.28);
}
.btn--primary::before{
  content:"";
  position:absolute;
  inset:-40% -60%;
  background: linear-gradient(120deg,
    rgba(255,255,255,0) 35%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,0) 55%);
  transform: translateX(-35%) rotate(8deg);
  animation: shineSweep 4.8s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode: screen;
}
@keyframes shineSweep{
  0%, 40%{ transform: translateX(-45%) rotate(8deg); opacity:.0; }
  55%{ opacity:.95; }
  85%, 100%{ transform: translateX(45%) rotate(8deg); opacity:0; }
}

/* Texte bleu "brillant" (sans recouvrir) */
.accent, .brand span, .price, .orderTotal, .cartRow__sum, .productPrice, .breadcrumb a{
  color: var(--accent);
  text-shadow: 0 0 12px rgba(65,105,225,.28);
}
.btn--ghost:hover,.btn:hover{filter:brightness(1.06)}
.btn--small{padding:10px 12px; border-radius:12px; font-weight:700}
.trust{display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:14px}
.fineprint{color:rgba(233,238,247,.55); font-size:12px}

.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:18px; padding:16px;
  box-shadow: var(--shadow);
}
.heroCard__title{font-weight:800; margin-bottom:10px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{
  display:block; padding:12px; border-radius:14px; text-decoration:none;
  background:rgba(255,255,255,.05); border:1px solid var(--line);
}
.tile:hover{background:rgba(255,255,255,.07)}
.heroCard__note{margin-top:10px; color:var(--muted); font-size:13px}

.section{padding:26px 0}
.section--alt{background: rgba(255,255,255,.03); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
h2{margin:0 0 14px; font-size:22px}

.products{display:grid; grid-template-columns: repeat(4, 1fr); gap:14px}
.card{
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:18px; overflow:hidden; box-shadow: var(--shadow);
}
.card__img{background:rgba(0,0,0,.25); aspect-ratio: 16/9; border-radius:18px; overflow:hidden}
.card__img img{width:100%; height:100%; object-fit:contain; display:block; background:rgba(0,0,0,.15)}
.card__body{padding:12px}
.card__title{margin:0 0 6px; font-size:15px}
.card__short{margin:0 0 10px; color:var(--muted); font-size:13px; min-height:34px}
.card__bottom{display:flex; align-items:center; justify-content:space-between; gap:10px}
.price{font-weight:900; color:var(--accent)}

.shopTop{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.input,.select, textarea.input{
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  color:var(--text); padding:10px 12px; border-radius:12px; outline:none;
}
.note{
  margin-top:16px; padding:12px; border-radius:14px;
  background:rgba(65,105,225,.08); border:1px solid rgba(65,105,225,.18);
  color: rgba(233,238,247,.9);
}

.panel{
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}

.field{display:block; margin:10px 0}
.field span{display:block; margin-bottom:6px; color:rgba(233,238,247,.8); font-size:13px}

.cart{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.cartRow{
  display:grid; grid-template-columns: 70px 1fr 150px 120px 90px;
  gap:10px; align-items:center;
  padding:10px; border-radius:16px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.cartRow__img{width:70px; height:52px; object-fit:cover; border-radius:12px}
.cartRow__name{font-weight:800}
.cartRow__meta{color:var(--muted); font-size:12px}
.cartRow__qty{display:flex; gap:8px; align-items:center; justify-content:flex-start}
.qtyBtn{
  width:34px; height:34px; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); color:var(--text); cursor:pointer;
}
.qtyInput{
  width:54px; text-align:center; border-radius:12px; border:1px solid var(--line);
  background:rgba(255,255,255,.05); color:var(--text); padding:8px 10px;
}
.cartRow__sum{font-weight:900; color:var(--accent)}
.linkBtn{
  border:none; background:transparent; color:rgba(233,238,247,.75);
  text-decoration:underline; cursor:pointer;
}
.cartSummary{
  margin-top:14px; display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:12px; border-radius:16px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}

.footer{padding:18px 0; border-top:1px solid var(--line); color:rgba(233,238,247,.7)}
.footer__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.footer__links{display:flex; gap:12px}
.footer__links a{text-decoration:none; opacity:.85}
.footer__links a:hover{opacity:1}

.empty{padding:18px; border:1px dashed var(--line); border-radius:14px; color:var(--muted)}
code{background:rgba(255,255,255,.06); padding:2px 6px; border-radius:8px; border:1px solid var(--line)}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .products{grid-template-columns: repeat(2, 1fr)}
  .cartRow{grid-template-columns: 70px 1fr; grid-auto-rows:auto}
  .cartRow__qty,.cartRow__sum,.linkBtn{grid-column: 2}
}


/* --- Web feel upgrades (moins "application") --- */
.header{ box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.header__inner{ padding: 18px 0; }

.brand{ display:flex; align-items:center; gap:12px; }

/* Logo header (taille stable desktop + mobile) */
.brand__logo{
  /* Logo dominant (format fourni) */
    width: clamp(160px, 16vw, 320px);
  height: auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25), 0 0 18px rgba(65,105,225,.28), 0 0 42px rgba(65,105,225,.12);
  filter: drop-shadow(0 0 10px rgba(65,105,225,.18));
  transition: box-shadow .25s ease, filter .25s ease, transform .25s ease;
  animation: brandGlow 3.8s ease-in-out infinite;
}

.brand__text{ display:none; } /* On laisse le logo faire l'identité */

.nav a{
  font-weight: 700;
  letter-spacing: .2px;
}

.hero{ padding: 56px 0 34px; }
.heroCard{ border-radius: 22px; }

/* Plus "site" : sections plus aérées */
.section{ padding: 40px 0; }
.section--alt{ padding: 44px 0; }

/* Cartes produits un peu plus "boutique" */
.card{ border-radius: 22px; }
.card__title{ font-size: 16px; }
.card__short{ font-size: 13.5px; }

/* Footer plus classique */
.footer{ padding: 26px 0; }

.topbar{
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; padding:10px 0; color: rgba(233,238,247,.72);
  font-size: 13px;
}
.topbar__right{ white-space:nowrap; }
@media (max-width: 720px){
  .topbar__inner{ flex-direction:column; align-items:flex-start; }
  .topbar__right{ white-space:normal; }
}


/* --- Carousel card (style boutique) --- */
.carouselCard{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius: 22px;
  padding: 16px;
  box-shadow: var(--shadow);
}
.carouselCard__title{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.carousel{
  position: relative;
}
.carousel__viewport{
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.25);
}
.carousel__track{
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  transition: transform 420ms ease;
  will-change: transform;
}
.carousel__slide{
  margin: 0;
  position: relative;
  flex: 0 0 100%;
  max-width: 100%;
}
.carousel__slide img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}
.carousel__slide figcaption{
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(233,238,247,.92);
  background: rgba(11,15,20,.65);
  border: 1px solid rgba(255,255,255,.12);
  }

.carousel__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(11,15,20,.55);
  color: rgba(233,238,247,.9);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  }
.carousel__btn:hover{ filter: brightness(1.08); }
.carousel__btn--prev{ left: 10px; }
.carousel__btn--next{ right: 10px; }

.carousel__dots{
  display:flex;
  gap:8px;
  justify-content:center;
  padding: 10px 0 0;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.dot.is-active{
  background: rgba(65,105,225,.8);
  border-color: rgba(65,105,225,.6);
}

.carouselCard__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  border: 1px solid rgba(65,105,225,.35);
  background: rgba(65,105,225,.12);
  color: rgba(65,105,225,.95);
}
.pill--ghost{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,247,.92);
}
.carouselCard__note{
  margin-top: 10px;
  color: rgba(233,238,247,.62);
  font-size: 12.5px;
}
@media (max-width: 980px){
  .carousel__slide img{ height: 220px; }
  .brand__logo{
  /* Logo réduit x3 (comme V1.06) */
  width: clamp(40px, 6vw, 86px);
  height: auto;
  display:block;
  transition: box-shadow .25s ease, filter .25s ease, transform .25s ease;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

}


/* --- Header interactions: panier plus visible + hover doré --- */
.cartBtn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  font-weight: 900;
}
.cartBtn:hover{
  border-color: rgba(65,105,225,.55);
  background: rgba(65,105,225,.12);
  box-shadow: 0 10px 22px rgba(65,105,225,.12);
}
.cartBtn .badge{
  min-width: 26px;
  height: 26px;
  font-size: 13px;
}

/* Hover doré sur les liens du menu */
.nav a{
  position: relative;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, opacity 160ms ease;
}
.nav a:hover{
  opacity: 1;
  color: rgba(65,105,225,.95);
  background: rgba(65,105,225,.10);
  transform: translateY(-1px);
}
.nav a::after{
  content:"";
  position:absolute;
  left:10px; right:10px; bottom:5px;
  height:2px;
  background: linear-gradient(90deg, rgba(65,105,225,0), rgba(65,105,225,.85), rgba(65,105,225,0));
  opacity:0;
  transition: opacity 160ms ease;
}
.nav a:hover::after{ opacity:1; }

.nav a.active{
  border: 1px solid rgba(65,105,225,.22);
  background: rgba(65,105,225,.08);
}


/* --- Nouveautés : rectangle lumineux premium --- */
.newSection{
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(65,105,225,.28);
  background:
    radial-gradient(1200px 300px at 20% 0%, rgba(65,105,225,.10), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  box-shadow:
    0 0 0 1px rgba(65,105,225,.08) inset,
    0 18px 40px rgba(0,0,0,.40),
    0 0 38px rgba(65,105,225,.10);
}
.newSection::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 24px;
  pointer-events:none;
  background: linear-gradient(90deg,
    rgba(65,105,225,0),
    rgba(65,105,225,.30),
    rgba(65,105,225,0)
  );
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;
  opacity: .65;
}

/* Panier : rendu plus lisible */
.cartBtn{
  display:flex;
  align-items:center;
  gap:10px;
  white-space: nowrap;
}


/* --- Menu principal plus grand --- */
.nav a{
  font-size: 18px;
  padding: 10px 14px;
}
@media (max-width: 980px){
  .nav a{ font-size: 16px; padding: 10px 12px; }
  .brand__logo{
  /* Logo réduit x3 (comme V1.06) */
  width: clamp(40px, 6vw, 86px);
  height: auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

}
@media (max-width: 520px){
  .brand__logo{
  /* Logo réduit x3 (comme V1.06) */
  width: clamp(40px, 6vw, 86px);
  height: auto;
  display:block;
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.25);
}

}


.accountBtn{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  text-decoration:none;
  font-weight: 900;
  white-space: nowrap;
}
.accountBtn:hover{
  border-color: rgba(65,105,225,.55);
  background: rgba(65,105,225,.10);
  box-shadow: 0 10px 22px rgba(65,105,225,.10);
}
.accountBtn.active{
  border-color: rgba(65,105,225,.35);
  background: rgba(65,105,225,.08);
}

/* Account layout */
.gridAccount{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.twoCols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.orders{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.orderRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.orderId{ font-weight: 900; }
.orderMeta{ color: var(--muted); font-size: 13px; }
.orderTotal{ font-weight: 900; color: var(--accent); }
@media (max-width: 980px){
  .gridAccount{ grid-template-columns: 1fr; }
  .twoCols{ grid-template-columns: 1fr; }
}




/* --- Fix overlap + header align pro --- */
.header{
  position: relative; /* enlève le sticky qui peut chevaucher le contenu */
  top: auto;
}
.header__inner{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  flex-wrap: unset; /* annule le wrap précédent */
}
.headerActions{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end;
}

/* --- Social icons in header (all pages) --- */
.headerSocial{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:6px;
}
.headerSocial a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
}
.headerSocial img{
  width:28px;
  height:28px;
  object-fit:contain;
  display:block;
}
.headerSocial a:hover{
  transform: translateY(-1px) scale(1.04);
  border-color: rgba(90,160,255,.35);
  background: rgba(90,160,255,.08);
  filter: drop-shadow(0 0 10px rgba(90,160,255,.55)) drop-shadow(0 0 22px rgba(255,255,255,.18));
}
.headerSocial a:focus-visible{
  outline:2px solid rgba(120,190,255,.7);
  outline-offset:3px;
}

/* Contact form: larger message box */
.contact-form textarea.input{
  min-height: 190px;
  resize: vertical;
}
.contact-form .help{
  display:block;
  font-size: 12px;
  color: rgba(233,238,247,.72);
  margin-top: 6px;
}
.nav{
  justify-content:center;
}
/* Empêche le menu de casser l'alignement */
.nav a{ line-height: 1.1; }

@media (max-width: 980px){
  .header__inner{
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .nav{ justify-content:flex-start; flex-wrap:wrap; }
  .headerActions{ width:100%; justify-content:flex-start; }
}


.accountBtn, .cartBtn{
  height: 44px;
}


/* --- Boutique : sidebar catégories (style site marchand) --- */
.shopLayout{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 16px;
  align-items: start;
}
.sidebar{
  position: sticky;
  top: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.sidebar__title{
  font-weight: 900;
  letter-spacing: .2px;
  margin-bottom: 10px;
}
.sidebar__divider{
  height: 1px;
  background: var(--line);
  margin: 12px 0;
}
.sideNav{ display:flex; flex-direction:column; gap:8px; }
.sideLink{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(233,238,247,.92);
}
.sideLink:hover{
  border-color: rgba(65,105,225,.35);
  background: rgba(65,105,225,.10);
  color: rgba(65,105,225,.95);
}
.sideLink.is-active{
  border-color: rgba(65,105,225,.45);
  background: rgba(65,105,225,.12);
  box-shadow: 0 0 0 1px rgba(65,105,225,.10) inset;
}
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(233,238,247,.88);
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
}
.chip:hover{
  border-color: rgba(65,105,225,.45);
  background: rgba(65,105,225,.10);
  color: rgba(65,105,225,.95);
}
 .sidebar__hint{
  color: rgba(255,255,255,.82);
  font-size: 12.5px;
  line-height: 1.35;
}
.shopMain .products{ grid-template-columns: repeat(3, 1fr); }

@media (max-width: 980px){
  .shopLayout{ grid-template-columns: 1fr; }
  .sidebar{ position: relative; top:auto; }
  .shopMain .products{ grid-template-columns: repeat(2, 1fr); }
}

/* === MTM Loisirs v0.01 — Concessionnaire Officiel (accueil) === */
.heroTitle{ font-size: 44px; line-height: 1.05; margin: 0 0 10px; }
.heroSub{ margin: 0 0 14px; color: rgba(233,238,247,.78); }
.badgeGold{
  display:inline-flex; align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(65,105,225,.42);
  background: linear-gradient(180deg, rgba(65,105,225,.16), rgba(20,60,180,.10));
  color: rgba(65,105,225,.98);
  text-shadow: 0 0 14px rgba(65,105,225,.22);
  box-shadow: 0 0 18px rgba(65,105,225,.12);
}
.muted{ color: rgba(233,238,247,.70); }

.brandShowcase{
  margin-top: 10px;
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.brandShowcase__headline{ font-weight: 900; margin-bottom: 10px; }

.brandList{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap: wrap; gap: 10px;
}
.brandList li{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(11,15,20,.35);
  color: rgba(233,238,247,.90);
  font-weight: 900;
  letter-spacing: .2px;
  opacity: 0;
  transform: translateY(8px);
}
.brandShowcase.is-in .brandList li{
  animation: brandIn 520ms ease forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes brandIn{ to{ opacity: 1; transform: translateY(0); } }

.locationLine{
  margin-top: 12px;
  color: rgba(233,238,247,.70);
  font-size: 13.5px;
}
.reunionGreen{
  color: rgba(60, 255, 160, .95);
  font-weight: 900;
  text-shadow: 0 0 18px rgba(60,255,160,.18);
}
.heroCtas{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.trustRow{ display:flex; flex-wrap:wrap; gap: 14px; margin-top: 12px; color: rgba(233,238,247,.70); font-size: 13.5px; }
.trustItem{ display:inline-flex; align-items:center; gap:8px; }

@media (max-width: 980px){
  .heroTitle{ font-size: 34px; }
  .brandList li{ padding: 9px 10px; border-radius: 14px; }
}


.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 380px at 25% 20%, rgba(0,0,0,.15), rgba(0,0,0,.78)),
    linear-gradient(180deg, rgba(11,15,20,.65), rgba(11,15,20,.86)),
    url("assets/home-bg.png");
  background-size: cover;
  background-position: center;
  opacity: .42; /* assez léger pour garder le texte lisible */
  filter: saturate(1.05) contrast(1.05);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(11,15,20,.78) 0%, rgba(11,15,20,.35) 45%, rgba(11,15,20,.78) 100%);
  opacity: .55; /* fondu supplémentaire */
  pointer-events:none;
}
.hero > * , .hero .container{ position: relative; z-index: 1; }



  45%{ background-position: 100% 50%; }
  100%{ background-position: 100% 50%; }
}


/* === MTM Loisirs v0.03 — Effet doré fluide sur les marques === */
.brandList li{
  position: relative;
  overflow: hidden;
}
.brandShowcase.is-in .brandList li{
  animation: brandIn 520ms ease forwards, shimmer 8.5s linear infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.4s);
}
.brandShowcase.is-in .brandList li{
  background-image:
    linear-gradient(110deg,
      rgba(65,105,225,0) 0%,
      rgba(65,105,225,.10) 40%,
      rgba(130,160,255,.55) 50%,
      rgba(255,255,255,.16) 52%,
      rgba(65,105,225,.10) 60%,
      rgba(65,105,225,0) 100%
    );
  background-size: 260% 100%;
  background-position: 0% 50%;
}
@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 120% 50%; }
}



}
  100%{ transform: translate(-2%, 1%); }
}




  .hero, .section{ background: rgba(11,15,20,.92); }
}


  .hero .container, .section .container{
    border-radius: 18px;
    padding: 18px;
  }
}


  .hero .container, .section .container{
    border-radius: 18px;
    padding: 18px;
  }
}

/* v1.04: topbar supprimée */
.topbar{ display:none !important; }


}

/* === MTM Loisirs v1.05 — Background retiré (fond premium simple) === */
html{ background: rgba(11,15,20,1); }
body{ background: rgba(11,15,20,1); }
.hero .container, .section .container{
  background: rgba(11,15,20,.94);
}

/* v1.06 — liens fiche produit */
.card__link{ color: inherit; text-decoration: none; }
.card__link:hover{ text-decoration: underline; }
.card__actions{ display:flex; gap:10px; align-items:center; }
.btn--ghost{ background: transparent; border:1px solid rgba(255,255,255,.14); }
.btn--ghost:hover{ border-color: rgba(65,105,225,.85); color: #4169E1; }

/* v1.06 — fiche produit premium */
.breadcrumb{ display:flex; gap:10px; align-items:center; color: rgba(255,255,255,.65); margin-bottom: 14px; flex-wrap:wrap; }
.breadcrumb a{ color: rgba(65,105,225,.95); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

.productPage{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; }
.productMedia{ background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px; }
.productImg{ width:100%; height:auto; border-radius: 14px; display:block; }
.productInfo{ padding: 4px; }
.productTitle{ margin:0 0 8px 0; font-size: 30px; letter-spacing:.2px; }
.productPrice{ font-size: 22px; font-weight: 800; color: #4169E1; margin-bottom: 10px; }
.productShort{ color: rgba(255,255,255,.80); line-height: 1.55; margin-bottom: 12px; }
.productBullets{ margin: 0 0 14px 18px; color: rgba(255,255,255,.78); }
.productBuy{ display:flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 10px; }
.productMeta{ margin-top: 10px; padding-top: 10px; border-top:1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.72); display:grid; gap: 6px; }
.productNote{ margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(65,105,225,.10); border: 1px solid rgba(65,105,225,.25); color: rgba(255,255,255,.85); }

@media (max-width: 980px){
  .productPage{ grid-template-columns: 1fr; }
  .productTitle{ font-size: 26px; }
}

/* Liens marques cliquables */
.brandList a{
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.brandList li:hover{
  border-color: rgba(65,105,225,.55);
  box-shadow: 0 0 18px rgba(65,105,225,.12);
}

/* Icônes navigation */
.nav a{ display:inline-flex; align-items:center; gap:8px; }
.nav .navIcon{ width:18px; height:18px; opacity:.92; }


/* === Boutique PRO: Constructeurs (compteurs) + Sidebar mobile repliable === */
.shopTop__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.sidebarToggleBtn{
  display:none;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(65,105,225,.35);
  background: linear-gradient(180deg, rgba(65,105,225,.18), rgba(65,105,225,.08));
  color: rgba(233,238,247,.95);
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 0 18px rgba(65,105,225,.12);
}
.sidebarToggleBtn:hover{
  box-shadow: 0 0 22px rgba(65,105,225,.18);
}

.brandRow{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.brandCount{
  min-width: 28px;
  text-align:center;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(65,105,225,.35);
  background: rgba(65,105,225,.12);
  color: rgba(65,105,225,.98);
  text-shadow: 0 0 14px rgba(65,105,225,.22);
  font-weight: 900;
  font-size: 12px;
}
.sideLink.is-empty{
  opacity: .88;
}

.sidebarOverlay{
  display:none;
}

/* Mobile off-canvas sidebar */
@media (max-width: 980px){
  .sidebarToggleBtn{ display:inline-flex; }
  .sidebar{
    position: fixed;
    top: 12px;
    left: -340px;
    width: 310px;
    height: calc(100dvh - 24px);
    overflow: auto;
    z-index: 80;
    transition: left 240ms ease;
  }
  body.sidebar-open .sidebar{ left: 12px; }

  .sidebarOverlay{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    z-index: 70;
    transition: opacity 200ms ease;
  }
  body.sidebar-open .sidebarOverlay{
    opacity: 1;
    pointer-events: auto;
  }
}


/* Collapsible sidebar sections (Catégories / Constructeurs) */
.sidebar__toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 10px;
  border:0;
  background:transparent;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  cursor:pointer;
}
.sidebar__toggle .chev{
  width: 18px; height: 18px;
  display:inline-flex; align-items:center; justify-content:center;
  color: rgba(255,255,255,.85);
  transition: transform 180ms ease;
}
.sidebar__panel{
  overflow:hidden;
  max-height: 1000px;
  transition: max-height 220ms ease;
}
.sidebar__panel.is-collapsed{
  max-height: 0px;
}
.sidebar__panel.is-collapsed + .sidebar__divider{ /* keep spacing tidy if divider follows panel */
  margin-top: 10px;
}
.sidebar__toggle[aria-expanded="false"] .chev{
  transform: rotate(-90deg);
}


/* === v1.16 Architecture shop (brands counts + account grid) === */
.sideLink--brand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.sideLink__left{
  display:flex;
  align-items:center;
  gap:8px;
}
.sideLink__label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 170px; }
.sideLink__count{
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  color: #4169E1;
  background: rgba(65,105,225,0.12);
  border: 1px solid rgba(65,105,225,0.35);
  box-shadow: 0 0 10px rgba(65,105,225,0.22);
  font-weight: 700;
  font-size: 12px;
}
.sideLink.is-disabled{
  opacity: .55;
  pointer-events: none;
}

.accountGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (max-width: 860px){
  .accountGrid{ grid-template-columns: 1fr; }
}
.btn.is-disabled{
  opacity:.65;
  cursor:not-allowed;
}
.loadMore{ width:100%; margin-top: 16px; }


/* =========================
   Footer e-commerce (pro)
   ========================= */
.footer{margin-top:48px; padding:28px 0; border-top:1px solid rgba(255,255,255,.08)}
.footer__grid{display:grid; gap:18px; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr}
.footer__logo{font-weight:800; letter-spacing:.06em}
.footer__desc{margin:10px 0 12px; opacity:.85; line-height:1.35}
.footer__meta{opacity:.8; font-size:.92rem}
.footer__col h4{margin:0 0 10px; font-size:1rem; letter-spacing:.02em}
.footer__col a{display:block; padding:6px 0; text-decoration:none; color:inherit; opacity:.85}
.footer__col a:hover{opacity:1}
.footer__payline{opacity:.85; line-height:1.35}
.footer__pill{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.10); border-radius:999px; margin-top:10px; opacity:.9}
.footer__bottom{margin-top:18px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; opacity:.85; font-size:.92rem}

@media (max-width: 980px){
  .footer__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .footer__grid{grid-template-columns: 1fr}
}

.brand__logo:hover{
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 22px rgba(65,105,225,.38), 0 0 60px rgba(65,105,225,.18);
  transform: translateY(-1px);
}

@keyframes brandGlow{
  0%,100%{ filter: drop-shadow(0 0 10px rgba(65,105,225,.18)); }
  50%{ filter: drop-shadow(0 0 18px rgba(65,105,225,.28)); }
}


/* --- Icon colors (blue icons, white text) --- */
.nav a{ color:#fff; }
.nav a .navIcon{ color: var(--royalBlue, #4169E1); }

.headerActions a{ color:#fff; }
.headerActions a .actionIcon{width:18px;height:18px;opacity:.92;vertical-align:-3px;margin-right:8px;flex:0 0 18px}


/* === HEADER LAYOUT FIX (logo big + nav stable) === */
.header__inner{align-items:center;}
.brand{display:flex; align-items:center; gap:14px; flex:0 0 auto;}
.nav{flex:1 1 auto; justify-content:center; align-items:center; min-width: 320px;}
.nav a{display:flex; align-items:center; gap:10px; white-space:nowrap; color:#fff;}
.headerActions{flex:0 0 auto;}
.accountBtn,.cartBtn{display:flex; align-items:center; gap:10px; color:#fff;}
.navIcon{color: var(--royalBlue, #4169E1);}
.headerActions .actionIcon{color: var(--royalBlue, #4169E1); width:18px; height:18px; flex:0 0 18px;}
@media (max-width: 980px){
  .header__inner{flex-wrap:wrap; justify-content:center;}
  .nav{order:3; width:100%; justify-content:center; flex-wrap:wrap;}
  .headerActions{order:2;}
  .brand{order:1;}
}

/* Sort dropdown (Trier par) */
.sortLabel{margin-right:10px;color:rgba(255,255,255,.85);font-weight:700}
#sort{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
}
#sort option{color:#111;}
/* Ensure constructors list visible */
#brandNav{display:flex;flex-direction:column;gap:10px;margin-top:10px}


/* =========================
   Social links (Facebook / YouTube)
   ========================= */
.footer__social{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0}
.contact__social{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.social-link{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.10); border-radius:999px; text-decoration:none; color:inherit; opacity:.9}
.social-link:hover{opacity:1; border-color: rgba(255,255,255,.18)}
.social-link .icon{width:18px; height:18px; fill:currentColor; opacity:.95}


/* --- Social strip (footer + contact) --- */
.social-strip{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.social-strip__label{font-size:14px; opacity:.85; margin-right:6px; line-height:1.3}
.social-icon{width:30px; height:30px; border-radius:10px; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.02)}
.social-icon img{width:100%; height:100%; object-fit:cover; display:block}
.social-icon:hover{border-color:rgba(255,255,255,.18); transform:translateY(-1px)}


/* Social strip (global, bottom of pages) */
.social-strip--global{margin:24px auto 0;max-width:1100px;padding:0 16px;justify-content:center}
@media (max-width:560px){.social-strip--global{justify-content:flex-start}}