/* ────────────────────────────────────────────────────────────────────────
 * Sallia / MaSalle — Tokens centralisés
 * Source unique de vérité pour : couleurs, espacements, typo, ombres, radius.
 * À importer en premier dans index.html, portail.html, portail-asso.html.
 * ────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Couleurs principales ── */
  --navy: #0f2b46;
  --navy-2: #1e3a5f;
  --accent: #2563eb;
  --accent-2: #3b82f6;
  --green: #16a34a;
  --green-2: #22c55e;
  --orange: #f59e0b;
  --orange-2: #fb923c;
  --red: #dc2626;
  --red-2: #ef4444;
  --gray: #64748b;

  /* ── Surfaces ── */
  --bg: #f1f5f9;
  --bg-alt: #f8fafc;
  --white: #ffffff;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* ── Texte ── */
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #6b7280; /* WCAG AA — 4.7:1 sur blanc (était #94a3b8 → 2.7:1) */

  /* ── Variantes contraste élevé pour bg coloré + texte ── */
  --orange-strong: #b45309; /* AA texte sur blanc (4.55:1) — bg badges */

  /* ── Radius & ombres ── */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 1px 3px rgba(15, 23, 42, .08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);

  /* ── Typo ── */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Tactile / a11y ── */
  --tap-min: 44px;            /* WCAG 2.5.5 + Apple HIG */
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* ── Easing ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ────────────────────────────────────────────────────────────────────────
 * Règles globales d'accessibilité tactile et clavier
 * ────────────────────────────────────────────────────────────────────── */

/* Focus visible cohérent (WCAG 2.4.7) */
*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-sm);
}
*:focus:not(:focus-visible) { outline: none; }

/* Cible tactile minimum 44×44 px sur tous les boutons et liens cliquables */
button, .btn, [role="button"], a.nav-action, .icon-btn {
  min-height: var(--tap-min);
  min-width: var(--tap-min);
}
/* Exceptions pour micro-actions inline (chevrons, badges cliquables) */
button.btn-xs, .btn-xs, .calendar-nav button {
  min-height: 32px;
  min-width: 32px;
}

/* Empty state pattern */
.empty-state {
  padding: 40px 20px;
  text-align: center;
  background: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-3);
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  opacity: .55;
}
.empty-state-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.empty-state-hint {
  font-size: 13px;
  color: var(--text-3);
}

/* Auto-save indicator */
.autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--gray);
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  transition: opacity .3s var(--ease);
}
.autosave-indicator.saving { color: var(--orange); }
.autosave-indicator.saved { color: var(--green); }
.autosave-indicator.error { color: var(--red); }
.autosave-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.4s var(--ease) infinite;
}
.autosave-indicator.saved::before { animation: none; }
@keyframes pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

/* Skip link (a11y, navigation clavier) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--navy);
  color: var(--white);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { left: 8px; outline: var(--focus-ring); }

/* Modal a11y — focus trap visuel + role="dialog" requis sur le markup */
[role="dialog"] { outline: none; }
[role="dialog"][aria-modal="true"]:not(.hidden) {
  /* assure le contraste avec backdrop */
}

/* Reduce motion — respect préférence */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast — augmente borders/text */
@media (prefers-contrast: more) {
  :root {
    --border: #94a3b8;
    --border-strong: #475569;
    --text-3: #475569;
  }
}

/* ─── Classes manquantes (audit UI #4) ─────────────────── */
.form-control{
  width:100%;
  padding:8px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font:inherit;
  font-size:.92rem;
  color:var(--text);
  background:var(--white);
  transition:border-color .12s, box-shadow .12s;
  box-sizing:border-box;
}
.form-control:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.form-control:disabled{background:var(--bg);color:var(--text-3);cursor:not-allowed}

.tarif-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.tarif-header-row h3, .tarif-header-row h4{margin:0}
.tarif-header-row .tarif-actions{display:flex;gap:8px;flex-wrap:wrap}

.tarif-form-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 16px;
  margin-bottom:14px;
}
.tarif-form-grid .form-group{margin-bottom:0}
.tarif-form-grid .tarif-form-full{grid-column:1 / -1}
@media (max-width:640px){
  .tarif-form-grid{grid-template-columns:1fr}
}

/* Toast warning manquant (audit UI #11) */
.toast.warning, .toast-warning{
  background:var(--orange);
  color:#fff;
}