/* ==================================================================
   Ruban Pro — panier latéral (inc/panier-lateral.php)
   ------------------------------------------------------------------
   Reprend la maquette maquettes/i-maison/panier-lateral.html :
   voile sombre, panneau blanc de 460 px qui glisse depuis la droite,
   lignes avec vignette, quantité par pas, pied crème avec le bouton.
   ================================================================== */

.m-sans-defilement, .m-sans-defilement body { overflow: hidden; }

.m-voile {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(19, 19, 19, .46);
  opacity: 0;
  transition: opacity .28s ease;
}
.m-voile.est-ouvert { opacity: 1; }

.m-tiroir {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 91;
  display: flex;
  flex-direction: column;
  width: min(460px, 100vw);
  background: #fff;
  box-shadow: -24px 0 60px -30px rgba(30, 22, 8, .45);
  transform: translateX(104%);
  transition: transform .34s cubic-bezier(.2, .7, .2, 1);
}
.m-tiroir.est-ouvert { transform: none; }
.m-tiroir[hidden], .m-voile[hidden] { display: none; }

.m-tiroir__tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(1.3rem + env(safe-area-inset-top, 0px)) 1.5rem 1.15rem;
  border-bottom: 1px solid var(--m-trait-2);
}
.m-tiroir__tete h2 { margin: 0; font: 400 22px/1.1 var(--m-serif); color: var(--m-encre); }
.m-tiroir__fermer {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--m-trait);
  border-radius: 50%;
  background: #fff;
  color: var(--m-encre);
  cursor: pointer;
}
.m-tiroir__fermer:hover { border-color: var(--m-gris-2); }

.m-tiroir__msg {
  margin: 1rem 1.5rem 0;
  padding: .7rem .9rem;
  border-radius: 8px;
  background: #fbf1ef;
  font: 400 12.5px/1.45 var(--m-sans);
  color: #8a2a1e;
}
.m-tiroir__msg p { margin: 0; }
.m-tiroir__msg p + p { margin-top: .4rem; }
.m-tiroir__msg a { color: inherit; }

.m-tiroir__contenu { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.m-tiroir__contenu[aria-busy="true"] { cursor: progress; }
.m-tiroir__nb { margin: .9rem 1.5rem 0; font: 300 12.5px/1 var(--m-sans); color: var(--m-gris); }
.m-tiroir__corps {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .2rem 1.5rem 1rem;
}

/* ------------------------------------------------------------ lignes */
.m-tl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: .95rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--m-trait);
  transition: opacity .15s;
}
.m-tl:first-child { border-top: 0; }
.m-tl.est-en-cours { opacity: .5; pointer-events: none; }
.m-tl__vis {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--m-beige);
}
.m-tl__vis img, .m-tl__vis svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-tl__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.m-tl__nom { margin: 0; font: 500 14px/1.3 var(--m-sans); color: var(--m-encre); }
.m-tl__nom a { color: inherit; text-decoration: none; }
.m-tl__tot { font: 500 14px/1.3 var(--m-sans); color: var(--m-encre); white-space: nowrap; }
.m-tl__px { margin: .2rem 0 0; font: 300 12.5px/1.4 var(--m-sans); color: var(--m-gris); }
.m-tl__px .woocommerce-Price-amount { color: inherit; }

.m-tl__conf { margin-top: .45rem; }
.m-tl__conf summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 400 12px/1.2 var(--m-sans);
  color: var(--m-encre-2);
  cursor: pointer;
  list-style: none;
}
.m-tl__conf summary::-webkit-details-marker { display: none; }
.m-tl__conf summary .m-ico-f { width: 12px; height: 12px; transition: transform .15s; }
.m-tl__conf[open] summary .m-ico-f { transform: rotate(180deg); }
/* Configuration mise en forme par WooCommerce (dl.variation). */
.m-tl__conf dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .18rem .8rem;
  margin: .55rem 0 0;
  font: 300 12px/1.4 var(--m-sans);
}
.m-tl__conf dt { color: var(--m-gris); }
.m-tl__conf dd { margin: 0; color: var(--m-encre-2); }
.m-tl__conf dd p { margin: 0; }

.m-tl__qte { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .75rem; }
.m-compteur {
  display: inline-grid;
  margin: 0;
  padding: 0;
  grid-template-columns: 34px 62px 34px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--m-trait);
  border-radius: 999px;
}
/* Sélecteurs préfixés par .m-tiroir : les styles généraux des champs et
   des boutons du thème (hauteur mini, marges, bordure) ne doivent pas
   grossir le compteur. */
.m-compteur button {
  width: 34px;
  min-width: 0;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  font: 400 16px/1 var(--m-sans);
  color: var(--m-encre);
  cursor: pointer;
}
.m-compteur button:hover:not(:disabled) { background: var(--m-creme); }
.m-compteur button:disabled { color: var(--m-trait); cursor: not-allowed; }
.m-compteur input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #fff;
  text-align: center;
  font: 500 13px/1 var(--m-sans);
  color: var(--m-encre);
  -moz-appearance: textfield;
}
.m-compteur input::-webkit-outer-spin-button, .m-compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-tl__seul { font: 500 13px/1 var(--m-sans); }
.m-tl__lien { font: 400 12px/1 var(--m-sans); color: var(--m-encre-2); }
.m-tl__retirer {
  padding: 0;
  border: 0;
  background: none;
  font: 400 12px/1 var(--m-sans);
  color: var(--m-gris);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.m-tl__retirer:hover { color: var(--m-encre); }

.m-tl__palier {
  margin: .6rem 0 0;
  padding: .5rem .7rem;
  border-radius: 6px;
  background: var(--m-creme-2);
  font: 300 12px/1.45 var(--m-sans);
  color: var(--m-encre-2);
}
.m-tl__palier b { font-weight: 500; color: var(--m-encre); }
.m-tl__palier button {
  padding: 0;
  border: 0;
  background: none;
  font: 500 12px/1 var(--m-sans);
  color: var(--m-encre);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* -------------------------------------------------------------- pied */
.m-tiroir__pied {
  padding: 1.1rem 1.5rem calc(1.3rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--m-trait);
  background: var(--m-creme-2);
}
.m-tiroir__st {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font: 400 15px/1.3 var(--m-sans);
  color: var(--m-encre);
}
.m-tiroir__st b { font-weight: 500; }
.m-tiroir__note { margin: .35rem 0 0; font: 300 12.5px/1.4 var(--m-sans); color: var(--m-gris); }
/* Sous-total TTC et délai de livraison (audit du 19 octobre 2026). */
.m-tiroir__ttc { margin: .15rem 0 0; font: 300 12.5px/1.4 var(--m-sans); color: var(--m-encre-2); text-align: right; }
.m-tiroir__delai { margin: .5rem 0 0; font: 400 12.5px/1.4 var(--m-sans); color: var(--m-encre); }
.m-tl__tot small { font-size: 11px; font-weight: 400; color: var(--m-encre-2); }
.m-tiroir__cmd { justify-content: center; width: 100%; margin-top: 1rem; }
.m-tiroir__suite {
  display: block;
  margin: .8rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  font: 400 13px/1.2 var(--m-sans);
  color: var(--m-encre-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.m-tiroir__vide { padding: 3rem 1.5rem; text-align: center; }
.m-tiroir__vide p { margin: 0 0 1.4rem; font: 400 20px/1.3 var(--m-serif); color: var(--m-encre); }

@media (max-width: 620px) {
  .m-tiroir__tete, .m-tiroir__corps, .m-tiroir__pied { padding-inline: 1.1rem; }
  .m-tiroir__nb, .m-tiroir__msg { margin-inline: 1.1rem; }
  .m-tl { grid-template-columns: 72px minmax(0, 1fr); gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .m-tiroir, .m-voile { transition: none; }
}