/* ────────────────────────────────────────────────────────────────────────
 * 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 ── */
  /* DSFR (Système Design Gouv) — bleu république + rouge. Aligné landing 2026-05-26. */
  --navy: #0f2b46;          /* navy profond (header sombre) */
  --navy-2: #1e3a5f;
  --accent: #000091;        /* DSFR primary — bleu république */
  --accent-2: #1212A0;      /* DSFR primary hover */
  --accent-red: #E1000F;    /* DSFR red — CTAs critiques uniquement */
  --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 ── */
  /* Charte DSFR : Public Sans (auto-hébergée via /vendor/fonts/fonts.css) — source unique. */
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains 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;
}

/* ─── Section visites event modal — grille responsive + thème inputs ─── */
.visite-block label.s-fs-xs{
  display:block;font-weight:600;font-size:.74rem;color:#475569;
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;
}
.visite-block input,
.visite-block select{
  width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;
  font:inherit;font-size:.88rem;color:var(--text);background:var(--white);
  font-family:inherit;transition:border-color .12s,box-shadow .12s;box-sizing:border-box;
}
.visite-block input:focus,
.visite-block select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,0,145,.14);
}
.visite-block select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='1.6'><polyline points='2,4 6,8 10,4'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px;
  padding-right:32px;cursor:pointer;
}
.visite-grid{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.5fr) auto;
  gap:10px;align-items:end;
}
.visite-field{min-width:0}
.visite-add{min-height:40px;align-self:end}
@media (max-width:700px){
  .visite-grid{grid-template-columns:1fr 1fr;gap:10px 12px}
  .visite-field-notes{grid-column:1 / -1}
  .visite-add{grid-column:1 / -1;width:100%}
}
@media (max-width:420px){
  .visite-grid{grid-template-columns:1fr}
  .visite-field-notes,.visite-add{grid-column:auto}
}