/* app.css : BilanPro design system
   Esthetique premium medicale : glassmorphism (surfaces translucides, blur),
   claymorphism (volumes doux, doubles ombres), micro-interactions sobres.
   Aucune ressource externe (CSP self). */

:root {
  --navy: #0e2a45;
  --navy-2: #16395c;
  --ink: #142a40;
  --teal: #0f7d68;
  --teal-2: #10967c;
  --bg-0: #eef3f8;
  --bg-1: #e6edf5;
  --card: #fbfdfe;
  --line: rgba(20, 42, 64, .10);
  --text: #1b2f44;
  --muted: #5c7189;
  --alert: #b3261e;
  --alert-bg: #fbeeed;
  --warn: #9a6b00;
  --warn-bg: #fdf6e7;
  --ok: #0f7d68;
  --ok-bg: #e9f5f1;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;

  /* claymorphism : volume doux, lumiere haut-gauche */
  --clay: 0 12px 28px rgba(14, 42, 69, .10), 0 2px 6px rgba(14, 42, 69, .06),
          inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -2px 6px rgba(14, 42, 69, .04);
  --clay-soft: 0 8px 20px rgba(14, 42, 69, .07), 0 1px 3px rgba(14, 42, 69, .05),
               inset 0 1px 0 rgba(255, 255, 255, .85);
  --clay-btn: 0 8px 18px rgba(15, 125, 104, .28), inset 0 1px 0 rgba(255, 255, 255, .25),
              inset 0 -2px 4px rgba(0, 0, 0, .12);

  /* glassmorphism */
  --glass: rgba(255, 255, 255, .60);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-line: rgba(255, 255, 255, .55);
}

* { box-sizing: border-box }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
body {
  margin: 0;
  font-family: 'Avenir Next', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(16, 150, 124, .10), transparent 60%),
    radial-gradient(900px 480px at -10% 20%, rgba(22, 57, 92, .10), transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  background-attachment: fixed;
  color: var(--text);
  letter-spacing: .1px;
}
h1 { font-size: 23px; margin: 0 0 8px; font-weight: 700; letter-spacing: -.3px }
h2 { font-size: 17px; margin: 0 0 12px; color: var(--navy); font-weight: 700; letter-spacing: -.2px }
.muted { color: var(--muted); font-size: 13px }
a { color: var(--teal) }

/* Icones SVG inline */
.ic { width: 18px; height: 18px; vertical-align: -3.5px; flex: none }
.ic-lg { width: 26px; height: 26px }
.ic-xl { width: 44px; height: 44px }

/* Surfaces */
.center-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--clay-soft);
}
.glass {
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-line);
  box-shadow: 0 14px 40px rgba(14, 42, 69, .12);
}

/* Boutons clay */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  color: #fff; border: none; border-radius: 14px;
  padding: 12px 22px; font-size: 14px; font-weight: 600; letter-spacing: .2px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 18px rgba(14, 42, 69, .25), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -2px 4px rgba(0, 0, 0, .14);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05) }
.btn:active { transform: translateY(1px); box-shadow: 0 3px 8px rgba(14, 42, 69, .2), inset 0 2px 5px rgba(0, 0, 0, .18) }
.btn.green { background: linear-gradient(180deg, var(--teal-2), var(--teal)); box-shadow: var(--clay-btn) }
.btn.ghost {
  background: var(--glass-strong); color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(14, 42, 69, .07), inset 0 1px 0 #fff;
}
.btn:disabled { opacity: .5; cursor: not-allowed }

/* Formulaires */
input, select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 14px; font-family: inherit; color: var(--text);
  background: rgba(255, 255, 255, .85);
  box-shadow: inset 0 2px 5px rgba(14, 42, 69, .05);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: inset 0 2px 5px rgba(14, 42, 69, .04), 0 0 0 3px rgba(16, 150, 124, .15);
}
label { font-size: 13px; font-weight: 600; display: block; margin: 14px 0 5px; color: var(--ink) }
.error { color: var(--alert); font-size: 13px; margin-top: 8px }

/* Barre superieure : verre sur fond profond */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(90deg, rgba(14, 42, 69, .92), rgba(22, 57, 92, .90));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: #fff; padding: 14px 26px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar .brand { font-weight: 700; font-size: 17px; letter-spacing: -.2px }
.topbar .brand span { color: #7ed4bb }

.wrap { max-width: 1100px; margin: 26px auto; padding: 0 20px }

/* Tuiles stats clay */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 16px; margin-bottom: 24px }
.stat {
  background: linear-gradient(160deg, #ffffff, #f3f7fb);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--r-lg); padding: 18px;
  box-shadow: var(--clay);
}
.stat .v { font-size: 27px; font-weight: 800; color: var(--navy); letter-spacing: -.5px }
.stat .l { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45 }
.stat.euro .v { color: var(--teal) }
.stat.alerte .v { color: var(--alert) }
.stat.attente .v { color: var(--warn) }
.stat.attente { background: linear-gradient(160deg, #fffdf7, var(--warn-bg)) }

/* Tableaux */
.table-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--clay-soft) }
table { width: 100%; border-collapse: collapse }
th, td { padding: 12px 16px; text-align: left; font-size: 13.5px; border-bottom: 1px solid var(--line) }
th { background: rgba(238, 243, 248, .7); color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px }
tr:last-child td { border-bottom: none }
tr.clickable { cursor: pointer; transition: background .12s }
tr.clickable:hover { background: rgba(16, 150, 124, .05) }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.badge.a_valider { background: var(--warn-bg); color: var(--warn) }
.badge.valide { background: var(--ok-bg); color: var(--ok) }
.badge.urgent { background: var(--alert-bg); color: var(--alert) }
.badge.info { background: #e8eef7; color: var(--navy) }

.flex { display: flex; gap: 14px; align-items: center }
.spread { justify-content: space-between }
.mt { margin-top: 20px }

/* Detail bilan */
.alert-box {
  border-left: 4px solid var(--alert); background: var(--alert-bg);
  padding: 13px 17px; border-radius: var(--r-sm); margin-bottom: 10px; font-size: 13.5px;
  box-shadow: var(--clay-soft);
}
.alert-box.important { border-color: var(--warn); background: var(--warn-bg) }
.alert-box b { display: flex; align-items: center; gap: 7px; margin-bottom: 4px }
.domaine { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; box-shadow: var(--clay-soft) }
.domaine > header { background: linear-gradient(90deg, rgba(14, 42, 69, .06), rgba(16, 150, 124, .06)); padding: 11px 17px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 9px }
.domaine .body { padding: 12px 18px }
.domaine h4 { margin: 8px 0 4px; font-size: 11.5px; text-transform: uppercase; color: var(--muted); letter-spacing: .5px }
.domaine ul { margin: 4px 0; padding-left: 20px; font-size: 13.5px }
.domaine li { margin-bottom: 3px }
.reponses { font-size: 13px }
.reponses .page-title { font-weight: 700; color: var(--navy); margin: 14px 0 6px }
.reponses .row { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; border-bottom: 1px dashed var(--line) }
.reponses .row .q { color: var(--muted); max-width: 60% }

.qr-panel { text-align: center }
.qr-panel img { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; background: #fff; box-shadow: var(--clay) }

/* Onglets clay */
.tabs { display: flex; gap: 8px; margin-bottom: 20px }
.tabs button {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: var(--glass-strong);
  padding: 10px 18px; border-radius: 13px; font-size: 13.5px; font-weight: 600;
  cursor: pointer; color: var(--muted);
  box-shadow: 0 4px 10px rgba(14, 42, 69, .06), inset 0 1px 0 #fff;
  transition: all .15s;
}
.tabs button.active {
  background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: #fff; border-color: transparent;
  box-shadow: 0 8px 18px rgba(14, 42, 69, .25), inset 0 1px 0 rgba(255, 255, 255, .18);
}

/* Modale verre */
dialog { border: none; border-radius: var(--r-lg); padding: 0; max-width: 880px; width: 92%; max-height: 88vh; box-shadow: 0 30px 80px rgba(10, 25, 45, .35) }
dialog::backdrop { background: rgba(10, 25, 45, .45); backdrop-filter: blur(4px) }
.dialog-inner { padding: 28px; overflow-y: auto; max-height: 88vh; background: linear-gradient(180deg, #fdfefe, #f4f8fb) }

/* Onboarding : engagement progressif (captologie : commitment et progression visible) */
.onb { margin-bottom: 22px; border-left: 4px solid var(--teal); padding: 22px 24px }
.onb .head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px }
.onb .head strong { font-size: 15px }
.onb .progress { height: 8px; border-radius: 6px; background: rgba(14, 42, 69, .08); overflow: hidden; margin: 10px 0 14px; box-shadow: inset 0 1px 3px rgba(14, 42, 69, .12) }
.onb .progress i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal-2), var(--teal)); transition: width .4s ease }
.onb .step-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px }
.onb .step-row.done { color: var(--muted); text-decoration: line-through }
.onb .dot { width: 22px; height: 22px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(14, 42, 69, .08); color: transparent }
.onb .step-row.done .dot { background: var(--ok-bg); color: var(--ok) }