/* ============================================================================
   om-ui.css — fondations visuelles communes OmegaCampus (étape 2 de l'audit, 06/10/2026)
   Chargé APRÈS styles.css / visio.css / type-bac.css, AVANT fiche-eleve.css.
   Décision : couleur unique TEAL partout (D1). Ce fichier :
     1. définit les tokens de marque (--brand-*, --ink-*) — SOURCE UNIQUE des couleurs ;
     2. redirige les anciens tokens d'accent (--primary-*, --blue, dégradés) vers le teal ;
     3. unifie boutons, menu latéral, en-têtes de module, focus ;
     4. ramène au teal les utilitaires Tailwind d'accent (indigo / violet / purple / blue / sky).
   Les couleurs sémantiques (succès vert, erreur rouge, alerte ambre) ne changent pas.
   ============================================================================ */

:root {
  /* --- Marque : teal (encres ≥ 4,5:1 sur blanc à partir de 600) --- */
  --brand-50:  #f0fdfa;
  --brand-100: #ccfbf1;
  --brand-200: #99f6e4;
  --brand-300: #5eead4;
  --brand-400: #2dd4bf;
  --brand-500: #14b8a6;
  --brand-600: #0d9488;
  --brand-700: #0f766e;   /* couleur principale (boutons, liens, onglets actifs) */
  --brand-800: #115e59;
  --brand-900: #134e4a;
  --brand-950: #042f2e;

  /* --- Encres et surfaces (langage de la fiche élève) --- */
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --line:    #e5e7eb;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --radius-card: 14px;
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, .25);

  /* --- Anciens accents redirigés vers la marque --- */
  --primary-50:  var(--brand-50);
  --primary-100: var(--brand-100);
  --primary-200: var(--brand-200);
  --primary-300: var(--brand-300);
  --primary-400: var(--brand-400);
  --primary-500: var(--brand-700);   /* 500 servait de fond de bouton : version contrastée */
  --primary-600: var(--brand-700);
  --primary-700: var(--brand-800);
  --primary-800: var(--brand-900);
  --primary-900: var(--brand-950);
  --primary-950: var(--brand-950);
  --blue: var(--brand-700);
  --gradient-primary: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-600) 100%);
  --gradient-header:  linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 55%, var(--brand-600) 100%);
  --bg-page: var(--surface-alt);
}

body { background-color: var(--surface-alt); }

/* ---------------------------------------------------------------- Boutons --- */
.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-700);
  font-weight: 600;
  border-radius: 10px;
}
.btn:hover:not(:disabled) { background: var(--brand-50); border-color: var(--brand-200); box-shadow: none; transform: none; }
.btn.primary, .btn-primary {
  background: var(--brand-700);
  border: 1px solid var(--brand-700);
  color: #fff;
}
.btn.primary:hover:not(:disabled), .btn-primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn:focus-visible, .btn-primary:focus-visible, button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ------------------------------------------------------------ Menu latéral --- */
.brand { color: var(--brand-800); }
.nav button { color: var(--ink-700); font-weight: 500; }
.nav button:hover { background: var(--surface-alt); color: var(--ink-900); }
.nav button.active {
  background: var(--brand-50);
  color: var(--brand-800);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand-700);
}

/* --------------------------------------------------------- Titre de page --- */
.header .h1 { color: var(--ink-900); }

/* ------------------------------------------------- En-têtes de module (une teinte) --- */
.dash-header, .planning-header, .factures-header, .eleves-header, .pedagogie-header,
.parent-modal-header {
  background: var(--gradient-header);
}

/* ----------------------------------- Utilitaires Tailwind d'accent → teal --------- */
/* Fonds clairs */
.bg-indigo-50, .bg-violet-50, .bg-purple-50, .bg-blue-50, .bg-sky-50   { background-color: var(--brand-50); }
.bg-indigo-100, .bg-violet-100, .bg-purple-100, .bg-blue-100, .bg-sky-100 { background-color: var(--brand-100); }
.bg-indigo-200, .bg-violet-200, .bg-purple-200, .bg-blue-200 { background-color: var(--brand-200); }
/* Fonds pleins (boutons) */
.bg-indigo-500, .bg-violet-500, .bg-purple-500, .bg-blue-500, .bg-sky-500,
.bg-indigo-600, .bg-violet-600, .bg-purple-600, .bg-blue-600, .bg-sky-600 { background-color: var(--brand-700); }
.bg-indigo-700, .bg-violet-700, .bg-purple-700, .bg-blue-700, .bg-sky-700,
.hover\:bg-indigo-700:hover, .hover\:bg-violet-700:hover, .hover\:bg-purple-700:hover, .hover\:bg-blue-700:hover,
.hover\:bg-indigo-600:hover, .hover\:bg-blue-600:hover, .hover\:bg-purple-600:hover { background-color: var(--brand-800); }
.hover\:bg-indigo-50:hover, .hover\:bg-blue-50:hover, .hover\:bg-purple-50:hover, .hover\:bg-violet-50:hover { background-color: var(--brand-50); }
.hover\:bg-indigo-100:hover, .hover\:bg-blue-100:hover, .hover\:bg-purple-100:hover { background-color: var(--brand-100); }
/* Textes */
.text-indigo-500, .text-violet-500, .text-purple-500, .text-blue-500, .text-sky-500,
.text-indigo-600, .text-violet-600, .text-purple-600, .text-blue-600, .text-sky-600 { color: var(--brand-700); }
.text-indigo-700, .text-violet-700, .text-purple-700, .text-blue-700, .text-sky-700,
.text-indigo-800, .text-violet-800, .text-purple-800, .text-blue-800,
.text-indigo-900, .text-purple-900, .text-blue-900,
.hover\:text-indigo-700:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: var(--brand-800); }
/* Bordures */
.border-indigo-100, .border-blue-100, .border-purple-100, .border-violet-100,
.border-indigo-200, .border-blue-200, .border-purple-200, .border-violet-200, .border-sky-200 { border-color: var(--brand-200); }
.border-indigo-300, .border-blue-300, .border-purple-300,
.border-indigo-500, .border-blue-500, .border-purple-500,
.border-indigo-600, .border-blue-600, .border-purple-600 { border-color: var(--brand-600); }
.focus\:ring-indigo-500:focus, .focus\:ring-blue-500:focus, .focus\:ring-purple-500:focus { --tw-ring-color: rgba(13, 148, 136, .45); }
.focus\:border-indigo-500:focus, .focus\:border-blue-500:focus { border-color: var(--brand-600); }
/* Dégradés Tailwind */
.from-indigo-500, .from-indigo-600, .from-blue-500, .from-blue-600, .from-purple-500, .from-purple-600, .from-violet-500, .from-violet-600 {
  --tw-gradient-from: var(--brand-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(15,118,110,0));
}
.to-indigo-500, .to-indigo-600, .to-blue-500, .to-blue-600, .to-purple-500, .to-purple-600, .to-violet-500, .to-violet-600, .to-pink-500 {
  --tw-gradient-to: var(--brand-600);
}

/* ---------------------------------------------- Icônes au trait (om-icons.js) --- */
.om-ic { flex-shrink: 0; vertical-align: -3px; }
.nav button.om-ic-btn { display: flex; align-items: center; gap: 10px; }
.nav button.om-ic-btn[style*="display: none"], .nav button.om-ic-btn[style*="display:none"] { display: none; }
.nav button .om-ic { color: var(--ink-500); }
.nav button:hover .om-ic { color: var(--ink-700); }
.nav button.active .om-ic { color: var(--brand-700); }
aside .btn.om-ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
aside .btn.om-ic-btn .om-ic { width: 16px; height: 16px; }

/* ── Toasts (notify) — une seule implémentation : ui-components.js ───────── */
.om-toasts { position: fixed; top: 16px; right: 16px; z-index: 2000000; display: flex;
  flex-direction: column; gap: 8px; width: max-content; max-width: min(380px, calc(100vw - 32px));
  pointer-events: none; }
.om-toast { --t: var(--brand-700); pointer-events: auto; display: flex; gap: 10px; align-items: flex-start;
  background: #fff; color: var(--ink-900); border: 1px solid #e2e8f0; border-left: 4px solid var(--t);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 10px 14px;
  font-size: 14px; line-height: 1.45; cursor: pointer; opacity: 0; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease; }
.om-toast.is-in { opacity: 1; transform: none; }
.om-toast.success { --t: #059669; }
.om-toast.error   { --t: #dc2626; }
.om-toast.warning { --t: #d97706; }
.om-toast-ic { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--t); }
.om-toast-msg { flex: 1; white-space: pre-line; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .om-toast { transition: none; transform: none; } }