/* ============================================================
   SAVOIR HUB — style.css (compléments Tailwind CSS)
   Le layout est géré par Tailwind (CDN) — ce fichier contient
   les styles impossibles en pur utilitaire :
   polices, animations d'entrée, panier latéral, WhatsApp,
   bouton burger, fondu du visuel hero.
   Palette : primaire #8b5cf6 · secondaire #fbbf24
   ============================================================ */

:root{
  /* Palette exacte savoirhub.com (kit Elementor 142) */
  --primary:#A855F7;      /* boutons, accent */
  --primary-dark:#9333EA; /* survol, « Savoir » */
  --secondary:#FABA0C;    /* « Hub », étoiles */
  --ink:#12141D;          /* fond de page */
  --panel:#1C1E2A;        /* panneaux */
  --panel-2:#1E2231;      /* boîtes imbriquées, champs */
  --text:#94A3B8;         /* texte secondaire */
  --border-soft:#FFFFFF2B;/* bordure accent */
}

/* ============ BASE ============ */
html{scroll-behavior:smooth}
body{
  font-family:'Inter',ui-sans-serif,sans-serif;
  /* Fond exact savoirhub.com : #12141D + halo radial #1C1E2A */
  background-color:#12141D;
  background-image:radial-gradient(at bottom right, #1C1E2A4D 0%, #12141D00 75%);
  background-attachment:fixed;
  color:#fff;
}
h1,h2,h3,h4,h5,.font-head{font-family:'Montserrat',ui-sans-serif,sans-serif}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* Visuel hero : fondu des bords dans le dégradé de page (effet découpe) */
.hero-woman{
  -webkit-mask-image:radial-gradient(ellipse 78% 88% at 50% 42%,#000 58%,transparent 86%);
  mask-image:radial-gradient(ellipse 78% 88% at 50% 42%,#000 58%,transparent 86%);
}

/* ============ BURGER (menu mobile) ============ */
.nav-toggle span{
  display:block;
  width:24px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .3s,opacity .3s;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============ BADGE PANIER ============ */
.cart-count{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--primary);
  color:#fff;
  font-size:11px;
  font-weight:600;
  line-height:18px;
  text-align:center;
}

/* ============ PANIER LATÉRAL ============ */
.cart-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:200;
}
.side-cart{
  position:fixed;
  top:0;
  right:0;
  z-index:210;
  display:flex;
  flex-direction:column;
  width:min(370px,100%);
  height:100%;
  background:var(--panel);
  border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%);
  transition:transform .3s;
}
.side-cart.is-open{transform:translateX(0)}
.side-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5em 1.6em;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.side-cart-head h2{
  font-family:'Montserrat',sans-serif;
  font-size:20px;
  font-weight:800;
  color:#fff;
}
.side-cart-close{display:inline-flex;color:#fff;transition:color .3s}
.side-cart-close:hover{color:var(--primary)}
.side-cart-close svg{width:22px;height:22px}
.side-cart-body{flex:1;overflow-y:auto;padding:1.4em 1.6em}
.cart-empty{
  font-size:13px;
  color:#9ca3af;
  text-align:center;
  padding:2em 0;
}
.cart-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1em;
  padding:.9em 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cart-item-name{font-size:14px;font-weight:600;color:#e5e7eb}
.cart-item-price{font-size:13px;color:var(--primary);margin-top:.2em}
.cart-qty{display:flex;align-items:center;gap:.6em;margin-top:.55em}
.qty-btn{
  width:24px;height:24px;line-height:22px;text-align:center;
  border:1px solid var(--border-soft);border-radius:6px;
  color:#fff;font-size:14px;transition:background .3s,border-color .3s;
}
.qty-btn:hover{background:var(--primary);border-color:var(--primary)}
.qty-num{font-size:13px;font-weight:600;color:#fff;min-width:1.2em;text-align:center}
.cart-item-remove{
  color:#94A3B8;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  transition:color .3s;
}
.cart-item-remove:hover{color:var(--primary)}
.cart-empty-wrap{padding:2em 0;text-align:center}
.cart-empty{
  font-size:14px;
  color:#94A3B8;
}
.cart-empty-btn{
  display:inline-block;
  margin-top:1.1em;
  padding:.8em 1.6em;
  border-radius:9999px;
  background:var(--primary);
  color:#fff;
  font-size:13px;
  font-weight:600;
  transition:background .3s;
}
.cart-empty-btn:hover{background:var(--primary-dark)}
.side-cart-foot{
  padding:1.5em 1.6em;
  border-top:1px solid rgba(255,255,255,.1);
}
.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:1.2em;
  font-family:'Montserrat',sans-serif;
  font-size:16px;
}
.cart-total strong{color:var(--primary);font-size:18px}
.cart-checkout{
  display:block;
  width:100%;
  text-align:center;
  background:var(--primary);
  color:#fff;
  border-radius:9999px;
  padding:.95em 1em;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.5px;
  transition:background .3s;
}
.cart-checkout:hover{background:var(--primary-dark)}
.cart-clear{
  display:block;
  width:100%;
  margin-top:.9em;
  font-size:12px;
  color:#9ca3af;
  text-decoration:underline;
  transition:color .3s;
}
.cart-clear:hover{color:var(--primary)}

/* ============ WHATSAPP FLOTTANT ============ */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:9999px;
  background:#25D366;
  color:#fff;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.25),0 4px 6px -4px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.1)}
.whatsapp-float svg{width:30px;height:30px}

/* ============ NAV ============ */
.nav-link.is-active{color:var(--primary)}

/* ============ FILTRES BOUTIQUE ============ */
.filter-btn.is-active{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

/* ============ ONGLETS (Description / Avis) ============ */
.tab-btn{
  color:#94A3B8;
  transition:color .3s,background .3s,border-color .3s;
}
.tab-btn:hover{color:#fff}
.tab-btn.is-active{
  background:#1E2231;
  color:#fff;
  border-color:#FFFFFF2B;
}

/* ============ ANIMATIONS D'ENTRÉE (fadeIn / fadeInUp) ============ */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="up"]{transform:translateY(30px)}
[data-reveal].is-visible{animation-duration:1s;animation-fill-mode:forwards;animation-timing-function:ease}
[data-reveal="fade"].is-visible{animation-name:fadeIn}
[data-reveal="up"].is-visible{animation-name:fadeInUp}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

/* ============ RESPONSIVE COMPLÉMENTAIRE ============ */
@media (max-width:767px){
  .whatsapp-float{width:52px;height:52px;right:16px;bottom:16px}
  .whatsapp-float svg{width:28px;height:28px}
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}

/* ============ FILET DE SÉCURITÉ (si Tailwind ne charge pas) ============ */
body:not(.tw-ready) .rounded-full,
body:not(.tw-ready) button.rounded-full,
body:not(.tw-ready) a.rounded-full{border-radius:9999px}