/* ============================================================
   Écran de confirmation d'une demande de commande internationale (js/components/international-confirmation.js)
   + liste des 3 étapes `.intl-flow` (réutilisée par la page autonome pages/international/).
   Autonome : tokens.css, button.css ; rien d'autre. Aucune couleur ni rayon en dur.
   ============================================================ */
.intl-confirm { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; background: var(--color-surface-dim); border: 1px solid var(--color-border); border-left: 4px solid var(--color-moss); border-radius: var(--r-card); }
.intl-confirm__title { align-self: flex-start; font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; color: var(--color-forest); }
.intl-confirm__title:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.intl-confirm__number { font-size: var(--fs-lead); font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.intl-confirm__number-value { white-space: nowrap; }   /* le numéro ne se coupe jamais au milieu d'un tiret */
.intl-confirm__keep, .intl-confirm__hours { font-size: var(--fs-sm); color: var(--color-text-muted); }
.intl-confirm__delay { font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); }
.intl-confirm__text { font-size: var(--fs-base); line-height: 1.5; color: var(--color-ink); }
.intl-confirm__block { display: flex; flex-direction: column; gap: 8px; }
.intl-confirm__subtitle { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-muted); }

/* Coordonnées : une ligne par moyen de contact, lien de 44 px minimum de haut */
.intl-confirm__contact { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.intl-confirm__contact-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.intl-confirm__contact-label { flex: 0 0 96px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.intl-confirm__link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-base); color: var(--color-forest); text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.intl-confirm__link:hover { color: var(--color-forest-dark); }
.intl-confirm__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.intl-confirm__back { align-self: flex-start; min-height: 44px; }
@media (max-width: 640px) { .intl-confirm { padding: 20px 16px; } .intl-confirm__contact-label { flex-basis: 100%; }   /* mobile : libellé au-dessus de la valeur, pour toutes les lignes */ .intl-confirm__back { align-self: stretch; text-align: center; } }

/* Les 3 étapes : pastille numérotée par CSS ; la première (déjà faite) passe en vert mousse */
.intl-flow { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: intl-flow; }
.intl-flow__item { counter-increment: intl-flow; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); font-size: var(--fs-base); line-height: 1.45; color: var(--color-ink); }
.intl-flow__item::before { content: counter(intl-flow); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-forest); color: var(--color-paper); font-size: var(--fs-sm); font-weight: 600; line-height: 1; }
.intl-flow__item.is-done::before { content: "✓"; background: var(--color-moss); }
@media (min-width: 900px) { .intl-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }