/* ==========================================================
   Panier, commande et suivi de commande
   ========================================================== */

/* Étapes dans l'affiche verte */
.affiche-page .etapes { color: var(--papier); }
.affiche-page .etapes a { color: inherit; }

/* ---------- Lignes du panier ---------- */
.lignes-panier { list-style: none; padding: 0; margin: 0; border-top: 3px solid var(--vert); }
.ligne-panier {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) auto;
  gap: var(--e-2) var(--e-3);
  padding-block: var(--e-3);
  border-bottom: var(--trait) solid color-mix(in srgb, var(--vert) 30%, transparent);
}
.ligne-panier--alerte { background: var(--rose-pale); box-shadow: inset 4px 0 0 var(--cerise-fonce); padding-inline: var(--e-2); }
.ligne-panier__image {
  display: grid; place-items: center;
  background: var(--rose);
  padding: .4rem;
  aspect-ratio: 4 / 5;
}
.ligne-panier__image img { width: 100%; height: 100%; object-fit: cover; }
.ligne-panier__image .fleur { --taille: 60%; }
.ligne-panier__infos > * + * { margin-top: .4rem; }
.ligne-panier__nom { font-size: var(--t-3); }
.ligne-panier__nom a { text-decoration: none; }
.ligne-panier__nom a:hover { text-decoration: underline wavy 2px; }
.ligne-panier__alerte { font-weight: 700; color: var(--cerise-fonce); }
.ligne-panier__message summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.ligne-panier__message[open] summary { margin-bottom: var(--e-1); }
.ligne-panier__message form > * + * { margin-top: var(--e-1); }

.ligne-panier__actions { display: grid; justify-items: end; align-content: start; gap: var(--e-1); text-align: right; }
.ligne-panier__quantite { display: grid; justify-items: end; gap: .35rem; }
.ligne-panier__quantite .champ__label { font-size: var(--t-0); }
.ligne-panier__total { font-family: var(--font-serif); font-size: var(--t-3); line-height: 1; }
.ligne-panier__maj { min-height: 2.5rem; padding: .4rem .9rem; font-size: var(--t-0); }
.js .ligne-panier__quantite[data-ameliore] .ligne-panier__maj { display: none; }

.quantite { display: inline-flex; align-items: stretch; width: fit-content; }
.quantite__bouton {
  width: 2.75rem; border: var(--trait) solid var(--encre); background: var(--rose);
  font-size: var(--t-3); line-height: 1; font-weight: 700;
}
.quantite__saisie {
  width: 4rem; text-align: center; border-inline: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.quantite__saisie::-webkit-outer-spin-button,
.quantite__saisie::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantite__bouton[hidden] { display: none; }
.quantite:not(:has(.quantite__bouton:not([hidden]))) .quantite__saisie { border-inline: var(--trait) solid var(--encre); }

.lien-bouton {
  background: none; border: 0; padding: .25rem 0;
  font-weight: 700; text-decoration: underline; text-underline-offset: .2em;
  color: var(--cerise-fonce);
}
.lien-bouton:hover { text-decoration-style: wavy; }
.panier__suite { margin-top: var(--e-3); }

@media (max-width: 40rem) {
  .ligne-panier { grid-template-columns: 5rem minmax(0, 1fr); }
  .ligne-panier__actions {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    justify-items: start; align-items: end; text-align: left;
  }
  .ligne-panier__quantite { justify-items: start; grid-row: 1 / span 2; }
  .ligne-panier__total, .ligne-panier__actions > form:last-child { justify-self: end; }
}

/* ---------- Récapitulatif ---------- */
.recap__note--alerte { font-weight: 700; color: var(--cerise-fonce); }
.recap .bouton[aria-disabled="true"] { width: 100%; }
.recap__sous-titre { font-size: var(--t-2); color: var(--vert); margin: var(--e-4) 0 var(--e-1); }
.recap .horaires { font-size: var(--t-0); }

/* ---------- Formulaire de commande ---------- */
.creneaux {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
  gap: var(--e-1);
}
.creneaux__message { grid-column: 1 / -1; font-weight: 600; }
.creneaux__message--erreur { color: var(--cerise-fonce); }
.commande__envoi > * + * { margin-top: var(--e-2); }

/* ---------- Adresse de livraison : suggestions IGN ----------
   Menu accroché sous la saisie, même largeur, par-dessus les champs suivants
   (aucun décalage). Mêmes codes que les champs : trait encre, rayon 0, ombre
   nette rose décalée (pas d'ombre floue). L'option active (clavier) porte aussi
   un filet vert, pour ne pas reposer sur la seule couleur. */
.adresse-combo { position: relative; }
.adresse-combo__liste {
  position: absolute; z-index: 20;
  top: calc(100% + .375rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .25rem 0;
  max-height: min(19rem, 55vh); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; color: var(--encre);
  border: var(--trait) solid var(--encre);
  box-shadow: var(--decalage) var(--decalage) 0 var(--rose);
}
.adresse-combo__liste[hidden] { display: none; }
/* Une ligne réservée au message d'état : il apparaît sans pousser le formulaire. */
.adresse-statut { min-height: 1.55em; margin-top: calc(-1 * var(--e-2)); }
.adresse-option {
  display: grid; grid-template-columns: 1.125rem minmax(0, 1fr); column-gap: .6rem;
  padding: .5rem .9rem; cursor: pointer;
  line-height: 1.3; overflow-wrap: anywhere;
}
.adresse-option + .adresse-option { border-top: 1px solid color-mix(in srgb, var(--vert) 14%, transparent); }
.adresse-option::before {
  content: ""; grid-row: 1 / span 2; align-self: start;
  width: 1.125rem; height: 1.125rem; margin-top: .05rem;
  background: var(--vert);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7Zm0 4.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.adresse-option__rue { font-weight: 700; }
.adresse-option__ville { font-size: var(--t-0); color: color-mix(in srgb, var(--encre) 78%, #fff); }
.adresse-option:hover { background: var(--rose-pale); }
.adresse-option[aria-selected="true"] { background: var(--rose-pale); box-shadow: inset 4px 0 0 var(--vert); }
@media (forced-colors: active) {
  .adresse-option[aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .adresse-option::before { background: CanvasText; }
}
.page-commande .bouton[data-envoi] { opacity: .7; cursor: progress; }

/* ---------- Suivi de commande ---------- */
.encart--confirme { box-shadow: var(--decalage) var(--decalage) 0 var(--anis); }
.encart form { margin-top: var(--e-3); }
.commande__infos {
  display: grid; gap: var(--e-2) var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: var(--e-5);
}
.commande__infos dt { font-family: var(--font-serif); color: var(--vert); font-size: var(--t-2); }
.commande__infos dd { margin: .2rem 0 0; overflow-wrap: anywhere; }
.commande__test {
  margin-top: var(--e-5);
  font-size: var(--t-0); font-weight: 700;
  border-left: 4px solid var(--capucine); padding-left: var(--e-2);
}
.commande__suite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-4); margin-top: var(--e-4); }