/* shared.css — Design system Homepage Steph v1
   Light mode (blanc/gris, Manrope + Bebas Neue).
   Remplace palette dark-blue. 2026-05-23 V1.9 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Bebas+Neue&display=swap');

:root {
  /* Surfaces */
  --bg:       #f5f5f3;
  --surface:  #ffffff;
  --surface2: #f0f0ee;
  --surface3: #e8e8e5;
  --border:        rgba(0,0,0,.10);
  --border-bright: rgba(0,0,0,.18);
  /* Texte */
  --text:     #111111;
  --text-mid: #555555;
  --text-dim: #999999;
  /* Accents — inchangés */
  --accent:        #111111;
  --accent-blue:   #1a6fd4;
  --accent-green:  #1a9e5c;
  --accent-red:    #d93050;
  --accent-orange: #d97000;
  --accent-teal:   #0f8a7a;
  --accent-purple: #6b45d4;
  /* Misc */
  --radius:    2px;
  --radius-md: 6px;
  --shadow:    0 1px 3px rgba(0,0,0,.08);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.12);
  --nav-h:     48px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:14px; }
body { background:var(--bg); color:var(--text); font-family:'Manrope',-apple-system,sans-serif; font-size:13px; line-height:1.5; min-height:100vh; }
a { color:var(--accent-blue); text-decoration:none; }
a:hover { text-decoration:underline; color:var(--text); }
code,pre { font-family:'SF Mono',ui-monospace,monospace; font-size:11px; background:var(--surface2); color:var(--text-mid); padding:1px 5px; border-radius:var(--radius); }
pre { padding:.75rem 1rem; overflow-x:auto; }

/* Nav */
.nav { display:flex; align-items:center; padding:0 16px; height:var(--nav-h); background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:100; gap:4px; }
.nav-brand { font-family:'Bebas Neue',sans-serif; font-size:50px !important; letter-spacing:3px; color:var(--text); margin-right:12px; flex-shrink:0; text-decoration:none; }
.nav-brand:hover { text-decoration:none; color:var(--text); }
.nav-brand span { color:var(--accent-blue); }
.nav a { padding:3px 9px; border:1px solid transparent; border-radius:var(--radius); color:var(--text-mid); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; transition:all .15s; text-decoration:none; }
.nav a:hover { color:var(--text); text-decoration:none; border-color:var(--border-bright); }
.nav a.active { color:var(--text); border-color:var(--border-bright); background:var(--surface2); }
.nav-spacer { flex:1; }

/* Layout */
.container { max-width:1400px; margin:0 auto; padding:1.5rem; }
.page-header { display:flex; align-items:baseline; gap:1rem; margin-bottom:1.25rem; }
.page-title { font-family:'Bebas Neue',sans-serif; font-size:22px; letter-spacing:2px; color:var(--text); }
.page-meta { font-size:11px; color:var(--text-dim); }
.section-title { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.75rem; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.25rem; box-shadow:var(--shadow); }
.card h2 { font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.75rem; }
.card-danger { border-left:3px solid var(--accent-red); }
.card-note   { border-left:3px solid var(--accent-purple); }
.card-wide   { grid-column:1/-1; }
.card-desc   { font-size:12px; color:var(--text-mid); margin-bottom:1rem; line-height:1.5; }

/* Module cards (dashboard) */
.modules-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.75rem; }
.module-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1rem; display:block; color:var(--text); transition:border-color .15s,box-shadow .15s; text-decoration:none; }
.module-card:hover { border-color:var(--border-bright); box-shadow:var(--shadow-lg); text-decoration:none; color:var(--text); }
.module-card .path { display:block; margin-top:.5rem; font-family:'SF Mono',ui-monospace,monospace; font-size:10px; color:var(--text-dim); }
.module-icon  { font-size:20px; margin-bottom:.5rem; }
.module-name  { font-size:13px; font-weight:600; color:var(--text); margin-bottom:.25rem; }
.module-desc  { font-size:12px; color:var(--text-mid); }

/* Stats */
.stats-bar { display:grid; grid-template-columns:repeat(5,1fr); gap:.75rem; margin-bottom:1.25rem; }
.stat-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.875rem 1rem; }
.stat-label { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px; font-weight:700; }
.stat-value { font-size:22px; font-weight:600; color:var(--text); }
.stat-value.ok  { color:var(--accent-green); }
.stat-value.ko  { color:var(--accent-red); }
.stat-value.dim { color:var(--text-dim); }

/* Filtres */
.filters { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.75rem 1rem; display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem; }
.filters input,.filters select,.select-label { height:30px; padding:0 9px; border:1px solid var(--border-bright); border-radius:var(--radius); font-size:12px; font-family:'Manrope',sans-serif; background:var(--surface); color:var(--text); }
.filters input { flex:1; min-width:180px; }
.filters select { min-width:140px; }
.select-label { max-width:200px; }
.filters input:focus,.filters select:focus,.select-label:focus { outline:none; border-color:var(--accent-blue); }

/* Boutons */
.btn { height:30px; padding:0 12px; border-radius:var(--radius); border:1px solid var(--border-bright); background:var(--surface); font-size:11px; font-weight:700; font-family:'Manrope',sans-serif; text-transform:uppercase; cursor:pointer; color:var(--text-mid); white-space:nowrap; display:inline-flex; align-items:center; gap:5px; text-decoration:none; transition:all .15s; }
.btn:hover { color:var(--text); border-color:var(--border-bright); background:var(--surface2); text-decoration:none; }
.btn-primary { background:var(--accent-blue); color:#fff; border-color:var(--accent-blue); }
.btn-primary:hover { filter:brightness(1.1); color:#fff; }
.btn-success { background:var(--accent-green); color:#fff; border-color:var(--accent-green); }
.btn-success:hover { filter:brightness(1.1); color:#fff; }
.btn-danger { color:var(--accent-red); border-color:var(--accent-red); background:transparent; }
.btn-danger:hover { background:rgba(217,48,80,.08); color:var(--accent-red); }
.btn-ghost { background:transparent; color:var(--text-dim); }
.btn-ghost:hover { color:var(--text); background:var(--surface2); }
.btn-sm { height:26px; font-size:10px; padding:0 9px; }

/* Table */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
thead { background:var(--surface2); }
th { text-align:left; font-size:10px; font-weight:700; color:var(--text-dim); text-transform:uppercase; letter-spacing:.06em; padding:9px 12px; border-bottom:1px solid var(--border-bright); }
td { padding:8px 12px; border-bottom:1px solid var(--border); vertical-align:middle; font-size:12px; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--surface2); }
tr.corrected td { background:rgba(217,112,0,.05); }
tr.validated td  { background:rgba(26,158,92,.05); }
tr.ignored td    { opacity:.4; }
.sender-email  { font-size:11px; color:var(--text-dim); }
.subject-text  { font-weight:500; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }
.reasoning-text { font-size:11px; color:var(--text-mid); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Badges */
.badge { display:inline-block; font-size:10px; font-weight:700; padding:2px 7px; border-radius:1px; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.badge-famille    { background:rgba(26,158,92,.12);  color:var(--accent-green); }
.badge-boulot     { background:rgba(107,69,212,.12); color:var(--accent-purple); }
.badge-admin      { background:rgba(26,111,212,.12); color:var(--accent-blue); }
.badge-sante      { background:rgba(217,48,80,.10);  color:var(--accent-red); }
.badge-ecoles     { background:rgba(217,112,0,.12);  color:var(--accent-orange); }
.badge-photo      { background:rgba(15,138,122,.12); color:var(--accent-teal); }
.badge-newsletter { background:var(--surface2); color:var(--text-mid); }
.badge-people     { background:var(--surface2); color:var(--text-mid); }
.badge-ok   { background:rgba(26,158,92,.12);  color:var(--accent-green); }
.badge-warn { background:rgba(217,112,0,.12);  color:var(--accent-orange); }
.badge-err  { background:rgba(217,48,80,.10);  color:var(--accent-red); }

/* Actions / pagination */
.actions { display:flex; gap:6px; align-items:center; }
.pagination { display:flex; align-items:center; gap:8px; padding:1rem 0 0; font-size:12px; color:var(--text-dim); }
.pagination .spacer { flex:1; }

/* Grilles */
.stats-grid    { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem; }
.analysis-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1rem; }
.tools-grid    { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:1.25rem; margin-top:1rem; }

/* Bar charts */
.bar-row   { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; }
.bar-label { width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.bar-track { flex:1; background:var(--surface2); border-radius:2px; height:6px; }
.bar-fill  { height:6px; border-radius:2px; background:var(--accent-blue); }
.bar-fill-bad  { background:var(--accent-red); }
.bar-fill-warn { background:var(--accent-orange); }
.bar-count { width:40px; text-align:right; color:var(--text-dim); font-size:11px; }
.rate-ok   { color:var(--accent-green);  font-weight:600; }
.rate-warn { color:var(--accent-orange); font-weight:600; }
.rate-bad  { color:var(--accent-red);    font-weight:600; }

/* Corrections / examples */
.correction-row { font-size:12px; color:var(--text); padding:5px 0; border-bottom:1px solid var(--border); display:flex; gap:8px; align-items:baseline; }
.correction-row:last-child { border-bottom:none; }
.correction-ts  { color:var(--text-dim); font-size:11px; white-space:nowrap; }
.arrow          { color:var(--accent-red); font-weight:600; }
.efficiency-ok   { color:var(--accent-green);  font-weight:600; }
.efficiency-warn { color:var(--accent-orange); font-weight:600; }
.efficiency-bad  { color:var(--accent-red);    font-weight:600; }
.source-corrected { color:var(--accent-red);   font-size:11px; font-weight:500; }
.source-validated { color:var(--accent-green); font-size:11px; font-weight:500; }

/* Matrice confusion */
.confusion-table { border-collapse:collapse; font-size:11px; width:100%; }
.confusion-table th,.confusion-table td { border:1px solid var(--border-bright); padding:4px 6px; text-align:center; white-space:nowrap; }
.conf-header-label { text-align:left!important; min-width:140px; background:var(--surface2); font-weight:600; color:var(--text-dim); }
.conf-col-header   { background:var(--surface2); font-weight:600; color:var(--text); max-width:80px; overflow:hidden; text-overflow:ellipsis; }
.conf-row-label    { text-align:left!important; background:var(--surface2); }
.conf-diag  { background:rgba(26,158,92,.12);  font-weight:600; color:var(--accent-green); }
.conf-error { background:rgba(217,48,80,.10);  font-weight:500; color:var(--accent-red); }
.conf-zero  { color:var(--border-bright); }
.conf-cell  { min-width:32px; }

/* Services grid */
.services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.75rem; }
.service-card  { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:.875rem 1rem; transition:border-color .15s; }
.service-header { display:flex; align-items:center; gap:.5rem; }
.service-dot    { width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--border-bright); }
.service-name   { font-size:12px; font-weight:500; color:var(--text); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.service-status-label { font-size:11px; color:var(--text-dim); white-space:nowrap; }
.service-meta   { font-size:11px; color:var(--text-dim); margin-top:.375rem; padding-left:1.25rem; }
.status-up       .service-dot { background:var(--accent-green); }
.status-up       .service-status-label { color:var(--accent-green); }
.status-up       { border-left:2px solid var(--accent-green); }
.status-down     .service-dot { background:var(--accent-red); }
.status-down     .service-status-label { color:var(--accent-red); }
.status-down     { border-left:2px solid var(--accent-red); }
.status-degraded .service-dot { background:var(--accent-orange); }
.status-degraded .service-status-label { color:var(--accent-orange); }
.status-degraded { border-left:2px solid var(--accent-orange); }
.status-timeout  .service-dot { background:var(--accent-orange); }
.status-timeout  .service-status-label { color:var(--accent-orange); }
.status-error    .service-dot { background:var(--text-dim); }
.status-error    .service-status-label { color:var(--text-dim); }

/* Log viewer */
.log-viewer { background:var(--surface2); color:var(--text-mid); font-family:'SF Mono',monospace; font-size:11px; line-height:1.5; padding:.75rem 1rem; border-radius:var(--radius); height:260px; overflow-y:auto; white-space:pre-wrap; word-break:break-all; border:1px solid var(--border-bright); }
.log-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }

/* Tool result */
.tool-result         { margin-top:.75rem; padding:.5rem .875rem; border-radius:var(--radius); font-size:12px; border:1px solid var(--border); }
.tool-result-pending { background:rgba(217,112,0,.08);  color:var(--accent-orange); border-color:rgba(217,112,0,.2); }
.tool-result-ok      { background:rgba(26,158,92,.08);  color:var(--accent-green);  border-color:rgba(26,158,92,.2); }
.tool-result-err     { background:rgba(217,48,80,.08);  color:var(--accent-red);    border-color:rgba(217,48,80,.2); }

/* Thermals */
.th-metric  { display:flex; flex-direction:column; gap:3px; }
.th-label   { font-size:10px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.04em; font-weight:700; }
.th-value   { font-size:18px; font-weight:600; color:var(--text); }
.th-bar-bg  { background:var(--surface2); border-radius:2px; height:5px; overflow:hidden; border:1px solid var(--border); }
.th-bar     { height:100%; border-radius:2px; transition:width .4s ease; width:0%; }

/* Modale */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:200; }
.modal-box     { background:var(--surface); border:1px solid var(--border-bright); border-radius:var(--radius-md); padding:1.5rem; max-width:440px; width:90%; box-shadow:var(--shadow-lg); }
.modal-title   { font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px; color:var(--accent-red); margin-bottom:.75rem; }
.modal-body    { font-size:13px; color:var(--text-mid); line-height:1.6; margin-bottom:1.25rem; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; }

/* Toast */
.toast { position:fixed; bottom:1.5rem; right:1.5rem; background:var(--surface); border:1px solid var(--border-bright); color:var(--text); padding:9px 16px; border-radius:var(--radius); font-size:12px; font-weight:500; z-index:999; opacity:0; transition:opacity .2s; pointer-events:none; box-shadow:var(--shadow-lg); }
.toast.show     { opacity:1; }
.toast.toast-ok  { border-color:var(--accent-green); color:var(--accent-green); }
.toast.toast-err { border-color:var(--accent-red);   color:var(--accent-red); }

/* Misc */
.empty { text-align:center; padding:3rem; color:var(--text-dim); font-size:13px; }
.htmx-indicator { opacity:0; transition:opacity .2s; }
.htmx-request .htmx-indicator { opacity:1; }