/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   purchase-modal.css — la fenêtre d'achat Paddle, le bandeau de consentement et le toast de
   téléchargement de /start.

   🔴 CETTE FEUILLE N'EST PAS GOUVERNÉE, ET C'EST UNE DÉCISION, PAS UN OUBLI.
   « Kamba - specification La cote.html » §1 range « Paiement (Paddle) » parmi les SEPT SURFACES
   QUI DEMANDENT UNE DÉCISION : « Surface partiellement hors de notre contrôle : arrêter la liste
   de jetons Paddle qu'on peut régler, et l'encadrement de la fenêtre côté site. » Le document ne
   donne donc ni scrim, ni élévation, ni rayon pour une fenêtre modale — et son pied de page dit
   que « toute valeur absente de ce document est une décision non prise ». Le lot `the-workbench`
   ne lui invente pas ces valeurs : il la SORT de la page gouvernée, la déclare dans le registre
   d'exemptions de tests/one-set-of-values-pins.js avec cette raison, et l'y laisse jusqu'au lot
   qui tranchera la surface de paiement.

   Elle est AUTONOME : elle ne lit plus /variables.css (que /start ne charge plus), donc ses
   valeurs sont écrites en clair. Ce sont les valeurs exactes que la page servait avant ce lot —
   déplacées, pas retouchées — à deux exceptions près, toutes deux des cibles tactiles que le
   §3 rend non négociables même sur une surface non gouvernée : la croix de fermeture et le bouton
   d'achat font 48 px, et non 44.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

#purchase-modal-overlay {
  display: none; position: fixed; inset: 0; background: rgba(26, 20, 16, 0.55);
  z-index: 9999; align-items: center; justify-content: center; padding: 16px;
}
#purchase-modal-overlay.open { display: flex; }
.purchase-modal {
  background: #ffffff; border: 1px solid #E5E0D6; border-radius: 20px;
  padding: 28px 28px 24px; max-width: 420px; width: 100%;
  max-height: calc(100vh - 32px); overflow-y: auto; position: relative;
}
.purchase-modal-close {
  position: absolute; top: 8px; right: 8px; min-width: 48px; min-height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; font-size: 18px; color: #4A4640; cursor: pointer;
  padding: 0; line-height: 1; border-radius: 6px;
}
.purchase-modal-close:hover { color: #1a1d1b; background: rgba(0, 0, 0, 0.05); }
.purchase-modal-icon { font-size: 34px; margin-bottom: 10px; }
.purchase-modal h3 { font-size: 20px; font-weight: 700; color: #1a1d1b; margin: 0 0 6px; line-height: 1.3; }
.pm-desc { font-size: 14px; color: #4A4640; line-height: 1.55; margin: 0 0 18px; }
.pm-options, .pm-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.pm-option {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  border: 1.5px solid #E5E0D6; border-radius: 12px; cursor: pointer;
  background: #F2F5F0; position: relative; min-height: 48px;
}
.pm-option.selected { border-color: #4A6741; }
.pm-option input[type="radio"] { width: 18px; height: 18px; accent-color: #4A6741; flex-shrink: 0; cursor: pointer; }
.pm-option-body { flex: 1 1 0; min-width: 0; }
.pm-option-title { font-weight: 600; font-size: 15px; color: #1a1d1b; line-height: 1.3; }
.pm-option-sub { font-size: 13px; color: #4A4640; margin-top: 2px; }
.pm-consent { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-bottom: 16px; cursor: pointer; }
.pm-consent input[type="checkbox"] { width: 20px; height: 20px; accent-color: #4A6741; flex-shrink: 0; cursor: pointer; }
.pm-info, .pm-consent-text { font-size: 13px; color: #4A4640; line-height: 1.5; }
.pm-info a, .pm-consent-text a { color: #4A4640; text-decoration: underline; }
.pm-info a:hover, .pm-consent-text a:hover { color: #1a1d1b; }
/* `france-first-legal` — the pre-payment block (start.html .pm-info): read like the consent line, stacked
   like the options, and built from their declarations so it adds no value off the page's own set. */
.pm-info { list-style: none; padding: 0; margin-top: 0; }
.pm-cta {
  width: 100%; min-height: 48px; background: #1a1d1b; color: #ffffff; font: inherit;
  font-weight: 700; font-size: 16px; padding: 14px 24px; border: none; border-radius: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px;
}
.pm-cta:hover { background: #2A1D14; }
.pm-cta:disabled { cursor: not-allowed; background: #6B6862; }
/* §3 : « libellé remplacé par le verbe d'attente, largeur figée, aria-busy » — et donc AUCUN
   tourniquet. L'élément reste dans le DOM (paddle-checkout.js bascule .loading dessus) ; il ne
   peint simplement plus rien, et il n'y a plus d'animation à supprimer sous reduced-motion. */
.pm-cta-spinner { display: none; }
.pm-cta.loading .pm-cta-text { opacity: 0.6; }
.pm-status { text-align: center; font-size: 13px; color: #1a1d1b; margin-top: 14px; min-height: 18px; display: none; }
.pm-status.show { display: block; }
.pm-secure { text-align: center; font-size: 13px; color: #4A4640; margin-top: 12px; }

/* Le toast de téléchargement. Centré par la boîte, pas par une transformée : la direction
   n'autorise aucune transformée, et `margin-inline: auto` sur une largeur de contenu fait la
   même chose sans en être une. */
#download-toast {
  position: fixed; bottom: 24px; left: 0; right: 0; width: max-content; max-width: calc(100vw - 32px);
  margin-inline: auto; background: #1a1d1b; color: #ffffff; font-weight: 600; font-size: 14px;
  padding: 12px 24px; border-radius: 12px; opacity: 0; z-index: 9998; pointer-events: none;
  transition: opacity 0.3s;
}
#download-toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  #download-toast { transition: none; }
}

@media (max-width: 430px) {
  .purchase-modal { padding: 22px 18px 18px; }
}