*{box-sizing:border-box;margin:0;padding:0;}
body { font-family:Arial, sans-serif; background:#ffffff; }


.navbar {
  position:fixed; top:0; width:100%;
  background:rgba(255, 255, 255, 0.92);
  backdrop-filter:blur(6px);
  z-index:1000;
  transition:background 0.4s ease, box-shadow 0.4s ease;
}
.navbar.scrolled { background:rgb(255, 255, 255); box-shadow:0 2px 12px rgba(0,0,0,0.08); }
.navbar.transparent { background:transparent; }
.navbar.transparent .logo,
.navbar.transparent .nav-links a,
.navbar.transparent .search-icon,
.navbar.transparent .cart-btn-nav { color:rgb(0, 0, 0); }
.navbar.transparent .menu-toggle span { background:rgb(0, 0, 0); }

.nav-container { display:flex; align-items:center; padding:15px 30px; justify-content:space-between; gap:12px; }
.logo { font-weight:bold; font-size:20px; letter-spacing:2px; flex-shrink:0; color:#000000; }


.cart-btn-nav { background:none; border:none; font-size:18px; cursor:pointer; position:relative; display:flex; align-items:center; }
.cart-badge { position:absolute; top:-6px; right:-8px; background:#000; color:#ffffff; font-size:10px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; transition:transform 0.2s ease; }
.cart-badge.pop { transform:scale(1.4); }
.nav-right { display:flex; align-items:center; gap:16px; }

.menu-toggle { width:30px; height:22px; position:relative; cursor:pointer; display:none; }
.menu-toggle span { position:absolute; width:100%; height:3px; background:black; left:0; transition:all 0.3s ease; border-radius:2px; }
.menu-toggle span:nth-child(1){top:0;}
.menu-toggle span:nth-child(2){top:9px;}
.menu-toggle span:nth-child(3){top:18px;}
.menu-toggle.open span:nth-child(1){transform:rotate(45deg); top:9px;}
.menu-toggle.open span:nth-child(2){opacity:0;}
.menu-toggle.open span:nth-child(3){transform:rotate(-45deg); top:9px;}

.nav-links { display:flex; gap:20px; }
.nav-links a { color:black; text-decoration:none; font-size:14px; position:relative; padding-bottom:2px; }
.nav-links a::after { content:""; position:absolute; bottom:0; left:0; width:0; height:1.5px; background:#000; transition:width 0.25s ease; }
.nav-links a:hover::after { width:100%; }

/* SÉLECTEUR DE COLLECTION (Filles / Garçons) */
.collection-select { padding:60px 40px 20px; }
.collection-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
}
.collection-card {
  position:relative;
  height:440px;
  border-radius:18px;
  overflow:hidden;
  cursor:pointer;
  background-size:cover;
  background-position:center;
  background-color:#161616; /* placeholder tant qu'aucune photo n'est définie */
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform 0.45s cubic-bezier(.22,.61,.36,1);
}
.collection-card:hover { transform:scale(1.015); }
.collection-card-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.25) 100%);
  transition:background 0.35s ease;
}
.collection-card:hover .collection-card-overlay {
  background:linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.3) 100%);
}
.collection-card span {
  position:relative; z-index:2;
  color:#fff; font-size:28px; font-weight:bold;
  letter-spacing:5px; padding-bottom:36px;
  transition:letter-spacing 0.35s ease;
}
.collection-card:hover span { letter-spacing:7px; }
.collection-card.active { box-shadow:inset 0 0 0 2px #fff; }

.collection-card[data-category="filles"] { background-image:url('../comprese/filles.jpg'); }
   .collection-card[data-category="garcons"] { background-image:url('../comprese/garcons.jpg'); }

/* Pour ajouter les photos plus tard, il suffit de définir un background-image, ex :
   .collection-card[data-category="filles"] { background-image:url('../comprese/collection-filles.jpg'); }
   .collection-card[data-category="garcons"] { background-image:url('../comprese/collection-garcons.jpg'); }
*/

@media (max-width:768px){
  .collection-select { padding:40px 20px 10px; }
  .collection-cards { grid-template-columns:1fr; }
  .collection-card { height:300px; }
  .collection-card span { font-size:22px; letter-spacing:4px; }
}

/* Message quand une catégorie n'a pas encore de pièce assignée */
.products-empty {
  text-align:center; opacity:0.45;
  font-size:13px; padding:30px 0;
  letter-spacing:0.5px;
}
.products-section.hidden { display:none; }

.menu-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity 0.3s ease; z-index:900; }
.menu-overlay.active { opacity:1; pointer-events:auto; }

@media (max-width:768px){
  .nav-links { position:fixed; top:0; left:0; height:100vh; width:70%; background:rgb(255, 255, 255); flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:30px; padding:80px 0 0 30px; transform:translateX(-100%); transition:transform 0.6s ease; z-index:1001; }
  .nav-links.active { transform:translateX(0); }
  .nav-links a { font-size:16px; }
  .menu-toggle { display:block; }
  .search-box.open { width:130px; }
}

/* Slider */
.slider { position:relative; height:70vh; overflow:hidden; margin-top:52px; }
.slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease-in-out; }
.slide.active { opacity:1; }
.overlay { position:absolute; inset:0; background:rgba(0,0,0,0.3); }
.hero-text { position:absolute; bottom:60px; left:40px; color:white; font-size:32px; font-weight:bold; letter-spacing:2px; }
.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:8px; z-index:10; }
.dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.5); transition:background 0.3s ease, transform 0.3s ease; cursor:pointer; }
.dot.active { background:#fff; transform:scale(1.3); }

/* Produits */
.products-section { padding:60px 40px; }
.section-title { font-size:13px; letter-spacing:3px; text-transform:uppercase; color:#888; margin-bottom:30px; font-weight:normal; }
.products { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:24px; }

.product { position:relative; }
.card {
  position:relative; width:100%; height:360px;
  border-radius:12px; overflow:hidden; cursor:pointer;
}
.card-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  width:100%; height:100%;
}
.card-info {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent, rgba(0,0,0,0.72));
  color:#fff; padding:16px 14px 14px; z-index:4;
}
.card-info h3 { font-size:14px; font-weight:bold; margin-bottom:3px; letter-spacing:0.5px; }
.card-info .price { font-size:13px; opacity:0.85; }

.card-actions {
  position:absolute; bottom:0; left:0; right:0;
  padding:12px 14px 14px;
  background:rgba(0,0,0,0.6);
  color:#fff; z-index:5;
  opacity:0;
  transition:opacity 0.25s ease;
  border-radius:0 0 12px 12px;
}
.card:hover .card-actions { opacity:1; }
.card:hover .card-info { opacity:0; }
.card-info { transition:opacity 0.25s ease; }

.sizes { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.size-tag { border:1px solid rgba(255,255,255,0.6); padding:3px 8px; font-size:11px; letter-spacing:0.5px; transition:background 0.2s; }
.size-tag:hover { background:rgba(255,255,255,0.15); }
.btn-voir { width:100%; background:#fff; color:#000; border:none; padding:9px; font-size:12px; letter-spacing:2px; font-weight:bold; cursor:pointer; transition:background 0.2s, color 0.2s; }
.btn-voir:hover { background:#000; color:#fff; }

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.product-item { opacity:0; transform:translateY(40px); transition:opacity 0.55s ease, transform 0.55s ease; }
.product-item.visible { opacity:1; transform:translateY(0); }

/* À propos */
.apropos-section { background:#f2f0ee; text-align:center; padding:70px 20px; }
.apropos-section h2 { font-size:13px; letter-spacing:4px; text-transform:uppercase; color:#888; margin-bottom:18px; font-weight:normal; }
.apropos-section p { max-width:540px; margin:0 auto; font-size:15px; line-height:2; color:#333; }

/* Contact */
.contact-section { background:#111; color:white; text-align:center; padding:60px 20px; }
.contact-section h2 { font-size:13px; letter-spacing:4px; text-transform:uppercase; color:#666; margin-bottom:18px; font-weight:normal; }
.contact-section p { opacity:0.6; font-size:14px; line-height:1.9; margin-bottom:4px; }
.contact-section a { color:rgba(255,255,255,0.65); text-decoration:none; transition:color 0.2s; }
.contact-section a:hover { color:#fff; }
.social-links { margin-top:20px; display:flex; gap:24px; justify-content:center; }
.social-links a { font-size:12px; letter-spacing:2px; color:rgba(255,255,255,0.4); text-transform:uppercase; text-decoration:none; transition:color 0.2s; }
.social-links a:hover { color:#fff; }

/* Footer */
footer { background:#000; color:white; padding:50px 40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:30px; }
footer h4 { letter-spacing:2px; font-size:13px; margin-bottom:14px; opacity:0.5; font-weight:normal; text-transform:uppercase; }
footer ul { list-style:none; }
footer li { margin-bottom:8px; opacity:0.7; font-size:13px; cursor:default; transition:opacity 0.2s; }
footer li:hover { opacity:1; }
footer .footer-bottom { grid-column:1/-1; border-top:1px solid rgba(255,255,255,0.1); padding-top:20px; font-size:11px; opacity:0.35; letter-spacing:1px; display:flex; justify-content:space-between; }
footer a { color:rgba(255,255,255,0.7); text-decoration:none; transition:color 0.2s; }
footer a:hover { color:#fff; }

/*btn Retour en haut */
.back-to-top { position:fixed; bottom:30px; right:30px; background:#000; color:#fff; border:none; width:44px; height:44px; border-radius:50%; font-size:18px; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:800; opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity 0.3s ease, transform 0.3s ease; }
.back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover { background:#333; }

/* Mini panier */
.cart-drawer { position:fixed; top:0; right:0; height:100vh; width:320px; background:#fff; box-shadow:-4px 0 20px rgba(0,0,0,0.12); z-index:2000; transform:translateX(100%); transition:transform 0.35s ease; display:flex; flex-direction:column; }
.cart-drawer.open { transform:translateX(0); }
.cart-header { padding:20px 20px 16px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.cart-header h3 { font-size:14px; letter-spacing:2px; text-transform:uppercase; }
.cart-close { background:none; border:none; font-size:20px; cursor:pointer; }
.cart-items { flex:1; overflow-y:auto; padding:16px 20px; }
.cart-empty { text-align:center; opacity:0.4; font-size:13px; margin-top:40px; }
.cart-item { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0f0f0; }
.cart-item-img { width:60px; height:60px; background-size:cover; background-position:center; border-radius:6px; flex-shrink:0; }
.cart-item-info { flex:1; }
.cart-item-info h4 { font-size:13px; margin-bottom:3px; }
.cart-item-info p { font-size:12px; opacity:0.6; }
.cart-item-remove { background:none; border:none; font-size:16px; cursor:pointer; opacity:0.4; align-self:flex-start; }
.cart-footer { padding:16px 20px; border-top:1px solid #eee; }
.cart-total { display:flex; justify-content:space-between; font-size:14px; font-weight:bold; margin-bottom:14px; }
.btn-checkout { width:100%; background:#000; color:#fff; border:none; padding:14px; font-size:12px; letter-spacing:2px; font-weight:bold; cursor:pointer; }

/* Détail du produit */
.detail-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:3000; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.detail-overlay.open { opacity:1; pointer-events:all; }

.detail-panel { position:fixed; top:0; right:0; bottom:0; width:min(480px, 100vw); background:#fff; z-index:3100; transform:translateX(100%); transition:transform 0.4s ease; display:flex; flex-direction:column; overflow:hidden; }
.detail-panel.open { transform:translateX(0); }

.detail-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid #eee; flex-shrink:0; }
.detail-header span { font-size:13px; letter-spacing:2px; font-weight:bold; text-transform:uppercase; }
.detail-header button { background:none; border:none; font-size:22px; cursor:pointer; opacity:0.45; line-height:1; }
.detail-header button:hover { opacity:1; }

.detail-gallery { position:relative; background:#f5f5f5; flex-shrink:0; }
.detail-main-img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.detail-main-placeholder { width:100%; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#f0f0f0; color:#aaa; font-size:12px; letter-spacing:1px; }

.gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.88); border:none; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.2s; z-index:5; }
.gallery-arrow:hover { background:#fff; }
.gallery-arrow.prev { left:10px; }
.gallery-arrow.next { right:10px; }

.detail-thumbs { display:flex; gap:6px; padding:10px 16px; overflow-x:auto; background:#fafafa; border-bottom:1px solid #eee; }
.detail-thumbs::-webkit-scrollbar { height:3px; }
.detail-thumbs::-webkit-scrollbar-thumb { background:#ccc; }
.detail-thumb { width:58px; height:58px; flex-shrink:0; object-fit:cover; cursor:pointer; border:2px solid transparent; border-radius:4px; opacity:0.55; transition:border-color 0.2s, opacity 0.2s; }
.detail-thumb.active, .detail-thumb:hover { border-color:#000; opacity:1; }

.detail-body { flex:1; overflow-y:auto; padding:20px; }
.detail-name { font-size:17px; font-weight:bold; letter-spacing:1px; margin-bottom:4px; }
.detail-price { font-size:14px; color:#555; margin-bottom:18px; }
.detail-divider { height:1px; background:#eee; margin:14px 0; }
.detail-size-title { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#888; margin-bottom:10px; }
.detail-sizes { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.detail-size-btn { border:1px solid #ccc; background:none; padding:6px 14px; font-size:12px; letter-spacing:1px; cursor:pointer; font-family:Arial, sans-serif; transition:background 0.2s, border-color 0.2s, color 0.2s; }
.detail-size-btn:hover, .detail-size-btn.selected { background:#000; color:#fff; border-color:#000; }
.detail-size-btn.unavailable { opacity:0.3; text-decoration:line-through; pointer-events:none; }
.detail-desc-title { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#888; margin-bottom:8px; }
.detail-desc { font-size:13px; line-height:1.8; color:#444; margin-bottom:24px; white-space:pre-line; }
.detail-add-btn { width:100%; background:#000; color:#fff; border:none; padding:14px; font-size:12px; letter-spacing:3px; font-weight:bold; cursor:pointer; font-family:Arial, sans-serif; transition:background 0.2s; }
.detail-add-btn:hover { background:#333; }
.detail-add-btn.done { background:#555; }
.btn-checkout:hover {
  background: #1ebe5b;
}


/*En cas de sold out*/
.sold-out-banner {
  position: absolute;
  top: 16px;
  left: 0;
  background: #a62b2b;
  color: #fff;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: bold;
  padding: 6px 14px;
  z-index: 6;
}
.card.sold-out .card-img { filter: grayscale(70%); opacity: 0.55; }

/* Badge "LIMITED" — stock max atteint, plus jamais de restock (distinct du simple ÉPUISÉ) */
.limited-banner {
  position: absolute;
  top: 16px;
  left: 0;
  background: #1a1a1a;
  color: #fff;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: bold;
  padding: 6px 14px;
  z-index: 6;
}

/* Message dans le panneau détail produit pour les pièces LIMITED */
.detail-note {
  display: none;
  background: #f5f5f5;
  border-left: 3px solid #1a1a1a;
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.7;
  letter-spacing: 0.3px;
  color: #333;
  margin-bottom: 18px;
}
.btn-voir:disabled { background: #ccc; color: #888; cursor: not-allowed; }
.btn-voir:disabled:hover { background: #ccc; color: #888; }
.detail-add-btn.sold-out, .detail-add-btn:disabled { background: #ccc; color: #666; cursor: not-allowed; }
.detail-add-btn.sold-out:hover, .detail-add-btn:disabled:hover { background: #ccc; }

/* quantité dans le panier (ajouter ou retirer) */
.cart-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.cart-qty button {
  background: #000;
  color: #fff;
  border: none;
  width: 24px;
  height: 24px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cart-qty button:hover { background: #333; }
.cart-qty span {
  font-size: 14px;
  font-weight: bold;
  min-width: 20px;
  text-align: center;
}

@media (max-width:768px) {
  .detail-panel { width:100vw; }
  .detail-thumb { width:50px; height:50px; }

  /* Produits sur mobile */
  .products-section { padding:40px 16px; }
  .products {
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
  }
  .card { height:240px; border-radius:8px; }
  .card-info h3 { font-size:12px; }
  .card-info .price { font-size:11px; }
  .skeleton { height:240px; }
}


.social-icons{
    display: flex;
    gap: 20px;
    margin-top: 10px;
}

.social-icons a{
    font-size: 28px;
    color: inherit;
    transition: transform 0.3s ease;
}

.social-icons a:hover{
    transform: translateY(-4px);
}


/*En cas de promo*/
#promo-banner {
  background: #a62b2b;
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1001;
}


/*Vibration des logos réseaux sociaux */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-5deg); }
  40% { transform: translateX(4px) rotate(5deg); }
  60% { transform: translateX(-4px) rotate(-5deg); }
  80% { transform: translateX(4px) rotate(5deg); }
}
.social-icons a.shake {
  animation: shake 0.5s ease;
}