/* ======================================================================
   VARIABLES & BASE
====================================================================== */
:root{
  --brand-yellow:#ffc107;
  --brand-dark:#212529;
  --brand-gold:#d9b26f;

  --radius-sm:.4rem;
  --radius-md:.75rem;
  --radius-lg:1rem;

  --shadow-soft:0 8px 24px rgba(0,0,0,.08);
  --shadow-strong:0 14px 40px rgba(0,0,0,.6);
}

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

body{
  font-family:"Inter", Arial, sans-serif;
  color:#212529;
  line-height:1.6;
}

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

/* ======================================================================
   NAVBAR (DESKTOP)
====================================================================== */
.navbar-brand img{
  height:64px;
  transition:height .2s ease;
}

.nav-link{
  font-weight:500;
}

/* Badge panier */
.badge-cart{
  position:absolute;
  top:-6px;
  right:-10px;
}

/* Bonjour user */
.greet-badge{
  background:var(--brand-yellow);
  color:#111;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
  margin-left:.35rem;
}

/* ======================================================================
   MON COMPTE – STYLE SAXON (DESKTOP)
====================================================================== */
.account-wrapper{
  position:relative;
}

.account-toggle{
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.78rem;
  font-weight:600;
  color:#fff !important;
  position:relative;
}

/* Soulignement doré */
.account-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-4px;
  width:0;
  height:2px;
  background:var(--brand-gold);
  transform:translateX(-50%);
  transition:width .22s ease;
}

.account-toggle:hover::after,
.account-toggle[aria-expanded="true"]::after{
  width:70%;
}

/* Dropdown verre (DESKTOP) */
@media (min-width:992px){
  .navbar .dropdown-menu.account-dropdown{
    background:rgba(10,10,10,.85) !important;
    backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.25);
    border-radius:var(--radius-sm);
    min-width:190px;
    padding:.35rem 0;

    left:50%;
    transform:translateX(-50%) translateY(8px);
    transform-origin:top center;

    opacity:0;
    box-shadow:var(--shadow-strong);
    transition:.2s ease;
  }

  .account-dropdown.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }

  .account-dropdown::before{
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    transform:translateX(-50%);
    border-width:0 7px 7px;
    border-style:solid;
    border-color:transparent transparent rgba(10,10,10,.85);
  }

  .account-dropdown .account-item{
    color:#fff !important;
    font-size:.85rem;
    padding:.45rem 1.1rem;
  }

  .account-dropdown .account-item:hover{
    background:rgba(255,255,255,.08);
  }
}

/* ======================================================================
   HERO / SLIDER
====================================================================== */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item{
  height:70vh;
  min-height:420px;
}

#heroCarousel img{
  height:100%;
  width:100%;
  object-fit:cover;
}

.hero-overlay{
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.35),
    rgba(0,0,0,.6)
  );
}

.hero-caption{
  opacity:0;
  transform:translateY(25px);
  transition:.7s ease;
}

.hero-caption.animate{
  opacity:1;
  transform:translateY(0);
}

/* ======================================================================
   CART / PRODUITS
====================================================================== */
.cart-summary{
  position:sticky;
  top:90px;
  background:#f8f9fa;
  padding:16px;
  border-radius:var(--radius-md);
  border:1px solid #e9ecef;
}

.cart-empty{
  color:#6c757d;
  font-style:italic;
}

.product-card{
  border:1px solid #e9ecef;
  border-radius:var(--radius-md);
  padding:16px;
  height:100%;
  transition:.25s ease;
}

.product-card:hover{
  box-shadow:var(--shadow-soft);
  transform:translateY(-3px);
}

.news-card img{
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}

.promo-badge{
  background:var(--brand-yellow);
  color:#111;
  font-weight:700;
}

/* ======================================================================
   TEXTES & BLOCS
====================================================================== */
.section-text{
  line-height:1.7;
  margin-bottom:1rem;
}

.promo-info{
  background:rgba(0,0,0,.03);
  padding:12px 16px;
  border-left:3px solid var(--brand-yellow);
  border-radius:var(--radius-sm);
}

/* ======================================================================
   ANIMATIONS
====================================================================== */
.reveal{
  opacity:0;
  transform:translateY(35px);
  transition:.7s ease;
}

.reveal.show{
  opacity:1;
  transform:translateY(0);
}

.reveal.delay-1{transition-delay:.15s;}
.reveal.delay-2{transition-delay:.30s;}
.reveal.delay-3{transition-delay:.45s;}

.btn-animated{
  transition:.25s ease;
}

.btn-animated:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}

/* ======================================================================
   RESPONSIVE – TABLET & MOBILE
====================================================================== */
@media (max-width:991.98px){

  /* HERO */
  #heroCarousel{
    height:60vh;
    min-height:360px;
  }

  /* NAVBAR BURGER */
  .navbar-collapse{
    background:#1c2126;
    padding:1rem 1.25rem;
    margin-top:.75rem;
    border-radius:0 0 12px 12px;
  }

  .navbar-nav .nav-link{
    padding:.7rem 0;
    font-size:.9rem;
    letter-spacing:.12em;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .account-toggle::after{
    display:none;
  }

  .navbar .dropdown-menu.account-dropdown{
    position:static !important;
    transform:none !important;
    opacity:1 !important;
    background:transparent !important;
    border:none;
    box-shadow:none;
    padding:.25rem 0 .5rem;
  }

  .account-dropdown::before{
    display:none;
  }

  .account-dropdown .account-item{
    padding:.45rem 0;
    font-size:.85rem;
    color:rgba(255,255,255,.85) !important;
  }

  .navbar-nav > li{
    margin-bottom:.35rem;
  }

  /* CART */
  .cart-summary{
    position:relative;
    top:auto;
    margin-top:1rem;
  }
}

@media (max-width:575.98px){

  body{
    font-size:.95rem;
  }

  #heroCarousel{
    height:55vh;
    min-height:300px;
  }

  .navbar-brand img{
    height:54px;
  }

  .hero-caption h1{
    font-size:1.4rem;
  }
}

/* =========================================================
   DROPDOWN DESKTOP : OUVERTURE AU HOVER
========================================================= */
@media (min-width: 992px){

  .navbar .dropdown:hover > .dropdown-menu.account-dropdown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
    display: block;
  }

  .navbar .dropdown-menu.account-dropdown {
    pointer-events: none;
  }
}