/* ============================================================
   TULIPE PALETTES - BLOCS DE COMMANDE PARTAGÉS (confirmation.html, suivi-commande.html)
   Extraits de confirmation.css à la session 7 pour que le suivi réutilise exactement les mêmes blocs :
   deux colonnes, virement (avec boutons « Copier »), livraison/contact, dépôt du justificatif, miniatures
   du récapitulatif. Composants JS associés : bank-transfer, order-details, order-recap, proof-upload.
   Chargé APRÈS checkout.css (cartes .order-details / .order-recap), comme l'étaient ces règles avant l'extraction.
   Variables scopées aux deux racines de page, jamais sur :root.
   ============================================================ */
:where(.confirmation-page, .tracking-page) {
  --cf-gap: 24px;
  --cf-accent-border: color-mix(in srgb, var(--color-ember) 80%, var(--color-paper));
}

.confirmation__status-label { color: var(--color-text-muted); } /* aussi utilisé par le panneau de succès du dépôt */

/* ---------- Deux colonnes ---------- */
.confirmation__body, .tracking__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--cf-gap); width: 100%; }
.confirmation__primary, .confirmation__secondary, .tracking__primary, .tracking__secondary { display: flex; flex-direction: column; gap: var(--cf-gap); min-width: 320px; }
.confirmation__primary, .tracking__primary { flex: 5 1 0; }
.confirmation__secondary, .tracking__secondary { flex: 3 1 0; }

.bank-transfer, .proof-upload {
  display: flex; flex-direction: column; gap: 16px; width: 100%; 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);
}
.bank-transfer__title, .proof-upload__title, .order-recap__title { font-family: var(--font-serif); font-size: clamp(20px, 0.5vw + 17px, 24px); font-weight: 600; line-height: 1.25; color: var(--color-forest); }
.order-recap__title { margin-bottom: 16px; }

/* ---------- Virement : le bloc dominant de la page ---------- */
.bank-transfer { border: 1.5px solid var(--cf-accent-border); }
.bank-transfer__instructions { max-width: 520px; font-size: var(--fs-base); color: var(--color-text-muted); }
.bank-transfer__details { display: flex; flex-direction: column; }
.bank-transfer__row { display: flex; align-items: center; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--color-border); }
.bank-transfer__row:last-child { border-bottom: 0; }
/* Ligne « référence » : pleine largeur de la carte pour attirer l'œil (c'est ce que le client doit recopier) */
.bank-transfer__row--highlight { margin-inline: calc(-1 * var(--ck-card-pad)); padding-inline: var(--ck-card-pad); background: var(--color-surface-dim); border-radius: var(--r-control); border-bottom-color: transparent; }
/* La ligne séparatrice juste au-dessus du bandeau coloré est masquée (sinon elle vient se coller contre lui) ; on laisse un petit espace autour du bandeau */
.bank-transfer__row:has(+ .bank-transfer__row--highlight) { border-bottom-color: transparent; }
.bank-transfer__row--highlight { margin-block: 4px; }
.bank-transfer__label { flex: 0 0 176px; font-size: var(--fs-base); color: var(--color-text-muted); }
.bank-transfer__cell { display: flex; flex: 1 1 auto; align-items: center; gap: 16px; min-width: 0; }
.bank-transfer__value { flex: 1 1 auto; min-width: 0; font-size: var(--fs-base); font-weight: 500; color: var(--color-ink); overflow-wrap: anywhere; }
.bank-transfer__value--accent { font-family: var(--font-serif); font-size: var(--fs-lead); font-weight: 700; letter-spacing: 0.01em; color: var(--color-ember); }
.bank-transfer__value--amount { font-family: var(--font-serif); font-size: clamp(22px, 0.7vw + 19px, 28px); font-weight: 600; color: var(--color-forest); }
.bank-transfer__warning { font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 540px; }

.copy-button {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 14px; margin-left: auto;
  border: 1.5px solid var(--color-border-field); border-radius: var(--r-control); background: var(--color-paper);
  font-size: var(--fs-xs); font-weight: 600; color: var(--color-ink); white-space: nowrap; cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.copy-button__icon { width: 16px; height: 16px; flex-shrink: 0; }
@media (hover: hover) { .copy-button:hover { border-color: var(--color-ember); color: var(--color-ember); } }
.copy-button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copy-button.is-copied { border-color: var(--color-forest); color: var(--color-forest); background: var(--color-moss-tint); animation: copy-confirm 200ms ease; }
@keyframes copy-confirm { 45% { transform: scale(0.95); } }

/* ---------- Livraison / contact (complète .order-details de checkout.css) ---------- */
.address-card__list { display: flex; flex-direction: column; gap: 8px; }
.address-card__link { font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--color-border-field); text-underline-offset: 3px; transition: color 150ms ease, text-decoration-color 150ms ease; }
.address-card__link:hover { color: var(--color-ember); text-decoration-color: var(--color-ember); }
.address-card__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--r-badge); }

/* ---------- Dépôt du justificatif ---------- */
.proof-upload__description { font-size: var(--fs-sm); color: var(--color-text-muted); }
.proof-upload__link { color: var(--color-ember); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.proof-upload__link:hover { color: var(--color-ember-dark); }
.proof-upload__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--r-badge); }
.proof-upload__form { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.proof-upload__field { display: flex; flex-direction: column; gap: 8px; }

.proof-upload__drop { position: relative; }
.proof-upload__file-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px;
  border: 1.5px dashed var(--color-border-field); border-radius: var(--r-control); background: var(--color-surface-dim);
  transition: border-color 160ms ease, background-color 160ms ease;
}
@media (hover: hover) { .proof-upload__drop:hover .proof-upload__file-label { border-color: var(--color-ember); } }
.proof-upload__drop:focus-within .proof-upload__file-label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.proof-upload__drop.is-dragover .proof-upload__file-label { border-color: var(--color-ember); background: var(--color-ember-tint); }
.proof-upload__drop.has-file .proof-upload__file-label { border-style: solid; border-color: var(--color-forest); }
.proof-upload__file-button { flex: 0 0 auto; padding: 8px 16px; border: 1.5px solid var(--color-border-field); border-radius: var(--r-control); background: var(--color-paper); font-size: var(--fs-sm); font-weight: 600; color: var(--color-ink); }
.proof-upload__file-status { flex: 1 1 140px; min-width: 0; font-size: var(--fs-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
.proof-upload__drop.has-file .proof-upload__file-status { color: var(--color-forest); font-weight: 600; }
/* L'input recouvre uniquement le cadre : clic et dépôt natifs fonctionnent même si le JS échoue */
.proof-upload__file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.proof-upload__file-input:disabled { cursor: not-allowed; }

.proof-upload__progress { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border: 0; border-radius: var(--r-badge); overflow: hidden; background: var(--color-border); color: var(--color-ember); }
.proof-upload__progress::-webkit-progress-bar { background: var(--color-border); }
.proof-upload__progress::-webkit-progress-value { background: var(--color-ember); transition: width 120ms linear; }
.proof-upload__progress::-moz-progress-bar { background: var(--color-ember); }
.proof-upload__submit { align-self: flex-start; }

/* État de succès : remplace le formulaire */
.proof-upload__success { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--color-moss-tint); border: 1px solid color-mix(in srgb, var(--color-moss) 30%, transparent); border-radius: var(--r-card); }
.proof-upload__success:focus, .proof-upload__success:focus-visible { outline: none; } /* focus par script, élément non interactif */
.proof-upload__success-icon { width: 36px; height: 36px; color: var(--color-moss); }
.proof-upload__success-title { font-family: var(--font-serif); font-size: var(--fs-card-title); font-weight: 600; color: var(--color-forest); }
.proof-upload__success-text { font-size: var(--fs-sm); color: var(--color-text-muted); }
.proof-upload__success-list { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); color: var(--color-ink); overflow-wrap: anywhere; }
.proof-upload__success-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); }

/* ---------- Récapitulatif : miniature de ligne (ajout à .order-recap de l'étape 2) ---------- */
.confirmation-page .order-recap__item, .tracking-page .order-recap__item { align-items: center; }
.order-recap__item-image { flex: 0 0 56px; width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--color-border); border-radius: var(--r-media); background: var(--color-surface-dim); }

/* ---------- Tablette et mobile ---------- */
@media (max-width: 992px) {
  .confirmation__primary, .confirmation__secondary, .tracking__primary, .tracking__secondary { min-width: 280px; }
}
@media (max-width: 768px) {
  .confirmation__primary, .confirmation__secondary, .tracking__primary, .tracking__secondary { flex: 1 1 100%; min-width: 0; } /* un flex-basis en colonne deviendrait une hauteur */
}
@media (max-width: 640px) {
  .bank-transfer__row { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 12px; }
  .bank-transfer__label { flex: 0 0 auto; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; }
  .bank-transfer__cell { flex-direction: column; align-items: stretch; gap: 8px; }
  .bank-transfer__value { flex: 0 0 auto; }
  .copy-button { width: 100%; min-height: 44px; margin-left: 0; }
  .proof-upload__file-label { flex-direction: column; align-items: stretch; text-align: center; }
  .proof-upload__file-status { flex: 0 0 auto; } /* un flex-basis en colonne deviendrait une hauteur (zone de dépôt de 242 px) */
  .proof-upload__file-button { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .proof-upload__submit { align-self: stretch; }
}