@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root{
  --fond:#f9f7f5;
  --noir:#1a1a1a;
  --gris:#727272;
  --accent:#000;
  --font-body:"Poppins",sans-serif;
  /* --font-accent:"Satisfy",cursive;  // plus besoin */
}

/* BASE */
body{
  font-family:var(--font-body);
  background:var(--fond);
  color:var(--noir);
}
h1,h2,h3,h4,h5{
  font-family:var(--font-body); /* même police que le header */
}


/* Titres avec dégradé éventuel */
.gradient-title{
  background:linear-gradient(90deg,var(--accent),#555);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Bouton gradient noir -> gris (home) */
.btn-gradient{
  background:linear-gradient(90deg,#000,#555);
  border:none;
  color:#fff;
  border-radius:40px;
}
.btn-gradient:hover{
  opacity:.9;
  color:#fff;
}

/* Ratio 3x4 Bootstrap */
.ratio-3x4{--bs-aspect-ratio:133%;}

/* Petit logo arrondi (si besoin) */
.logo-rounded{
  height:40px;
  border-radius:50%;
  object-fit:cover;
}

/* =========================================================
   NAVBAR & SUBNAV (ON GARDE TON STYLE)
   ========================================================= */

/* Navbar principale dorée */
.navbar-custom{
  background:linear-gradient(90deg,#d4af37,#f5e2a4);
  transition:background .3s,box-shadow .3s;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  z-index:1030;
}

/* Variante scrollée (si tu ajoutes la classe .scrolled en JS) */
.navbar-custom.scrolled{
  background:linear-gradient(90deg,#c79b1b,#e3c76a);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}

/* Liens du menu */
.navbar-custom .nav-link{
  color:#111;
  font-family:var(--font-body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.9rem;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus{
  color:#000;
}

/* Marque (texte ZEYS) */
.navbar-custom .navbar-brand{
  color:#000;
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:.1em;
}

/* Burger */
.navbar-custom .navbar-toggler{
  border-color:rgba(0,0,0,.4);
}
.navbar-custom .navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Sous-nav catégories : fond noir, texte blanc */
.subnav-custom{
  background:#000;
  border-top:1px solid rgba(0,0,0,.3);
  border-bottom:2px solid #d4af37;
  z-index:1025;
}
.subnav-custom .nav-link{
  color:#f8f9fa;
  font-family:var(--font-body);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.8rem;
  padding-inline:1rem;
}
.subnav-custom .nav-link:hover,
.subnav-custom .nav-link:focus{
  color:#fff;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:4px;
}
@media (max-width:576px){
  .subnav-custom .nav-link{
    padding-block:.5rem;
  }
}

/* =========================================================
   FOOTER GOLD & NOIR (ON GARDE TON STYLE)
   ========================================================= */

.footer-custom{
  background:#000;
  color:#f8f9fa;
  border-top:3px solid #d4af37;
  font-family:var(--font-body);
}

/* Barre supérieure */
.footer-topbar{
  background:linear-gradient(90deg,#d4af37,#f5e2a4);
  color:#111;
}
.footer-topbar a{color:#111;}
.footer-topbar a:hover{color:#000;}
.footer-topbar i{vertical-align:middle;}

/* Titres colonnes */
.footer-custom h5,
.footer-custom h6{
  color:#d4af37;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.9rem;
  font-weight:600;
}

/* Liens */
.footer-custom a{
  color:#f8f9fa;
  text-decoration:none;
  transition:color .2s ease;
}
.footer-custom a:hover{
  color:#f5e2a4;
}

/* HR dorée */
.footer-custom .border-gold{
  border-top:1px solid rgba(212,175,55,.6);
}

/* Réseaux footer */
.footer-social a{
  color:#f8f9fa;
  transition:color .2s,transform .2s;
}
.footer-social a:hover{
  color:#d4af37;
  transform:translateY(-2px);
}

/* Bouton gold premium */
.btn-gold{
  background:linear-gradient(90deg,#d4af37,#f5e2a4);
  color:#111 !important;
  font-weight:600;
  border:none;
  border-radius:40px;
  padding:.45rem 1.1rem;
  letter-spacing:.05em;
  transition:all .25s ease-in-out;
}
.btn-gold:hover,
.btn-gold:focus{
  background:linear-gradient(90deg,#c79b1b,#e3c76a);
  color:#000 !important;
  transform:translateY(-1px);
  box-shadow:0 4px 10px rgba(212,175,55,.35);
}

/* Footer responsive */
@media (max-width:768px){
  .footer-custom{text-align:center;}
  .footer-topbar .container{
    flex-direction:column;
    gap:.5rem;
  }
  .footer-social{justify-content:center;}
}

/* =========================================================
   HOME / HERO
   ========================================================= */

.home-hero{
  padding-top:3.5rem;
  padding-bottom:3.5rem;
}
.home-hero-media{
  max-width:320px;
  border-radius:1.75rem;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.home-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.home-hero-eyebrow{
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#6b7280;
}
.home-hero-eyebrow .dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#111827;
  display:inline-block;
}
.home-hero-title{
  font-family: var(--font-body);        /* même police que le header */
  font-size: clamp(2rem,3vw,2.6rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Séparateur doré entre sections home */
.home-section-divider{
  height: 2px;
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(90deg,#f5e2a4,#d4af37,#f5e2a4);
  opacity: .9;
}
.home-section-title{
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .9rem;
}

/* Réseaux home (ronds blancs) */
.social-link-circle{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#111827;
  background:#fff;
  transition:all .2s ease;
}
.social-link-circle:hover{
  text-decoration:none;
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(15,23,42,.12);
}
.social-link-circle.wa{
  border-color:#22c55e;
  color:#16a34a;
}

/* Anciennes icônes colorées (si utilisées ailleurs) */
.social-link[data-net="fb"]{color:#1877F2;}
.social-link[data-net="ig"]{color:#C13584;}
.social-link[data-net="sc"]{color:#FFFC00;}
.social-link[data-net="wa"]{color:#25D366;}
.social-link{transition:.2s;}
.social-link:hover{opacity:.8;transform:translateY(-2px);}

@media (max-width:767.98px){
  .home-hero{
    padding-top:2.5rem;
    padding-bottom:2.5rem;
  }
}

/* =========================================================
   GRILLES PRODUITS (home, /vetements, /nouveautes, catégories)
   ========================================================= */

/* Grille générique pour les pages liste + home */
.product-grid,
.home-featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:1rem 1.5rem;              /* vertical, horizontal */
  justify-items:stretch;        /* les cartes occupent toute la colonne */
}

/* Carte produit générique */
.card-product{
  border:none;
  border-radius:1.25rem;
  overflow:hidden;
  width:100%;
  max-width:100%;
  box-shadow:0 10px 30px rgba(15,23,42,.10);
  background-color:#fff;
  position:relative;
}

/* Image */
.card-product .ratio{
  border-radius:0;
  overflow:hidden;
}
.card-product-img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.card-product:hover .card-product-img{
  transform:scale(1.04);
}

/* Titre */
.card-product-title{
  font-family:var(--font-body);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:.35rem !important;
}

/* Prix */
.card-product-price{
  font-size:.9rem;
  display:flex;
  justify-content:center;
  gap:.4rem;
  align-items:baseline;
}
.card-product-price .old{
  text-decoration:line-through;
  color:#9ca3af;
  font-size:.78rem;
}
.card-product-price .new{
  font-weight: 600;
  color: #111827;
}

/* Sur la home, on ne change plus la couleur de base : prix normal en noir */
.home-featured .card-product-price .new{
  color: #111827;
}

/* Badge promo */
.badge-promo{
  position:absolute;
  top:.75rem;
  left:.75rem;
  background:#ef4444;
  color:#fff;
  border-radius:999px;
  padding:.25rem .55rem;
  font-size:.75rem;
  font-weight:600;
}

/* Carrousel home */
#homeCarousel .carousel-item{
  justify-content:center;
}
#homeCarousel .card-product{
  margin:0 .5rem;   /* espace plus raisonnable entre les deux cartes du slide */
}

/* Annule tout effet de "griser" les produits épuisés */
.card-product.epuise::before,
.card-product.epuise::after,
.card-product.soldout::before,
.card-product.soldout::after{
  content:none !important;
}
.card-product.epuise img,
.card-product.soldout img{
  filter:none !important;
  opacity:1 !important;
}

/* =========================================================
   PAGE PRODUIT PREMIUM
   ========================================================= */

.product-page{
  font-family:var(--font-body);
}
.product-main-img img{
  border-radius:1.5rem;
}
.product-thumb{
  width:80px;
  height:80px;
  border-radius:.75rem;
  cursor:pointer;
  object-fit:cover;
  transition:.25s;
}
.product-thumb:hover{
  transform:scale(1.05);
}
.product-title{
  font-size:1.8rem;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.product-price-box{
  font-size:1.6rem;
  font-weight:700;
  color:#111;
}
.btn-size,
.btn-color{
  border-radius:40px !important;
  padding:.4rem 1rem !important;
  font-weight:500;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.75rem;
}

/* État sélectionné (taille / couleur) */
.btn-size.active,
.btn-color.active{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
}

/* Boutons désactivés (épuisé) – utilisés par le JS */
.btn-size.disabled,
.btn-color.disabled{
  pointer-events:none;
  opacity:.45;
}

.product-description{
  color:#444;
  line-height:1.6;
}

/* =========================================================
   COMPTE CLIENT
   ========================================================= */

.account-page{
  max-width:1140px;
}
.account-card{
  border-radius:1.25rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.account-order-table td,
.account-order-table th{
  font-size:.9rem;
}
.account-order-table tbody tr:hover{
  background-color:#f9fafb;
}
.account-alert{
  border-radius:999px;
  max-width:600px;
  margin:0 auto;
}
@media (max-width:767.98px){
  .account-page{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }
  .account-card{border-radius:1rem;}
  .account-order-table thead{font-size:.8rem;}
}

/* =========================================================
   LISTE DES COMMANDES
   ========================================================= */

.orders-page{
  max-width:1140px;
}
.orders-card,
.orders-empty-card{
  border-radius:1.25rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
}
.orders-card{overflow:hidden;}
.orders-table th,
.orders-table td{
  font-size:.9rem;
}
.orders-table tbody tr:hover{
  background-color:#f9fafb;
}
.orders-tracking-link{
  font-size:.85rem;
  text-decoration:none;
}
.orders-tracking-link:hover{
  text-decoration:underline;
}
@media (max-width:767.98px){
  .orders-page{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }
  .orders-table thead{font-size:.8rem;}
}

/* =========================================================
   DÉTAIL COMMANDE
   ========================================================= */

.order-detail-page{
  max-width:1140px;
}
.order-detail-card{
  border-radius:1.25rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px rgba(15,23,42,.04);
  margin-bottom:1.25rem;
}
.order-detail-items-table th,
.order-detail-items-table td{
  font-size:.9rem;
}
.order-detail-items-table tbody tr:hover{
  background-color:#f9fafb;
}
.order-detail-item-img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:.5rem;
}
@media (max-width:767.98px){
  .order-detail-page{
    padding-top:2.5rem !important;
    padding-bottom:2.5rem !important;
  }
  .order-detail-items-table thead{font-size:.8rem;}
}

/* Titres compte / commandes en Poppins (pas de cursive) */
.account-page h1,
.account-page h2,
.account-page h3,
.account-page h4,
.account-page h5,
.orders-page h1,
.orders-page h2,
.orders-page h3,
.orders-page h4,
.orders-page h5,
.order-detail-page h1,
.order-detail-page h2,
.order-detail-page h3,
.order-detail-page h4,
.order-detail-page h5{
  font-family: var(--font-body);
}

/* Titres spécifiques, un peu plus "brand" mais sans cursive */
.account-title,
.orders-title,
.order-detail-title{
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .95rem;
}

.account-subtitle,
.order-detail-subtitle{
  font-family: var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
}

/* Pagination plus fine */
.orders-page .pagination .page-link{
  border-radius: 999px !important;
  font-size: .8rem;
  padding: .25rem .6rem;
}

/* =========================================================
   GUIDE DES TAILLES
   ========================================================= */

.size-guide-page{
  max-width: 960px;
}

/* Titre & intro */
.size-guide-title{
  letter-spacing: .18em;
  text-transform: uppercase;
}

.size-guide-subtitle{
  max-width: 640px;
  margin: 0 auto;
  font-size: .9rem;
}

/* Carte principale (onglets + tableaux) */
.size-guide-card{
  border-radius: 1.5rem;
  border: 1px solid #e5e7eb;
}

/* Bloc conseils en bas */
.size-guide-tips{
  border-radius: 1.5rem;
  border: 1px solid #e5e7eb;
}

/* Onglets premium */
.size-guide-nav{
  border-bottom: none;
  gap: .35rem;
  flex-wrap: wrap;
}

.size-guide-nav .nav-link{
  border: none;
  border-radius: 999px;
  padding: .35rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #6b7280;
  background: transparent;
}

.size-guide-nav .nav-link:hover{
  color: #111;
  background: #f3f4f6;
}

.size-guide-nav .nav-link.active{
  color: #111;
  background: linear-gradient(90deg,#d4af37,#f5e2a4);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* Tables */
.size-guide-table{
  margin-bottom: 0;
}

.size-guide-table thead{
  background: #f9fafb;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
}

.size-guide-table th,
.size-guide-table td{
  border-color: #e5e7eb;
}

.size-guide-table td{
  font-size: .85rem;
}

.size-guide-table tbody tr:nth-child(odd){
  background-color: #fcfcfc;
}

/* =========================================================
   FIX : SUPPRESSION DU BLEU BOOTSTRAP SUR LES ONGLETS
   ========================================================= */

/* État normal */
.size-guide-nav .nav-link {
  color: #111 !important;              /* texte noir */
}

/* Hover */
.size-guide-nav .nav-link:hover {
  color: #111 !important;
}

/* Active */
.size-guide-nav .nav-link.active {
  color: #111 !important;              /* texte noir */
  background: linear-gradient(90deg,#d4af37,#f5e2a4) !important;
  border-color: transparent !important;
}

/* Focus (clique / touche tab) */
.size-guide-nav .nav-link:focus {
  color: #111 !important;
  box-shadow: none !important;         /* enlève l'auréole bleue */
  outline: none !important;
}

/* =========================================================
   CHECKOUT STEPPER
   ========================================================= */

.checkout-steps{
  letter-spacing:.12em;
}

.checkout-step{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Pastilles numérotées */
.checkout-step-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:600;
}

/* Étapes inactives = noir classique */
.checkout-step--inactive{
  color:#111;
}
.checkout-step--inactive .checkout-step-badge{
  background:#f3f4f6;
  color:#6b7280;
  border:1px solid #e5e7eb;
}

/* Étapes déjà faites = noir + pastille noire */
.checkout-step--done{
  color:#111;
}
.checkout-step--done .checkout-step-badge{
  background:#111;
  color:#fff;
  border:none;
}

/* Étape active = GOLD bien visible */
.checkout-step--active{
  color:#d4af37;
}
.checkout-step--active .checkout-step-badge{
  background:linear-gradient(135deg,#d4af37,#f5e2a4);
  color:#111;
  border:none;
}

/* Barre de progression */
.checkout-progress{
  background:#e5e7eb;
  border-radius:999px;
  overflow:hidden;
}

/* Couleur de la barre (gold) */
.checkout-progress-bar{
  background:linear-gradient(90deg,#d4af37,#f5e2a4);
}
.text-gold{
  color:#d4af37 !important;
}


.product-main-img {
  height: 580px;              /* ajuste : 520 / 550 / 600 selon ton goût */
}

.product-main-img-img,
.product-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* recadre proprement */
  display: block;
  border-radius: 1.5rem;      /* comme avant */
}
/* Fix Bootstrap ratio qui étire le badge en 100% */
.ratio > .badge-promo,
.ratio > .badge.badge-promo {
  width: auto !important;
  height: auto !important;
  top: .75rem !important;
  left: .75rem !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
}

/* Si Bootstrap met aussi "position:absolute" et "inset:0" sur les enfants */
.ratio > .badge-promo,
.ratio > .badge.badge-promo {
  inset: auto !important;
}
/* =========================================================
   FAQ – Premium
   ========================================================= */

.faq-page{
  font-family: var(--font-body);
}

.faq-title{
  font-family: var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
}

.faq-link{
  color:#111;
  text-decoration: underline;
}
.faq-link:hover{
  opacity:.8;
}

.faq-accordion{
  border-radius: 1.5rem;
}

.faq-item{
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.faq-item:last-child{
  border-bottom: none;
}

.faq-item .accordion-button{
  background: #fff;
  box-shadow: none;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1.25rem 1.5rem;
}

.faq-item .accordion-button:not(.collapsed){
  background: linear-gradient(90deg,#f5e2a4,#fff);
  color:#111;
}

.faq-item .accordion-button:focus{
  box-shadow: none;
}

.faq-body{
  font-size: .9rem;
  line-height: 1.65;
  color: #444;
  padding: 1.25rem 1.5rem 1.5rem;
}

.faq-body a{
  color:#111;
  text-decoration: underline;
}
.faq-body a:hover{
  opacity:.8;
}