/* ==========================================================================
   UpMoon — socle de design partagé (toutes les surfaces).
   Source unique des tokens + primitives (cartes, boutons, champs, chips,
   messages). Chargé AVANT les styles propres à chaque page (admin-panel.css
   pour les SPA, <style> inline pour les pages publiques) : toute page peut
   surcharger localement, jamais redéfinir les tokens.

   Monde visuel : celui de la landing UpMoon. Fond crème #F7F6F2, surfaces
   blanches à filet fin, encre bleu nuit #0C101D, accent barbeau #4F6DCF.
   Manrope (titres) + Inter (texte).

   Les noms de tokens historiques (--bg, --ink, --accent…) sont conservés et
   repointés sur les valeurs UpMoon : le nouveau monde se propage à tout le
   code existant sans réécriture. Les noms canoniques de la landing
   (--color-page, --color-accent…) sont disponibles en alias pour le code neuf.
   ========================================================================== */

:root {
  /* ---------- Noms canoniques (landing UpMoon) ---------- */
  --color-page: #F7F6F2;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F0EB;
  --color-dark: #0C101D;
  --color-deep: #192857;
  --color-accent: #4F6DCF;
  --color-accent-deep: #3E58B6;
  --color-accent-soft: #E9EDFA;
  --color-light: #DFE4F6;
  --color-text-secondary: #5E6472;
  --color-line: rgba(12, 16, 29, .12);
  --color-line-strong: rgba(12, 16, 29, .22);
  --accent-rgb: 79, 109, 207;
  --dark-rgb: 12, 16, 29;

  /* ---------- Surfaces & encre ---------- */
  --bg: #F7F6F2;              /* fond de page, crème */
  --bg-2: #FAF9F5;
  --surface: #FFFFFF;
  --surface-2: #F1F0EB;       /* crème sourd : chrome, encarts, hover */
  --surface-3: #E7E5DE;
  --ink: #0C101D;             /* bleu nuit, texte principal */
  --ink-2: #2B3242;
  --muted: #5E6472;           /* texte secondaire — 5,9:1 sur blanc */
  --faint: #6B7080;           /* labels ténus — 4,6:1 sur crème (plancher AA) */
  --line: rgba(12, 16, 29, .12);
  --line-soft: rgba(12, 16, 29, .07);
  --line-strong: rgba(12, 16, 29, .22);

  /* ---------- Accent ---------- */
  --accent: #4F6DCF;          /* barbeau : actions primaires, sélection, état */
  --accent-strong: #3E58B6;
  --accent-soft: #E9EDFA;
  --accent-ink: #34489B;      /* accent lisible en texte sur fond clair */
  --highlight: #DFE4F6;
  --dark: #0C101D;            /* moments forts, nav mobile, cartes pleines */
  --deep: #192857;            /* bleu profond : seconde surface sombre */

  /* ---------- États sémantiques ---------- */
  --green: #1D6B4C; --green-bg: #DCF0E4;   /* succès */
  --blue: #3E58B6;  --blue-bg: #E9EDFA;    /* info / en cours = accent */
  --amber: #8A5A16; --amber-bg: #FAECD6;   /* avertissement */
  --red: #8E2B30;   --red-bg: #FBE0E1;     /* alerte */
  --error: #A6323A;

  /* ---------- Géométrie ---------- */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-xs: 10px;
  --radius-pill: 999px;

  /* ---------- Profondeur (offset + flou doux, jamais de halo) ---------- */
  --shadow-sm: 0 1px 1px rgba(var(--dark-rgb), .03);
  --shadow: 0 1px 1px rgba(var(--dark-rgb), .03), 0 8px 24px -16px rgba(var(--dark-rgb), .18);
  --shadow-lift: 0 2px 4px rgba(var(--dark-rgb), .04), 0 18px 42px -22px rgba(var(--dark-rgb), .28);
  --shadow-premium:
    0 1px 0 rgba(255, 255, 255, .92) inset,
    0 32px 80px -44px rgba(var(--dark-rgb), .34),
    0 12px 30px -24px rgba(var(--accent-rgb), .32);
  --ring: 0 0 0 3px rgba(var(--accent-rgb), .22);

  /* ---------- Typographie ----------
     Échelle rem fixe : un back-office se lit à DPI constant, un titre fluide
     qui rétrécit dans une colonne dessert la tâche. On reprend le caractère
     de la landing (Manrope display, tracking serré), pas son échelle. */
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Menlo", monospace;

  --t-2xs: .69rem;
  --t-xs:  .76rem;
  --t-sm:  .84rem;
  --t-base: .93rem;
  --t-md:  1.05rem;
  --t-lg:  1.2rem;
  --t-xl:  1.45rem;
  --t-2xl: 1.8rem;
  --t-3xl: 2.25rem;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.num { font-variant-numeric: tabular-nums; }
::selection { background: var(--highlight); color: var(--ink); }

/* Gros chiffre sur surface sombre : l'emphase vient du poids et de la taille,
   pas d'un dégradé sur le texte. */
.num-reflet { color: #fff; width: fit-content; }

/* ---------- Cartes ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.55rem; box-shadow: var(--shadow);
}

/* ---------- Boutons ---------- */
.btn, button.primary, a.primary, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-xs); border: 1px solid transparent; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .1s ease, box-shadow .16s ease;
}
.btn { font-size: var(--t-sm); padding: 0.64rem 1.2rem; }
.btn svg, .ghost svg, button.primary svg { width: 16px; height: 16px; }
.btn.primary, button.primary, a.primary, .btn.accent {
  background: var(--accent); color: #fff; font-size: var(--t-sm); padding: 0.64rem 1.2rem;
  box-shadow: 0 1px 2px rgba(var(--dark-rgb), .16);
}
.btn.primary:hover:not(:disabled), button.primary:hover:not(:disabled), a.primary:hover,
.btn.accent:hover:not(:disabled) { background: var(--accent-strong); }
.btn.primary:active:not(:disabled), button.primary:active:not(:disabled) { transform: scale(.98); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.dark:hover:not(:disabled) { background: var(--deep); }
.btn.ghost, .ghost {
  background: var(--surface); color: var(--ink-2); border-color: var(--line);
  font-size: var(--t-sm); padding: 0.56rem 1.05rem;
}
.btn.ghost:hover:not(:disabled), .ghost:hover:not(:disabled) {
  background: var(--accent-soft); border-color: var(--color-light); color: var(--accent-ink);
}
/* Déconnexion / actions destructrices */
.btn.danger, .ghost.danger { background: var(--red-bg); color: var(--red); border-color: transparent; }
.btn.danger:hover:not(:disabled), .ghost.danger:hover:not(:disabled) { background: #F6CBCD; color: #6E2024; }
.btn.sm, .ghost.sm { padding: 0.4rem 0.85rem; font-size: var(--t-xs); border-radius: 9px; }
.btn:disabled, button.primary:disabled, .ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.is-loading, button.is-loading { cursor: wait; }

/* ---------- Formulaires ---------- */
label, .field-label { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); margin-bottom: 0.45rem; }
.field-label {
  font-family: var(--font-display); font-size: var(--t-2xs); letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--faint); font-weight: 700;
}
input[type=text], input[type=email], input[type=url], input[type=number], input[type=password], input[type=search], input[type=date], input[type=file], textarea, select {
  width: 100%; font-family: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xs); padding: 0.7rem 0.95rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input:disabled, textarea:disabled, select:disabled { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }
input[type=file] { padding: .48rem .55rem; }
input[type=file]::file-selector-button {
  margin-inline-end: .7rem; padding: .45rem .7rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface-2); color: var(--ink-2);
  font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: var(--accent-soft); color: var(--accent-ink); }
textarea { resize: vertical; }
.field + .field, .form-row + .form-row { margin-top: 1rem; }

/* ---------- Chips (statuts) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-2xs); font-weight: 600;
  border-radius: var(--radius-pill); padding: 0.3rem 0.75rem; white-space: nowrap;
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--line);
}
.chip.pending { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.chip.paid_a, .chip.link { background: var(--blue-bg); color: var(--blue); border-color: transparent; }
.chip.paid { background: var(--green-bg); color: var(--green); border-color: transparent; }
.chip.expired { background: var(--surface-3); color: var(--muted); border-color: transparent; }
.chip.live { background: var(--red-bg); color: var(--red); border-color: transparent; }

/* ---------- Messages ---------- */
.notice, .error { display: none; margin-top: 1rem; padding: 0.8rem 1rem; border-radius: var(--radius-xs); font-size: var(--t-sm); font-weight: 500; }
.notice.visible, .error.visible { display: block; }
.notice { background: var(--green-bg); color: var(--green); }
.notice.warn { background: var(--amber-bg); color: var(--amber); }
.error, .notice.err { background: var(--red-bg); color: var(--red); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}