/* ============================================================
   MIA ZONAGE — Thème central (gamme MIA). Couleur principale : ROSE
   Modifier la charte UNIQUEMENT ici pour aligner tous les modules MIA.
   ============================================================ */
:root {
  /* — Marque : échelle rose — */
  --rose-50:  #FFF0F6;
  --rose-100: #FFDEEB;
  --rose-200: #FCC2D7;
  --rose-300: #FAA2C1;
  --rose-400: #F783AC;
  --rose-500: #E64980;   /* accent marque */
  --rose-600: #D6336C;   /* actions principales */
  --rose-700: #C2255C;   /* hover / pressed */
  --rose-800: #A61E4D;   /* texte accent foncé */

  /* — Neutres — */
  --ink:      #1A1B1E;
  --gray-700: #495057;
  --gray-500: #868E96;
  --gray-300: #DEE2E6;
  --gray-100: #F1F3F5;
  --gray-50:  #F8F9FA;
  --white:    #FFFFFF;

  /* — Fonctionnels : jauge de conformité 2/3 — */
  --ok:     #2F9E44;   /* ratio >= 66,6 % */
  --warn:   #F08C00;   /* 60 – 66,6 % */
  --danger: #E03131;   /* < 60 % */

  /* — Catégories de zonage infirmier — COULEURS OFFICIELLES Atlasanté/CartoSanté —
     (rouge = sous-doté / besoin de soignants  →  bleu = sur-doté / saturé) — */
  --zone-tres-sous:  #C00000;  /* Z1 très sous-dotée */
  --zone-sous:       #F28C28;  /* Z2 sous-dotée */
  --zone-inter:      #F2C94C;  /* Z3 intermédiaire */
  --zone-tres-dotee: #27AE60;  /* Z4 très dotée */
  --zone-sur:        #2F80ED;  /* Z5 sur-dotée */

  /* — Heatmap densité de patients (jaune clair -> rouge foncé, échelle YlOrRd) — */
  --dens-1: #FFEDA0;  /* peu de patients */
  --dens-2: #FEB24C;
  --dens-3: #FD8D3C;
  --dens-4: #FC4E2A;
  --dens-5: #BD0026;  /* beaucoup de patients */
  --dens-none: #F1F3F5;  /* commune sans patient */

  /* — Typo, rayons, ombres, espacements — */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(26,27,30,.06), 0 1px 3px rgba(26,27,30,.10);
  --shadow:    0 4px 12px rgba(166,30,77,.10);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--gray-50);
  line-height: 1.5;
}
h1,h2,h3 { line-height: 1.25; margin: 0 0 var(--sp-3); }
a { color: var(--rose-700); text-decoration: none; }
a:hover { text-decoration: underline; }

/* — Bannière MIA (header global) — */
.mia-banner {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-6);
  background: linear-gradient(90deg, var(--rose-600), var(--rose-500));
  color: var(--white);
  box-shadow: var(--shadow);
}
.mia-banner .mia-logo { font-weight: 800; font-size: 1.25rem; letter-spacing: .5px; }
.mia-banner .mia-logo span { font-weight: 400; opacity: .9; }
.mia-banner .mia-tagline { font-size: .8rem; opacity: .9; margin-left: auto; }

/* — Boutons — */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer; transition: .15s;
}
.btn-primary { background: var(--rose-600); color: var(--white); }
.btn-primary:hover { background: var(--rose-700); }
.btn-ghost { background: transparent; color: var(--rose-700); border-color: var(--rose-300); }
.btn-ghost:hover { background: var(--rose-50); }

/* — Cartes / panneaux — */
.card {
  background: var(--white); border: 1px solid var(--gray-300);
  border-radius: var(--radius); padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

/* — Badges de zone — */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .75rem; font-weight: 700; color: var(--white); }
/* Fonds clairs (Z2/Z3/Z4/Z5) -> texte foncé pour le contraste WCAG AA ;
   on garde les teintes officielles intactes (carte + légende non texturées). */
.badge--tres-sous  { background: var(--zone-tres-sous); }                      /* Z1 rouge, texte blanc */
.badge--sous       { background: var(--zone-sous); color: var(--ink); }        /* Z2 orange */
.badge--inter      { background: var(--zone-inter); color: var(--ink); }        /* Z3 jaune */
.badge--tres-dotee { background: var(--zone-tres-dotee); color: var(--ink); }   /* Z4 vert */
.badge--sur        { background: var(--zone-sur); color: var(--ink); }          /* Z5 bleu */

/* — Jauge de conformité 2/3 — */
.gauge { font-size: 2.5rem; font-weight: 800; }
.gauge--ok     { color: var(--ok); }
.gauge--warn   { color: var(--warn); }
.gauge--danger { color: var(--danger); }

/* — Alertes (ton pro-IDEL) — */
.alert { border-radius: var(--radius); padding: var(--sp-4); border-left: 4px solid; }
.alert--ok     { background: #EBFBEE; border-color: var(--ok); }
.alert--warn   { background: #FFF4E6; border-color: var(--warn); }
.alert--danger { background: #FFF0F0; border-color: var(--danger); }

/* — Tableau récap — */
table.mia { width: 100%; border-collapse: collapse; background: var(--white); }
table.mia th, table.mia td { padding: var(--sp-3); text-align: left;
  border-bottom: 1px solid var(--gray-300); }
table.mia th { background: var(--rose-50); color: var(--rose-800); font-weight: 700; }

/* — Encart écosystème (footer) — */
.mia-ecosystem {
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--rose-50); border-top: 2px solid var(--rose-200);
}
.mia-ecosystem h3 { color: var(--rose-800); }
.mia-ecosystem .prod { display: block; padding: var(--sp-2) 0; }
.mia-ecosystem .prod b { color: var(--rose-700); }