/* ==========================================================================
   Plateforme Initiative IIN — CCI-CI : styles applicatifs
   Complète le design system (tokens.css, base.css, components.css).
   ========================================================================== */

/* Bandeau démo — présent sur toutes les pages */
.demo-banner {
  background: var(--iin-gold-500);
  color: var(--iin-navy-750);
  text-align: center;
  font-size: var(--iin-text-sm);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-meta);
  text-transform: uppercase;
  padding: 7px 12px;
}

/* Badges d'état */
.badge {
  display: inline-block;
  font-size: var(--iin-text-2xs);
  font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-tag);
  text-transform: uppercase;
  padding: 4px 9px;
  border: var(--iin-hairline) solid var(--iin-rule-strong);
  color: var(--iin-ink-2);
  background: var(--iin-surface);
  white-space: nowrap;
}
.badge--ok      { border-color: var(--iin-cat-green);  color: var(--iin-cat-green); }
.badge--warn    { border-color: var(--iin-cat-orange); color: var(--iin-cat-orange); }
.badge--danger  { border-color: var(--iin-cat-maroon); color: var(--iin-cat-maroon); }
.badge--info    { border-color: var(--iin-cat-blue);   color: var(--iin-cat-blue); }
.badge--gold    { border-color: var(--iin-gold-700);   color: var(--iin-gold-700); }
.badge--solid   { background: var(--iin-navy-600); border-color: var(--iin-navy-600); color: #fff; }

/* Tableaux de gestion */
.table-wrap { overflow-x: auto; border: var(--iin-hairline) solid var(--iin-rule); background: var(--iin-surface); }
table.iin-table { border-collapse: collapse; width: 100%; font-size: var(--iin-text-base); }
.iin-table th {
  text-align: left; padding: 12px 14px;
  font-size: var(--iin-text-2xs); font-weight: var(--iin-weight-bold);
  letter-spacing: var(--iin-tracking-label); text-transform: uppercase;
  color: var(--iin-muted); border-bottom: var(--iin-hairline) solid var(--iin-rule);
  background: var(--iin-paper-raised); white-space: nowrap;
}
.iin-table td { padding: 11px 14px; border-bottom: var(--iin-hairline) solid var(--iin-rule-softer); color: var(--iin-ink-2); vertical-align: top; }
.iin-table tr:last-child td { border-bottom: 0; }
.iin-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Jauge des 3 opportunités (FR-012 / FR-029) */
.jauge { display: inline-flex; gap: 5px; vertical-align: middle; }
.jauge span { width: 22px; height: 8px; background: var(--iin-rule); }
.jauge span.on { background: var(--iin-cat-green); }
.jauge.warn span.on { background: var(--iin-cat-orange); }

/* Jauge de couverture SC-005 */
.meter { position: relative; height: 10px; background: var(--iin-rule-soft); border: var(--iin-hairline) solid var(--iin-rule); }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--iin-navy-600); }
.meter > b { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--iin-gold-500); }

/* Cartes indicateurs */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--iin-hairline); background: var(--iin-rule); border: var(--iin-hairline) solid var(--iin-rule); }
.kpis > div { background: var(--iin-surface); padding: 18px 18px 16px; }
.kpi-v { font-family: var(--iin-font-display); font-weight: var(--iin-weight-display); font-size: var(--iin-text-6xl); line-height: 1.05; color: var(--iin-ink); }
.kpi-l { font-size: var(--iin-text-sm2); color: var(--iin-muted); margin-top: 6px; line-height: 1.4; }

/* Navigation applicative par onglets (espaces connectés) */
.app-shell { max-width: var(--iin-container); margin: 0 auto; padding: 26px var(--iin-gutter) 72px; }
.app-view { display: none; }
.app-view.is-active { display: block; }

/* Panneaux */
.panel { background: var(--iin-surface); border: var(--iin-hairline) solid var(--iin-rule); padding: 22px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { margin-top: 0; }

/* Encadré réglementaire (obligation de moyens, notices) */
.legal-note {
  border: var(--iin-hairline) solid var(--iin-rule-strong);
  border-left: 3px solid var(--iin-gold-500);
  background: var(--iin-paper-raised);
  padding: 16px 18px;
  font-size: var(--iin-text-sm2);
  color: var(--iin-ink-3);
  line-height: 1.55;
}
.legal-note b { color: var(--iin-ink); }

/* Consentements (NF-005) */
.consent { display: flex; gap: 12px; align-items: flex-start; border: var(--iin-hairline) solid var(--iin-rule-strong); background: var(--iin-paper-field); padding: 14px 16px; }
.consent input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--iin-navy-600); flex: none; }
.consent + .consent { margin-top: 10px; }
.consent .t { font-size: var(--iin-text-base); color: var(--iin-ink); font-weight: var(--iin-weight-medium); }
.consent .d { font-size: var(--iin-text-sm2); color: var(--iin-grey); margin-top: 3px; line-height: 1.5; }

/* Messages */
.flash { padding: 13px 16px; font-size: var(--iin-text-base); border: var(--iin-hairline) solid; margin: 14px 0; }
.flash--ok { border-color: var(--iin-cat-green); color: var(--iin-cat-green); background: #f2f8f4; }
.flash--err { border-color: var(--iin-cat-maroon); color: var(--iin-cat-maroon); background: #faf2f3; }
.flash--err ul { margin: 8px 0 0 18px; padding: 0; }

/* Divers */
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:40px}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.muted { color: var(--iin-muted); font-size: var(--iin-text-sm2); }
.small { font-size: var(--iin-text-sm2); }
details.fiche { border: var(--iin-hairline) solid var(--iin-rule); background: var(--iin-paper-raised); padding: 10px 14px; margin-top: 8px; }
details.fiche summary { cursor: pointer; font-size: var(--iin-text-sm); font-weight: var(--iin-weight-bold); letter-spacing: var(--iin-tracking-tag); text-transform: uppercase; color: var(--iin-gold-600); }