/* ============================================================
   AFRICA POST — LES 4 ÉTATS D'INTERFACE
   Chargement · Vide · Erreur · Succès

   Pourquoi : chaque page réinventait ses retours utilisateur, et 33 endroits
   utilisaient encore alert() — la boîte du navigateur, qui bloque la page,
   ne se style pas et ressemble à une arnaque sur mobile.

   Autonome par construction : les couleurs viennent de css/tokens.css quand il
   est chargé, sinon des valeurs de repli identiques au thème sombre des pages.
   Une seule page charge tokens.css aujourd'hui — ce composant devait donc
   fonctionner sans lui.
   ============================================================ */

.aps {
  --aps-fond: var(--ap-surface, #161B22);
  --aps-fond-2: var(--ap-surface-2, #1F2937);
  --aps-trait: var(--ap-line, rgba(255, 255, 255, .09));
  --aps-texte: var(--ap-text, #E5E7EB);
  --aps-doux: var(--ap-muted, rgba(255, 255, 255, .6));
  --aps-faible: var(--ap-faint, rgba(255, 255, 255, .4));
  --aps-vert: var(--ap-emerald, #10B981);
  --aps-vert-doux: var(--ap-emerald-soft, rgba(16, 185, 129, .12));
  --aps-ocre: var(--ap-ocre, #E08D3C);
  --aps-ocre-doux: var(--ap-ocre-soft, rgba(224, 141, 60, .12));
  --aps-rouge: var(--ap-danger, #F87171);
  --aps-rouge-doux: var(--ap-danger-soft, rgba(248, 113, 113, .12));
  --aps-r: var(--ap-r, 16px);
  --aps-sans: var(--ap-sans, 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  --aps-serif: var(--ap-serif, 'DM Serif Display', ui-serif, Georgia, serif);

  font-family: var(--aps-sans);
  color: var(--aps-texte);
}

/* ─────────────────────────────────────────────────────────────
   Bloc commun aux états vide / erreur / succès
   ───────────────────────────────────────────────────────────── */
.aps-bloc {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 48px 24px;
  border: 1px solid var(--aps-trait);
  border-radius: var(--aps-r);
  background: var(--aps-fond);
}
.aps-bloc.aps-compact { padding: 28px 20px; }

.aps-icone {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
  background: var(--aps-fond-2);
}
.aps-vide .aps-icone { background: var(--aps-ocre-doux); }
.aps-erreur .aps-icone { background: var(--aps-rouge-doux); }
.aps-succes .aps-icone { background: var(--aps-vert-doux); }

.aps-titre {
  font-family: var(--aps-serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.25;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.aps-texte {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--aps-doux);
  margin: 0;
  max-width: 46ch;
}
.aps-detail {
  font-size: 12.5px;
  color: var(--aps-faible);
  margin: 2px 0 0;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

.aps-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
}
.aps-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  min-height: 44px;              /* cible tactile confortable */
  border: none;
  border-radius: 10px;
  background: var(--aps-vert);
  color: #06231A;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: filter .18s ease, transform .18s ease;
}
.aps-btn:hover { filter: brightness(1.08); }
.aps-btn:active { transform: translateY(1px); }
.aps-btn-2 {
  background: transparent;
  color: var(--aps-texte);
  border: 1px solid var(--aps-trait);
}
.aps-btn-2:hover { background: var(--aps-fond-2); }
.aps-btn:focus-visible, .aps-btn-2:focus-visible {
  outline: 2px solid var(--aps-vert);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────────
   Chargement — squelettes plutôt qu'un spinner nu
   Le squelette montre la FORME de ce qui arrive : la page ne saute pas
   quand les données remplacent l'attente.
   ───────────────────────────────────────────────────────────── */
.aps-chargement { padding: 4px 0; }

.aps-sq {
  background: linear-gradient(90deg,
    var(--aps-fond) 25%, var(--aps-fond-2) 50%, var(--aps-fond) 75%);
  background-size: 200% 100%;
  animation: aps-brille 1.4s ease-in-out infinite;
  border-radius: 8px;
  height: 14px;
}
@keyframes aps-brille {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.aps-sq-ligne { margin-bottom: 10px; }
.aps-sq-ligne:last-child { margin-bottom: 0; }
.aps-sq-titre { height: 20px; width: 45%; margin-bottom: 14px; }
.aps-sq-court { width: 62%; }
.aps-sq-mi    { width: 80%; }

.aps-sq-carte {
  border: 1px solid var(--aps-trait);
  border-radius: var(--aps-r);
  padding: 20px;
  margin-bottom: 12px;
  background: var(--aps-fond);
}
.aps-sq-rangee {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--aps-trait);
}
.aps-sq-rangee:last-child { border-bottom: none; }
.aps-sq-pastille { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.aps-sq-corps { flex: 1; min-width: 0; }

/* Spinner : réservé aux boutons et aux attentes courtes, là où un squelette
   n'aurait pas de forme à imiter. */
.aps-spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, .25);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: aps-tourne .7s linear infinite;
  display: inline-block;
  flex: none;
}
@keyframes aps-tourne { to { transform: rotate(360deg); } }

.aps-attente {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--aps-doux);
  font-size: 14.5px;
}
.aps-attente .aps-spin { width: 20px; height: 20px; border-width: 2.5px; color: var(--aps-vert); }

/* Bouton en cours de soumission : on garde la largeur pour éviter le
   sautillement, et on bloque le double envoi. */
.aps-btn-charge {
  pointer-events: none;
  opacity: .75;
}

/* ─────────────────────────────────────────────────────────────
   Notification passagère — remplace alert()
   ───────────────────────────────────────────────────────────── */
.aps-toasts {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
  width: min(440px, calc(100vw - 32px));
}
.aps-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--aps-fond);
  border: 1px solid var(--aps-trait);
  border-left: 4px solid var(--aps-vert);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8);
  font-size: 14px;
  line-height: 1.5;
  color: var(--aps-texte);
  pointer-events: auto;
  animation: aps-entre .28s cubic-bezier(.2, .8, .3, 1);
}
.aps-toast.aps-t-erreur { border-left-color: var(--aps-rouge); }
.aps-toast.aps-t-info   { border-left-color: var(--aps-ocre); }
.aps-toast.aps-sort { animation: aps-sort .24s ease forwards; }
.aps-toast-ico { font-size: 17px; line-height: 1.35; flex: none; }
.aps-toast-txt { flex: 1; min-width: 0; }
.aps-toast-fermer {
  background: none; border: none; color: var(--aps-faible);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px;
  min-width: 28px; min-height: 28px;
}
.aps-toast-fermer:hover { color: var(--aps-texte); }

@keyframes aps-entre { from { opacity: 0; transform: translateY(14px); } }
@keyframes aps-sort  { to { opacity: 0; transform: translateY(10px); } }

/* ─────────────────────────────────────────────────────────────
   Confort de mouvement : on garde le retour visuel, on retire l'agitation.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .aps-sq { animation: none; background: var(--aps-fond-2); }
  .aps-spin { animation-duration: 2s; }
  .aps-toast, .aps-toast.aps-sort { animation: none; }
  .aps-btn { transition: none; }
}

@media (max-width: 600px) {
  .aps-bloc { padding: 36px 18px; }
  .aps-titre { font-size: 19px; }
  .aps-actions { width: 100%; flex-direction: column; }
  .aps-actions .aps-btn, .aps-actions .aps-btn-2 { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────
   Boîte de confirmation — remplace confirm()
   La boîte native s'affiche hors de la page, en haut de l'écran, avec la
   typographie du navigateur et le nom de domaine. Elle casse la continuité
   visuelle et, sur mobile, ressemble à une alerte système.
   ───────────────────────────────────────────────────────────── */
.aps-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .72);
  animation: aps-fondu .18s ease;
}
.aps-modal-boite {
  background: var(--aps-fond);
  border: 1px solid var(--aps-trait);
  border-radius: var(--aps-r);
  padding: 30px 28px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 28px 64px -20px rgba(0, 0, 0, .85);
  animation: aps-monte .22s cubic-bezier(.2, .8, .3, 1);
}
.aps-modal .aps-actions { margin-top: 16px; width: 100%; }
.aps-btn-danger { background: var(--aps-rouge); color: #2A0B08; }

/* Liste de choix : un bouton par ligne, l'action de repli en dernier. */
.aps-actions-liste { flex-direction: column; }
.aps-actions-liste .aps-btn { width: 100%; justify-content: center; }

/* Saisie — remplace prompt() */
.aps-modal-saisie { text-align: left; align-items: stretch; }
.aps-modal-saisie .aps-titre, .aps-modal-saisie .aps-texte { text-align: left; max-width: none; }
.aps-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--aps-doux);
  margin-top: 6px;
}
.aps-champ {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--aps-trait);
  background: var(--aps-fond-2);
  color: var(--aps-texte);
  font-family: inherit;
  font-size: 16px;          /* sous 16px, iOS zoome à la mise au point */
  line-height: 1.5;
  resize: vertical;
}
.aps-champ:focus-visible {
  outline: 2px solid var(--aps-vert);
  outline-offset: 1px;
  border-color: transparent;
}
.aps-erreur-champ {
  color: var(--aps-rouge);
  font-size: 13px;
  margin: 6px 0 0;
}

.aps-groupe { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.aps-facultatif { font-weight: 400; color: var(--aps-faible); }
.aps-aide { font-size: 12.5px; color: var(--aps-faible); margin: 0; }
/* La seule commande qui agit sur les listes déroulantes natives mobiles. */
.aps-modal-saisie select.aps-champ { color-scheme: dark; }
/* La boîte peut dépasser sur un petit écran : elle défile, la page non. */
.aps-modal-saisie { max-height: calc(100vh - 40px); overflow-y: auto; }

@keyframes aps-fondu { from { opacity: 0; } }
@keyframes aps-monte { from { opacity: 0; transform: translateY(12px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .aps-modal, .aps-modal-boite { animation: none; }
}
@media (max-width: 600px) {
  .aps-modal-boite { padding: 24px 20px; }
  .aps-modal .aps-actions { flex-direction: column-reverse; }
}