/* ═══════════════════════════════════════════════════════════
   Veille Qualiopi ARM — PFPS CHU de Rennes
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: #F0F2F5; color: #1a1f2e; min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

/* Wrapper global — contient tout le débordement */
.app-wrapper {
  width: 100%; max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* ─── Tokens ─────────────────────────────────────────────── */
:root {
  --blue-900: #0D2B52; --blue-800: #133D78; --blue-700: #1B4F9A;
  --blue-500: #2B72CC; --blue-300: #7BAEE0; --blue-100: #DBE9F8; --blue-50: #EEF5FC;
  --gray-900: #1a1f2e; --gray-700: #374151; --gray-500: #6B7280;
  --gray-300: #D1D5DB; --gray-200: #E5E7EB; --gray-100: #F3F4F6; --gray-50: #F9FAFB;
  --red-700: #B91C1C;  --red-600: #DC2626;  --red-100: #FEE2E2; --red-50: #FEF2F2;
  --amber-700: #B45309; --amber-600: #D97706; --amber-100: #FEF3C7; --amber-50: #FFFBEB;
  --green-700: #15803D; --green-600: #16A34A; --green-100: #DCFCE7; --green-50: #F0FDF4;
  --i23-dark: #3730A3; --i23-mid: #4F46E5; --i23-light: #EEF2FF; --i23-border: #C7D2FE;
  --i24-dark: #065F46; --i24-mid: #059669; --i24-light: #ECFDF5; --i24-border: #A7F3D0;
  --i25-dark: #92400E; --i25-mid: #D97706; --i25-light: #FFFBEB; --i25-border: #FDE68A;
  --radius-sm: 6px; --radius-md: 9px; --radius-lg: 13px; --radius-xl: 18px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --header-h: 60px; --nav-h: 48px;
}

/* ─── Header ─────────────────────────────────────────────── */
.app-header {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: var(--blue-800); color: #fff;
  height: var(--header-h); box-shadow: var(--shadow-md);
}
.header-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 1.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.header-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.app-header h1 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  background: rgba(255,255,255,.2); padding: 2px 7px; border-radius: 20px;
  vertical-align: middle; margin-left: 4px;
}
.brand-sub { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 1px; white-space: nowrap; }
.header-status { text-align: right; flex-shrink: 0; }
.status-live { font-size: 12px; color: rgba(255,255,255,.85); display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ADE80; display: inline-block;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.status-date { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; display: block; }

/* ─── Tab nav ────────────────────────────────────────────── */
.tab-nav {
  position: sticky; top: var(--header-h); z-index: 90;
  width: 100%;
  background: #fff; border-bottom: 1px solid var(--gray-200);
  display: flex; gap: 0; padding: 0 1.5rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: var(--nav-h);
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 400;
  color: var(--gray-500); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap; flex-shrink: 0;
}
.tab-btn:hover { color: var(--gray-900); }
.tab-btn.active { color: var(--blue-700); font-weight: 500; border-bottom-color: var(--blue-700); }
.tab-badge {
  font-size: 10.5px; font-weight: 600;
  background: var(--red-600); color: #fff;
  padding: 1px 6px; border-radius: 20px; display: none;
}
.tab-badge:not(:empty) { display: inline-block; }

/* ─── Main / panels ──────────────────────────────────────── */
.app-main { max-width: 1240px; margin: 0 auto; padding: 1.5rem; }
.panel { display: none; }
.panel.active { display: block; animation: fadeIn .18s ease; }
@keyframes fadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }

/* ─── Card ───────────────────────────────────────────────── */
.card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); overflow: hidden;
  min-width: 0; max-width: 100%;
}

/* ─── KPI Grid ───────────────────────────────────────────── */
.kpi-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 1.25rem; }
.kpi-card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-sm); min-width: 0;
}
.kpi-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-500); margin-bottom: 6px; }
.kpi-value { font-size: 30px; font-weight: 600; line-height: 1; margin-bottom: 4px; font-family: 'DM Mono', monospace; }
.kpi-sub   { font-size: 12px; color: var(--gray-500); }
.kpi-alert  .kpi-value { color: var(--red-600); }
.kpi-warn   .kpi-value { color: var(--amber-600); }
.kpi-ok     .kpi-value { color: var(--green-600); }
.kpi-neutral.kpi-value { color: var(--blue-700); }

/* ─── Section title ──────────────────────────────────────── */
.section-title {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; color: var(--gray-500);
  margin: 0 0 .75rem; display: flex; align-items: center; gap: 8px;
}
.section-title::after { content:''; flex:1; height:1px; background: var(--gray-200); }

/* ─── Indicateurs Qualiopi ───────────────────────────────── */
.ind-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 1.25rem; }
.ind-card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); padding: 1.1rem 1.25rem;
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
  box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden;
}
.ind-card:hover { box-shadow: var(--shadow-md); }
.ind-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.ind-badge  { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; letter-spacing: .02em; flex-shrink: 0; }
.ind-count  { font-size: 20px; font-weight: 600; font-family: 'DM Mono', monospace; }
.ind-title  { font-size: 13.5px; font-weight: 600; margin-bottom: 5px; color: var(--gray-900); }
.ind-desc   { font-size: 12px; color: var(--gray-500); line-height: 1.5; margin-bottom: 10px; }
.ind-bar    { height: 4px; background: var(--gray-200); border-radius: 4px; overflow: hidden; }
.ind-bar-fill { height: 100%; border-radius: 4px; transition: width .6s ease; }

.i23 { background: var(--i23-light); color: var(--i23-dark); }
.i24 { background: var(--i24-light); color: var(--i24-dark); }
.i25 { background: var(--i25-light); color: var(--i25-dark); }
.fill-23 { background: var(--i23-mid); }
.fill-24 { background: var(--i24-mid); }
.fill-25 { background: var(--i25-mid); }
.ind-23 { border-top: 3px solid var(--i23-mid); }
.ind-24 { border-top: 3px solid var(--i24-mid); }
.ind-25 { border-top: 3px solid var(--i25-mid); }
.ind-23 .ind-count { color: var(--i23-dark); }
.ind-24 .ind-count { color: var(--i24-dark); }
.ind-25 .ind-count { color: var(--i25-dark); }

/* ─── Dashboard bottom ───────────────────────────────────── */
.dash-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Recent signaux */
.recent-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--gray-100);
  min-width: 0; overflow: hidden;
}
.recent-item:last-child { border-bottom: none; }
.ri-badges { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; padding-top: 1px; }
.ri-body   { flex: 1; min-width: 0; overflow: hidden; }
.ri-title  { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ri-meta   { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* Blocs dashboard */
.bloc-mini {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: .65rem 1.1rem; border-bottom: 1px solid var(--gray-100);
  min-width: 0; overflow: hidden;
}
.bloc-mini:last-child { border-bottom: none; }
.bloc-num {
  font-size: 11px; font-weight: 700; width: 26px; height: 26px; flex-shrink: 0;
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); color: var(--blue-700);
}
.bloc-info  { flex: 1; min-width: 0; overflow: hidden; }
.bloc-title { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloc-sub   { font-size: 11px; color: var(--gray-500); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloc-alert { flex-shrink: 0; }

/* ─── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 20px; white-space: nowrap; line-height: 1.4;
}
.badge-new       { background: var(--red-100);   color: var(--red-700);   }
.badge-en_cours  { background: var(--amber-100);  color: var(--amber-700); }
.badge-traite    { background: var(--green-100);  color: var(--green-700); }
.badge-high      { background: var(--red-100);    color: var(--red-700);   }
.badge-medium    { background: var(--amber-100);  color: var(--amber-700); }
.badge-low       { background: var(--gray-100);   color: var(--gray-700);  }
.badge-signal    { background: var(--blue-100);   color: var(--blue-800);  }
.badge-analyse   { background: var(--i23-light);  color: var(--i23-dark);  }
.badge-maj_pedago{ background: var(--i25-light);  color: var(--i25-dark);  }
.badge-audit     { background: var(--gray-100);   color: var(--gray-700);  }
.badge-reunion   { background: var(--gray-100);   color: var(--gray-700);  }
.badge-autre     { background: var(--gray-100);   color: var(--gray-700);  }

/* ─── Toolbar ────────────────────────────────────────────── */
.panel-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 1rem; flex-wrap: wrap;
}
.toolbar-filters { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.toolbar-filters input[type="search"],
.toolbar-filters select {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; background: #fff; color: var(--gray-900);
  transition: border-color .15s;
}
.toolbar-filters input[type="search"] { min-width: 160px; flex: 1; }
.toolbar-filters input:focus, .toolbar-filters select:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(43,114,204,.12);
}

/* ─── Buttons ────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  background: var(--blue-700); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.btn-primary:hover { background: var(--blue-800); }
.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px;
  background: #fff; color: var(--gray-700);
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; font-weight: 400;
  cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.btn-outline:hover { background: var(--gray-50); border-color: var(--gray-400); }
.btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  background: #fff; color: var(--gray-700);
  border: 1px solid var(--gray-300); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background .12s;
}
.btn-sm:hover { background: var(--gray-50); }
.btn-danger-sm {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  background: #fff; color: var(--red-600);
  border: 1px solid var(--red-100); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 12px; cursor: pointer;
  transition: background .12s;
}
.btn-danger-sm:hover { background: var(--red-50); }

/* ─── Signal cards ───────────────────────────────────────── */
.signal-card {
  background: #fff; border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200); margin-bottom: 10px;
  box-shadow: var(--shadow-sm); overflow: hidden;
  transition: border-color .15s; min-width: 0;
}
.signal-card:hover { border-color: var(--blue-300); }
.signal-card.statut-traite { opacity: .7; }
.sc-head {
  padding: .85rem 1.1rem;
  display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
}
.sc-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; flex: 1; min-width: 0; }
.sc-date   { font-size: 11px; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; }
.sc-body   { padding: 0 1.1rem .85rem; }
.sc-title  { font-size: 14.5px; font-weight: 600; color: var(--gray-900); margin-bottom: 5px; word-break: break-word; }
.sc-source { font-size: 11.5px; color: var(--gray-500); margin-bottom: 6px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.sc-source a { color: var(--blue-700); text-decoration: none; }
.sc-source a:hover { text-decoration: underline; }
.sc-desc   { font-size: 13px; color: var(--gray-700); line-height: 1.6; margin-bottom: 8px; word-break: break-word; }
.sc-modules { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 8px; }
.mod-tag {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  background: var(--blue-50); color: var(--blue-800);
  border: 1px solid var(--blue-100); border-radius: 20px;
  cursor: pointer; transition: background .12s;
}
.mod-tag:hover { background: var(--blue-100); }
.sc-trace {
  margin-bottom: 8px; padding: 8px 10px;
  background: var(--green-50); border-radius: var(--radius-md);
  border-left: 3px solid var(--green-600);
}
.sc-trace-item { font-size: 11.5px; color: var(--gray-700); line-height: 1.5; }
.sc-trace-item + .sc-trace-item { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--green-100); }
.sc-trace-meta { font-size: 10.5px; color: var(--gray-500); }
.sc-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: .65rem 1.1rem; border-top: 1px solid var(--gray-100);
  background: var(--gray-50);
}

/* ─── Référentiel ────────────────────────────────────────── */
.ref-intro {
  display: flex; align-items: flex-start; gap: 8px;
  padding: .85rem 1.1rem; margin-bottom: 1.1rem;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg); font-size: 13px; color: var(--blue-800);
}
.bloc-section { margin-bottom: 1.5rem; }
.bloc-header {
  display: flex; align-items: center; gap: 12px;
  padding: .85rem 1.1rem;
  background: #fff; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border: 1px solid var(--gray-200); border-bottom: none;
  flex-wrap: wrap;
}
.bloc-num-lg {
  width: 34px; height: 34px; border-radius: var(--radius-md); flex-shrink: 0;
  background: var(--blue-700); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.bloc-header h2 { font-size: 14.5px; font-weight: 600; flex: 1; min-width: 0; }
.bloc-meta { font-size: 11.5px; color: var(--gray-500); white-space: nowrap; }
.modules-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  border: 1px solid var(--gray-200);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden;
}
.module-card {
  background: #fff; padding: 1rem 1.1rem;
  border-right: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200);
  cursor: pointer; transition: background .12s; min-width: 0;
}
.module-card:hover { background: var(--blue-50); }
.module-card.has-alert { border-left: 3px solid var(--amber-600); padding-left: calc(1.1rem - 2px); }
.module-card.all-ok    { border-left: 3px solid var(--green-600); padding-left: calc(1.1rem - 2px); }
.mc-code  { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--blue-700); margin-bottom: 5px; font-family: 'DM Mono', monospace; }
.mc-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.mc-sub   { font-size: 11.5px; color: var(--gray-500); margin-bottom: 8px; }
.mc-duree { font-size: 11px; color: var(--gray-400); font-family: 'DM Mono', monospace; }
.mc-alerts { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.mc-alert-item { font-size: 11px; padding: 3px 7px; border-radius: var(--radius-sm); display: flex; align-items: center; gap: 4px; }
.mc-alert-item.warn { background: var(--amber-100); color: var(--amber-700); }
.mc-alert-item.ok   { background: var(--green-100); color: var(--green-700); }

/* ─── Module detail modal ────────────────────────────────── */
.module-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 1rem; flex-wrap: wrap; }
.module-detail-num  { font-size: 13px; font-weight: 700; font-family: 'DM Mono', monospace; padding: 4px 10px; background: var(--blue-50); color: var(--blue-800); border-radius: var(--radius-sm); border: 1px solid var(--blue-100); }
.module-detail-title{ font-size: 16px; font-weight: 600; }
.module-detail-sub  { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.detail-section { margin-bottom: 1rem; }
.detail-section h4  { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gray-500); margin-bottom: 6px; }
.detail-list { list-style: none; }
.detail-list li { font-size: 13px; color: var(--gray-700); padding: 4px 0 4px 14px; border-bottom: 1px solid var(--gray-100); position: relative; line-height: 1.5; }
.detail-list li::before { content: '—'; position: absolute; left: 0; color: var(--gray-400); font-size: 12px; }
.detail-list li:last-child { border-bottom: none; }
.linked-signals { margin-top: .75rem; }
.linked-signal-item { display: flex; align-items: flex-start; gap: 8px; padding: .6rem .85rem; background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--radius-md); margin-bottom: 6px; }
.lsi-title { font-size: 13px; font-weight: 500; }
.lsi-meta  { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

/* ─── Journal / Traçabilité ──────────────────────────────── */
.audit-banner {
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem; margin-bottom: 1rem;
  font-size: 13px; color: var(--blue-900);
}
.audit-banner h3 { font-size: 13.5px; font-weight: 600; margin-bottom: .5rem; }
.audit-stats  { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.audit-stat   { text-align: center; }
.audit-stat-val { font-size: 20px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--blue-700); }
.audit-stat-lbl { font-size: 11px; color: var(--gray-500); }

.journal-item { display: flex; align-items: flex-start; gap: 12px; padding: .85rem 1.1rem; border-bottom: 1px solid var(--gray-100); min-width: 0; }
.journal-item:last-child { border-bottom: none; }
.ji-timeline  { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.ji-dot       { width: 10px; height: 10px; border-radius: 50%; background: var(--blue-500); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--blue-300); margin-top: 3px; }
.ji-dot.signal    { background: var(--blue-500);  box-shadow: 0 0 0 1px var(--blue-300); }
.ji-dot.analyse   { background: var(--i23-mid);   box-shadow: 0 0 0 1px var(--i23-border); }
.ji-dot.maj_pedago{ background: var(--green-600); box-shadow: 0 0 0 1px var(--green-100); }
.ji-dot.audit     { background: var(--gray-500);  box-shadow: 0 0 0 1px var(--gray-300); }
.ji-line  { width: 1px; flex: 1; background: var(--gray-200); min-height: 16px; margin: 3px 0; }
.ji-body  { flex: 1; min-width: 0; overflow: hidden; }
.ji-head  { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.ji-date  { font-size: 11px; color: var(--gray-500); font-family: 'DM Mono', monospace; flex-shrink: 0; margin-left: auto; }
.ji-title { font-size: 13px; font-weight: 500; word-break: break-word; }
.ji-desc  { font-size: 12.5px; color: var(--gray-600); line-height: 1.55; margin-top: 3px; word-break: break-word; }
.ji-auteur{ font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* ─── Modals ─────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.5); backdrop-filter: blur(2px);
  align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay.open { display: flex; animation: fadeIn .15s ease; }
.modal-box {
  background: #fff; border-radius: var(--radius-xl);
  width: 100%; max-width: 600px; max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.modal-box-sm { max-width: 460px; }
.modal-box-lg { max-width: 740px; }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--gray-200); flex-shrink: 0;
}
.modal-head h2  { font-size: 15px; font-weight: 600; }
.modal-close    { width: 28px; height: 28px; border: none; background: transparent; border-radius: var(--radius-sm); cursor: pointer; color: var(--gray-500); display: flex; align-items: center; justify-content: center; transition: background .12s; }
.modal-close:hover { background: var(--gray-100); }
.modal-body  { padding: 1.2rem 1.4rem; overflow-y: auto; flex: 1; }
.modal-context { font-size: 13px; color: var(--gray-700); margin-bottom: 1rem; padding: .65rem .85rem; background: var(--blue-50); border-radius: var(--radius-md); }
.modal-foot  { display: flex; justify-content: flex-end; gap: 8px; padding: .85rem 1.4rem; border-top: 1px solid var(--gray-200); flex-shrink: 0; }

/* ─── Forms ──────────────────────────────────────────────── */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.fg-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--gray-700); }
.required { color: var(--red-600); }
.form-group input, .form-group select, .form-group textarea {
  height: 36px; padding: 0 10px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md);
  font-family: inherit; font-size: 13px; color: var(--gray-900);
  background: #fff; transition: border-color .15s; width: 100%;
}
.form-group textarea { height: auto; padding: 8px 10px; resize: vertical; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(43,114,204,.12);
}

/* Modules picker */
.modules-picker {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
  border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: #fff;
}
.mod-pick-btn {
  padding: 4px 10px; font-size: 12px; font-weight: 500;
  border: 1px solid var(--gray-300); border-radius: 20px;
  background: #fff; color: var(--gray-600);
  cursor: pointer; transition: all .12s; font-family: inherit;
}
.mod-pick-btn:hover { border-color: var(--blue-400); color: var(--blue-800); }
.mod-pick-btn.selected { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }
.mod-pick-label { width: 100%; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-400); margin-top: 4px; margin-bottom: 2px; }

/* ─── Toast ──────────────────────────────────────────────── */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; display: flex; flex-direction: column; gap: 8px; z-index: 300; max-width: calc(100vw - 2rem); }
.toast { display: flex; align-items: center; gap: 8px; padding: .65rem 1rem; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); animation: slideIn .2s ease; word-break: break-word; }
@keyframes slideIn { from{transform:translateX(20px);opacity:0} to{transform:none;opacity:1} }
.toast.success { background: var(--green-700); color: #fff; }
.toast.error   { background: var(--red-700);   color: #fff; }
.toast.info    { background: var(--blue-700);  color: #fff; }

/* ─── Empty state ────────────────────────────────────────── */
.empty-state { padding: 2.5rem 1rem; text-align: center; color: var(--gray-400); }
.empty-state svg { margin-bottom: .75rem; opacity: .35; }
.empty-state p   { font-size: 13.5px; }
.loading { padding: 2rem; text-align: center; color: var(--gray-400); font-size: 13px; }

/* ─── Veille automatique ─────────────────────────────────── */
.veille-auto-header { margin-bottom: 1.1rem; }
.va-status-card { padding: 1.1rem 1.25rem; }
.va-status-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.va-status-title { font-size: 15px; font-weight: 600; }
.va-status-sub   { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.va-indicator    { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); }
.va-dot          { width: 8px; height: 8px; border-radius: 50%; background: var(--gray-300); display: inline-block; }
.va-dot.running  { background: var(--amber-600); animation: pulse 1s ease-in-out infinite; }
.va-dot.success  { background: var(--green-600); }
.va-dot.error    { background: var(--red-600); }
.va-result       { margin-top: .85rem; padding: .75rem 1rem; border-radius: var(--radius-md); font-size: 13px; }
.va-result.success { background: var(--green-50);  color: var(--green-700); border: 1px solid var(--green-100); }
.va-result.error   { background: var(--red-50);    color: var(--red-700);   border: 1px solid var(--red-100); }
.va-result.info    { background: var(--blue-50);   color: var(--blue-800);  border: 1px solid var(--blue-100); }
.va-grid  { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; }
.source-item { display: flex; align-items: flex-start; gap: 10px; padding: .8rem 1.1rem; border-bottom: 1px solid var(--gray-100); }
.source-item:last-child { border-bottom: none; }
.source-toggle { flex-shrink: 0; margin-top: 3px; }
.source-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--blue-700); }
.source-body { flex: 1; min-width: 0; }
.source-name { font-size: 13px; font-weight: 500; }
.source-url  { font-size: 11px; color: var(--gray-400); font-family: 'DM Mono', monospace; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-meta { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; }
.cron-box    { background: var(--gray-900); border-radius: var(--radius-md); padding: .75rem 1rem; margin-bottom: .85rem; }
.cron-label  { font-size: 11px; color: var(--gray-400); margin-bottom: 5px; }
.cron-cmd    { display: block; font-family: 'DM Mono', monospace; font-size: 11px; color: #4ADE80; word-break: break-all; line-height: 1.6; margin-bottom: 6px; }
.cron-freq   { display: flex; flex-direction: column; gap: 5px; margin-bottom: .85rem; }
.cron-freq label  { font-size: 12px; color: var(--gray-700); }
.cron-freq select { height: 34px; font-size: 12px; }
.cron-hint   { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--gray-500); padding: 4px 8px; background: var(--gray-100); border-radius: var(--radius-sm); word-break: break-all; }
.va-sep      { border: none; border-top: 1px solid var(--gray-200); margin: .85rem 0; }
.log-item    { display: flex; align-items: flex-start; gap: 10px; padding: .7rem 1.1rem; border-bottom: 1px solid var(--gray-100); min-width: 0; }
.log-item:last-child { border-bottom: none; }
.log-date    { font-size: 11px; font-family: 'DM Mono', monospace; color: var(--gray-500); white-space: nowrap; flex-shrink: 0; min-width: 130px; }
.log-body    { flex: 1; min-width: 0; }
.log-stats   { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.log-new     { color: var(--green-700); font-weight: 500; }
.log-err     { color: var(--red-600); }
.log-dur     { color: var(--gray-400); font-family: 'DM Mono', monospace; }
.log-sources { font-size: 11px; color: var(--gray-500); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-cloud    { display: flex; flex-wrap: wrap; gap: 5px; }
.kw-tag      { font-size: 11px; padding: 2px 8px; background: var(--blue-50); color: var(--blue-800); border: 1px solid var(--blue-100); border-radius: 20px; }

/* ─── Print ──────────────────────────────────────────────── */
@media print {
  .app-header, .tab-nav, .panel-toolbar, .sc-actions, .modal-overlay { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .panel { display: block !important; }
  .signal-card, .journal-item { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablette */
@media (max-width: 900px) {
  .kpi-grid    { grid-template-columns: repeat(2,1fr); }
  .ind-row     { grid-template-columns: 1fr; }
  .dash-bottom { grid-template-columns: 1fr; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .va-grid     { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 600px) {

  /* Règle universelle anti-débordement texte */
  .app-wrapper * { max-width: 100%; }
  p, h1, h2, h3, h4, span, div, li, td, th, label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  :root { --header-h: 50px; --nav-h: 42px; }

  /* Header */
  .header-inner  { padding: 0 .75rem; }
  .brand-icon    { display: none; }
  .brand-sub     { display: none; }
  .brand-tag     { display: none; }
  .header-status { display: none; }
  .app-header h1 { font-size: 15px; }

  /* Nav */
  .tab-nav { padding: 0 .25rem; }
  .tab-btn { padding: 0 9px; font-size: 12px; gap: 4px; }
  .tab-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

  /* Main */
  .app-main { padding: .5rem; }

  /* KPI */
  .kpi-grid  { grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: .85rem; }
  .kpi-card  { padding: .65rem .75rem; }
  .kpi-value { font-size: 22px; }
  .kpi-label { font-size: 10px; }
  .kpi-sub   { font-size: 10.5px; }

  /* Indicateurs */
  .ind-row  { gap: 6px; }
  .ind-card { padding: .75rem .85rem; }
  .ind-header { gap: 4px; }
  .ind-count { font-size: 17px; }
  .ind-title { font-size: 13px; }
  .ind-desc  { font-size: 11.5px; margin-bottom: 8px; }

  /* Dashboard bottom */
  .dash-bottom { gap: 6px; }

  /* Section title */
  .section-title { font-size: 10.5px; margin-bottom: .5rem; }

  /* Toolbar */
  .panel-toolbar { flex-direction: column; align-items: stretch; gap: 6px; }
  .toolbar-filters { flex-direction: column; gap: 6px; }
  .toolbar-filters input[type="search"],
  .toolbar-filters select { width: 100%; height: 40px; font-size: 16px; }
  .btn-primary, .btn-outline { width: 100%; justify-content: center; height: 40px; font-size: 14px; }

  /* Signal cards */
  .signal-card  { margin-bottom: 6px; }
  .sc-head      { padding: .6rem .75rem; gap: 5px; }
  .sc-body      { padding: 0 .75rem .6rem; }
  .sc-title     { font-size: 13px; word-break: break-word; overflow-wrap: anywhere; }
  .sc-desc      { font-size: 12px; word-break: break-word; overflow-wrap: anywhere; }
  .sc-source    { word-break: break-word; overflow-wrap: anywhere; }
  .sc-date      { font-size: 10px; }
  .sc-actions   { padding: .5rem .75rem; gap: 5px; }
  .sc-actions .btn-sm,
  .sc-actions .btn-danger-sm { font-size: 12px; height: 34px; }
  .sc-actions .btn-danger-sm { margin-left: 0 !important; }

  /* Référentiel */
  .modules-grid   { grid-template-columns: 1fr; }
  .bloc-header    { padding: .75rem .85rem; gap: 6px; }
  .bloc-header h2 { word-break: break-word; overflow-wrap: anywhere; white-space: normal; }
  .bloc-meta      { width: 100%; }
  .ref-intro      { font-size: 12px; padding: .7rem .85rem; }
  .mc-title       { word-break: break-word; overflow-wrap: anywhere; }
  .mc-sub         { word-break: break-word; overflow-wrap: anywhere; }

  /* Modals : bottom sheet */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-box     { max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 90vh; }
  .modal-head    { padding: .85rem 1rem; }
  .modal-body    { padding: .85rem 1rem; }
  .modal-foot    { padding: .65rem 1rem; }

  /* Forms */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .form-group input,
  .form-group select   { font-size: 16px; height: 40px; }
  .form-group textarea { font-size: 16px; }

  /* Journal */
  .journal-item { padding: .6rem .75rem; gap: 8px; }
  .ji-date  { font-size: 10px; min-width: 0; white-space: normal; }
  .ji-title { font-size: 12px; word-break: break-word; overflow-wrap: anywhere; }
  .ji-desc  { font-size: 11.5px; word-break: break-word; overflow-wrap: anywhere; }

  /* Audit */
  .audit-banner { padding: .75rem .85rem; }
  .audit-stats  { gap: .75rem; }
  .audit-stat-val { font-size: 16px; }
  .audit-stat-lbl { font-size: 10px; }

  /* Veille auto */
  .va-status-inner { flex-direction: column; align-items: stretch; gap: 8px; }
  .va-status-inner .btn-primary { width: 100%; justify-content: center; }
  .log-date   { min-width: 0; white-space: normal; }
  .source-url { white-space: normal; word-break: break-all; }

  /* Bloc mini sur mobile : titre sur 2 lignes, alerte dessous */
  .bloc-mini  { flex-wrap: nowrap; padding: .6rem .75rem; gap: 8px; align-items: flex-start; }
  .bloc-num   { flex-shrink: 0; margin-top: 2px; }
  .bloc-info  { flex: 1; min-width: 0; max-width: calc(100% - 80px); overflow: hidden; }
  .bloc-title { white-space: normal; font-size: 12px; line-height: 1.35; word-break: break-word; overflow-wrap: anywhere; }
  .bloc-sub   { white-space: normal; font-size: 10.5px; word-break: break-word; overflow-wrap: anywhere; }
  .bloc-alert { flex-shrink: 0; margin-left: auto; }

  /* Recent items */
  .recent-item { padding: .55rem .75rem; gap: 7px; align-items: flex-start; }
  .ri-badges   { flex-shrink: 0; }
  .ri-body     { flex: 1; min-width: 0; max-width: calc(100% - 90px); overflow: hidden; }
  .ri-title    { font-size: 12px; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
  .ri-meta     { font-size: 10.5px; white-space: normal; word-break: break-word; }

  /* Toast */
  .toast-container { bottom: .75rem; right: .75rem; left: .75rem; }
}