/* ============================================================
   Formulaire « Demande de commande internationale » (js/components/international-form.js).
   Autonome : s'appuie sur tokens.css, form-field.css et button.css, rien d'autre (utilisable dans le tunnel de commande
   comme sur une page à part). Champs, aide et erreurs : composants .form-field existants.
   ============================================================ */
.intl-form { --if-gap: 20px; min-width: 0; }
.intl-form__form { display: flex; flex-direction: column; gap: var(--if-gap); min-width: 0; }
.intl-form__form[hidden] { display: none; }   /* l'attribut hidden doit l'emporter sur display:flex */
.intl-form__title { font-size: var(--fs-card-title); font-weight: 600; line-height: 1.3; color: var(--color-forest); }
.intl-form__legend { margin-top: -8px; font-size: var(--fs-sm); color: var(--color-text-muted); }
.intl-form__summary[hidden] { display: none; }
.intl-form__summary a { display: inline-block; padding-block: 4px; }

/* Deux colonnes dès que la place le permet, une seule sur mobile */
.intl-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--if-gap) 24px; }
.intl-form .form-field[hidden] { display: none; }
@media (max-width: 640px) { .intl-form__row { grid-template-columns: minmax(0, 1fr); } }

/* Récapitulatif du panier : lecture seule */
.intl-form__recap { padding: 16px; background: var(--color-surface-dim); border: 1px solid var(--color-border); border-radius: var(--r-card); }
.intl-form__recap[hidden] { display: none; }
.intl-form__recap-title { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-muted); }
.intl-form__recap-list { margin: 0; padding: 0; list-style: none; }
.intl-form__recap-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding-block: 10px; border-bottom: 1px solid var(--color-border); font-size: var(--fs-sm); }
.intl-form__recap-name { grid-column: 1; font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.intl-form__recap-variant { font-weight: 400; color: var(--color-text-muted); }
.intl-form__recap-qty { grid-column: 1; grid-row: 2; color: var(--color-text-muted); }
.intl-form__recap-price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.intl-form__recap-subtotal { display: flex; justify-content: space-between; gap: 16px; padding-top: 12px; font-size: var(--fs-base); color: var(--color-ink); }
.intl-form__recap-note { margin-top: 6px; font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Consentement : case dessinée en CSS pur ; l'étiquette (≥ 44 px de haut) sert de zone tactile */
.intl-form__consent-row { display: flex; align-items: center; gap: 12px; }
.intl-form__checkbox {
  -webkit-appearance: none; appearance: none; flex: none; width: 24px; height: 24px; 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;
}
.intl-form__checkbox:hover { border-color: var(--color-wood); }
.intl-form__checkbox:checked {
  background: var(--color-forest) 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") center / 14px 14px no-repeat;
  border-color: var(--color-forest);
}
.intl-form__checkbox:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.intl-form__checkbox[aria-invalid="true"] { border-color: var(--color-alert); background-color: var(--color-ember-tint); }
.intl-form__consent-label { display: flex; align-items: center; flex: 1; min-height: 44px; font-size: var(--fs-sm); line-height: 1.5; color: var(--color-ink); cursor: pointer; }
.intl-form__link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-left: 36px; margin-top: 8px; font-size: var(--fs-sm); color: var(--color-forest); text-decoration: underline; text-underline-offset: 4px; }
.intl-form__link:hover { color: var(--color-forest-dark); }
.intl-form__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* Piège anti-robots : hors écran, jamais atteint au clavier (tabindex -1, aria-hidden) */
.intl-form__trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Résultat d'un envoi refusé : zone annoncée (role="alert"), invisible tant qu'elle est vide */
.intl-form__status { margin: 0; }
.intl-form__status:empty { display: none; }
.intl-form__status.is-error { padding: 14px 16px; border: 1.5px solid var(--color-alert); background: var(--color-ember-tint); border-radius: var(--r-control); color: var(--color-alert); font-size: var(--fs-sm); font-weight: 500; }
.intl-form__status:focus-visible, .intl-form__success:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.intl-form__submit { align-self: flex-start; }
@media (max-width: 640px) { .intl-form__submit { align-self: stretch; } }

/* Succès simple (repli quand l'écran de confirmation n'est pas utilisé) */
.intl-form__success { padding: 20px; background: var(--color-surface-dim); border: 1px solid var(--color-border); border-left: 4px solid var(--color-moss); border-radius: var(--r-card); }
.intl-form__success[hidden] { display: none; }
.intl-form__success-title { margin-bottom: 8px; font-size: var(--fs-card-title); font-weight: 600; color: var(--color-forest); }
.intl-form__success-number { margin-bottom: 8px; font-size: var(--fs-base); font-weight: 600; color: var(--color-ink); overflow-wrap: anywhere; }
.intl-form__success-text { font-size: var(--fs-base); line-height: 1.5; color: var(--color-ink); }