/* Panier, tunnel de commande, confirmation, compte, connexion, suivi */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--space-6); align-items: start; }
.cart-lines { display: grid; gap: var(--space-4); }
.cart-line { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); align-items: start; }
.cart-line img { width: 6.5rem; height: 6.5rem; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-alt); }
.cart-line .name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.cart-line .name a { color: inherit; text-decoration: none; }
.cart-line .desc { color: var(--ink-dim); font-size: var(--text-sm); }
.cart-line .controls { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); flex-wrap: wrap; }
.cart-line .line-total { font-weight: 700; font-size: var(--text-lg); text-align: right; }
.cart-line.is-removed { background: var(--surface-alt); grid-template-columns: 1fr auto; }
.discount-line { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-md); background: var(--leaf-tint); border: 1px solid color-mix(in srgb, var(--leaf) 35%, transparent); flex-wrap: wrap; }
.discount-line .progress { width: 100%; margin-top: var(--space-3); }
.summary { border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: var(--space-5); background: var(--surface); }
.summary h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.summary .lines { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.summary .lines div { display: flex; justify-content: space-between; gap: var(--space-3); }
.summary .lines .muted { font-size: var(--text-sm); }
.summary .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--space-4); border-top: 2px solid var(--line-strong); font-weight: 700; font-size: var(--text-xl); }
.summary .total small { font-weight: 500; font-size: var(--text-sm); color: var(--ink-dim); }
.summary .btn { margin-top: var(--space-4); }
.promo-toggle { margin-top: var(--space-4); }
.promo-form { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.ship-select { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--r-md); background: var(--surface-alt); margin-bottom: var(--space-4); }
.ship-select label { font-weight: 600; font-size: var(--text-sm); }

/* Tunnel */
.checkout-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; counter-reset: st; }
.checkout-steps li { counter-increment: st; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); border: 2px solid var(--line); font-weight: 600; color: var(--ink-dim); }
.checkout-steps li::before { content: counter(st); width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-alt); color: var(--ink-dim); font-family: var(--font-display); font-weight: 600; flex: none; }
.checkout-steps li.done { border-color: var(--leaf); color: var(--ink); }
.checkout-steps li.done::before { content: "✓"; background: var(--leaf-deep); color: #fff; }
.checkout-steps li[aria-current] { border-color: var(--leaf-deep); background: var(--leaf-tint); color: var(--ink); }
.checkout-steps li[aria-current]::before { background: var(--leaf-deep); color: #fff; }
.checkout-steps a { color: inherit; text-decoration: none; }
.step-title { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.step-title .num { font-family: var(--font-display); font-size: var(--text-xl); color: var(--leaf-deep); font-weight: 600; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-6); align-items: start; }
.mini-cart { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
/* minmax(0, 1fr) et non 1fr : « 1fr » vaut « minmax(auto, 1fr) », donc le nom
   du produit imposait sa largeur et la carte sortait du cadre sur mobile
   (633 px dans une colonne de 326, releve le 19/09/2026). */
.mini-cart div { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.mini-cart div > * { min-width: 0; overflow-wrap: anywhere; }
.mini-cart img { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--r-sm); background: var(--surface-alt); }
.relay-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.relay { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-4); border: 2px solid var(--line-strong); border-radius: var(--r-md); align-items: center; background: var(--surface); }
.relay strong { display: block; }
.relay .addr { color: var(--ink-dim); font-size: var(--text-sm); }
.relay .hours { font-size: var(--text-sm); margin-top: var(--space-1); }
.relay .dist { font-weight: 700; color: var(--leaf-deep); font-size: var(--text-sm); }
.relay.is-selected { border-color: var(--leaf-deep); background: var(--leaf-tint); }
.map-placeholder { aspect-ratio: 16 / 9; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--surface-alt); display: grid; place-items: center; color: var(--ink-dim); font-size: var(--text-sm); text-align: center; padding: var(--space-4); }
.pay-methods { display: grid; gap: var(--space-3); }
.pay-method { border: 2px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.pay-method > label { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); cursor: pointer; font-weight: 600; }
.pay-method input { width: 1.5rem; height: 1.5rem; accent-color: var(--leaf-deep); }
.pay-method .logos { margin-left: auto; font-size: var(--text-xs); color: var(--ink-dim); font-weight: 700; letter-spacing: .04em; }
.pay-method .body { padding: 0 var(--space-4) var(--space-4) 3.25rem; }
.pay-method:has(input:checked) { border-color: var(--leaf-deep); }
.pay-method:not(:has(input:checked)) .body { display: none; }
.card-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.card-fields .span-2 { grid-column: 1 / -1; }
.wallets { display: grid; gap: var(--space-3); }
.wallets[hidden] { display: none; }
.wallet { min-height: var(--tap); border-radius: var(--r-sm); border: 2px solid var(--ink); background: var(--ink); color: #fff; font-weight: 700; }
.obligation { font-size: var(--text-sm); color: var(--ink-dim); text-align: center; margin-top: var(--space-2); }
.thanks { background: linear-gradient(155deg, var(--leaf-deep) 0%, #4c6a3a 60%, var(--leaf) 130%); color: #fff; border-radius: var(--r-lg); padding: var(--space-7); margin-top: var(--space-5); }
.thanks h1 { color: #fff; }
.thanks p { color: rgba(255,255,255,.88); max-width: 52ch; margin-top: var(--space-3); }
.thanks .order-no { display: inline-block; margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); font-weight: 700; }

/* Compte */
.account-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.account-nav a { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-weight: 600; }
.account-nav a:hover { background: var(--surface-alt); color: var(--leaf-deep); }
.account-nav a[aria-current] { background: var(--leaf-tint); color: var(--leaf-deep); }
.orders { display: grid; gap: var(--space-4); }
.order { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.order .no { font-weight: 700; }
.order .meta { color: var(--ink-dim); font-size: var(--text-sm); }
.order .items { color: var(--ink-dim); font-size: var(--text-sm); margin-top: var(--space-2); }
.order .btn-row { grid-column: 1 / -1; margin-top: var(--space-2); }
.auth { max-width: 32rem; margin-inline: auto; }
.auth .card + .card { margin-top: var(--space-4); }
.or { display: flex; align-items: center; gap: var(--space-3); color: var(--ink-dim); font-size: var(--text-sm); margin: var(--space-5) 0; }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

@media (max-width: 55em) {
  .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
  .cart-line { grid-template-columns: 5rem 1fr; }
  .cart-line img { width: 5rem; height: 5rem; }
  .cart-line .line-total { grid-column: 2; text-align: left; }
  .checkout-steps { grid-template-columns: 1fr; }
  .card-fields { grid-template-columns: 1fr; }
  .order { grid-template-columns: 1fr; }
  .thanks { padding: var(--space-5); }
}

/* Champ de code promo : c'est un champ secondaire, il ne doit pas peser autant
   qu'un champ du tunnel de commande. */
.promo-form .field { gap: var(--space-2); }
.promo-form label { font-size: var(--text-sm); }
.promo-form .input {
  min-height: 3rem;
  height: 3rem;
  font-size: var(--text-base);
  padding-inline: var(--space-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.promo-form .input::placeholder { text-transform: none; letter-spacing: 0; color: var(--ink-dim); opacity: .75; }
.promo-form .btn { min-height: 3rem; height: 3rem; flex: none; padding-inline: var(--space-4); }
.promo-form .help { font-size: var(--text-sm); }

/* Choix du mode de livraison dans le recapitulatif : les deux prix sont
   visibles, on ne cache pas celui du domicile. */
.ship-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.ship-mode {
  display: flex; flex-direction: column; gap: .15rem;
  min-height: var(--tap); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm); border: 2px solid var(--line-strong);
  background: var(--surface); text-align: left;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ship-mode:hover { border-color: var(--leaf); }
.ship-mode[aria-pressed="true"] { border-color: var(--leaf-deep); background: var(--leaf-tint); }
.sm-nom { font-size: var(--text-sm); color: var(--ink-dim); }
.sm-prix { font-weight: 700; color: var(--ink); }
.ship-mode[aria-pressed="true"] .sm-prix { color: var(--leaf-deep); }

/* Le libellé « Code » est masqué visuellement : l'espace réservé du champ suffit
   à l'œil, et le lecteur d'écran garde l'étiquette. Le champ ne décale plus. */
.promo-form .field { gap: 0; }
.promo-form .help { margin-top: var(--space-2); }

/* Page Connexion : sur grand écran, les deux façons de se connecter vivent
   côte à côte au lieu de s'empiler dans une colonne étroite. */
.auth { max-width: 64rem; }
.auth-tete { max-width: 46rem; margin-inline: auto; }
.auth-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
  position: relative;
}
.auth-colonnes > * { min-width: 0; }
.auth .card + .card { margin-top: 0; }
.auth-colonnes .card { height: 100%; display: flex; flex-direction: column; }
.auth-colonnes .card .btn { margin-top: auto; }

/* Le « ou » se place entre les deux colonnes, sur la ligne médiane */
.auth-ou {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  margin: 0;
  padding: 0;
}
.auth-ou span {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-dim);
}

.auth .card-alt { max-width: 46rem; margin-inline: auto; }

@media (max-width: 55em) {
  .auth { max-width: 32rem; }
  .auth-colonnes { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .auth-ou { position: static; transform: none; display: grid; place-items: center; }
  .auth-colonnes .card { height: auto; }
}

/* Coordonnees de paiement (virement, cheque) sur la page de confirmation. */
.instructions-paiement { border-left: 4px solid var(--leaf-deep); }
.instructions-paiement[hidden] { display: none; }
.instructions-paiement .coordonnees { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: var(--space-4) 0; }
.instructions-paiement .coordonnees dt { color: var(--ink-dim); }
.instructions-paiement .coordonnees dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; white-space: pre-line; }
@media (max-width: 30em) {
  .instructions-paiement .coordonnees { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .instructions-paiement .coordonnees dd { margin-bottom: var(--space-3); }
}

/* ===================================================== choix du point relais
   Fenetre ouverte des que « point relais » est coche (relais.js). Liste et
   carte cote a cote sur grand ecran, en onglets sur telephone. Aucune ombre :
   regle du tunnel de commande. */
.relais-choisi { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4); border: 2px solid var(--leaf-deep); border-radius: var(--r-md); background: var(--leaf-tint); }
.relais-choisi[hidden], .relais-a-choisir[hidden], .relais-erreur[hidden] { display: none; }
.relais-choisi-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.relais-choisi-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--leaf-deep); }
.relais-choisi-horaires { font-size: var(--text-sm); color: var(--ink-dim); }
.relais-a-choisir { padding: var(--space-4); border: 2px dashed var(--line-strong); border-radius: var(--r-md); }
.relais-erreur { margin: var(--space-3) 0 0; color: var(--promo); font-weight: 700; }

.relais-modal { width: min(70rem, 96vw); height: min(46rem, 92vh); max-height: 92vh; margin: auto; padding: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); overflow: hidden; }
.relais-modal::backdrop { background: rgba(30, 42, 23, .5); }
.rm-inner { display: flex; flex-direction: column; height: 100%; }
.rm-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); background: var(--leaf-tint); }
.rm-tete h2 { margin: 0; font-size: var(--text-lg); color: var(--leaf-deep); }
.rm-recherche { display: flex; align-items: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--line); }
.rm-champ { display: flex; flex-direction: column; gap: 4px; flex: 0 1 14rem; min-width: 0; }
.rm-champ label { font-weight: 600; font-size: var(--text-sm); }
.rm-recherche .btn { min-height: var(--tap); }
.rm-vues { display: none; }
.rm-corps { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); }
.rm-corps > * { min-width: 0; min-height: 0; }
.rm-liste-zone { overflow-y: auto; padding: var(--space-4); border-right: 1px solid var(--line); }
.rm-etat { margin: 0 0 var(--space-3); color: var(--ink-dim); font-size: var(--text-sm); }
.rm-etat:empty { display: none; }
.rm-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rm-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4);
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.rm-item:hover, .rm-item.est-actif { border-color: var(--leaf); }
.rm-item.est-choisi { border-color: var(--leaf-deep); background: var(--leaf-tint); }
.rm-item > .btn { grid-column: 2; justify-self: start; }
.rm-num { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--leaf-deep); color: #fff; font-weight: 700; font-size: var(--text-sm); }
.rm-infos { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); }
.rm-infos strong { font-size: var(--text-base); color: var(--ink); }
.rm-dist { font-weight: 700; color: var(--leaf-deep); }
.rm-horaires { margin-top: var(--space-2); }
.rm-horaires summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.rm-horaires table { margin-top: var(--space-2); border-collapse: collapse; font-size: var(--text-xs); }
.rm-horaires th { text-align: left; font-weight: 600; padding: 2px var(--space-3) 2px 0; }
.rm-horaires td { padding: 2px 0; }
.rm-horaires .rm-auj th, .rm-horaires .rm-auj td { color: var(--leaf-deep); font-weight: 700; }
.rm-carte { position: relative; background: var(--surface-alt); min-height: 18rem; z-index: 0; }
.rm-carte-souci { padding: var(--space-5); color: var(--ink-dim); }
.rm-repere { background: none; border: 0; }
.rm-repere span { display: grid; place-items: center; width: 34px; height: 34px; box-sizing: border-box; border-radius: 50%;
  background: var(--leaf-deep); border: 3px solid #fff; outline: 1px solid rgba(30, 42, 23, .35); color: #fff; font: 700 14px/1 var(--font-text, sans-serif); }
.rm-repere.est-actif span { background: var(--gold); }
.rm-repere.est-choisi span { background: var(--leaf); }
.rm-popup-choisir { margin-top: var(--space-2); }
.relais-modal .leaflet-popup-content { font-family: var(--font-text, sans-serif); font-size: 14px; }
@media (max-width: 62em) {
  .relais-modal { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .rm-recherche { padding: var(--space-3) var(--space-4); }
  .rm-champ { flex: 1 1 auto; }
  .rm-vues { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: var(--space-3) var(--space-4) 0;
    border: 2px solid var(--leaf-deep); border-radius: var(--r-pill); overflow: hidden; }
  .rm-vue { min-height: var(--tap-sm); border: 0; background: var(--surface); color: var(--leaf-deep); font-weight: 700; font: inherit; font-weight: 700; cursor: pointer; }
  .rm-vue[aria-pressed="true"] { background: var(--leaf-deep); color: #fff; }
  .rm-corps { grid-template-columns: minmax(0, 1fr); }
  .rm-liste-zone { border-right: 0; }
  .rm-corps .rm-carte { display: none; }
  .rm-corps.montre-carte .rm-carte { display: block; }
  .rm-corps.montre-carte .rm-liste-zone { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rm-item { transition: none; } }

/* Tunnel de commande sur grand ecran (24/10/2026, demande de David : « pas
   tout empiler ») : les deux blocs de chaque etape cote a cote, le
   recapitulatif reste a droite, les boutons dessous en pleine largeur.
   Coordonnees : e-mail | identite. Livraison : adresse | mode et point
   relais. Paiement : empile, demande de David (le total sous le moyen de
   paiement, dans l'ordre ou on les lit). En dessous de 78 em (1248 px), les
   colonnes passeraient sous 300 px : une colonne,
   comme avant. */
@media (min-width: 78em) {
  [data-page="commande-coordonnees"] .checkout-layout form.form, [data-page="commande-livraison"] .checkout-layout form.form {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start;
  }
  [data-page="commande-coordonnees"] .checkout-layout form.form > *,
  [data-page="commande-livraison"] .checkout-layout form.form > * { min-width: 0; margin-top: 0; }
  [data-page="commande-coordonnees"] .checkout-layout form.form > .btn-row,
  [data-page="commande-livraison"] .checkout-layout form.form > .btn-row,
  [data-page="commande-livraison"] .checkout-layout form.form > .alert { grid-column: 1 / -1; }
}
.card-titre { font-size: var(--text-lg); margin: 0 0 var(--space-4); }