/* Gramme Cookies, version avec boutique : icône panier, choix de la quantité, panier coulissant.
   Ajoutée par code/construire-boutique.py, par-dessus site.css. */

/* ---------- En-tête : panier à côté du téléphone ---------- */
.entete__ligne { grid-template-columns: 96px 1fr 96px; }
@media (min-width: 1040px) { .entete__ligne { grid-template-columns: 1fr auto 1fr; } }
.entete__panier {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--olive); cursor: pointer;
}
.entete__panier svg { width: 24px; height: 24px; }
/* Les réseaux de l'accueil, serrés entre le menu et le téléphone + panier ; masqués sous 360 px, faute de place */
@media (max-width: 1039px) { .entete .reseaux { gap: 0; } .entete .reseaux a { width: 40px; } }
@media (max-width: 359px) { .entete .reseaux { display: none; } }
.entete__compte {
  position: absolute; top: 4px; right: 2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px;
  background: var(--corail-texte); color: #fff; font-size: .75rem; font-weight: 600; line-height: 20px; text-align: center;
}

/* ---------- Choix de la quantité ---------- */
.achat { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quantite { display: inline-flex; align-items: center; border: 1.5px solid var(--olive); border-radius: 3px; }
.quantite button {
  width: 48px; height: 46px; padding: 0; border: 0; background: none; color: var(--olive-fonce);
  font: inherit; font-size: 1.375rem; cursor: pointer;
}
.quantite button:disabled { color: rgba(46, 49, 34, .3); cursor: default; }
.quantite output { min-width: 36px; font-size: 1.125rem; font-weight: 500; text-align: center; }

/* ---------- Panier coulissant ---------- */
.panier { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.panier--ouvert { visibility: visible; }
.panier__fond { position: absolute; inset: 0; background: rgba(28, 26, 16, .45); opacity: 0; transition: opacity .25s; }
.panier--ouvert .panier__fond { opacity: 1; }
.panier__tiroir {
  position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  width: min(100%, 420px); background: var(--creme); box-shadow: -10px 0 30px rgba(0, 0, 0, .18);
  transform: translateX(100%); transition: transform .3s;
}
.panier--ouvert .panier__tiroir { transform: none; }
.panier__tete { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 22px; border-bottom: 1px solid var(--trait); }
.panier__tete h2 { margin: 0; font-size: 1.125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.panier__fermer { width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--encre); font-size: 1.75rem; cursor: pointer; }
.panier__corps { flex: 1; overflow-y: auto; padding: 20px 22px; }
.panier__vide { color: var(--encre-douce); }
.panier__ligne { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; align-items: start; }
.panier__ligne img { width: 76px; height: 90px; object-fit: contain; border-radius: 4px; background: #fff; }
.panier__nom { margin: 0 0 2px; font-weight: 500; }
.panier__unitaire { margin: 0 0 10px; color: var(--encre-douce); font-size: .9375rem; }
.panier__montant { margin: 0; font-weight: 500; }
.panier__retirer {
  margin-top: 8px; padding: 6px 0; border: 0; background: none; color: var(--encre-douce);
  font: inherit; font-size: .9375rem; text-decoration: underline; cursor: pointer;
}
.panier__livraison { margin: 20px 0 0; padding: 14px 16px; border-radius: var(--rayon); background: var(--corail-clair); }
.panier__livraison-texte { margin: 0; font-weight: 500; }
.panier__livraison-frais { margin: 10px 0 0; color: var(--encre-douce); font-size: .9375rem; }
.panier__jauge { height: 6px; margin-top: 10px; border-radius: 99px; background: rgba(163, 64, 47, .18); overflow: hidden; }
.panier__jauge span { display: block; height: 100%; border-radius: 99px; background: var(--corail-texte); transition: width .3s; }
.panier__pied { padding: 18px 22px 22px; border-top: 1px solid var(--trait); }
.panier__sous-total { display: flex; justify-content: space-between; margin: 0 0 14px; font-size: 1.125rem; }
.panier__pied .bouton { width: 100%; }
.panier__note { margin: 10px 0 0; color: var(--encre-douce); font-size: .9375rem; text-align: center; }
.panier__message { margin: 12px 0 0; padding: 12px 14px; border: 1.5px dashed var(--olive); border-radius: var(--rayon); color: var(--olive-fonce); font-size: .9375rem; }
body.panier-ouvert { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .panier__tiroir, .panier__fond { transition: none; } }