/* ═══════════════════════════════════════════════════════════════════════════
   WPC Aurora — système de design de WPC RH ONE (phase 1)
   Jetons (couleurs, typographie, espacements, rayons, ombres, mouvements) et
   composants de base. Mode clair et sombre ; respect de prefers-reduced-motion.
   Usage : <link rel="stylesheet" href="aurora.css"> puis classes .au-*
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Marque */
  --au-nuit: #0B1433;        /* bleu nuit : fonds de marque, barre latérale */
  --au-abysse: #070D24;      /* horizon de l'écran de connexion */
  --au-ambre: #F5A30B;       /* action principale, focus */
  --au-miel: #FFD58A;        /* accents lumineux */
  --au-lagon: #0F9F7E;       /* succès */
  --au-corail: #D9493A;      /* erreur */
  --au-safran: #B7791F;      /* avertissement */

  /* Surfaces et textes (mode clair) */
  --au-fond: #F4F6FB;
  --au-surface: #FFFFFF;
  --au-surface-2: #F8FAFE;
  --au-trait: rgba(11, 20, 51, .12);
  --au-texte: #0B1433;
  --au-texte-2: #4A5678;
  --au-texte-3: #7A86A6;
  --au-sur-ambre: #0B1433;

  /* Typographie : Sora (marque), chiffres tabulaires pour les montants */
  --au-police: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --au-t-xs: 12px; --au-t-s: 13.5px; --au-t-m: 15px; --au-t-l: 18px; --au-t-xl: 24px; --au-t-xxl: 34px;

  /* Espacements (base 4) */
  --au-1: 4px; --au-2: 8px; --au-3: 12px; --au-4: 16px; --au-5: 20px; --au-6: 24px; --au-8: 32px; --au-10: 40px;

  /* Rayons, ombres, mouvements */
  --au-r-s: 10px; --au-r-m: 14px; --au-r-l: 22px; --au-r-pill: 999px;
  --au-ombre-1: 0 1px 2px rgba(11, 20, 51, .06);
  --au-ombre-2: 0 8px 28px rgba(11, 20, 51, .10);
  --au-verre: rgba(255, 255, 255, .72);
  --au-flou: blur(14px) saturate(140%);
  --au-duree: .18s;
  --au-courbe: cubic-bezier(.2, .7, .2, 1);

  /* Accessibilité : zone tactile minimale */
  --au-cible: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --au-fond: #070D24; --au-surface: #0E1838; --au-surface-2: #131F45;
    --au-trait: rgba(174, 184, 211, .16);
    --au-texte: #EEF2FB; --au-texte-2: #AEB8D3; --au-texte-3: #8390B0;
    --au-verre: rgba(14, 24, 56, .72);
    --au-ombre-2: 0 10px 30px rgba(0, 0, 0, .35);
  }
}
:root[data-theme="dark"] {
  --au-fond: #070D24; --au-surface: #0E1838; --au-surface-2: #131F45;
  --au-trait: rgba(174, 184, 211, .16);
  --au-texte: #EEF2FB; --au-texte-2: #AEB8D3; --au-texte-3: #8390B0;
  --au-verre: rgba(14, 24, 56, .72);
  --au-ombre-2: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ── Base ── */
.au { font-family: var(--au-police); color: var(--au-texte); background: var(--au-fond); -webkit-font-smoothing: antialiased; }
.au *, .au *::before, .au *::after { box-sizing: border-box; }
.au-chiffres { font-variant-numeric: tabular-nums; }
.au :focus-visible { outline: 2px solid var(--au-ambre); outline-offset: 2px; }

/* ── Titres ── */
.au-titre-1 { font-size: var(--au-t-xxl); font-weight: 600; letter-spacing: -.02em; margin: 0; }
.au-titre-2 { font-size: var(--au-t-xl); font-weight: 600; letter-spacing: -.015em; margin: 0; }
.au-titre-3 { font-size: var(--au-t-l); font-weight: 600; margin: 0; }
.au-sous { color: var(--au-texte-2); font-size: var(--au-t-s); line-height: 1.55; }

/* ── Carte et tuile (tableaux de bord modulaires) ── */
.au-carte { background: var(--au-surface); border: 1px solid var(--au-trait); border-radius: var(--au-r-l); padding: var(--au-6); box-shadow: var(--au-ombre-1); }
.au-grille { display: grid; gap: var(--au-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.au-tuile { background: var(--au-surface); border: 1px solid var(--au-trait); border-radius: var(--au-r-m); padding: var(--au-5); display: flex; flex-direction: column; gap: var(--au-2); }
.au-tuile .au-valeur { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.au-tuile .au-libelle { font-size: var(--au-t-xs); color: var(--au-texte-3); }
.au-tuile.au-large { grid-column: span 2; }
.au-tuile .au-badge { align-self: flex-start; }

/* ── Panneau flottant en verre (barre de commande, panneaux latéraux) ── */
.au-verre { background: var(--au-verre); backdrop-filter: var(--au-flou); -webkit-backdrop-filter: var(--au-flou); border: 1px solid var(--au-trait); border-radius: var(--au-r-l); box-shadow: var(--au-ombre-2); }

/* ── Boutons ── */
.au-btn { min-height: var(--au-cible); padding: 0 var(--au-5); border-radius: var(--au-r-s); border: 1px solid transparent; font: 600 var(--au-t-m)/1 var(--au-police); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: var(--au-2); transition: filter var(--au-duree), transform .08s, background var(--au-duree); }
.au-btn:active { transform: scale(.99); }
.au-btn[disabled] { opacity: .55; cursor: not-allowed; }
.au-btn-principal { background: var(--au-ambre); color: var(--au-sur-ambre); }
.au-btn-principal:hover { filter: brightness(1.06); }
.au-btn-secondaire { background: transparent; border-color: var(--au-trait); color: var(--au-texte); }
.au-btn-secondaire:hover { border-color: var(--au-ambre); }
.au-btn-discret { background: transparent; color: var(--au-texte-2); }
.au-btn-danger { background: var(--au-corail); color: #fff; }

/* ── Champs ── */
.au-champ { display: flex; flex-direction: column; gap: 6px; }
.au-champ label { font-size: var(--au-t-s); font-weight: 500; }
.au-champ .au-aide { font-size: var(--au-t-xs); color: var(--au-texte-3); }
.au-saisie { min-height: 48px; width: 100%; border-radius: var(--au-r-s); border: 1px solid var(--au-trait); background: var(--au-surface); color: var(--au-texte); font: var(--au-t-m) var(--au-police); padding: 0 14px; transition: border-color var(--au-duree), box-shadow var(--au-duree); }
.au-saisie:focus { outline: none; border-color: var(--au-ambre); box-shadow: 0 0 0 4px rgba(245, 163, 11, .18); }
.au-saisie[aria-invalid="true"] { border-color: var(--au-corail); }

/* ── Pastilles (jours de la semaine, filtres) ── */
.au-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.au-pastille { position: relative; display: inline-flex; }
.au-pastille input { position: absolute; opacity: 0; pointer-events: none; }
.au-pastille span { min-width: 46px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: var(--au-r-pill); border: 1px solid var(--au-trait); background: var(--au-surface); font-size: 12.5px; font-weight: 600; color: var(--au-texte-2); cursor: pointer; transition: all var(--au-duree); }
.au-pastille input:checked + span { background: var(--au-nuit); border-color: var(--au-nuit); color: #fff; }
.au-pastille input:disabled + span { opacity: .45; cursor: not-allowed; }
.au-pastille input:focus-visible + span { outline: 2px solid var(--au-ambre); outline-offset: 2px; }

/* ── Badges et messages ── */
.au-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--au-r-pill); font-size: var(--au-t-xs); font-weight: 600; background: var(--au-surface-2); border: 1px solid var(--au-trait); }
.au-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.au-badge.succes { color: var(--au-lagon); } .au-badge.alerte { color: var(--au-safran); } .au-badge.erreur { color: var(--au-corail); }
.au-message { padding: 12px 14px; border-radius: var(--au-r-s); font-size: var(--au-t-s); line-height: 1.5; border: 1px solid; }
.au-message.succes { background: rgba(15, 159, 126, .08); border-color: rgba(15, 159, 126, .35); }
.au-message.alerte { background: rgba(183, 121, 31, .08); border-color: rgba(183, 121, 31, .35); }
.au-message.erreur { background: rgba(217, 73, 58, .08); border-color: rgba(217, 73, 58, .35); }

/* ── Tableau de montants ── */
.au-tableau { width: 100%; border-collapse: collapse; font-size: var(--au-t-s); }
.au-tableau th { text-align: left; font-weight: 500; color: var(--au-texte-3); padding: 10px 12px; border-bottom: 1px solid var(--au-trait); }
.au-tableau td { padding: 12px; border-bottom: 1px solid var(--au-trait); }
.au-tableau td.montant, .au-tableau th.montant { text-align: right; font-variant-numeric: tabular-nums; }
.au-defile-x { overflow-x: auto; }

/* ── Étapes (assistant de paie mensuelle) ── */
.au-etapes { display: flex; gap: var(--au-2); list-style: none; padding: 0; margin: 0; counter-reset: etape; }
.au-etapes li { flex: 1; padding: 10px 12px; border-radius: var(--au-r-s); background: var(--au-surface-2); border: 1px solid var(--au-trait); font-size: var(--au-t-s); color: var(--au-texte-2); counter-increment: etape; }
.au-etapes li::before { content: counter(etape); display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--au-trait); font-size: 12px; font-weight: 700; }
.au-etapes li[aria-current="step"] { border-color: var(--au-ambre); color: var(--au-texte); }
.au-etapes li[aria-current="step"]::before { background: var(--au-ambre); color: var(--au-sur-ambre); }
.au-etapes li.fait::before { content: "✓"; background: var(--au-lagon); color: #fff; }

/* ── Mouvement ── */
@keyframes au-apparition { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.au-apparait { animation: au-apparition .24s var(--au-courbe) both; }
@media (prefers-reduced-motion: reduce) {
  .au *, .au *::before, .au *::after { animation: none !important; transition: none !important; }
}

/* ── Écrans étroits ── */
@media (max-width: 720px) {
  .au-tuile.au-large { grid-column: auto; }
  .au-etapes { flex-direction: column; }
  .au-carte { padding: var(--au-4); border-radius: var(--au-r-m); }
}
@media print { .au-verre { backdrop-filter: none; background: #fff; box-shadow: none; } }