/* ============================================================
   TULIPE PALETTES - TUNNEL DE COMMANDE : étapes 1 (commande) et 2 (vérification)
   Géométrie reprise des écrans validés : colonne centrale de 770 px, cartes de
   formulaire, résumé de livraison, champs en grille 2 colonnes (1 colonne ≤ 768 px),
   action principale ancrée en bas d'écran en mobile.
   Migration : rem → px, couleurs = tokens, rayons = --r-*, champs = composant
   .form-field (bordure ≥ 3:1), boutons = .btn (52 px), polices Fraunces / Work Sans.
   Variables locales scopées à .checkout-page (jamais sur :root).
   ============================================================ */
.checkout-page {
  --ck-width: 770px;
  --ck-gap: 16px;
  --ck-card-pad: clamp(12px, 4vw, 24px);
  --ck-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ck-icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 4.5h13v11H1z'/%3E%3Cpath d='M14 9.5h4.5L21 12.5v3H14z'/%3E%3Ccircle cx='6' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E");
  --ck-icon-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5 12 4l10 5.5'/%3E%3Cpath d='M3.5 9.5h17v1.5h-17z'/%3E%3Cpath d='M5 11v8'/%3E%3Cpath d='M9.3 11v8'/%3E%3Cpath d='M14.7 11v8'/%3E%3Cpath d='M19 11v8'/%3E%3Cpath d='M3 19.5h18'/%3E%3C/svg%3E");
  --ck-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FCF9F2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");
  width: 100%; max-width: calc(var(--ck-width) + 2 * var(--container-padding-x)); margin-inline: auto;
  padding: 32px var(--container-padding-x) var(--section-padding-y);
}
/* L'attribut hidden doit rester prioritaire sur les display: flex des blocs d'état. */
.checkout-page [hidden] { display: none !important; }

.checkout-page__steps { padding-bottom: 24px; }
.checkout { display: flex; flex-direction: column; }
.checkout__title { margin-bottom: 24px; text-align: center; font-size: var(--fs-page-title); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--color-forest); }
.checkout__lead { margin: -8px 0 24px; text-align: center; color: var(--color-text-muted); font-size: var(--fs-base); }
.checkout-loading { padding: 32px 0; text-align: center; color: var(--color-text-muted); }
.checkout-page:not([data-state="loading"]) .checkout-loading { display: none; }

/* ---------- Étape 1 en deux colonnes (≥ 1024 px) : formulaire + récapitulatif collant ----------
   Modificateur .checkout-page--split posé sur la seule page « coordonnées » : l'étape « vérification » garde sa colonne de 770 px.
   ≤ 1023 px : une colonne ; le récapitulatif devient un bloc repliable (fermé par défaut) au-dessus du formulaire. */
.checkout-page--split { --ck-sticky-top: 140px; }   /* sous le header collant, comme --cp-sticky-top du panier */
.checkout__main { display: flex; flex-direction: column; min-width: 0; }
.checkout-page--split .checkout-recap { display: none; }
.checkout-page--split .order-recap__item { align-items: center; gap: 12px; }
.checkout-page--split .order-recap__item-image { flex-basis: 48px; width: 48px; height: 48px; }
.checkout-page--split .order-recap__item-ref, .checkout-page--split .order-recap__item-separator { display: none; }   /* version compacte : la réf. est rappelée à l'étape suivante */
.checkout-page--split .order-recap__item-meta { gap: 2px 8px; }

.checkout-recap-mobile { margin-bottom: var(--ck-gap); background: var(--color-surface-dim); border: 1px solid var(--color-border); border-radius: var(--r-card); }
.checkout-recap-mobile__summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 48px 10px 16px;
  list-style: none; cursor: pointer; border-radius: var(--r-card); font-weight: 600; color: var(--color-ink); }
.checkout-recap-mobile__summary::-webkit-details-marker { display: none; }
.checkout-recap-mobile__summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B4A34' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat; transition: transform 200ms ease; }
.checkout-recap-mobile[open] > .checkout-recap-mobile__summary::after { transform: rotate(180deg); }
.checkout-recap-mobile__summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.checkout-recap-mobile__title { font-size: var(--fs-base); }
.checkout-recap-mobile__total { font-family: var(--font-serif); font-size: var(--fs-card-title); color: var(--color-forest); white-space: nowrap; }
.checkout-recap-mobile__body { padding: 0 16px 16px; }
.checkout-recap-mobile .order-recap--inline { padding: 0; background: none; border: 0; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .checkout-recap-mobile__summary::after { transition: none; } }

@media (min-width: 1024px) {
  .checkout-page--split { max-width: calc(1180px + 2 * var(--container-padding-x)); }
  .checkout-page--split .checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
  .checkout-page--split .checkout__title, .checkout-page--split .checkout__lead { text-align: left; }
  .checkout-page--split .shipping-summary, .checkout-page--split .checkout-recap-mobile { display: none; }
  .checkout-page--split .checkout-form__actions { display: none; }   /* le bouton est dans le pied du récapitulatif (Entrée dans un champ valide toujours le formulaire) */   /* l'information est dans le récapitulatif */
  .checkout-page--split .checkout-recap { display: flex; flex-direction: column; position: sticky; top: var(--ck-sticky-top);
    max-height: calc(100dvh - var(--ck-sticky-top) - 16px); overflow: hidden; }   /* jamais plus haut que l'écran visible */
  .checkout-page--split .checkout-recap > * { flex: none; }
  /* La liste est bornée pour que le bouton du pied soit visible dès l'arrivée (le récap commence ≈ 250 px sous le haut de page) */
  .checkout-page--split .checkout-recap .order-recap__items { flex: 0 1 auto; min-height: 0; max-height: max(96px, calc(100dvh - 640px)); overflow-y: auto; overscroll-behavior: contain; }   /* seule la liste défile : sous-totaux, total et TVA restent visibles */
  .checkout-page--split .checkout-recap .order-recap__subtotals, .checkout-page--split .checkout-recap .order-recap__total { margin-top: 12px; padding-top: 12px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .checkout-page--split .checkout-recap { padding: 16px; }
  .checkout-page--split .checkout-recap .order-recap__title { margin-bottom: 8px; }
}

/* ---------- Résumé livraison (information, pas un formulaire) ---------- */
.shipping-summary { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 12px 20px; background: var(--color-surface-dim); border-radius: var(--r-card); }
.shipping-summary__icon { display: block; flex-shrink: 0; width: 20px; height: 20px; background: var(--color-ink); -webkit-mask: var(--ck-icon-truck) center / contain no-repeat; mask: var(--ck-icon-truck) center / contain no-repeat; }
.shipping-summary__text { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink); }
.shipping-summary__separator { color: var(--color-text-muted); }

/* ---------- Formulaire ---------- */
.checkout-form { display: flex; flex-direction: column; gap: var(--ck-gap); }
.form-summary { margin-bottom: 0; }
.form-summary__title { font-weight: 600; }

.form-section {
  position: relative; overflow: hidden; display: flex; flex-direction: column; padding: var(--ck-card-pad);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: box-shadow 320ms var(--ck-ease);
}
/* Liseré braise qui se révèle en haut de la carte contenant le champ actif : repère de position discret. */
.form-section::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--color-ember); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ck-ease); }
.form-section:focus-within::before { transform: scaleX(1); }
@media (hover: hover) { .form-section:hover { box-shadow: var(--shadow-card-hover); } }
.form-section__title { margin-bottom: 12px; font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; color: var(--color-forest); }
.form-section__optional { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--color-text-muted); }
.form-section__intro { margin-bottom: 12px; color: var(--color-text-muted); font-size: var(--fs-sm); }

.address-fields { display: flex; flex-direction: column; gap: 16px; }
.form-section__grid { display: flex; flex-wrap: wrap; gap: 24px; }
.form-section__grid > .form-field { flex: 1 1 260px; }
.form-section__static-info { display: flex; gap: 4px; width: fit-content; padding: 8px 12px; background: var(--color-surface-dim); border-radius: var(--r-badge); font-size: var(--fs-xs); color: var(--color-text-muted); }
.form-section__static-label { color: var(--color-ink); font-weight: 500; }
.form-section > .form-field--checkbox { margin-top: 16px; }

/* ---------- Case à cocher (dessin en CSS pur : aucune image) ---------- */
.form-field--checkbox { flex-direction: row; align-items: center; gap: 8px; }
.form-field--checkbox .form-field__label { display: flex; align-items: center; min-height: 44px; font-weight: 500; cursor: pointer; }
.form-field__checkbox {
  -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--color-border-field); border-radius: var(--r-badge); background: var(--color-paper); cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.form-field__checkbox:hover { border-color: var(--color-wood); }
.form-field__checkbox:checked { background: var(--color-forest) var(--ck-icon-check) center / 12px 12px no-repeat; border-color: var(--color-forest); }
.form-field__checkbox:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- Moyen de paiement ---------- */
.payment-methods { display: flex; flex-direction: column; gap: 12px; border: 0; padding: 0; min-width: 0; }
.payment-method { position: relative; }
.payment-method__input { position: absolute; top: 18px; left: 16px; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--color-border-field); border-radius: 50%; background: var(--color-paper); cursor: pointer; z-index: 1; transition: border-color 150ms ease; }
.payment-method__input:checked { border: 6px solid var(--color-ember); }
.payment-method__input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.payment-method__label {
  display: flex; align-items: flex-start; gap: 16px; padding: 16px 16px 16px 52px;
  background: var(--color-paper); border: 1.5px solid var(--color-border-field); border-radius: var(--r-card); cursor: pointer;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) { .payment-method__label:hover { border-color: var(--color-wood); } }
.payment-method__input:checked + .payment-method__label { border-color: var(--color-ember); box-shadow: 0 0 0 1px var(--color-ember); }
.payment-method__icon { display: block; flex-shrink: 0; width: 38px; height: 38px; background: var(--color-ink); -webkit-mask: var(--ck-icon-bank) center / contain no-repeat; mask: var(--ck-icon-bank) center / contain no-repeat; }
.payment-method__content { display: flex; flex-direction: column; gap: 4px; }
.payment-method__title { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.payment-method__description { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: 1.5; }

/* ---------- Actions ---------- */
.checkout-form__actions { display: flex; justify-content: flex-end; gap: 12px; }
.btn__arrow { display: inline-block; transition: transform 200ms var(--ck-ease); }
@media (hover: hover) { .btn:hover .btn__arrow { transform: translateX(3px); } }

/* ---------- Barre d'envoi collée en bas : total + bouton (≤ 1023 px) ----------
   Sticky (et non fixed) : elle s'arrête à la fin du formulaire sans recouvrir le pied de page. ≥ 1024 px : masquée,
   le bouton est dans le pied du récapitulatif. */
.checkout-form__total { display: none; }
@media (max-width: 1023px) {
  .checkout-page--split .checkout-form__actions { position: sticky; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; margin-inline: calc(-1 * var(--container-padding-x)); padding: 12px var(--container-padding-x); padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--color-paper); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 8px color-mix(in srgb, var(--color-ink) 6%, transparent); }
  .checkout-form__total { display: flex; flex-direction: column; flex: 0 0 auto; line-height: 1.2; }
  .checkout-form__total-label { font-size: var(--fs-xs); color: var(--color-text-muted); }
  .checkout-form__total-value { font-family: var(--font-serif); font-size: var(--fs-card-title); font-weight: 600; color: var(--color-forest); white-space: nowrap; }
  .checkout-page--split .checkout-form__actions .btn { flex: 1 1 auto; max-width: 340px; }
  /* Le bouton WhatsApp remonte au-dessus de la barre d'action */
  body[data-mobile-bar] .whatsapp-fab { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
.checkout-recap__actions { margin-top: 16px; }
.checkout-recap__actions .btn { width: 100%; }

/* ---------- Tablette ---------- */
@media (max-width: 992px) {
  .form-section__grid { gap: 16px; }
  .form-section__grid > .form-field { flex-basis: 220px; }
}

/* ---------- Mobile : recomposition, pas simple rétrécissement ---------- */
@media (max-width: 768px) {
  .checkout-page { padding-top: 24px; }
  .checkout__title, .checkout__lead { text-align: left; }
  .checkout-form { gap: 12px; }
  .form-section__grid { flex-direction: column; gap: 16px; }
  .form-section__grid > .form-field { flex-basis: auto; }
  .form-field__control { font-size: 16px; } /* ≥ 16 px : évite le zoom automatique de Safari iOS */
  /* Action principale : barre pleine largeur collée au bas de l'écran pendant la saisie
     (sticky et non fixed : elle s'arrête à la fin du formulaire, sans recouvrir le pied de page). */
}

/* ============================================================
   ÉTAPE 2 - VÉRIFICATION (verification.html)
   Trois cartes (récapitulatif, livraison/facturation/paiement, consentement) au même
   gabarit que les cartes de l'étape 1. Le récapitulatif s'appelle .order-recap (et non
   .order-summary comme dans la source) : ce nom est déjà pris par le panier, avec une
   autre géométrie ; l'étape 3 réutilisera .order-recap.
   ============================================================ */
.review { display: flex; flex-direction: column; gap: var(--ck-gap); }
.order-recap, .order-details, .order-confirmation {
  display: flex; flex-direction: column; padding: var(--ck-card-pad);
  background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}

/* ---------- Récapitulatif ---------- */
.order-recap__items { display: flex; flex-direction: column; gap: 16px; }
.order-recap__item { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.order-recap__item-info { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.order-recap__item-name { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.order-recap__item-meta { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.order-recap__item-price { flex: 0 0 auto; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.order-recap__subtotals { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.order-recap__row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.order-recap__row dd { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.order-recap__options { margin-top: 8px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.order-recap__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.order-recap__total-label, .order-recap__total-value { font-family: var(--font-serif); font-size: clamp(22px, 0.7vw + 19px, 28px); font-weight: 600; color: var(--color-forest); }
.order-recap__note { font-size: var(--fs-xs); color: var(--color-text-muted); }
.order-recap__total + .order-recap__note { margin-top: 12px; }
.order-recap__note + .order-recap__note { margin-top: 8px; }

/* ---------- Livraison / facturation / paiement ---------- */
.order-details__addresses { display: flex; flex-wrap: wrap; gap: 32px 40px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--color-border); }
.address-card { display: flex; flex-direction: column; flex: 1 1 200px; gap: 8px; min-width: 0; font-style: normal; }
.address-card__title { margin-bottom: 4px; font-size: var(--fs-base); font-weight: 600; color: var(--color-forest); }
.address-card__name, .address-card__line { font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.address-card__name { font-weight: 500; color: var(--color-ink); }
.payment-recap { display: flex; align-items: center; gap: 16px; }
.payment-recap__icon { display: block; flex-shrink: 0; width: 40px; height: 40px; background: var(--color-ink); -webkit-mask: var(--ck-icon-bank) center / 82% no-repeat; mask: var(--ck-icon-bank) center / 82% no-repeat; }
.payment-recap__details { display: flex; flex-direction: column; gap: 4px; }
.payment-recap__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.payment-recap__value { font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.order-details__message { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; white-space: pre-line; }
.order-details__message-label { font-weight: 600; color: var(--color-ink); }

/* ---------- Consentement et validation ---------- */
.order-confirmation__consent { margin-bottom: 8px; }
.order-confirmation__consent .form-field__label { display: block; padding-block: 8px; font-size: var(--fs-sm); font-weight: 400; line-height: 1.5; color: var(--color-text-muted); }
.order-confirmation__link { padding-block: 2px; color: var(--color-ember); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; transition: color 150ms ease; }
.order-confirmation__link:hover { color: var(--color-ember-dark); }
.order-confirmation__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--r-badge); }
.order-confirmation__hint { margin: 0 0 16px 28px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.order-confirmation .checkout-form__actions { margin-top: 8px; }
.order-confirmation .checkout-form__actions .btn { width: 100%; }
.order-confirmation__disclaimer { margin-top: 16px; text-align: center; font-size: var(--fs-xs); color: var(--color-text-muted); }
.checkout__edit-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-border-field); text-underline-offset: 3px; transition: color 150ms ease, text-decoration-color 150ms ease; }
.checkout__edit-link:hover { color: var(--color-ember); text-decoration-color: var(--color-ember); }
.checkout__edit-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--r-badge); }

@media (max-width: 640px) {
  .order-details__addresses { flex-direction: column; gap: 16px; }
  .address-card { flex: 0 0 auto; padding-bottom: 16px; border-bottom: 1px solid var(--color-border); } /* flex-basis 200px deviendrait une hauteur en colonne */
  .address-card:last-child { padding-bottom: 0; border-bottom: 0; }
}
@media (max-width: 374px) {
  .order-recap__item { flex-wrap: wrap; }
  .order-recap__item-price { margin-left: auto; }
}

/* Mobile : la carte de consentement s'éclate pour que le bouton devienne une barre sticky.
   Sticky (et non fixed comme dans la source) : la barre s'arrête à la fin du formulaire et ne recouvre pas le pied de page. */
@media (max-width: 1023px) {
  .review__aside { display: contents; }   /* le récap et le consentement redeviennent des blocs du formulaire, dans l'ordre d'origine (ci-dessous) */
  .review .order-recap { order: 0; }
  .review__main { order: 1; }
  .review .order-confirmation__consent, .review .order-confirmation__hint, .review .checkout-form__actions, .review .order-confirmation__disclaimer { order: 2; }
  .order-confirmation { display: contents; }
  .order-confirmation__consent { margin: 0; padding: var(--ck-card-pad); background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
  .order-confirmation__hint { margin: -4px 0 0; padding: 0 4px; }
  .review .checkout-form__actions { position: sticky; bottom: 0; z-index: 50; margin: 0 calc(-1 * var(--container-padding-x)); padding: 12px var(--container-padding-x); padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: var(--color-paper); border-top: 1px solid var(--color-border); box-shadow: 0 -2px 8px color-mix(in srgb, var(--color-ink) 6%, transparent); }
  .order-confirmation__disclaimer { margin-top: 0; text-align: left; }
  /* Barre d'envoi : total à gauche, bouton à droite (même présentation qu'à l'étape 1) */
  .review .checkout-form__actions { align-items: center; justify-content: space-between; }
  .review .checkout-form__actions .btn, .review .order-confirmation .checkout-form__actions .btn { width: auto; flex: 1 1 auto; max-width: 340px; }
}

/* ---------- Étape 2 en deux colonnes (≥ 1024 px) : détails à gauche, aside collant (récap + consentement + bouton) à droite ----------
   Modificateur .checkout-page--review : seule la page « vérification » est concernée. Le formulaire est display: contents :
   .review__main et .review__aside deviennent directement les colonnes de .checkout, sous le même titre (l'aside commence à la hauteur du titre). */
.order-confirmation__hint.is-attention { color: var(--color-ember-dark); font-weight: 600; }
@media (min-width: 1024px) {
  .checkout-page--review { --ck-sticky-top: 140px; max-width: calc(1180px + 2 * var(--container-padding-x)); }
  .checkout-page--review .checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 32px; align-items: start; }
  .checkout-page--review .checkout__title { text-align: left; }
  .checkout-page--review .review { display: contents; }
  .checkout-page--review .review__main, .checkout-page--review .checkout__edit-link { grid-column: 1; }
  .review__aside { grid-column: 2; grid-row: 1 / span 4; display: flex; flex-direction: column; position: sticky; top: var(--ck-sticky-top);
    max-height: calc(100dvh - var(--ck-sticky-top) - 16px); overflow: hidden; padding: 24px;
    background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
  .review__aside > .order-recap, .review__aside > .order-confirmation { padding: 0; background: none; border: 0; box-shadow: none; }
  .review__aside > .order-recap { flex: 0 1 auto; min-height: 0; overflow: hidden; }
  /* seule la liste d'articles défile ; bornée pour que la case et le bouton soient visibles dès l'arrivée (l'aside commence ≈ 250 px sous le haut de page) */
  .review__aside .order-recap__items { flex: 0 1 auto; min-height: 64px; max-height: max(96px, calc(100dvh - 790px)); overflow-y: auto; overscroll-behavior: contain; }
  .review__aside .order-recap__subtotals, .review__aside .order-recap__total { margin-top: 12px; padding-top: 12px; }
  .review__aside .order-recap__subtotals { gap: 8px; }
  .review__aside > .order-confirmation { flex: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
  .review__aside .order-confirmation__consent { margin-bottom: 0; }
  .review__aside .order-confirmation__consent .form-field__label { padding-block: 4px; }
  .review__aside .order-confirmation__hint { margin: 0 0 12px; }
  .review__aside .order-confirmation__disclaimer { margin-top: 12px; }
}
/* Écrans de hauteur courante (≤ 1000 px) : version compacte, pour que la case et le bouton soient visibles dès l'arrivée sans défiler */
@media (min-width: 1024px) and (max-height: 1000px) {
  .review__aside { padding: 16px 20px; }
  .review__aside .order-recap__items { max-height: max(64px, calc(100dvh - 720px)); }
  .review__aside .order-recap__subtotals, .review__aside .order-recap__total { margin-top: 8px; padding-top: 8px; }
  .review__aside .order-recap__subtotals { gap: 6px; }
  .review__aside .order-recap__items { gap: 10px; }
  .review__aside .order-recap__item { gap: 12px; }
  .review__aside .order-recap__item-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* une ligne par article : plus d'articles visibles dans la liste défilante */
  .review__aside #recap-delay { display: none; }   /* le délai figure déjà dans le mode de livraison et sur la confirmation */
  .review__aside > .order-confirmation { margin-top: 12px; padding-top: 12px; }
  .review__aside .order-confirmation__consent .form-field__label { font-size: var(--fs-sm); line-height: 1.4; }
  .review__aside .order-confirmation__hint { margin-bottom: 8px; }
  .review__aside .order-confirmation__disclaimer { margin-top: 8px; }
}

/* ---------- Écran très bas (zoom 200 %, téléphone en paysage) : barre d'envoi fixe (recette 6.a) ----------
   Un sticky ne peut pas remonter au-dessus du début de son conteneur : quand le formulaire commence sous le bord de l'écran,
   le bouton restait hors de vue. Étapes 2 (coordonnées) et 3 (vérification). Le pied de page est dégagé de la barre (body[data-mobile-bar], posé par commande.js / verification.js). */
@media (max-width: 1023px) and (max-height: 560px) {
  .checkout-page--split .checkout-form__actions, .review .checkout-form__actions { position: fixed; inset-inline: 0; bottom: 0; margin: 0; }
  body[data-mobile-bar] .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}