/* ===== Reset et base ===== */
* {margin:0; padding:0; box-sizing:border-box;}
html, body {height:100%; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial; overflow-x:hidden; scroll-behavior:smooth;}
a {text-decoration:none; color:inherit;}

/* ===== Header ===== */
header {
  position:fixed; top:0; left:0; width:100%;
  background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  color:#aaa; padding:15px 10%; display:flex; justify-content:space-between; align-items:center;
  z-index:100;
}
header h3 {font-size:1.2rem; color:#ff66ff;}
nav a {margin-left:20px; font-weight:500; transition:color .2s;}
nav a:hover {color:#ff66ff;}

/* ===== Main sections ===== */
main {position:relative; z-index:1;}
section {min-height:100vh; padding:80px 10%; display:flex; flex-direction:column; justify-content:center; background:#000; color:#fff;}
h1,h2,h3 {margin-bottom:20px; color:#ff66ff;}
h1 {font-size:3rem;} 
h2 {font-size:2.5rem;}

/* ===== Shop / Panier ===== */
.shop-container {
  display:flex; flex-wrap:wrap; gap:30px;
}
.shop-items {
  flex:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;
}
.shop-item {
  background:#111; padding:20px; border-radius:12px; border:1px solid #ff66ff;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  overflow:hidden; /* empêche le dépassement d'image/vidéo */
  transition: transform .3s, box-shadow .3s;
}
.shop-item:hover {transform:translateY(-6px); box-shadow:0 0 25px #ff66ff55;}
.shop-item h3, .shop-item p {text-align:center;}
.shop-item img, .shop-item video {
  width:100%; height:100%; object-fit:cover; border-radius:12px;
}

/* Boutons */
.add-to-cart, .order-btn {
  background:#ff66ff; color:#000; border:none; padding:8px 12px; border-radius:8px;
  cursor:pointer; font-weight:700; transition:filter .2s, transform .3s; margin-top:8px;
}
.add-to-cart:hover, .order-btn:hover {filter:brightness(.9); transform:translateY(-2px);}

/* Panier */
.cart {
  flex:1;
  background:#111; padding:20px; border-radius:12px; border:1px solid #ff66ff;
  display:flex; flex-direction:column; gap:15px; min-width:250px;
  max-height:500px; /* limite la hauteur totale du panier */
}
.cart h3 {font-size:1.3rem;}
.cart ul {
  list-style:none; overflow-y:auto; padding:0; flex:1; margin-bottom:10px;
}
.cart li {
  display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;
  padding:6px 0; border-bottom:1px solid #ff66ff33;
}
.cart li button {
  background:#ff66ff; color:#000; border:none; padding:4px 8px; border-radius:6px;
  cursor:pointer; font-size:0.85rem; transition:filter .2s;
}
.cart li button:hover {filter:brightness(.9);}
.cart p.total-container {font-size:1rem; font-weight:600; margin-top:auto;}
.notice {font-size:0.85rem; color:#aaa; margin-top:10px;}

/* Formulaire */
form {
  display:flex; flex-direction:column; gap:12px; background:#111; padding:30px;
  border-radius:12px; border:1px solid #ff66ff;
}
input, textarea {
  padding:10px 12px; border:none; border-radius:8px; outline:none;
  background:#1a0a1a; color:#fff;
}
button[type="submit"] {
  padding:12px 16px; font-weight:700; background:#ff66ff; color:#000;
  cursor:pointer; border:none; border-radius:8px; transition:filter .2s;
}
button[type="submit"]:hover {filter:brightness(.9);}

@media (max-width:768px){
  .shop-container {
    flex-direction: column; /* panier sous les items */
  }
  .shop-items {
    grid-template-columns: 1fr; /* items full width */
    width: 100%;
  }
  .cart {
    max-height: none; /* supprimer limite de hauteur sur mobile */
  }
  header {
    flex-direction: column; 
    align-items: flex-start;
  }
  nav a {
    margin:10px 0 0 0;
  }
}