/* ============================================================
   TULIPE PALETTES - DEMANDE DE COMMANDE INTERNATIONALE (pages/international/)
   Une colonne centrée : titre, introduction, 3 étapes, puis le formulaire (components/international-form.css) dans un panneau.
   Même langage visuel que Contact : tokens, rayons --r-*, révélation [data-reveal]. Variables locales scopées à .intl-page.
   ============================================================ */
.intl-page {
  --ip-width: 880px;
  --ip-panel-pad: 40px;
  max-width: var(--ip-width);
  margin-inline: auto;
  padding: var(--page-top-gap) var(--container-padding-x) var(--section-padding-y);
}
.intl-page__breadcrumb { margin-bottom: clamp(24px, 3.5vw, 48px); }

.intl-page__header { margin-bottom: clamp(24px, 3vw, 40px); }
.intl-page__title { margin-bottom: 20px; font-size: var(--fs-page-title); font-weight: 600; line-height: 1.1; color: var(--color-forest); }
.intl-page__intro { max-width: 60ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--color-ink); }

.intl-page__steps { margin-bottom: clamp(24px, 3vw, 40px); }
.intl-page__steps[hidden] { display: none; }
.intl-page__steps-title { margin-bottom: 12px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase; color: var(--color-text-muted); }

.intl-page__panel { min-width: 0; padding: var(--ip-panel-pad); background: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.intl-page__panel[data-done] { padding: 0; background: none; border: 0; box-shadow: none; }   /* la confirmation a son propre cadre */
.intl-page__noscript { color: var(--color-text-muted); }
.intl-page__noscript a { color: var(--color-forest); text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) { .intl-page { --ip-panel-pad: 20px; } }

/* Place réservée au formulaire (monté par JS) : sans elle, le pied de page saute vers le bas au chargement (CLS 0,58).
   Hauteurs mesurées du formulaire vide : 1 646 px en colonne étroite, 1 133 px au-dessus de 640 px. Seulement avec JavaScript actif
   (sans JS, le <noscript> de la page suffit) et tant que la confirmation n'a pas remplacé le formulaire. */
@media (scripting: enabled) {
  .intl-page__panel:not([data-done]) #intl-page-form { min-height: 1646px; }
  @media (min-width: 641px) { .intl-page__panel:not([data-done]) #intl-page-form { min-height: 1133px; } }
}