/* ══════════════════════════════════════════════════════
   otipm.css — socle visuel commun du module OTIPM
   Partagé par profil_patient.html et redaction.html
   À héberger sur : outils.ergotlse.fr/intervention/otipm.css
   ══════════════════════════════════════════════════════ */

:root{
  --blue:#1976d2; --blue-dark:#0d47a1; --blue-light:#e3f0fb;
  --teal:#00897b; --teal-dark:#00695c; --teal-light:#e0f2f0;
  --coral:#e05c45; --coral-dark:#b8462f; --coral-light:#fdecea;
  --amber:#f59e0b; --amber-dark:#b45309; --amber-light:#fef3c7;
  --green:#16a34a; --green-dark:#15803d; --green-light:#dcfce7;
  --bg:#f6f4f1; --surface:#ffffff; --border:#e2ddd8;
  --text:#1c1917; --text-2:#57534e; --text-3:#a8a29e;
  --font-ui:'Outfit',system-ui,sans-serif;
  --font-mono:'DM Mono',monospace;
  --font-serif:'Lora',serif;
  --radius:10px; --shadow:0 2px 12px rgba(0,0,0,.07);
}

*,*::before,*::after{ box-sizing:border-box; }
body{ font-family:var(--font-ui); background:var(--bg); color:var(--text); font-size:14px; line-height:1.5; min-height:100vh; margin:0; }
button,input,textarea,select{ font-family:inherit; font-size:inherit; color:inherit; }

/* ── Onglets module (continuité « même outil ») ── */
.otipm-tabs{ max-width:1180px; margin:18px auto 0; padding:0 24px; display:flex; gap:6px; flex-wrap:wrap; }
.mtab{ display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:8px 8px 0 0;
  font-size:13.5px; font-weight:500; color:var(--text-2); text-decoration:none;
  border:1px solid transparent; border-bottom:none; }
.mtab .num{ font-family:var(--font-mono); font-size:11px; background:var(--bg); border:1px solid var(--border);
  border-radius:999px; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; }
.mtab:hover{ background:var(--surface); color:var(--text); }
.mtab.active{ background:var(--surface); color:var(--coral-dark); border-color:var(--border); }
.mtab.active .num{ background:var(--coral-light); border-color:var(--coral); color:var(--coral-dark); }

/* ── Intro ── */
.intro{ max-width:1180px; margin:0 auto; padding:18px 24px 0; }
.intro h1{ font-size:24px; font-weight:600; letter-spacing:-0.5px; margin-bottom:6px; }
.intro p{ font-family:var(--font-serif); color:var(--text-2); font-size:15px; max-width:760px; }

/* ── Bandeau récap du cas ── */
.recap{ max-width:1180px; margin:16px auto 0; padding:0 24px; }
.recap-inner{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; box-shadow:var(--shadow); }
.recap-label{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; color:var(--text-3); }
.tag{ display:inline-block; background:var(--teal-light); color:var(--teal-dark); padding:2px 10px;
  border-radius:999px; font-size:12px; font-weight:500; }
.tag.mono{ font-family:var(--font-mono); background:var(--blue-light); color:var(--blue-dark); }
.recap-back{ margin-left:auto; font-size:13px; color:var(--text-2); text-decoration:none; }
.recap-back:hover{ color:var(--text); }

/* ── Caption d'état ── */
.caption{ max-width:1180px; margin:16px auto 0; padding:12px 20px; padding-left:23px;
  background:var(--coral-light); border-left:3px solid var(--coral); border-radius:0 6px 6px 0;
  font-family:var(--font-serif); font-size:14px; color:var(--coral-dark); }
.caption.info{ background:var(--blue-light); border-color:var(--blue); color:var(--blue-dark); }
.caption strong{ font-family:var(--font-ui); }
.caption code{ font-family:var(--font-mono); font-size:12px; }

/* ── Boutons & statut ── */
.btn{ display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:8px;
  border:1px solid var(--coral); background:var(--coral); color:#fff; font-weight:500; cursor:pointer; transition:filter .12s; }
.btn:hover{ filter:brightness(.95); }
.btn.ghost{ background:transparent; color:var(--coral-dark); }
.btn:disabled{ opacity:.5; cursor:default; }
.save-status{ font-size:13px; }
.save-status.ok{ color:var(--green-dark); }
.save-status.err{ color:var(--coral-dark); }