.panier-container{
  max-width:1000px;
  margin:2rem auto;
  padding:2rem;
  background:var(--bs-body-bg,#fff);
  border:1px solid var(--bs-border-color,#ddd);
  border-radius:12px;
  box-shadow:0 0 12px rgba(0,0,0,0.05);
  color:var(--bs-body-color,#212529);
}

.quantite-input::-webkit-inner-spin-button,
.quantite-input::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.quantite-input{
  -moz-appearance:textfield;
}

.alerte-ajout{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-60%);
  background:#111;
  color:#ffc107;
  padding:1rem 2rem;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(0,0,0,0.25);
  font-size:1.2rem;
  font-weight:bold;
  text-align:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.alerte-ajout.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%);
}

.ligne-panier{
  display:grid;
  grid-template-columns:100px minmax(0,1fr) auto;
  align-items:center;
  gap:1rem;
  padding:0.75rem 0;
  border-bottom:1px solid #ddd;
}

.col-photo img{
  width:100px;
  height:100px;
  object-fit:contain;
  border:1px solid #ddd;
  border-radius:6px;
  background:#fff;
}

.col-description{
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.col-quantite-prix{
  display:flex;
  align-items:center;
  gap:1rem;
}

.quantite-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.4rem;
}

.quantite-row{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.quantite-wrapper{
  display:flex;
  align-items:center;
  gap:.25rem;
}

.btn-qty{
  width:30px;
  height:30px;
  background:var(--bs-secondary-bg,#e9ecef);
  color:var(--bs-body-color,#212529);
  border:1px solid var(--bs-border-color,#ccc);
  border-radius:4px;
  font-size:1.2rem;
  cursor:pointer;
}

.quantite-wrapper input,
.quantite-input{
  width:90px;
  text-align:center;
  font-size:1rem;
  padding:0.25rem;
  border:1px solid #ccc;
  border-radius:4px;
  background:#fff;
}

.prix-wrapper{
  display:flex;
  align-items:center;
  gap:0.5rem;
  border-left:2px solid #bbb;
  padding-left:16px;
}

.prix-total{
  display:flex;
  align-items:center;
  white-space:nowrap;
  font-weight:bold;
  font-size:1rem;
  min-width:120px;
  justify-content:flex-end;
}

.ligne-commentaire-bloc{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-left:100px;
  padding:0.35rem 0 0.6rem;
}

.btn-commentaire{
  background:var(--bs-light,#f8f9fa);
  border:1px solid var(--bs-border-color,#ccc);
  border-radius:5px;
  cursor:pointer;
}

.cart-comment-btn{
  margin-top:0.5rem;
  font-size:0.75rem;
  padding:0.3rem 0.55rem;
}

.texte-commentaire{
  font-size:0.9rem;
  color:#444;
  padding-left:0.5rem;
  border-left:2px solid #ccc;
}

.total-general{
  text-align:right;
  margin-top:2rem;
  font-size:1.2rem;
}

.modal{
  display:none;
  position:fixed;
  z-index:9999;
  inset:0;
  background:rgba(0,0,0,0.6);
}

.modal.is-open{
  display:block;
}

.modal-content{
  background:#fff;
  max-width:480px;
  margin:10% auto;
  padding:1.25rem;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}

.modal-actions{
  margin-top:0.75rem;
  display:flex;
  gap:0.5rem;
  justify-content:flex-end;
}

.btn{
  padding:0.5rem 0.8rem;
  border-radius:6px;
  border:1px solid #bbb;
  background:#f4f4f4;
  cursor:pointer;
}

.btn.primary{
  background:var(--bs-primary,#0d6efd);
  color:var(--bs-light,#fff);
  border:none;
}

#comment-modal .btn.primary{
  background:var(--bs-secondary-bg,#e9ecef);
  color:var(--bs-body-color,#212529);
  border:1px solid var(--bs-border-color,#ccc);
}

.unite-affichee{
  font-size:0.9rem;
  padding-left:0.5rem;
  min-width:45px;
  text-align:left;
  color:#555;
}

.panier-header{
  text-align:center;
  margin:0 0 1rem 0;
  padding:.75rem 0 1rem 0;
  border-bottom:4px solid var(--bs-border-color,#dee2e6);
  background:var(--bs-body-bg,#fff);
  border-radius:10px 10px 0 0;
}

.panier-title{
  margin:0;
  font-weight:800;
  font-size:clamp(2rem,3.2vw,2.6rem);
  color:var(--bs-body-color,#212529);
  letter-spacing:.2px;
  font-family:"Poppins","Inter",var(--bs-font-sans-serif),system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

.panier-title .hello{
  color:inherit;
}

.panier-title .name-script{
  display:inline-block;
  margin-left:.35rem;
  font-weight:700;
  font-size:clamp(2.2rem,3.6vw,3rem);
  line-height:1.05;
  color:#292929;
}

.panier-subtitle{
  margin-top:.35rem;
  text-align:center;
  font-weight:800;
  font-size:clamp(1.8rem,3vw,2.4rem);
  line-height:1.1;
  letter-spacing:.2px;
  color:var(--bs-body-color,#212529);
}

.panier-accent{
  width:min(180px,40%);
  height:4px;
  margin:.5rem auto 0;
  background:var(--bs-border-color,#dee2e6);
  border-radius:999px;
}

.col-actions{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  align-items:flex-start;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

.btn-cart-update,
.btn-effacer-panier,
.btn-passer-commande{
  padding:0.75rem 1.5rem;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Refresh cart */
.btn-cart-update{
  border:1px solid #FBC21A;
  background:#FFF5CC;
  color:#C28A00;
}

.btn-cart-update:hover,
.btn-cart-update:focus-visible{
  background:#FBC21A;
  color:#292929;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.btn-cart-update:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Clear cart */
.btn-effacer-panier{
  border:1px solid #f5c6cb;
  background:#f8d7da;
  color:#721c24;
}

.btn-effacer-panier:hover,
.btn-effacer-panier:focus-visible{
  background:#f1b0b7;
  color:#5a161d;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.btn-effacer-panier:active{
  transform:translateY(0);
  box-shadow:none;
}

/* Place order */
.btn-passer-commande{
  border:1px solid #c3e6cb;
  background:#d4edda;
  color:#155724;
}

.btn-passer-commande:hover,
.btn-passer-commande:focus-visible{
  background:#a9dfbf;
  color:#0f3d1a;
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}

.btn-passer-commande:active{
  transform:translateY(0);
  box-shadow:none;
}

.btn-cart-update:focus-visible,
.btn-effacer-panier:focus-visible,
.btn-passer-commande:focus-visible{
  outline:2px solid rgba(0,0,0,0.18);
  outline-offset:2px;
}

.btn-cart-update:disabled,
.btn-effacer-panier:disabled,
.btn-passer-commande:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.comment-title{
  margin:0 0 .5rem;
}

.comment-input{
  width:100%;
  padding:.5rem;
  border:1px solid #ccc;
  border-radius:6px;
}

.status-inline{
  margin-top:0.75rem;
  font-size:0.95rem;
}

.panier-lock-overlay{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background-color:rgba(255,255,255,0.9);
  z-index:9999;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.panier-lock-overlay.is-visible{
  display:flex;
}

.spinner{
  border:6px solid #f3f3f3;
  border-top:6px solid #FBC21A;
  border-radius:50%;
  width:50px;
  height:50px;
  animation:spin 1s linear infinite;
}

.overlay-message{
  margin-top:2rem;
  font-size:1.5rem;
  color:#333;
}

/* Tablette */
@media (max-width:992px){
  .panier-container{
    padding:1.25rem;
    margin:1rem auto;
  }

  .ligne-panier{
    grid-template-columns:88px minmax(0,1fr);
    grid-template-areas:
      "photo desc"
      "photo qty";
    gap:.75rem;
  }

  .col-photo{ grid-area:photo; }
  .col-description{ grid-area:desc; }

  .col-quantite-prix{
    grid-area:qty;
    justify-content:space-between;
    width:100%;
    flex-wrap:wrap;
    gap:.5rem .75rem;
  }

  .prix-wrapper{
    border-left:none;
    padding-left:0;
  }

  .prix-total{
    min-width:0;
    justify-content:flex-start;
  }

  .ligne-commentaire-bloc{
    margin-left:0;
    padding-left:0;
    flex-wrap:wrap;
  }
}

/* Téléphone */
@media (max-width:576px){
  .panier-container{
    padding:1rem;
    border-radius:10px;
  }

  .col-photo img{
    width:76px;
    height:76px;
  }

  .ligne-panier{
    grid-template-columns:76px minmax(0,1fr);
    padding:.65rem 0;
  }

  .quantite-input{
    width:72px;
  }

  .btn-qty{
    width:34px;
    height:34px;
  }

  .unite-affichee{
    min-width:0;
  }

  .total-general{
    text-align:left;
    font-size:1.15rem;
  }

  .modal-content{
    max-width:92vw;
    margin:18% auto;
  }

  .modal-actions{
    flex-direction:column;
    align-items:stretch;
  }

.modal-actions .btn,
.btn-cart-update,
.btn-effacer-panier,
.btn-passer-commande{
  width:100%;
}

.btn-cart-update,
.btn-effacer-panier,
.btn-passer-commande{
  padding:.7rem 1rem;
}

  .panier-actions{
    flex-direction:column;
  }
}