@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,600&display=swap');


*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none}

/* Variables */
:root{
  --dark-color:#222222;
  --icon-color:#fff;
  --font-size-p:14px;
  --color-descrp:#555;
  --color-titre-h3:#3a3a3a;
  --body-color:#f5f6f9;
  --text-color:#666666;
  --border-color:#6666662a;
  --font-siz-p-mobil:12px;
  --font-size-h1:16px;
}

/* Base */
html,body{max-width:100%;overflow-x:hidden}
body{font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;background:#f5f6f9}

/* Bannière */
.bg-banner{
  background:#e1e0e0;width:100%;height:80px;padding:10px;border-top:1px solid #f5f6f9
}
.bg-banner h2{text-align:center}
.bg-banner .flex{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px}

/* Cart page */
.cart-product{width:90%;margin:50px auto}
.cart-wrapper{display:flex;gap:20px}
.cart-prod{flex:70%;display:flex;flex-direction:column}

.cart-item{
  display:flex;flex-direction:column;gap:10px;
  background:#fff;padding:5px;border-radius:5px;margin-bottom:10px
}
.product-card{margin-bottom:15px}
.cart-item:last-child{margin-bottom:0}

.shop-header{display:inline-flex;gap:5px}
.affiche{display:flex;gap:20px}
.affiche .cart-content{border-bottom:3px solid var(--border-color);width:100%;padding-bottom:10px}

.cart-prod .cart-item img{
  max-width:120px;width:120px;height:130px;margin-left:10px;
  object-fit:cover;background:#555;flex:0 0 auto
}

.cart-prod .cart-item .cart-content{
  border-bottom:2px dotted var(--border-color);
  width:100%;color:var(--color-titre-h3);text-transform:capitalize;font-size:14px
}
.cart-prod .cart-item h3{margin-bottom:10px;color:#222222;font-weight:700;font-size:14px}
.cart-prod .cart-item .cart-price{color:#5d8c4a;font-weight:700;margin-top:5px}

.cart-prod .cart-item .delete{border:0;outline:0;background:transparent}
.cart-prod .cart-item .delete i{font-size:18px;transition:.3s;cursor:pointer}
.cart-prod .cart-item .delete i:hover{color:#5d8c4a;transform:scale(1.1)}

.quantity-controls{
  display:flex;align-items:center;justify-content:flex-end;margin-right:10px;gap:8px
}
.quantity-controls button{
  background:var(--border-color);border:0;width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer
}
.quantity-controls span{font-size:14px}

/* Résumé droite */
.right-bar{
  flex:30%;position:relative;padding:20px;background:#fff;height:350px;
  flex-direction: column;
  box-shadow:0 2px 8px rgba(0,0,0,.1)
}
.right-bar hr{margin-bottom:25px;color:var(--border-color)}
.right-bar p{
  display:flex;justify-content:space-between;font-weight:700;font-size:16px;
  margin:15px 0 10px;color:var(--color-titre-h3)
}
.right-bar button{
  width:100%;margin-top:20px;padding:10px 20px;border:0;background:#2c522b;
  font-size:16px;text-transform:uppercase;cursor:pointer;font-weight:600;color:#fff;border-radius:5px
}

/* Anti-overflow */
.cart-wrapper,.cart-prod,.right-bar,.cart-item,.affiche,.cart-content{min-width:0}
.cart-content,.right-bar p,.shop-header,.cart-price{overflow-wrap:anywhere;word-break:break-word}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
.affiche{gap:16px}

/* Tailles de texte sur tablette & mobile (12px) */
@media (max-width:992px){
  body{font-size:12px}
  .cart-prod .cart-item .cart-content{font-size:12px}
  .right-bar p{font-size:12px}
  .quantity-controls span{font-size:12px}
  .cart-prod .cart-item h3{font-size:12px}
}

@media (max-width:1069px){
  .cart-product{padding:10px;width:100%;margin-top:0 !important}
  .cart-wrapper{flex-direction:column}
}

@media (max-width:380px){
  .right-bar{padding-inline:12px}
}
/* ===== Payment Modal (simple & clean) ===== */
.pay-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.45); z-index:9999; padding:20px;
}
.pay-modal.show{ display:flex; }

.pay-card{
  width:min(520px,96%); background:#fff; border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:18px;
}
.pay-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.pay-close-btn{
  border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer;
}

.pay-note{ font-size:12px; color:#666; margin-top:4px; }
.pay-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0 8px; }
.pay-option{
  border:1px solid #e5e7eb; border-radius:12px; padding:14px; cursor:pointer;
  display:flex; gap:10px; align-items:center; transition:.2s;
}
.pay-option:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
.pay-option.active{
  border-color:#2c522b;
  box-shadow:0 0 0 3px rgba(44,82,43,.15);
}
.pay-logo{ font-size:22px; width:22px; text-align:center; }

.pay-actions{ display:flex; gap:10px; margin-top:8px; }
#pay-cancel{
  flex:1; border:0; background:#e5e7eb; color:#111; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer;
}
#pay-continue{
  flex:1; border:0; background:#2c522b; color:#fff; border-radius:10px; padding:10px 14px; font-weight:600; cursor:pointer;
}

/* little spinner */
.pay-spinner{
  width:16px; height:16px; border:3px solid #fff; border-bottom-color:transparent;
  border-radius:50%; display:inline-block; vertical-align:-3px; margin-right:8px;
  animation:payspin .8s linear infinite;
}
@keyframes payspin{ to{ transform:rotate(360deg);} }

/* mobile tweak */
@media (max-width:420px){
  .pay-options{ grid-template-columns:1fr; }
}