/* ==========================================================================
   BIHAS MEDICAL — Thème du cabinet, aligné sur le site bihasmedical.org
   Chargé APRÈS index-*.css : il remplace la palette Tailwind (emerald/teal/
   blue/slate) par la charte du site. Aucun fichier compilé n'est modifié.
   Pour désactiver le thème : retirer la ligne <link> de app.html.
   ========================================================================== */

:root {
  /* Charte du site (css/style.css) */
  --bleu: #0b5fa3;
  --bleu-fonce: #07406f;
  --turquoise: #14b8a6;
  --turquoise-fonce: #0d9488;
  --fond: #f6f9fb;
  --ligne: #e3edf2;
  --texte: #0f2437;
  --texte-att: #4a6275;
  --ombre: 0 10px 30px rgba(11, 95, 163, .08);
  --degrade: linear-gradient(135deg, #14b8a6, #0b5fa3);

  /* Police du site */
  --font-sans: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* « emerald » (couleur d'action de l'appli) -> turquoise du site */
  --color-emerald-50: #e6f7f5;
  --color-emerald-100: #ccf0ec;
  --color-emerald-200: #99e2d9;
  --color-emerald-300: #5fd0c4;
  --color-emerald-400: #2bbfb0;
  --color-emerald-500: #14b8a6;
  --color-emerald-600: #0d9488;
  --color-emerald-700: #0f766e;
  --color-emerald-800: #115e59;
  --color-emerald-900: #134e4a;
  --color-emerald-950: #042f2e;

  /* « teal » et « blue » -> bleu du site */
  --color-teal-50: #eef6fb;
  --color-teal-100: #dcebf6;
  --color-teal-200: #b9d5ea;
  --color-teal-300: #8dbbdf;
  --color-teal-400: #4f93c8;
  --color-teal-500: #2477b5;
  --color-teal-600: #0b5fa3;
  --color-teal-700: #095088;
  --color-teal-800: #07406f;
  --color-teal-900: #0a3558;
  --color-teal-950: #0a2540;
  --color-blue-50: #eef6fb;
  --color-blue-100: #dcebf6;
  --color-blue-200: #b9d5ea;
  --color-blue-300: #8dbbdf;
  --color-blue-400: #4f93c8;
  --color-blue-500: #2477b5;
  --color-blue-600: #0b5fa3;
  --color-blue-700: #095088;
  --color-blue-800: #07406f;
  --color-blue-900: #0a3558;
  --color-blue-950: #0a2540;

  /* « slate » (gris de l'appli) -> gris bleutés du site */
  --color-slate-50: #f6f9fb;
  --color-slate-100: #eef4f8;
  --color-slate-200: #e3edf2;
  --color-slate-300: #cddde7;
  --color-slate-400: #8da3b5;
  --color-slate-500: #5b7286;
  --color-slate-600: #4a6275;
  --color-slate-700: #2e4559;
  --color-slate-800: #17304a;
  --color-slate-900: #0f2437;
  --color-slate-950: #0a1a2b;
}

/* ---------- Typographie ---------- */
body {
  font-family: var(--font-sans);
  color: var(--texte);
}
/* Arabe (RTL) : Tajawal d'abord, comme avant */
[dir="rtl"], .font-tajawal {
  font-family: Tajawal, "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

/* ---------- Boutons : dégradé turquoise -> bleu, forme pilule ---------- */
.bg-emerald-600,
.bg-emerald-700 {
  background-image: var(--degrade);
}
button.bg-emerald-600:hover,
button.bg-emerald-700:hover,
a.bg-emerald-600:hover,
a.bg-emerald-700:hover {
  filter: brightness(.95);
  transform: translateY(-1px);
}
button.rounded-xl.text-white:not(.group),
a.rounded-xl.text-white {
  border-radius: 999px;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
button.rounded-xl.text-white:not(.group):hover:not(:disabled) {
  transform: translateY(-1px);
}

/* ---------- Cartes : rayon 16 px + ombre bleutée du site ---------- */
.rounded-2xl.shadow-xs,
.rounded-2xl.shadow-sm {
  box-shadow: var(--ombre);
}
.rounded-3xl.shadow-xl {
  box-shadow: 0 18px 40px rgba(11, 95, 163, .14);
}

/* ---------- Titres de page en bleu foncé (mode clair) ---------- */
:root:not(.dark) h2.text-xl,
:root:not(.dark) h2.text-2xl {
  color: var(--bleu-fonce);
}
/* ...sauf sur fond coloré (bandeau de connexion, etc.) */
:root:not(.dark) .text-white h2.text-xl,
:root:not(.dark) .text-white h2.text-2xl {
  color: inherit;
}

/* ---------- Champs : focus bleu comme sur le site ---------- */
input[class]:focus,
select[class]:focus,
textarea[class]:focus {
  border-color: var(--bleu);
  --tw-ring-color: rgba(11, 95, 163, .30);
}

/* ---------- Barre latérale : logo + nom façon site ---------- */
.from-emerald-700.to-teal-500 {
  background-image: var(--degrade);
}
aside h1 {
  color: var(--bleu-fonce);
  font-weight: 800;
}
.dark aside h1 {
  color: #fff;
}
aside > div:first-child p {
  color: var(--turquoise-fonce);
}

/* ---------- Page de connexion : fond « hero » du site ---------- */
:root:not(.dark) .bg-radial-\[at_top_right\] {
  background-image:
    radial-gradient(1200px 500px at 80% -10%, rgba(20, 184, 166, .18), transparent),
    linear-gradient(180deg, #eef6fa, #f6f9fb);
}
.rounded-3xl > .bg-gradient-to-r.from-emerald-600 {
  background-image: var(--degrade);
}

/* ---------- Bouton flottant WhatsApp : vert WhatsApp comme sur le site ---------- */
.fixed.bottom-6 > button.rounded-full {
  background-color: #25d366;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}
.fixed.bottom-6 > button.rounded-full:hover {
  background-color: #1ebe5b;
}
.fixed.bottom-6 > button.rounded-full .animate-ping {
  background-color: #bbf7d0;
  border-color: #25d366;
}

/* ---------- Impression (ordonnances, certificats) : pas de dégradé ---------- */
@media print {
  .bg-emerald-600,
  .bg-emerald-700,
  .from-emerald-700.to-teal-500 {
    background-image: none;
  }
}