/* ============================================================
   EASYIDEL — Charte commune (tokens + composants)
   Deux axes :
     • THÈME   : [data-theme="light"] (défaut) | [data-theme="dark"]
     • MODULE  : [data-module="medecin|idel|sas|pharmacien"]  -> couleur d'accent de l'app
   Médecin=vert · IDEL=bleu · SAS=rouge · Pharmacien=violet
   Police : IBM Plex Sans (UI) + IBM Plex Mono (codes)
   ============================================================ */

/* ---------- TOKENS DE MARQUE ---------- */
:root{
  --navy-950:#080f19; --navy-900:#0c1f33; --navy-800:#13293f; --navy-700:#1c3a57;
  --navy-600:#2c5282; --navy-500:#3b6aa0;
  --teal-700:#0a7d72; --teal-600:#0c9486; --teal-500:#10b5a6; --teal-400:#34d3c4; --teal-100:#d3f5f0;
  --cyan-700:#0e7490; --cyan-600:#0891b2; --cyan-500:#06b6d4; --cyan-400:#22d3ee; --cyan-100:#cffafe;
  --violet-700:#5b21b6; --violet-600:#6d28d9; --violet-500:#7c3aed; --violet-100:#ede9fe;
  --green-700:#166534; --green-600:#15803d; --green-500:#16a34a; --green-100:#dcfce7;
  --amber-700:#b45309; --amber-600:#d97706; --amber-500:#f59e0b; --amber-100:#fef3c7;
  --red-700:#b91c1c;  --red-600:#dc2626;  --red-500:#ef4444;  --red-100:#fee2e2;
  --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-100:#dbeafe;
  --gray-50:#f6f8fa; --gray-100:#eceff3; --gray-200:#dde3ea; --gray-300:#c3ccd6;
  --gray-400:#94a3b1; --gray-500:#64748b; --gray-600:#475569; --gray-700:#334155;
  --gray-800:#1e293b; --gray-900:#0f172a;

  --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(8,23,38,.06), 0 1px 3px rgba(8,23,38,.08);
  --shadow-md:0 4px 14px rgba(8,23,38,.10);
  --shadow-lg:0 14px 38px rgba(8,23,38,.18);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  --font-ui:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Module par défaut = cyan (marque mère MIA) si data-module absent */
  --module-700:var(--cyan-700); --module-600:var(--cyan-600); --module-500:var(--cyan-500);
  --module-400:var(--cyan-400); --module-100:var(--cyan-100);
}

/* ---------- COULEUR DE MODULE ---------- */
[data-module="medecin"]   { --module-700:#166534; --module-600:#15803d; --module-500:#16a34a; --module-400:#22c55e; --module-100:#dcfce7; } /* vert */
[data-module="idel"]      { --module-700:#1e3a8a; --module-600:#1e40af; --module-500:#1d4ed8; --module-400:#3b82f6; --module-100:#dbeafe; } /* bleu profond */
[data-module="pharmacien"]{ --module-700:#854d0e; --module-600:#a16207; --module-500:#ca8a04; --module-400:#eab308; --module-100:#fef9c3; } /* or */
[data-module="sas"]       { --module-700:#991b1b; --module-600:#b91c1c; --module-500:#dc2626; --module-400:#ef4444; --module-100:#fee2e2; } /* rouge */
[data-module="factu"]     { --module-700:#5b21b6; --module-600:#6d28d9; --module-500:#7c3aed; --module-400:#8b5cf6; --module-100:#ede9fe; } /* violet */
[data-module="plaie"]     { --module-700:#9d174d; --module-600:#be185d; --module-500:#db2777; --module-400:#ec4899; --module-100:#fce7f3; } /* rose — onglet MIAidel */
[data-module="prevention"]{ --module-700:#0f766e; --module-600:#0d9488; --module-500:#14b8a6; --module-400:#2dd4bf; --module-100:#ccfbf1; } /* teal — onglet MIAidel */

/* ---------- THÈME CLAIR ---------- */
:root, [data-theme="light"]{
  --bg:var(--gray-50); --surface:#fff; --surface-2:var(--gray-50);
  --border:var(--gray-200); --border-strong:var(--gray-300);
  --text:var(--navy-900); --text-muted:var(--gray-500); --text-invert:#fff;
  --header-bg:var(--navy-900); --header-text:#fff;
  --primary:var(--navy-700); --primary-hover:var(--navy-800); --primary-text:#fff;
  --accent:var(--module-600); --accent-hover:var(--module-700); --accent-text:#fff; --accent-soft:var(--module-100);
  --vocal:var(--violet-500); --vocal-hover:var(--violet-600); --vocal-text:#fff;
  --success:var(--green-600); --success-hover:var(--green-700); --success-text:#fff;
  --danger:var(--red-600); --danger-hover:var(--red-700); --danger-text:#fff;
  --code:var(--navy-700); --ring:color-mix(in srgb, var(--accent) 35%, transparent);
}
/* ---------- THÈME SOMBRE ---------- */
[data-theme="dark"]{
  --bg:var(--navy-950); --surface:var(--navy-900); --surface-2:var(--navy-800);
  --border:#1f3650; --border-strong:#2b4a6b;
  --text:#e8eef5; --text-muted:#8fa6bd; --text-invert:var(--navy-950);
  --header-bg:var(--navy-950); --header-text:#fff;
  --primary:var(--module-500); --primary-hover:var(--module-400); --primary-text:var(--navy-950);
  --accent:var(--module-400); --accent-hover:var(--module-500); --accent-text:var(--navy-950); --accent-soft:rgba(255,255,255,.06);
  --vocal:var(--violet-500); --vocal-hover:var(--violet-600); --vocal-text:#fff;
  --success:var(--green-500); --success-hover:var(--green-600); --success-text:var(--navy-950);
  --danger:var(--red-500); --danger-hover:var(--red-600); --danger-text:#fff;
  --code:var(--module-400); --ring:color-mix(in srgb, var(--accent) 45%, transparent);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box}
body{margin:0; font-family:var(--font-ui); background:var(--bg); color:var(--text); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-weight:600; letter-spacing:-.01em; line-height:1.2; margin:0 0 var(--space-3)}
code,.mono,.code{font-family:var(--font-mono); color:var(--code); font-weight:500; letter-spacing:-.01em}

/* ---------- LOGO MIA (teal famille, constant) ---------- */
.mia-logo{display:inline-flex; align-items:center; gap:10px; font-weight:700; color:var(--header-text)}
.mia-mark{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan-500),var(--cyan-700));color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;box-shadow:var(--shadow-sm)}
/* Wordmark "MIA" + point coloré (= couleur de module) + nom du module */
.mia-word{font-weight:800; font-size:22px; letter-spacing:-.02em; display:inline-flex; align-items:baseline; color:var(--header-text)}
.mia-word .dot{color:var(--accent)}
.mia-word .mod{color:var(--accent); font-weight:600; font-size:.78em; margin-left:7px}

/* ---------- EN-TÊTE (navy + liseré couleur de module) ---------- */
.app-header{background:var(--header-bg); color:var(--header-text); display:flex; align-items:center; justify-content:space-between; padding:12px 22px; gap:16px; border-bottom:3px solid var(--accent)}
.app-header .sub{font-size:12px; color:#9fb3c8; font-weight:400}
.module-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent-text);background:var(--accent);padding:3px 10px;border-radius:var(--r-pill)}

/* ---------- BOUTONS ---------- */
.btn{font-family:inherit; font-weight:600; font-size:14px; cursor:pointer; border:1px solid transparent; border-radius:var(--r-sm); padding:10px 16px; display:inline-flex; align-items:center; gap:8px; line-height:1; transition:background .15s,border-color .15s,transform .04s,box-shadow .15s}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:none; box-shadow:0 0 0 3px var(--ring)}
.btn--primary{background:var(--primary); color:var(--primary-text)} .btn--primary:hover{background:var(--primary-hover)}
.btn--accent,.btn--module{background:var(--accent); color:var(--accent-text)} .btn--accent:hover,.btn--module:hover{background:var(--accent-hover)}
.btn--vocal{background:var(--vocal); color:var(--vocal-text)} .btn--vocal:hover{background:var(--vocal-hover)}
.btn--success{background:var(--success); color:var(--success-text)} .btn--success:hover{background:var(--success-hover)}
.btn--danger{background:var(--danger); color:var(--danger-text)} .btn--danger:hover{background:var(--danger-hover)}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--border-strong)} .btn--ghost:hover{background:var(--surface-2)}
.btn--ghost.is-danger{color:var(--danger); border-color:color-mix(in srgb,var(--danger) 40%,transparent)}

/* ---------- CHAMPS ---------- */
.field-label{display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--text)}
.input,.select,.textarea{width:100%; font-family:inherit; font-size:14px; color:var(--text); background:var(--surface); border:1.5px solid var(--border-strong); border-radius:var(--r-sm); padding:11px 13px; transition:border-color .15s,box-shadow .15s}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input:focus,.select:focus,.textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)}

/* ---------- CARTES ---------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--space-5); box-shadow:var(--shadow-sm)}
.card--accent{border-left:3px solid var(--accent)}
.panel-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-4)}
.panel-title h3{margin:0}

/* ---------- BADGES ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); line-height:1.4; white-space:nowrap}
.badge--module {background:var(--accent-soft); color:var(--accent)}
.badge--neutral{background:var(--gray-100); color:var(--gray-600)}
.badge--info   {background:var(--blue-100); color:var(--blue-700)}
.badge--success{background:var(--green-100); color:var(--green-700)}
.badge--warn   {background:var(--amber-100); color:var(--amber-700)}
.badge--danger {background:var(--red-100); color:var(--red-700)}
.badge--teal   {background:var(--teal-100); color:var(--teal-700)}
.badge--vocal  {background:var(--violet-100); color:var(--violet-700)}
[data-theme="dark"] .badge--neutral{background:rgba(148,163,177,.18); color:#c3ccd6}
[data-theme="dark"] .badge--info{background:rgba(59,130,246,.18); color:#93c5fd}
[data-theme="dark"] .badge--success{background:rgba(22,163,74,.2); color:#86efac}
[data-theme="dark"] .badge--warn{background:rgba(245,158,11,.18); color:#fcd34d}
[data-theme="dark"] .badge--danger{background:rgba(239,68,68,.18); color:#fca5a5}
[data-theme="dark"] .badge--vocal{background:rgba(124,58,237,.25); color:#c4b5fd}

/* ---------- ONGLETS ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--border); background:var(--surface)}
.tab{font-family:inherit; font-size:14px; font-weight:600; color:var(--text-muted); background:none; border:none; padding:13px 16px; cursor:pointer; position:relative; display:inline-flex; align-items:center; gap:7px}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent)}
.tab.active::after{content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; background:var(--accent); border-radius:2px}

/* ---------- LIGNE DE RÉCEPTION ---------- */
.row{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:8px; cursor:pointer; transition:border-color .15s,box-shadow .15s}
.row:hover{border-color:var(--accent); box-shadow:var(--shadow-sm)}
.row .from{font-weight:600}
.row .sub{font-size:13px; color:var(--text-muted)}
.row .meta{margin-left:auto; text-align:right; font-size:12px; color:var(--text-muted)}

/* ---------- UTILITAIRES ---------- */
.muted{color:var(--text-muted)}
.stack{display:flex; flex-direction:column; gap:var(--space-3)}
.cluster{display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center}

/* ---------- FILIGRANE / FOOTER LÉGAL (toutes les apps) ---------- */
.easyidel-footer{
  margin-top:40px; padding:18px 22px 24px; text-align:center;
  font-size:11.5px; line-height:1.6; color:var(--text-muted);
  border-top:1px solid var(--border); font-family:var(--font-ui);
}
.easyidel-footer .ef-mark{font-weight:700; color:var(--accent); letter-spacing:.3px}
.easyidel-footer .ef-sep{opacity:.5; margin:0 6px}