:root{
  --brand:#0e2f5a;
  --brand-2:#1c75d8;
  --accent:#ffdf5d;
  --ink:#111;
  --muted:#666;
  --bg:#f6f7f9;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.12);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif}

/* Layout helpers */
.container{max-width:1100px;margin-inline:auto;padding:24px;margin-top: 12px;}


html, body {
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: #111;
  line-height: 1.5;
}




/* === Bande supérieure : livraison gratuite === */
.top-banner {
  background-color: transparent;       /* fond noir */
  color: #000;                  /* texte blanc */
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  padding: 0.6rem 1rem;
 
}


/* Vidéo de fond */
.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* la vidéo remplit tout l’espace sans déformation */
  z-index: 0; /* derrière le texte */
}


/* Header */
.hero-header {
  position: relative;
  width: 100%;
  height: 60vh;
  background: url("img/photo\ main\ page.jpg") center/cover no-repeat;
  color: white;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
}
.hero-logo { height: 60px; }
.menu-btn, .cart-btn {
  font-size: 28px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}
.hero-content { text-align: center; margin-bottom: 50px; }
.hero-content h1 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.hero-content hr {
  width: 60px;
  border: 2px solid white;
  margin: 0 auto;
}














/*bouton supr article */

.cart-line {
  position: relative;
}
.cart-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: .7;
  padding: .25rem .5rem;
}
.cart-remove:hover { opacity: 1; }
.cart-line-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}



/*bouton panier*/

.cart-btn {
  position: relative;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.5rem;
}

.cart-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ff3b30;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  display: none;              /* caché quand 0 */
  align-items: center;
  justify-content: center;
}

.cart-icon-main {
  width: 28px;        /* taille de ton icône */
  height: auto;       /* garde les proportions */
  display: block;
}



/* Header centré */
.site-header.centered {
  position:sticky;
  top:0;
  width:100%;
  z-index:100;
  transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
  background:transparent;
  backdrop-filter:none;
  box-shadow:none;
}
.site-header.centered.scrolled {
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  box-shadow:0 2px 20px rgba(0,0,0,0.08);
}
.header-inner {
  display: flex;
  flex-direction: row;         /* en ligne */
  align-items: center;
  justify-content: space-between; /* logo à gauche, panier à droite */
  gap: 12px;
}

.site-header.centere {
  height:80px;
  width:auto;
}
.site-header{
  background:#fff; box-shadow:0 2px 20px rgba(0,0,0,.06); position:sticky; top:0; z-index:10;
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{font-weight:900;letter-spacing:.5px}
.brand span{font-weight:600;color:var(--brand-2)}
.nav a{color:var(--brand);text-decoration:none;margin-left:16px;font-weight:600}
.nav a:hover{opacity:.8}
















/* UGC BANNIERE */
.ugc-hero {
  background: radial-gradient(circle at 20% 30%, #87CEEB, transparent 60%),
              radial-gradient(circle at 80% 20%, #1E90FF, transparent 60%),
              radial-gradient(circle at 60% 80%, #4682B4, transparent 60%),
              #000;
  background-blend-mode: lighten;
  color: white;
  margin-top: 5px;
  margin-bottom: 20px;
  padding: 40px 20px;
}
.ugc-hero .container {
  text-align: center;
  padding: 36px 6%;
  overflow: hidden;
  background: none;
  box-shadow: none;
}
.ugc-hero h1{margin:0 0 10px; font-size:clamp(22px,5.5vw,34px); line-height:1.2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.ugc-hero p{margin:0 0 18px; font-size:clamp(15px,4.5vw,20px); line-height:1.4}
.ugc-hero .highlight{font-weight:800;color:var(--accent)}













/* Container style TikTok */
.ugc-videos{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:28px; padding:20px 0;
}

/* Carte TikTok */
.tt-card{
  position:relative;
  aspect-ratio:9/16;
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  width:clamp(200px,25vw,300px);
  max-width:100%;
}

/* Fallback si pas d’aspect-ratio */
@supports not (aspect-ratio: 1) {
  .tt-card::before{content:""; display:block; padding-top:177.78%;} /* 9/16 */
}

/* Media clip */
.media-clip{position:absolute; inset:0; overflow:hidden; line-height:0}

/* Iframe/video responsive plein cadre */
.media-clip iframe,
.media-clip video{
  position:absolute; inset:0;
  width:100% !important;  /* TikTok met des inline styles */
  height:100% !important;
  border:0; display:block;
}

/* Pour une <video> locale : remplissage propre */
.media-clip video{ object-fit:cover }

/* Overlay TikTok */
.tt-top{
  position:absolute; top:10px; left:0; right:0; text-align:center; color:#fff;
  font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.6);
  font-size:clamp(12px,2.5vw,16px); pointer-events:none;
}
.tt-top .muted{opacity:.6; margin-right:16px}
.tt-top .active{position:relative}
.tt-top .active i{position:absolute; left:50%; transform:translateX(-50%); bottom:-6px; width:20px; height:3px; background:#fff; border-radius:3px}

.tt-actions{
  position:absolute; right:10px; bottom:90px; display:flex; flex-direction:column; align-items:center; gap:14px; color:#fff;
}
.tt-actions .avatar{width:42px; height:42px; border-radius:999px; border:2px solid #fff; background:linear-gradient(135deg,#9cc0ff,#2d6cdf)}
.tt-actions .stat{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:clamp(11px,2vw,13px)}
.tt-actions .stat span{font-weight:700}

.tt-bottom{
  position:absolute; left:12px; right:86px; bottom:12px; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6); font-size:clamp(12px,2.5vw,15px)
}
.tt-bottom .user{font-weight:800}

/* Footer */
.site-footer{padding:24px 0; color:#556; text-align:center}
.site-footer {
  background: #000;
  color: #fff;
  padding: 40px 20px;
  font-size: 14px;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px,1fr));
  gap: 40px;
  margin-bottom: 30px;
}
.footer-col h4 {
  text-transform: uppercase;
  font-size: 13px;
  margin-bottom: 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 8px;
}
.footer-col a {
  color: #fff;
  text-decoration: none;
}
.footer-col a:hover {
  text-decoration: underline;
}
.footer-payments, .footer-socials {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
}
.footer-payments img, .footer-socials img {
  height: 24px;
}
.footer-bottom {
  text-align: center;
  font-size: 12px;
  color: #888;
}







/* Carte produit */
.product-card-classic {
  background: transparent; /* 👈 plus de fond blanc */
  box-shadow: none;        /* 👈 supprime l’ombre */
  border-radius: 0;        /* 👈 facultatif : supprime les coins arrondis */
  overflow: hidden;
  max-width: 260px;        /* taille compacte (tu peux ajuster) */
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}


.product-card-classic img {
  width: 100%;
  height: auto;
  display: block;
  background: #f5f5f5;
}

.pc-content {
  padding: 0px; /* 👈 un peu moins d’espace */
  text-align: left;
  padding-top: 8px;
  padding-bottom: 8px;
  text-transform: uppercase;

}

.pc-content h2 {
  margin: 0;
  font-size: 1rem; /* 👈 texte un peu plus petit */
   font-weight: 900;
  color: #111;
}

.pc-content .subtitle {
  margin: 4px 0;
  font-size: 0.85rem;
  color: #666;
  
}

.pc-content .price {
  margin: 6px 0 12px;
  font-weight: 800;
  font-size: 1rem; /* 👈 prix plus compact */
  color: #222;

}



.btn.primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1.2rem 1rem;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 0 0 0.75rem 0.75rem; /* arrondi doux en bas */
  background-color: #000 !important;  /* noir plein */
  color: #fff;            /* texte blanc */
  cursor: pointer;
  transition: all 0.2s ease;
}


.btn.primary:active {
  background-color: #000;
  transform: translateY(0);
}

.btn.primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


.quick-add {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}




.price-and-cart {
  display: flex;
  flex-direction: column; /* Titre au-dessus */
  align-items: flex-start;
  background-color: #fff;
  border: 0px solid #000; /* Bordure noire */
  padding: 15px; /* ✅ plus d’espace à l’intérieur */
  width: 100%;
  box-sizing: border-box; /* évite que le padding agrandisse le bloc */
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px; /* petit espace sous le titre */
}

.price {
  font-weight: bold;
  font-size: 1.2em;
}

.quick-add img {
  width: 30px;
  cursor: pointer;
}


/* Ligne du prix + panier */
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between; /* espace entre le prix et le panier */
  width: 100%;
  margin-top: 5px;
}







.size-options {
  display: none;
  margin-top: 10px;
}

.size-options button {
  margin-right: 8px;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: white;
  cursor: pointer;
  transition: 0.3s;
}


.show-sizes .quick-add {
  display: none;
}

.show-sizes .size-options {
  display: block;
}






/* --- Overlay --- */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; visibility: hidden;
  transition: .25s ease;
  z-index: 1000;
}

/* --- Tiroir --- */
.drawer {
  position: fixed; top:0; right:0; height:100vh; width:min(420px, 92vw);
  background:#fff; box-shadow: -12px 0 24px rgba(0,0,0,.1);
  transform: translateX(100%); transition: transform .28s ease;
  display:flex; flex-direction:column; z-index:1001;
  border-left: 1px solid #eee;
   height: 100dvh;
  
}

.drawer-footer {
  padding-bottom: env(safe-area-inset-bottom, 0); /* prend en compte l'encoche / barre iPhone */
}



.drawer-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem; border-bottom:1px solid #eee; }
.drawer-header h3 { margin:0; font-size:1.1rem; }
.drawer-close { font-size:1.4rem; background:transparent; border:none; cursor:pointer; line-height:1; padding:.25rem .5rem; }

.drawer-content { padding:1rem; overflow:auto; flex:1; }
.cart-line { display:grid; grid-template-columns: 64px 1fr auto; gap:.75rem; align-items:center; padding:.5rem 0; border-bottom:1px solid #f3f3f3; }
.cart-line img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid #eee; }
.cart-line .title { font-weight:600; margin-bottom:.15rem; }
.cart-line .meta { color:#666; font-size:.9rem; }
.cart-line .price { font-weight:700; }

.drawer-footer { border-top:1px solid #eee; padding:1rem; }
.drawer-total { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.drawer-checkout { display:block; text-align:center; width:100%; }
.drawer-checkout {
  text-decoration: none; /* enlève le soulignement du lien */
}


/* --- États ouverts --- */
.drawer.is-open { transform: translateX(0); }
.drawer-overlay.is-open { opacity:1; visibility:visible; }

/* Petite anim à l’apparition des tailles */
.size-options { animation: fadeIn .18s ease; }
@keyframes fadeIn { from {opacity:0; transform: translateY(-2px);} to {opacity:1; transform:none;} }