@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700;800;900&display=swap');

:root {
  --ci-blue-marianne:  #000091;
  --ci-blue-marianne-light: #1a1a6e;
  --ci-blue-electric:  #007bff;
  --ci-teal:           #2EC4B6;
  --ci-gold:           #F4A261;
  --ci-ink:            #1E1E1E;
  --ci-ink-soft:       #5a5a5a;
  --ci-line:           rgba(200, 190, 170, 0.25);
  --ci-cream:          #f7f4ed;
  --ci-cream-warm:     #f5f2eb;
  --ci-cream-deep:     #efeae1;
  --ci-danger:         #dc3545;
  --ci-glass-bg:       rgba(247, 244, 237, 0.55);
  --ci-glass-shadow:   0 15px 35px rgba(40, 30, 10, 0.08);
  --ci-shadow-sm:      0 4px 12px rgba(40, 30, 10, 0.04);
  --ci-shadow-md:      0 8px 24px rgba(0, 0, 145, 0.15);
  --ci-shadow-lg:      0 15px 35px rgba(40, 30, 10, 0.08);
  --ci-shadow-cta:     0 8px 24px rgba(0, 0, 145, 0.25);
  --ci-grad-primary:   linear-gradient(135deg, #000091, #007bff);
  --ci-grad-accent:    linear-gradient(135deg, #007bff, #2EC4B6);
  --ci-grad-invert:    linear-gradient(135deg, #000091 0%, #1a1a6e 100%);
  --ci-font-sans:      'Inter', -apple-system, sans-serif;
  --ci-font-display:   'Poppins', 'Inter', sans-serif;
}

* { box-sizing: border-box; }

.civik {
  font-family: var(--ci-font-sans);
  color: var(--ci-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.civik-grad-text {
  background: var(--ci-grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==================== MOBILE FRAME ==================== */
.phone {
  width: 390px;
  height: 844px;
  background: var(--ci-cream);
  border-radius: 48px;
  box-shadow: 0 0 0 12px #1a1a1a, 0 0 0 14px #2a2a2a, 0 40px 80px rgba(40,30,10,.18);
  position: relative;
  overflow: hidden;
  font-family: var(--ci-font-sans);
  color: var(--ci-ink);
}
.phone::before {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 122px; height: 32px;
  background: #0a0a0a;
  border-radius: 20px;
  z-index: 100;
}
.phone-status {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px 0;
  font-family: var(--ci-font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ci-ink);
  position: relative;
  z-index: 5;
}
.phone-status .right {
  display: flex; gap: 6px; align-items: center;
}
.phone-status svg { width: 16px; height: 11px; }
.phone-body {
  height: calc(100% - 50px);
  overflow: hidden;
  position: relative;
}

/* ==================== CITIZEN : HOME ==================== */
.c-home-header {
  background: linear-gradient(135deg, #000091 0%, #1a1a6e 60%, #0d2466 100%);
  padding: 16px 22px 28px;
  position: relative;
  overflow: hidden;
}
.c-home-header::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,123,255,.4) 0%, transparent 70%);
  pointer-events: none;
}
.c-commune-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  position: relative; z-index: 2;
}
.c-commune-id {
  display: flex; align-items: center; gap: 10px;
}
.c-commune-meta { color: rgba(255,255,255,.78); font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; }
.c-commune-name { color: #fff; font-size: 12px; font-weight: 600; }
.c-burger {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.c-greeting {
  font-family: var(--ci-font-display);
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 8px;
  position: relative; z-index: 2;
}
.c-greeting span { color: #fff; }
.c-tagline {
  color: rgba(255,255,255,.78);
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 18px;
  position: relative; z-index: 2;
}
.c-tagline b { color: #fff; font-weight: 600; }
.c-search {
  background: rgba(255,255,255,.96);
  border-radius: 9999px;
  padding: 10px 8px 10px 20px;
  display: flex; align-items: center;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  position: relative; z-index: 2;
}
.c-search-input {
  flex: 1; border: 0; outline: 0; background: none;
  color: var(--ci-ink-soft);
  font-size: 14px;
  font-family: var(--ci-font-sans);
}
.c-search-mic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ci-teal);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 12px rgba(46,196,182,.4);
}

.c-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px 18px 0;
}
.c-qa {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  padding: 14px 6px 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(40,30,10,.04);
}
.c-qa-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
  margin: 0 auto 6px;
}
.c-qa-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ci-ink);
}
/* Outil présent mais volontairement désactivé pour la démonstration (grisé) */
.c-qa { position: relative; }
.c-qa.disabled {
  opacity: .55;
  filter: grayscale(1);
  background: var(--ci-cream-deep);
  border-style: dashed;
}
.c-qa.disabled .c-qa-icon {
  background: #ececec;
  color: #9a9a9a;
}
.c-qa-lock {
  position: absolute;
  top: 6px; right: 6px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ci-line);
  display: flex; align-items: center; justify-content: center;
  color: #7a7a7a;
}
/* Bottom-tab désactivé */
.bt-item.bt-disabled { position: relative; opacity: .5; filter: grayscale(1); }
.bt-item .bt-lock {
  position: absolute;
  top: 2px; right: 50%;
  transform: translateX(14px);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--ci-line);
  display: flex; align-items: center; justify-content: center;
  color: #7a7a7a;
}

/* ===== Écran "Outil désactivé pour la démonstration" ===== */
.td-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70%;
  padding: 40px 30px;
  gap: 4px;
}
.td-lock {
  width: 70px; height: 70px;
  border-radius: 22px;
  background: var(--ci-cream-deep);
  border: 1px dashed var(--ci-line);
  display: flex; align-items: center; justify-content: center;
  color: #9a9a9a;
  margin-bottom: 14px;
}
.td-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ci-ink);
  margin: 0 0 8px;
}
.td-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #8a6d1a;
  background: rgba(244,162,97,.16);
  border: 1px solid rgba(244,162,97,.35);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.td-badge svg { color: #8a6d1a; }
.td-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ci-ink-soft, #5b5b5b);
  max-width: 300px;
  margin: 0 0 10px;
}
.td-pitch { color: var(--ci-ink); font-size: 14px; margin-bottom: 14px; }
.td-feats {
  list-style: none;
  margin: 2px 0 12px;
  padding: 14px 16px;
  width: 100%;
  max-width: 300px;
  background: var(--ci-cream-deep, #f2ece0);
  border: 1px solid var(--ci-line);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}
.td-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ci-ink);
}
.td-feat svg { color: var(--ci-teal, #2EC4B6); flex-shrink: 0; }
.td-note { font-size: 12.5px; color: var(--ci-ink-soft, #5b5b5b); }
.td-back { margin-top: 16px; }

/* Variante « mairies abonnées » (livraison Marianne seule), sobre, institutionnel */
.td-seal { margin-bottom: 16px; }
.td-badge--sub {
  color: var(--ci-blue-marianne, #000091);
  background: rgba(0, 0, 145, .06);
  border: 1px solid rgba(0, 0, 145, .18);
}
.td-badge--sub svg { color: var(--ci-blue-marianne, #000091); }
.td-link {
  margin-top: 12px;
  background: none;
  border: 0;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ci-blue-marianne, #000091);
  cursor: pointer;
}
.td-link:hover { color: var(--ci-teal, #2EC4B6); }
.td-back[href] {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 14px 30px;
  border-radius: 9999px;
  font-family: var(--ci-font-sans);
  font-weight: 600;
  font-size: 14px;
}

.c-section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 22px 10px;
}
.c-section-head .eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ci-teal);
}
.c-section-head a {
  font-size: 12px;
  font-weight: 600;
  color: var(--ci-ink-soft);
}

.c-alert-card {
  margin: 0 18px 12px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid rgba(244,162,97,.35);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.c-alert-card.urgent { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: rgba(220,53,69,.3); }
.c-alert-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-gold);
  flex-shrink: 0;
}
.c-alert-card.urgent .c-alert-icon { color: var(--ci-danger); }
.c-alert-body { flex: 1; }
.c-alert-tag {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--ci-gold);
  margin-bottom: 3px;
}
.c-alert-card.urgent .c-alert-tag { color: var(--ci-danger); }
.c-alert-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ci-ink);
  line-height: 1.25;
  margin-bottom: 4px;
}
.c-alert-meta {
  font-size: 11.5px;
  color: var(--ci-ink-soft);
  line-height: 1.4;
}

.c-event-card {
  margin: 0 18px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: var(--ci-shadow-sm);
}
.c-event-date {
  width: 50px; height: 56px;
  background: var(--ci-blue-marianne);
  border-radius: 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.c-event-date .month { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; opacity: .8; }
.c-event-date .day { font-family: var(--ci-font-display); font-size: 22px; font-weight: 800; line-height: 1; margin-top: 2px; }
.c-event-body { flex: 1; }
.c-event-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 14px; color: var(--ci-ink); margin-bottom: 2px; }
.c-event-meta { font-size: 11.5px; color: var(--ci-ink-soft); }
.c-event-arrow { color: var(--ci-ink-soft); }

/* ==================== SIGNALEMENT WIZARD ==================== */
.c-topbar {
  background: var(--ci-cream);
  padding: 12px 20px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ci-line);
}
.c-back {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ci-line);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
}
.c-topbar-title {
  flex: 1;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ci-blue-marianne);
}
.c-topbar-step {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ci-teal);
}
.c-stepper {
  height: 4px;
  margin: 0 20px 18px;
  background: var(--ci-cream-deep);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
}
.c-stepper-fill {
  background: var(--ci-grad-accent);
  border-radius: 2px;
}

.c-photo {
  margin: 14px 20px 18px;
  height: 220px;
  border-radius: 22px;
  background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 24px rgba(40,30,10,.15);
}
.c-photo::after {
  content: '';
  position: absolute;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, #0a0a0a 35%, #1a1a1a 60%, #2a2a2a 80%);
  box-shadow: 0 0 40px rgba(0,0,0,.7) inset;
}
.c-photo-tag {
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(247,244,237,.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2);
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ci-blue-marianne);
  display: flex; align-items: center; gap: 6px;
  z-index: 5;
}
.c-photo-tag .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ci-teal);
  box-shadow: 0 0 0 3px rgba(46,196,182,.25);
}

.c-marianne-fill {
  margin: 0 20px 16px;
  display: flex; gap: 8px; align-items: center;
}
.c-marianne-fill-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ci-teal);
}
.c-marianne-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ci-grad-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 10px;
  flex-shrink: 0;
}

.c-form-row {
  margin: 0 20px 10px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 10px;
}
.c-form-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
  flex-shrink: 0;
}
.c-form-body { flex: 1; }
.c-form-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ci-ink-soft);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.c-form-value {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ci-ink);
  margin-top: 2px;
}
.c-check {
  color: var(--ci-teal);
}

.c-form-input {
  margin: 0 20px 14px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 16px;
  padding: 12px 14px;
}
.c-form-input .label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ci-ink-soft);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 6px;
}
.c-form-input .placeholder {
  font-size: 13.5px;
  color: rgba(94,94,94,.55);
}

.c-bottom-actions {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 14px 20px 24px;
  background: linear-gradient(180deg, transparent, var(--ci-cream) 30%);
  display: flex; gap: 10px;
}
.c-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 9999px;
  font-family: var(--ci-font-sans);
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
}
.c-btn-secondary {
  background: #fff;
  color: var(--ci-blue-marianne);
  border: 1px solid var(--ci-line);
}
.c-btn-primary {
  background: var(--ci-grad-primary);
  color: #fff;
  box-shadow: var(--ci-shadow-cta);
}

/* ==================== DEMARCHE WIZARD ==================== */
.c-demarche-stepper {
  margin: 8px 20px 4px;
  display: flex; align-items: center; gap: 6px;
}
.c-demarche-stepper .seg {
  flex: 1; height: 4px; border-radius: 2px;
  background: var(--ci-cream-deep);
}
.c-demarche-stepper .seg.active { background: var(--ci-grad-accent); }
.c-demarche-meta {
  margin: 14px 20px 0;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ci-teal);
}
.c-demarche-q {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -.8px;
  color: var(--ci-blue-marianne);
  margin: 6px 20px 6px;
}
.c-demarche-help {
  font-size: 13.5px;
  color: var(--ci-ink-soft);
  margin: 0 20px 18px;
  line-height: 1.5;
}

.c-radio {
  margin: 0 20px 10px;
  background: #fff;
  border: 1.5px solid var(--ci-line);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.c-radio.active {
  border-color: var(--ci-teal);
  background: linear-gradient(135deg, rgba(46,196,182,.06), rgba(46,196,182,.02));
  box-shadow: 0 6px 18px rgba(46,196,182,.18);
}
.c-radio-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
  flex-shrink: 0;
}
.c-radio.active .c-radio-icon {
  background: var(--ci-teal);
  color: #fff;
}
.c-radio-body { flex: 1; }
.c-radio-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ci-ink);
}
.c-radio-sub {
  font-size: 12px;
  color: var(--ci-ink-soft);
  margin-top: 2px;
}
.c-radio-circle {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--ci-line);
  flex-shrink: 0;
  background: #fff;
  position: relative;
}
.c-radio.active .c-radio-circle {
  border-color: var(--ci-teal);
  background: var(--ci-teal);
}
.c-radio.active .c-radio-circle::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
}

.c-tip {
  margin: 16px 20px 0;
  background: rgba(46,196,182,.08);
  border: 1px solid rgba(46,196,182,.2);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex; gap: 10px; align-items: flex-start;
}
.c-tip-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ci-grad-primary);
  flex-shrink: 0;
  margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.c-tip-text {
  font-size: 12px;
  color: var(--ci-ink);
  line-height: 1.45;
}
.c-tip-text b { color: var(--ci-blue-marianne); font-weight: 700; }

/* ==================== SOURCES SCREEN ==================== */
.c-sources-section {
  padding: 16px 20px 0;
}
.c-sources-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ci-ink-soft);
  margin-bottom: 6px;
}
.c-q-text {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ci-ink);
  line-height: 1.4;
  margin-bottom: 18px;
}
.c-marianne-resp {
  background: rgba(247,244,237,.6);
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ci-ink);
  margin-bottom: 18px;
}
.c-marianne-resp b { color: var(--ci-blue-marianne); }

.c-source-card {
  margin: 0 0 10px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; gap: 12px; align-items: center;
  box-shadow: var(--ci-shadow-sm);
}
.c-source-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
  flex-shrink: 0;
}
.c-source-body { flex: 1; min-width: 0; }
.c-source-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ci-ink);
  line-height: 1.25;
  margin-bottom: 3px;
}
.c-source-meta {
  font-size: 11.5px;
  color: var(--ci-ink-soft);
  margin-bottom: 5px;
}
.c-source-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.tag-officiel { background: rgba(0,0,145,.08); color: var(--ci-blue-marianne); }
.tag-communal { background: rgba(46,196,182,.12); color: #1d8b80; }
.tag-partenaire { background: rgba(244,162,97,.15); color: #b56821; }
.c-source-arrow {
  color: var(--ci-ink-soft);
  flex-shrink: 0;
}

.c-validation {
  margin: 12px 20px 0;
  background: linear-gradient(135deg, rgba(46,196,182,.1), rgba(46,196,182,.04));
  border: 1px solid rgba(46,196,182,.25);
  border-radius: 14px;
  padding: 12px 14px;
}
.c-val-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.c-val-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ci-teal);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.c-val-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: #1d8b80;
}
.c-val-text {
  font-size: 11.5px;
  color: var(--ci-ink-soft);
  line-height: 1.45;
}
.c-val-actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.c-chip {
  padding: 6px 12px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  border: 1px solid var(--ci-line);
  background: #fff;
  color: var(--ci-ink);
  display: inline-flex;
  gap: 4px; align-items: center;
}
.c-chip.teal {
  background: var(--ci-teal);
  border-color: var(--ci-teal);
  color: #fff;
}

/* ==================== CHAT (MARIANNE CONVERSATION) ==================== */
.c-chat-header {
  background: linear-gradient(135deg, #000091 0%, #1a1a6e 100%);
  padding: 14px 20px 16px;
  display: flex; align-items: center; gap: 12px;
}
.c-chat-back {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.c-chat-id { flex: 1; min-width: 0; }
.c-chat-name {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-chat-commune {
  font-weight: 500;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.1px;
}
.c-chat-blason {
  width: 32px;
  height: 32px;
  object-fit: contain;
  background: #fff;
  padding: 3px;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
/* Rappel d'installation persistant dans le header du chat (demande Thibaut 13/07/2026).
   Pastille translucide sur le bandeau bleu ; texte visible en desktop, icône seule
   en mobile pour ne pas serrer « Marianne · {Commune} ». */
.c-chat-install {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  border-radius: 9999px;
  padding: 7px 13px;
  font-family: var(--ci-font-sans);
  font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .2px;
  cursor: pointer;
  transition: background .2s ease;
}
.c-chat-install:hover { background: rgba(255,255,255,.24); }
.c-chat-install svg { width: 13px; height: 13px; }
/* Mobile : icône seule (le libellé serrerait le titre de commune) */
@media (max-width: 600px) {
  .c-chat-install { padding: 8px; }
  .c-chat-install-txt { display: none; }
}
.c-chat-status {
  font-size: 10px;
  color: rgba(255,255,255,.7);
  display: flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.c-chat-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ci-teal);
  box-shadow: 0 0 0 2px rgba(46,196,182,.3);
}
.c-chat-marianne {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ci-grad-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--ci-font-display);
  font-weight: 800;
}

.c-chat-body {
  padding: 16px 18px 100px;
  overflow-y: auto;
  height: calc(100% - 70px);
  background: var(--ci-cream);
}
.c-bubble-row {
  display: flex; gap: 8px; margin-bottom: 14px; align-items: flex-end;
}
.c-bubble-row.user { justify-content: flex-end; }
.c-bubble-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ci-grad-accent);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 10px; font-weight: 700;
}
.c-bubble {
  max-width: 78%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.55;
  /* Emails / URLs longs ne doivent jamais déborder la bulle (mobile surtout) */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.c-bubble.bot {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--ci-line);
  border-radius: 16px 16px 16px 4px;
  color: var(--ci-ink);
  box-shadow: var(--ci-shadow-sm);
  backdrop-filter: blur(10px);
  padding: 14px 18px;
}
/* Hiérarchie typographique premium des réponses Marianne */
.c-bubble.bot b { color: var(--ci-blue-marianne); font-weight: 700; }
.c-bubble.bot h4 {
  font-family: var(--ci-font-display, var(--ci-font-sans));
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ci-blue-marianne);
  margin: 0 0 8px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.c-bubble.bot h4 + p, .c-bubble.bot h4 + ul, .c-bubble.bot h4 + ol { margin-top: 0; }
.c-bubble.bot p { margin: 0 0 10px; }
.c-bubble.bot p:last-child { margin-bottom: 0; }
.c-bubble.bot ul, .c-bubble.bot ol {
  margin: 6px 0 10px;
  padding-left: 22px;
  list-style: none;
  position: relative;
}
.c-bubble.bot ul:last-child, .c-bubble.bot ol:last-child { margin-bottom: 0; }
.c-bubble.bot ul li, .c-bubble.bot ol li {
  position: relative;
  padding: 3px 0;
  line-height: 1.5;
}
.c-bubble.bot ul li::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 12px;
  width: 6px;
  height: 6px;
  background: var(--ci-teal);
  border-radius: 50%;
}
.c-bubble.bot ol { counter-reset: cibo-li; padding-left: 30px; }
.c-bubble.bot ol li { counter-increment: cibo-li; }
.c-bubble.bot ol li::before {
  content: counter(cibo-li);
  position: absolute;
  left: -28px;
  top: 4px;
  width: 20px;
  height: 20px;
  background: var(--ci-blue-marianne);
  color: #fff;
  border-radius: 50%;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-bubble.bot a { color: var(--ci-blue-electric); text-decoration: underline; text-underline-offset: 2px; }
.c-bubble.bot a:hover { color: var(--ci-teal); }
.c-bubble.user {
  background: var(--ci-grad-invert);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 6px 14px rgba(0,0,145,.18);
}

.c-source-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 6px 0 0 34px;
}
.c-source-chip {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 9999px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ci-blue-marianne);
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: var(--ci-shadow-sm);
}
.c-source-chip svg { width: 11px; height: 11px; }

.c-action-card {
  margin: 8px 0 0 34px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 10px 12px;
  display: flex; gap: 10px; align-items: center;
  max-width: 78%;
  box-shadow: var(--ci-shadow-sm);
}
.c-action-card-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: var(--ci-grad-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.c-action-card-body { flex: 1; }
.c-action-card-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 12.5px; color: var(--ci-ink); }
.c-action-card-sub { font-size: 11px; color: var(--ci-ink-soft); margin-top: 1px; }
.c-action-card-arrow { color: var(--ci-teal); }

.c-typing {
  display: inline-flex; gap: 4px;
  padding: 12px 16px;
  background: rgba(247,244,237,.7);
  border: 1px solid var(--ci-line);
  border-radius: 16px 16px 16px 4px;
  margin-left: 34px;
}
.c-typing .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ci-teal);
  animation: tDot 1.2s ease-in-out infinite;
}
.c-typing .dot:nth-child(2) { animation-delay: .15s; }
.c-typing .dot:nth-child(3) { animation-delay: .3s; }
@keyframes tDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

/* Apparition douce de chaque message (question + réponse) et de l'indicateur de
   saisie : fondu + léger glissé vers le haut. Ne joue qu'une fois à l'insertion du
   nœud (les bulles déjà affichées ne ré-animent pas). Ressenti conversationnel,
   sans coût perceptible. */
.c-bubble-row, .c-typing {
  animation: cBubbleIn .34s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes cBubbleIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.c-composer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px 22px;
  background: linear-gradient(180deg, transparent, rgba(247,244,237,.95) 30%);
  display: flex; gap: 8px; align-items: center;
}
.c-composer-input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 9999px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--ci-ink-soft);
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--ci-shadow-sm);
}
.c-composer-input .placeholder { flex: 1; }
.c-composer-input .icons { display: flex; gap: 8px; color: var(--ci-ink-soft); }
.c-composer-send {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--ci-grad-primary);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: var(--ci-shadow-cta);
}

/* ==================== AGENT BACK-OFFICE ==================== */
.desktop {
  width: 1280px;
  height: 800px;
  background: var(--ci-cream);
  border-radius: 14px;
  box-shadow: 0 30px 70px rgba(40,30,10,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--ci-font-sans);
  color: var(--ci-ink);
}
.desktop-chrome {
  height: 36px;
  background: var(--ci-cream-deep);
  border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 8px;
  flex-shrink: 0;
}
.desktop-chrome .lights { display: flex; gap: 6px; }
.desktop-chrome .lights span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.desktop-chrome .lights span:nth-child(1) { background: #ff5f57; }
.desktop-chrome .lights span:nth-child(2) { background: #febc2e; }
.desktop-chrome .lights span:nth-child(3) { background: #28c840; }
.desktop-chrome .url {
  background: var(--ci-cream);
  border-radius: 6px;
  padding: 4px 14px;
  font-size: 12px;
  color: var(--ci-ink-soft);
  margin-left: 80px;
  width: 280px; text-align: center;
  font-family: var(--ci-font-sans);
}
.desktop-content { flex: 1; display: flex; min-height: 0; }

.a-sidebar {
  width: 240px;
  background: var(--ci-cream-warm);
  border-right: 1px solid var(--ci-line);
  flex-shrink: 0;
  display: flex; flex-direction: column;
}
.a-side-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center; gap: 10px;
}
.a-side-crest {
  width: 30px; height: 36px;
  background: linear-gradient(160deg, #f5f2eb, #d6cdba);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
  border: 1px solid #c8b88a;
  position: relative;
  flex-shrink: 0;
}
.a-side-crest::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  width: 12px; height: 12px;
  background: var(--ci-blue-marianne);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.a-side-meta {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--ci-ink-soft);
}
.a-side-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ci-blue-marianne);
}
.a-nav { padding: 12px 10px; }
.a-nav-item {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ci-ink);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 2px;
  cursor: pointer;
}
.a-nav-item.active {
  background: var(--ci-blue-marianne);
  color: #fff;
}
.a-nav-item .count {
  margin-left: auto;
  background: var(--ci-cream-deep);
  color: var(--ci-blue-marianne);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9999px;
}
.a-nav-item.active .count {
  background: rgba(255,255,255,.18);
  color: #fff;
}
.a-side-foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--ci-line);
  font-size: 10.5px;
  color: var(--ci-ink-soft);
}

.a-inbox {
  width: 360px;
  border-right: 1px solid var(--ci-line);
  background: var(--ci-cream);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.a-inbox-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--ci-line);
}
.a-inbox-title {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.5px;
  color: var(--ci-blue-marianne);
  margin-bottom: 12px;
}
.a-tabs {
  display: flex; gap: 4px;
  margin-bottom: 10px;
}
.a-tab {
  padding: 5px 11px;
  border-radius: 9999px;
  font-size: 11.5px;
  font-weight: 600;
  background: transparent;
  color: var(--ci-ink-soft);
  border: 1px solid transparent;
  cursor: pointer;
}
.a-tab.active {
  background: #fff;
  color: var(--ci-blue-marianne);
  border-color: var(--ci-line);
  box-shadow: var(--ci-shadow-sm);
}
.a-tab .badge {
  background: var(--ci-gold);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 9999px;
  margin-left: 4px;
}
.a-search-bar {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 10px;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--ci-ink-soft);
  display: flex; align-items: center; gap: 8px;
}
.a-conv-list { flex: 1; overflow-y: auto; }
.a-conv {
  padding: 12px 18px;
  border-bottom: 1px solid var(--ci-line);
  cursor: pointer;
}
.a-conv.active {
  background: linear-gradient(90deg, rgba(0,0,145,.04), transparent);
  border-left: 3px solid var(--ci-blue-marianne);
  padding-left: 15px;
}
.a-conv-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.a-conv-name {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ci-ink);
  display: flex; align-items: center; gap: 6px;
}
.a-conv-time { font-size: 10.5px; color: var(--ci-ink-soft); }
.a-conv-msg {
  font-size: 12px;
  color: var(--ci-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 6px;
}
.a-conv-tags { display: flex; gap: 5px; align-items: center; }
.a-status {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 7px;
  border-radius: 9999px;
}
.s-auto { background: rgba(46,196,182,.12); color: #1d8b80; }
.s-valider { background: rgba(244,162,97,.18); color: #b56821; }
.s-escalade { background: rgba(0,0,145,.08); color: var(--ci-blue-marianne); }
.s-signal { background: rgba(220,53,69,.1); color: var(--ci-danger); }
.s-urgent { background: var(--ci-danger); color: #fff; }
.s-categ {
  font-size: 10.5px;
  color: var(--ci-ink-soft);
}

.a-detail {
  flex: 1;
  background: var(--ci-cream);
  display: flex; flex-direction: column;
  min-width: 0;
}
.a-detail-head {
  padding: 16px 24px 14px;
  border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center; gap: 14px;
}
.a-detail-headline { flex: 1; }
.a-detail-tag {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ci-teal);
  margin-bottom: 3px;
}
.a-detail-title {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ci-blue-marianne);
  letter-spacing: -.5px;
}
.a-detail-meta {
  text-align: right;
  font-size: 11px;
  color: var(--ci-ink-soft);
}
.a-detail-meta b { color: var(--ci-ink); display: block; font-weight: 600; }
.a-detail-body {
  flex: 1;
  padding: 18px 24px;
  overflow-y: auto;
}
.a-msg {
  display: flex; gap: 10px;
  margin-bottom: 16px;
  max-width: 600px;
}
.a-msg.user { margin-left: 0; }
.a-msg-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ci-cream-deep);
  color: var(--ci-blue-marianne);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.a-msg-bot .a-msg-avatar { background: var(--ci-grad-accent); color: #fff; }
.a-msg-bubble {
  background: rgba(247,244,237,.7);
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ci-ink);
}
.a-msg-bubble.user-bubble {
  background: linear-gradient(135deg, rgba(0,0,145,.08), rgba(0,123,255,.04));
  border-color: rgba(0,0,145,.12);
}
.a-msg-bubble.bot-bubble { background: #fff; }
.a-msg-bubble b { color: var(--ci-blue-marianne); }

.a-validate {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1.5px solid rgba(244,162,97,.3);
  border-radius: 16px;
  padding: 14px 16px;
  max-width: 640px;
  box-shadow: 0 6px 16px rgba(244,162,97,.12);
}
.a-validate-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.a-validate-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ci-ink);
}
.a-validate-title-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ci-grad-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 10px;
}
.a-validate-sources {
  font-size: 11px;
  color: var(--ci-ink-soft);
  font-weight: 600;
}
.a-validate-confidence {
  font-size: 12px;
  color: var(--ci-ink);
  margin-bottom: 12px;
  line-height: 1.45;
}
.a-validate-confidence b { color: #b56821; font-weight: 700; }
.a-validate-actions {
  display: flex; gap: 8px;
}
.a-btn {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.a-btn-primary {
  background: var(--ci-grad-primary);
  color: #fff;
  box-shadow: var(--ci-shadow-cta);
}
.a-btn-secondary {
  background: #fff;
  color: var(--ci-blue-marianne);
  border: 1px solid var(--ci-line);
}
.a-btn-ghost {
  background: transparent;
  color: var(--ci-ink-soft);
}

/* ==================== SIGNALEMENTS MAP ==================== */
.s-toolbar {
  padding: 14px 24px;
  border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center; gap: 14px;
}
.s-title {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ci-blue-marianne);
  letter-spacing: -.5px;
}
.s-pill {
  background: var(--ci-blue-marianne);
  color: #fff;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 11px;
}
.s-stats { color: var(--ci-ink-soft); font-size: 12px; display: flex; gap: 14px; }
.s-stats span { font-weight: 600; color: var(--ci-ink); }
.s-spacer { flex: 1; }

.s-content { flex: 1; display: flex; min-height: 0; }
.s-map {
  flex: 1;
  background: var(--ci-cream-deep);
  position: relative;
  overflow: hidden;
}
.s-map::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--ci-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ci-line) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: .8;
}
.s-map-streets {
  position: absolute; inset: 0;
  pointer-events: none;
}
.s-map-shape {
  position: absolute;
  background: rgba(246,242,232,.85);
  border: 1px solid var(--ci-line);
  border-radius: 6px;
}
.s-pin {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.s-pin-bubble {
  background: #fff;
  border-radius: 12px;
  padding: 5px 12px;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--ci-ink);
  box-shadow: 0 6px 14px rgba(40,30,10,.15);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.s-pin-marker {
  width: 32px; height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px; font-weight: 700;
  margin-top: 6px;
  box-shadow: 0 6px 12px rgba(40,30,10,.25);
  border: 2px solid #fff;
}
.s-pin-marker > * { transform: rotate(45deg); }
.s-pin.urgent .s-pin-marker { background: var(--ci-danger); }
.s-pin.important .s-pin-marker { background: var(--ci-gold); }
.s-pin.standard .s-pin-marker { background: var(--ci-blue-electric); }
.s-pin.resolu .s-pin-marker { background: var(--ci-teal); }

.s-legend {
  position: absolute;
  top: 16px; left: 16px;
  background: rgba(247,244,237,.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 11.5px;
  display: flex; flex-direction: column; gap: 5px;
  box-shadow: var(--ci-shadow-sm);
}
.s-legend-row { display: flex; align-items: center; gap: 8px; color: var(--ci-ink); }
.s-legend-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}

.s-callout {
  position: absolute;
  bottom: 18px; left: 18px; right: 18px;
  background: rgba(247,244,237,.92);
  backdrop-filter: blur(10px);
  border: 1px solid var(--ci-line);
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 12px 28px rgba(40,30,10,.12);
}
.s-callout-thumb {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a2a2a, #1a1a1a);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  flex-shrink: 0;
}
.s-callout-body { flex: 1; }
.s-callout-row { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.s-callout-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 13.5px; color: var(--ci-ink); }
.s-callout-meta { font-size: 11.5px; color: var(--ci-ink-soft); }

.s-list {
  width: 360px;
  border-left: 1px solid var(--ci-line);
  background: var(--ci-cream);
  overflow-y: auto;
  flex-shrink: 0;
}
.s-list-item {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ci-line);
  display: flex; gap: 12px;
}
.s-list-thumb {
  width: 50px; height: 50px;
  border-radius: 12px;
  background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.s-list-body { flex: 1; min-width: 0; }
.s-list-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ci-ink);
  margin-bottom: 2px;
}
.s-list-meta { font-size: 11px; color: var(--ci-ink-soft); margin-bottom: 5px; }
.s-list-tags { display: flex; gap: 4px; }

/* ==================== COCKPIT ÉLU ==================== */
.e-toolbar {
  padding: 16px 28px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--ci-line);
}
.e-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ci-blue-marianne);
}
.e-title small { display: block; font-size: 9.5px; color: var(--ci-ink-soft); font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 2px; }
.e-toolbar-actions { display: flex; gap: 8px; }
.e-pill-btn {
  padding: 7px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--ci-line);
  background: #fff;
  color: var(--ci-ink);
  cursor: pointer;
}
.e-pill-btn.primary {
  background: var(--ci-grad-primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--ci-shadow-cta);
}

.e-content {
  flex: 1;
  padding: 22px 28px 28px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  overflow-y: auto;
}
.e-kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.e-kpi {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  padding: 14px 18px 16px;
  position: relative;
  box-shadow: var(--ci-shadow-sm);
  overflow: hidden;
}
.e-kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 18px; right: 18px;
  height: 3px;
  background: var(--ci-grad-primary);
  border-radius: 0 0 3px 3px;
}
.e-kpi-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.e-kpi-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
}
.e-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ci-ink-soft);
}
.e-kpi-value {
  font-family: var(--ci-font-display);
  font-weight: 900;
  font-size: 40px;
  letter-spacing: -1px;
  line-height: 1;
  background: var(--ci-grad-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.e-kpi-meta {
  font-size: 11.5px;
  color: var(--ci-ink-soft);
  margin-top: 6px;
}
.e-kpi-meta .up { color: var(--ci-teal); font-weight: 700; }

.e-card {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--ci-shadow-sm);
}
.e-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.e-card-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ci-ink-soft);
}
.e-card-eyebrow.teal { color: var(--ci-teal); }
.e-card-meta { font-size: 11px; color: var(--ci-ink-soft); }

.e-bar-row {
  display: flex; align-items: center;
  margin-bottom: 9px;
  font-size: 12.5px;
}
.e-bar-label {
  width: 150px;
  color: var(--ci-ink);
  font-weight: 500;
}
.e-bar-track {
  flex: 1;
  height: 10px;
  background: var(--ci-cream-deep);
  border-radius: 9999px;
  overflow: hidden;
  margin-right: 12px;
}
.e-bar-fill {
  height: 100%;
  background: var(--ci-grad-primary);
  border-radius: 9999px;
}
.e-bar-val {
  font-family: var(--ci-font-display);
  font-weight: 700;
  color: var(--ci-blue-marianne);
  width: 28px; text-align: right;
}

.e-suggestion {
  margin-top: 14px;
  background: linear-gradient(135deg, rgba(46,196,182,.08), rgba(46,196,182,.02));
  border: 1px solid rgba(46,196,182,.25);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
}
.e-sugg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ci-grad-accent);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.e-sugg-body { flex: 1; }
.e-sugg-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 12.5px; color: #1d8b80; }
.e-sugg-text { font-size: 12px; color: var(--ci-ink); line-height: 1.4; margin-top: 2px; }
.e-sugg-btn {
  background: var(--ci-teal);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(46,196,182,.3);
  cursor: pointer;
}

.e-campaign-progress {
  margin-top: 4px;
  height: 8px;
  background: var(--ci-cream-deep);
  border-radius: 9999px;
  overflow: hidden;
}
.e-camp-fill {
  height: 100%;
  width: 46%;
  background: linear-gradient(90deg, var(--ci-teal), #5dd5c8);
  border-radius: 9999px;
}
.e-camp-row {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: var(--ci-ink-soft);
  margin-top: 6px;
}
.e-camp-row b { font-family: var(--ci-font-display); font-size: 14px; color: var(--ci-teal); }

.e-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--ci-line);
}
.e-alert:last-child { border-bottom: 0; }
.e-alert-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.e-alert-dot.urgent { background: var(--ci-danger); }
.e-alert-dot.info { background: var(--ci-blue-electric); }
.e-alert-body { flex: 1; }
.e-alert-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 12.5px; color: var(--ci-ink); }
.e-alert-meta { font-size: 11px; color: var(--ci-ink-soft); margin-top: 2px; }

.e-diffuse-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 9999px;
  border: 1.5px dashed var(--ci-line);
  background: transparent;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ci-blue-marianne);
  cursor: pointer;
}

.e-donut {
  display: flex; align-items: center; gap: 16px;
}
.e-donut-svg { flex-shrink: 0; }
.e-donut-body { flex: 1; }
.e-donut-title { font-family: var(--ci-font-display); font-weight: 700; font-size: 13.5px; color: var(--ci-ink); }
.e-donut-text { font-size: 11.5px; color: var(--ci-ink-soft); margin-top: 4px; }

/* shared lucide icon helper */
.icon { width: 18px; height: 18px; stroke-width: 1.7; }
.icon.sm { width: 14px; height: 14px; }
.icon.md { width: 16px; height: 16px; }
.icon.lg { width: 22px; height: 22px; }

/* =============================================
   Cockpit Élu : Variante "Éditorial vivant"
   ============================================= */
.ev-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background:
    radial-gradient(1100px 380px at 100% -8%, rgba(0,123,255,0.05), transparent 60%),
    radial-gradient(900px 320px at 0% 100%, rgba(46,196,182,0.06), transparent 55%),
    var(--ci-cream);
}
.ev-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--ci-line);
  background: rgba(247, 244, 237, 0.7);
  backdrop-filter: blur(10px);
}
.ev-toolbar-id {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ev-toolbar-id small {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ci-ink-soft);
  font-weight: 600;
}
.ev-toolbar-id b {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ci-blue-marianne);
}
.ev-toolbar-tabs {
  display: flex;
  gap: 4px;
  background: var(--ci-cream-deep);
  padding: 4px;
  border-radius: 9999px;
  border: 1px solid var(--ci-line);
}
.ev-tab {
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: var(--ci-ink-soft);
  font-family: var(--ci-font-sans);
}
.ev-tab.active {
  background: var(--ci-cream);
  color: var(--ci-blue-marianne);
  box-shadow: 0 2px 8px rgba(40,30,10,.06);
}

.ev-content {
  flex: 1;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
  padding: 22px 32px;
}

/* Headline narrative, sentence as hero (compact, plus aéré, plus lisible) */
.ev-headline {
  grid-column: 1 / -1;
  position: relative;
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, #000091 0%, #1a1a6e 60%, #083776 100%);
  overflow: hidden;
  color: #fff;
}
.ev-headline::before {
  content: '';
  position: absolute;
  top: -120px; right: -100px;
  width: 420px; height: 340px;
  background: radial-gradient(circle, rgba(0,123,255,.42), transparent 60%);
  pointer-events: none;
}
.ev-headline::after {
  content: '';
  position: absolute;
  bottom: -120px; left: 28%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(46,196,182,.16), transparent 65%);
  pointer-events: none;
}
.ev-headline-eyebrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  margin-bottom: 10px;
}
.ev-headline-eyebrow::before {
  content: '✨';
  width: auto; height: auto; background: none; box-shadow: none;
  border-radius: 0;
  font-size: 12px;
  filter: drop-shadow(0 0 6px rgba(46,196,182,.6));
}
.ev-headline-text {
  position: relative;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -.2px;
  max-width: 92%;
  color: rgba(255,255,255,.92);
}
.ev-headline-text em {
  font-style: normal;
  background: linear-gradient(95deg, #FFFFFF 0%, #98E2DA 55%, #2EC4B6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
  font-size: 18px;
}
.ev-headline-text u {
  text-decoration: none;
  color: #FFD9A8;
  font-weight: 700;
  background: rgba(244, 162, 97, .12);
  padding: 1px 6px;
  border-radius: 6px;
}
.ev-headline-stats {
  position: relative;
  display: flex;
  gap: 28px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
}
.ev-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ev-mini-stat-val {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: -.5px;
  line-height: 1;
}
.ev-mini-stat-val .delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ci-teal);
  margin-left: 6px;
  letter-spacing: 0;
}
.ev-mini-stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.65);
  font-weight: 600;
  margin-top: 6px;
}

/* Pulse strip, calendar heatmap */
.ev-pulse {
  background: var(--ci-cream-warm);
  border-radius: 20px;
  border: 1px solid var(--ci-line);
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ev-card-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ev-eyebrow {
  font-size: 9.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ci-ink-soft);
  font-weight: 700;
}
.ev-eyebrow.teal { color: var(--ci-teal); }
.ev-pulse-grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
}
.ev-pulse-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--ci-cream-deep);
}
.ev-pulse-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ci-ink-soft);
}
.ev-pulse-legend-row {
  display: flex;
  gap: 3px;
  margin: 0 6px;
}
.ev-pulse-legend-cell {
  width: 10px; height: 10px;
  border-radius: 3px;
}

/* Spark rows, topics with sparkline + delta */
.ev-spark-rows {
  display: flex;
  flex-direction: column;
}
.ev-spark-row {
  display: grid;
  grid-template-columns: 1.4fr auto 100px 60px;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--ci-line);
}
.ev-spark-row:last-child { border-bottom: 0; }
.ev-spark-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ev-spark-name {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ci-ink);
  letter-spacing: -.2px;
}
.ev-spark-sub {
  font-size: 10.5px;
  color: var(--ci-ink-soft);
}
.ev-spark-num {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ci-blue-marianne);
  letter-spacing: -.6px;
  line-height: 1;
  text-align: right;
}
.ev-spark-svg {
  width: 100%;
  height: 32px;
}
.ev-spark-delta {
  font-size: 11px;
  font-weight: 700;
  text-align: right;
  font-family: var(--ci-font-display);
}
.ev-spark-delta.up { color: var(--ci-teal); }
.ev-spark-delta.down { color: var(--ci-ink-soft); }
.ev-spark-delta.urgent { color: var(--ci-gold); }

/* Marianne narrator, assistant card */
.ev-narrator {
  background: var(--ci-cream-warm);
  border: 1px solid var(--ci-line);
  border-radius: 20px;
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
}
.ev-narrator::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ci-grad-accent);
}
.ev-narrator-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ev-narrator-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ci-grad-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 4px 12px rgba(0,0,145,.25);
}
.ev-narrator-id {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--ci-blue-marianne);
}
.ev-narrator-id small {
  display: block;
  font-size: 10px;
  color: var(--ci-ink-soft);
  font-weight: 500;
  margin-top: 1px;
}
.ev-narrator-body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ci-ink);
}
.ev-narrator-body b {
  background: var(--ci-grad-primary);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 800;
}
.ev-narrator-body mark {
  background: rgba(46,196,182,.18);
  color: var(--ci-ink);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.ev-narrator-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.ev-narrator-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 9999px;
  background: rgba(46,196,182,.12);
  color: var(--ci-teal);
  border: 1px solid rgba(46,196,182,.3);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ci-font-sans);
}
.ev-narrator-chip.outline {
  background: transparent;
  color: var(--ci-blue-marianne);
  border-color: var(--ci-line);
}

/* Live commune map */
.ev-map-card {
  background: var(--ci-cream-warm);
  border: 1px solid var(--ci-line);
  border-radius: 20px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.ev-map-canvas {
  position: relative;
  background:
    radial-gradient(circle at 30% 40%, rgba(46,196,182,.12), transparent 30%),
    radial-gradient(circle at 70% 30%, rgba(220,53,69,.14), transparent 25%),
    radial-gradient(circle at 60% 70%, rgba(244,162,97,.18), transparent 30%),
    var(--ci-cream-deep);
  border-radius: 14px;
  height: 200px;
  overflow: hidden;
  border: 1px solid var(--ci-line);
}
.ev-map-shape {
  position: absolute;
  background: rgba(255,255,255,.45);
  border-radius: 4px;
  border: 1px solid rgba(200,190,170,.4);
}
.ev-map-road {
  position: absolute;
  background: rgba(200,190,170,.5);
  border-radius: 1px;
}
.ev-map-blip {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.ev-map-blip::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: .25;
  animation: ev-pulse 2.4s infinite;
}
@keyframes ev-pulse {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(2.2); opacity: 0; }
}
.ev-map-blip.urgent { background: var(--ci-danger); color: var(--ci-danger); }
.ev-map-blip.warn { background: var(--ci-gold); color: var(--ci-gold); }
.ev-map-blip.info { background: var(--ci-blue-electric); color: var(--ci-blue-electric); }
.ev-map-blip.ok { background: var(--ci-teal); color: var(--ci-teal); }

.ev-map-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ev-map-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
}
.ev-map-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ev-map-row-name { font-weight: 600; color: var(--ci-ink); flex: 1; }
.ev-map-row-meta { color: var(--ci-ink-soft); font-size: 10.5px; }

/* Decision queue */
.ev-decisions {
  background: var(--ci-cream-warm);
  border: 1px solid var(--ci-line);
  border-radius: 20px;
  padding: 18px 22px;
}
.ev-decision {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  align-items: center;
  border-bottom: 1px dashed var(--ci-line);
}
.ev-decision:last-child { border-bottom: 0; }
.ev-decision-step {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ci-cream);
  border: 1.5px solid var(--ci-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--ci-blue-marianne);
}
.ev-decision-body { display: flex; flex-direction: column; gap: 2px; }
.ev-decision-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ci-ink);
}
.ev-decision-meta {
  font-size: 10.5px;
  color: var(--ci-ink-soft);
}
.ev-decision-cta {
  padding: 7px 14px;
  border-radius: 9999px;
  background: var(--ci-blue-marianne);
  color: #fff;
  border: 0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--ci-font-sans);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ev-decision-cta.ghost {
  background: transparent;
  color: var(--ci-blue-marianne);
  border: 1px solid var(--ci-line);
}

/* Engagement gauge */
.ev-gauge-card {
  background: var(--ci-cream-warm);
  border: 1px solid var(--ci-line);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ev-gauge {
  position: relative;
  height: 90px;
  display: flex;
  justify-content: center;
}
.ev-gauge svg { overflow: visible; }
.ev-gauge-readout {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.ev-gauge-num {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -1px;
  background: var(--ci-grad-accent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  line-height: 1;
}
.ev-gauge-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ci-ink-soft);
  font-weight: 600;
  margin-top: 4px;
}
.ev-gauge-rows {
  display: flex;
  justify-content: space-around;
  text-align: center;
  border-top: 1px dashed var(--ci-line);
  padding-top: 14px;
}
.ev-gauge-mini-num {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ci-blue-marianne);
}
.ev-gauge-mini-label {
  font-size: 10px;
  color: var(--ci-ink-soft);
  margin-top: 2px;
}

/* ====================================================================
   APP MODE : override des wrappers .phone et .desktop pour le web réel
   Activé via <body class="app-mode"> (mode prod, pas canvas)
   Le canvas (?canvas=1) garde le rendu original (smartphone + desktop chrome)
   ==================================================================== */

/* ---- Reset wrapper smartphone : on transforme le frame iOS en panneau web responsive ---- */
.app-mode { background: var(--ci-cream) !important; min-height: 100vh; min-height: 100dvh; }
.app-mode #root { min-height: 100vh; min-height: 100dvh; }

.app-mode .phone {
  width: 100% !important;
  max-width: 720px;            /* contenu lisible mais pas étiré */
  margin: 0 auto;
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ci-cream) !important;
  /* Espace pour la bottom-tab nav (mobile) + safe-area home indicator iPhone */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.app-mode .phone::before { display: none !important; }      /* notch off */
.app-mode .phone-status   { display: none !important; }      /* status bar fake off */
.app-mode .phone-body {
  height: auto !important;
  min-height: calc(100vh - 72px);
  overflow: visible !important;
}

/* En desktop ≥768px : citoyen pleine largeur (pas de carte mobile centrée).
   Décision user 5 mai 2026 : full-page sur ordinateur, web app sur smartphone <768px.
   Cohérence visuelle avec agent/élu (.desktop wrapper). */
@media (min-width: 768px) {
  .app-mode .phone {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    min-height: 100vh !important;
    padding-bottom: 0 !important;
    /* Crème UNIQUE pleine largeur (règle 11/07/2026) : même valeur que le fond
       des écrans (--v2-cream), sinon la colonne centrale 1100px se détache en
       bandes de crèmes différentes sur desktop. */
    background: var(--v2-cream, #F9F6F2) !important;
  }
  .app-mode .phone-body {
    min-height: 100vh;
    max-width: 1100px;
    margin: 0 auto;
    /* 110px en bas : dégage la bottom-tabs fixe (64px + confort) */
    padding: 32px 32px 110px;
  }
  /* Bottom-tabs VISIBLES en desktop (demande Thibaut 11/07/2026) : même navigation
     que sur mobile, sinon impossible de passer du chat à « Ma commune » sans
     revenir en arrière. Items centrés et resserrés pour rester premium en large. */
  .app-mode .bottom-tabs {
    justify-content: center;
    gap: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .app-mode .bottom-tabs .bt-item {
    flex: 0 0 auto;
    min-width: 76px;
  }
  /* Chips de suggestions du chat : centrées et en retour à la ligne sur desktop
     (règle 11/07/2026 : jamais une rangée collée à gauche sur écran large). */
  .app-mode .c-suggestions {
    justify-content: center !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* ---- Reset wrapper desktop (cockpit/inbox) : retire la fake browser bar, full-screen ---- */
.app-mode .desktop {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 100vh;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--ci-cream) !important;
}
.app-mode .desktop-chrome { display: none !important; }       /* fake "lights + URL" off */
.app-mode .desktop-content {
  min-height: 100vh;
}

/* ---- Bottom-tab nav citoyen (mobile only) ---- */
.bottom-tabs {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: auto;
  min-height: 64px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--ci-line);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 100;
}
.bottom-tabs .bt-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--ci-ink-soft);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ci-font-sans);
  padding: 6px 4px;
  border-radius: 10px;
  transition: color .15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.bottom-tabs .bt-item:active { background: rgba(0, 0, 145, 0.05); }
.bottom-tabs .bt-item.active { color: var(--ci-blue-marianne); }
.bottom-tabs .bt-item svg { width: 22px; height: 22px; }
.bottom-tabs .bt-item.active svg { stroke: var(--ci-blue-marianne); }

/* Bouton "Espace mairie" (CTA discret bas de l'accueil citoyen, mobile) */
.app-mode .elu-link {
  display: block;
  text-align: center;
  margin: 24px 16px 0;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--ci-ink-soft);
  text-decoration: none;
  border: 1px solid var(--ci-line);
  border-radius: 10px;
  background: transparent;
  font-family: var(--ci-font-sans);
}
.app-mode .elu-link:hover { color: var(--ci-blue-marianne); }

/* ---- Écrans simples (Agenda, Ma commune) : listes denses ---- */
.c-list-section { padding: 16px 22px; }
.c-list-title {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ci-blue-marianne);
  margin: 0 0 12px;
}
.c-list-card {
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.c-list-card .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--ci-cream-deep);
  display: flex; align-items: center; justify-content: center;
  color: var(--ci-blue-marianne);
  flex: 0 0 auto;
}
.c-list-card .body { flex: 1; min-width: 0; }
.c-list-card .ttl {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ci-ink);
  margin: 0 0 2px;
}
.c-list-card .meta {
  font-size: 12px;
  color: var(--ci-ink-soft);
  line-height: 1.4;
}
.c-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--ci-ink-soft);
  font-size: 13px;
}

/* ====================================================================
   CHAT SCREEN : layout flex column ; suggestions + composer toujours visibles
   au-dessus des bottom-tabs (qui sont position:fixed bottom:0 hauteur 64px)
   ==================================================================== */
/* Wrapper .phone en mode chat : prend toute la hauteur viewport SAUF les bottom-tabs.
   100dvh (dynamic viewport height) suit la barre d'outils mobile dynamique : sans ça,
   le composer + les bottom-tabs étaient poussés DERRIÈRE la barre Safari/Chrome, ce qui
   faisait chevaucher le bas de l'input avec les boutons de nav (« bouton caché »).
   On réserve 64px (bottom-tabs) + la safe-area du home indicator iPhone. */
.app-mode .phone:has(.c-chat-body) {
  height: calc(100vh - 64px) !important;
  height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)) !important;
  min-height: calc(100vh - 64px) !important;
  min-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)) !important;
  max-height: calc(100vh - 64px) !important;
  max-height: calc(100dvh - 64px - env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
}
/* Le phone-body devient le conteneur flex principal */
.app-mode .phone:has(.c-chat-body) > .phone-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
}
/* Header chat (Marianne), taille fixe */
.app-mode .phone:has(.c-chat-body) .c-chat-header {
  flex: 0 0 auto;
}
/* Body chat, prend le reste, scroll interne uniquement */
.app-mode .phone:has(.c-chat-body) .c-chat-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
/* Suggestions et composer, taille naturelle, pas de scroll, fond opaque */
.app-mode .phone:has(.c-chat-body) .c-suggestions {
  flex: 0 0 auto;
  background: rgba(247, 244, 237, 0.95);
}
/* Rangée de suggestions = une seule ligne qui défile horizontalement (laisse la place au chat) */
.app-mode .c-suggestions::-webkit-scrollbar { display: none; }
.app-mode .phone:has(.c-chat-body) .c-composer {
  flex: 0 0 auto;
  position: static !important;       /* override .c-composer { position:absolute } du CSS de base */
  bottom: auto !important;
  width: auto !important;
  background: var(--ci-cream);
  border-top: 1px solid var(--ci-line);
}

/* ====================================================================
   CHAT DESKTOP : full-viewport, header sticky top, body scroll, composer sticky bottom.
   Décision user 5 mai 2026 : layout web premium, pas de "feuille" 640px centrée.
   Contenu (header/messages/composer) centré max 820px via padding-inline calc.
   ==================================================================== */
@media (min-width: 768px) {
  /* Le wrapper .phone du chat prend le viewport MOINS la bottom-tabs (64px),
     visible en desktop depuis le 11/07/2026 : sans cette soustraction, le
     composer passe SOUS la barre de navigation. */
  .app-mode .phone:has(.c-chat-body) {
    height: calc(100vh - 64px) !important;
    min-height: calc(100vh - 64px) !important;
    max-height: calc(100vh - 64px) !important;
  }
  /* Override de phone-body desktop par défaut (max-width 1100px + padding), chat sans contraintes */
  .app-mode .phone:has(.c-chat-body) > .phone-body {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  /* Header sticky top, full-width, contenu centré 820px */
  .app-mode .phone:has(.c-chat-body) .c-chat-header {
    padding: 16px max(calc((100vw - 820px) / 2), 24px);
    background: var(--ci-blue-marianne);
    box-shadow: 0 2px 12px rgba(0, 0, 145, 0.12);
  }
  /* Body scroll, bulles centrées dans une colonne 820px */
  .app-mode .phone:has(.c-chat-body) .c-chat-body {
    padding: 28px max(calc((100vw - 820px) / 2), 24px) 28px;
    background: var(--ci-cream);
  }
  /* Bulles : taille adaptée au desktop */
  .app-mode .phone:has(.c-chat-body) .c-bubble {
    max-width: 680px;
    font-size: 15px;
    line-height: 1.6;
    padding: 16px 20px;
  }
  .app-mode .phone:has(.c-chat-body) .c-bubble.bot { padding: 18px 22px; }
  .app-mode .phone:has(.c-chat-body) .c-bubble.bot h4 { font-size: 15.5px; }
  .app-mode .phone:has(.c-chat-body) .c-bubble-row { margin-bottom: 18px; }
  .app-mode .phone:has(.c-chat-body) .c-bubble-avatar {
    width: 32px; height: 32px; font-size: 12px;
  }
  /* Suggestions : pleines largeur, contenu centré */
  .app-mode .phone:has(.c-chat-body) .c-suggestions {
    padding: 12px max(calc((100vw - 820px) / 2), 24px);
    background: rgba(247, 244, 237, 0.96);
    border-top: 1px solid var(--ci-line);
  }
  /* Composer sticky bottom, full-width, contenu centré */
  .app-mode .phone:has(.c-chat-body) .c-composer {
    padding: 14px max(calc((100vw - 820px) / 2), 24px);
    background: #fff;
    border-top: 1px solid var(--ci-line);
    box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.04);
  }
  /* Signature "Propulsé par Civik-ia", recadrée sur la zone centrée */
  .app-mode .phone:has(.c-chat-body) .c-signature {
    padding-left: max(calc((100vw - 820px) / 2), 24px) !important;
    padding-right: max(calc((100vw - 820px) / 2), 24px) !important;
  }
  /* Source chips et action card, recadrés sur le contenu centré */
  .app-mode .phone:has(.c-chat-body) .c-source-chips,
  .app-mode .phone:has(.c-chat-body) .c-action-card {
    margin-left: 40px;
    max-width: 680px;
  }
}

/* ====================================================================
   AGENT INBOX (Module 2) : Login + Layout 3 colonnes + Modals + Toast
   ==================================================================== */

/* Quand persona = agent, on neutralise les wrappers .phone de l'app citoyen */
.app-mode[data-persona="agent"] .phone,
.app-mode[data-persona="agent"] .phone-body {
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.app-mode[data-persona="agent"] { background: var(--ci-cream-deep) !important; }

/* ---- LOGIN ---- */
.agent-login-shell {
  min-height: 100vh;
  background: linear-gradient(135deg, #000091 0%, #1a1a6e 100%);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.agent-login-card {
  background: #fff; width: 100%; max-width: 380px;
  padding: 32px 28px; border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 70, 0.4);
}
.agent-login-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ci-ink); margin-bottom: 6px; font-family: var(--ci-font-sans);
}
.agent-login-input {
  width: 100%; box-sizing: border-box;
  padding: 11px 14px; font-size: 14px;
  border: 1px solid var(--ci-line); border-radius: 10px;
  margin-bottom: 14px; outline: none; font-family: inherit;
  transition: border-color .15s ease;
}
.agent-login-input:focus { border-color: var(--ci-blue-marianne); }
.agent-login-button {
  width: 100%; padding: 13px;
  background: var(--ci-blue-marianne); color: #fff;
  font-weight: 600; font-size: 14px;
  border: none; border-radius: 10px;
  cursor: pointer; font-family: inherit; margin-top: 6px;
}
.agent-login-button:hover { background: var(--ci-blue-marianne-light); }
.agent-login-button:disabled { opacity: 0.6; cursor: not-allowed; }
.agent-login-error {
  padding: 10px 12px;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px; color: var(--ci-danger);
  font-size: 12px; margin-bottom: 12px;
}

/* ---- LAYOUT 3 COLONNES ---- */
.agent-inbox-shell { background: var(--ci-cream-deep); height: 100vh; display: flex; flex-direction: column; }
.agent-header {
  background: #fff;
  border-bottom: 1px solid var(--ci-line);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.agent-header-left { display: flex; align-items: center; gap: 12px; }
.agent-header-right { display: flex; align-items: center; gap: 8px; }
.agent-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; background: var(--ci-blue-marianne); color: #fff;
  border: none; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background .15s;
}
.agent-action-btn:hover { background: var(--ci-blue-marianne-light); }
.agent-user-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--ci-cream-deep);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ci-ink);
}
.agent-logout {
  background: transparent; border: 1px solid var(--ci-line);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  color: var(--ci-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-logout:hover { color: var(--ci-danger); border-color: var(--ci-danger); }

.agent-layout {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 220px minmax(280px, 380px) 1fr;
  overflow: hidden;
}

/* SIDEBAR */
.agent-sidebar {
  background: #fff; border-right: 1px solid var(--ci-line);
  padding: 16px 12px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.agent-sidebar-section { margin-bottom: 18px; }
.agent-sidebar-title {
  font-size: 10px; font-weight: 700; color: var(--ci-ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 8px; padding: 0 6px;
}
.agent-nav-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; font-size: 13px; color: var(--ci-ink);
  margin-bottom: 2px;
}
.agent-nav-item:hover { background: var(--ci-cream-deep); }
.agent-nav-item.active { background: var(--ci-blue-marianne); color: #fff; }
.agent-nav-count {
  background: var(--ci-teal); color: #fff;
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
}
.agent-nav-item.active .agent-nav-count { background: #fff; color: var(--ci-blue-marianne); }
.agent-sidebar-foot {
  margin-top: auto; font-size: 10px; color: var(--ci-ink-soft);
  text-align: center; padding-top: 12px;
}

/* LISTE messages */
.agent-list {
  background: var(--ci-cream-warm);
  border-right: 1px solid var(--ci-line);
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.agent-list-toolbar {
  background: #fff; border-bottom: 1px solid var(--ci-line);
  padding: 10px; display: flex; gap: 6px;
  position: sticky; top: 0; z-index: 1;
}
.agent-search-input {
  flex: 1; padding: 8px 12px;
  border: 1px solid var(--ci-line); border-radius: 8px;
  font-size: 13px; outline: none; font-family: inherit;
}
.agent-icon-btn {
  background: #fff; border: 1px solid var(--ci-line);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
  color: var(--ci-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-icon-btn:hover { color: var(--ci-blue-marianne); }
.agent-list-empty { padding: 32px 16px; text-align: center; color: var(--ci-ink-soft); font-size: 13px; }
.agent-list-error { padding: 24px 16px; text-align: center; color: var(--ci-ink); font-size: 13px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.agent-retry-btn { padding: 7px 16px; border: 1px solid var(--ci-line, #d8dee9); border-radius: 8px; background: #fff; color: var(--ci-navy, #1a2b4a); font-size: 13px; font-weight: 600; cursor: pointer; }
.agent-retry-btn:hover { background: var(--ci-cream, #f7f5ef); }

.agent-msg-card {
  background: #fff; border-bottom: 1px solid var(--ci-line);
  padding: 12px 14px; cursor: pointer; transition: background .12s;
}
.agent-msg-card:hover { background: var(--ci-cream-deep); }
.agent-msg-card.selected {
  background: rgba(0, 0, 145, 0.06);
  border-left: 3px solid var(--ci-blue-marianne); padding-left: 11px;
}
.agent-msg-card.unread { background: rgba(46, 196, 182, 0.05); }
.agent-msg-card.unread.selected { background: rgba(0, 0, 145, 0.06); }
.agent-msg-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; margin-bottom: 4px; }
.agent-msg-type { font-size: 12px; }
.agent-msg-cat {
  background: var(--ci-cream-deep); padding: 2px 6px; border-radius: 4px;
  color: var(--ci-ink-soft); text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.3px;
}
.agent-msg-time { color: var(--ci-ink-soft); margin-left: auto; }
.agent-msg-subject { font-weight: 700; font-size: 13px; color: var(--ci-ink); margin-bottom: 3px; }
.agent-msg-card.unread .agent-msg-subject { color: var(--ci-blue-marianne); }
.agent-msg-preview {
  font-size: 12px; color: var(--ci-ink-soft); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.agent-msg-footer {
  display: flex; justify-content: space-between;
  margin-top: 6px; font-size: 10px;
}
.agent-msg-status {
  padding: 2px 7px; border-radius: 4px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.agent-msg-status.status-nouveau   { background: rgba(46, 196, 182, 0.15); color: #1a826b; }
.agent-msg-status.status-lu        { background: var(--ci-cream-deep); color: var(--ci-ink-soft); }
.agent-msg-status.status-en_cours  { background: rgba(244, 162, 97, 0.15); color: #c66a1c; }
.agent-msg-status.status-repondu   { background: rgba(0, 0, 145, 0.1); color: var(--ci-blue-marianne); }
.agent-msg-status.status-archive   { background: #f0f0f0; color: #888; }
.agent-msg-ticket { color: var(--ci-ink-soft); font-family: monospace; }

/* DÉTAIL */
.agent-detail { background: #fff; overflow-y: auto; display: flex; flex-direction: column; }
.agent-detail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--ci-ink-soft); font-size: 14px;
}
.agent-detail-head {
  padding: 16px 22px; border-bottom: 1px solid var(--ci-line);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.agent-detail-eyebrow {
  font-size: 11px; color: var(--ci-ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.agent-detail-title {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 18px; color: var(--ci-blue-marianne);
}
.agent-status-select {
  padding: 6px 10px; border: 1px solid var(--ci-line); border-radius: 8px;
  font-size: 12px; font-family: inherit; background: #fff;
}
.agent-detail-body { padding: 16px 22px; flex: 1; overflow-y: auto; }
.agent-detail-block { margin-bottom: 22px; }
.agent-detail-label {
  font-size: 11px; font-weight: 700; color: var(--ci-ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px;
}
.agent-detail-content {
  font-size: 13px; color: var(--ci-ink); line-height: 1.5;
  margin-bottom: 12px; white-space: pre-line;
}
.agent-reply-bubble {
  background: rgba(0, 0, 145, 0.05);
  border-left: 3px solid var(--ci-blue-marianne);
  padding: 10px 14px; border-radius: 0 8px 8px 0;
  margin-bottom: 8px; font-size: 13px; line-height: 1.5;
}
.agent-reply-input {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; border: 1px solid var(--ci-line); border-radius: 10px;
  font-size: 13px; font-family: inherit; outline: none; resize: vertical;
}
.agent-reply-input:focus { border-color: var(--ci-blue-marianne); }
.agent-reply-send {
  padding: 9px 18px; background: var(--ci-blue-marianne); color: #fff;
  font-weight: 600; font-size: 13px;
  border: none; border-radius: 8px;
  cursor: pointer; font-family: inherit;
}
.agent-reply-send:hover { background: var(--ci-blue-marianne-light); }
.agent-reply-send:disabled { opacity: 0.5; cursor: not-allowed; }
.agent-reply-archive {
  padding: 9px 14px; background: transparent; color: var(--ci-ink-soft);
  border: 1px solid var(--ci-line); border-radius: 8px;
  cursor: pointer; font-size: 13px; font-family: inherit;
}
.agent-reply-archive:hover { background: var(--ci-cream-deep); }

/* MODALS */
.agent-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 15, 30, 0.5);
  backdrop-filter: blur(3px); z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: fadeIn .15s ease;
}
.agent-modal-card {
  background: #fff; border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 70, 0.4);
  width: 100%; max-width: 520px; max-height: 90vh;
  overflow: hidden; display: flex; flex-direction: column;
}
.agent-modal-head {
  padding: 16px 22px; border-bottom: 1px solid var(--ci-line);
  display: flex; align-items: center; justify-content: space-between;
}
.agent-modal-title {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 16px; color: var(--ci-blue-marianne);
}
.agent-modal-close {
  background: transparent; border: none;
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  color: var(--ci-ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
}
.agent-modal-close:hover { background: var(--ci-cream-deep); }
.agent-modal-body { padding: 18px 22px; overflow-y: auto; }

.agent-form-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ci-ink); margin-bottom: 6px; margin-top: 10px;
}
.agent-form-input {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; border: 1px solid var(--ci-line); border-radius: 8px;
  font-size: 13px; font-family: inherit; outline: none; background: #fff;
}
.agent-form-input:focus { border-color: var(--ci-blue-marianne); }
.agent-form-error {
  padding: 8px 12px; margin-top: 10px;
  background: rgba(220, 53, 69, 0.08);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: 8px; color: var(--ci-danger); font-size: 12px;
}
.agent-form-submit {
  width: 100%; padding: 11px;
  background: var(--ci-blue-marianne); color: #fff;
  font-weight: 600; font-size: 13px;
  border: none; border-radius: 8px; margin-top: 16px;
  cursor: pointer; font-family: inherit;
}
.agent-form-submit:hover { background: var(--ci-blue-marianne-light); }
.agent-form-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.agent-toast {
  position: fixed; bottom: 24px; right: 24px;
  background: var(--ci-ink); color: #fff;
  padding: 12px 18px; border-radius: 10px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1100; animation: slideUp .25s ease; max-width: 360px;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Responsive, mobile/tablette : reflow en stack */
@media (max-width: 900px) {
  .agent-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
  }
  .agent-sidebar {
    border-right: none; border-bottom: 1px solid var(--ci-line);
    flex-direction: row; overflow-x: auto; padding: 8px;
  }
  .agent-sidebar-section { margin-bottom: 0; margin-right: 12px; flex: 0 0 auto; }
  .agent-sidebar-foot { display: none; }
  .agent-list { max-height: 40vh; }
  .agent-header-right .agent-action-btn span { display: none; }
}

/* ====================================================================
   MODE DÉMO : bandeau permanent + ajustements pour iframe sur /demo
   ==================================================================== */
.demo-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--ci-gold);
  color: var(--ci-ink);
  padding: 6px 14px;
  font-size: 11px; font-weight: 600;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--ci-font-sans);
  box-shadow: 0 2px 8px rgba(40, 30, 10, 0.15);
}
.demo-banner svg { color: var(--ci-blue-marianne); }
/* En mode démo, on décale les containers principaux pour ne pas être cachés par le bandeau */
body.app-mode .agent-inbox-shell,
body.app-mode .cockpit-shell {
  padding-top: 28px;
}
body.app-mode .agent-login-shell { padding-top: 28px; }

/* ─── Mode iframe (embarqué sur /demo parent) ──────────────────────────
   Masque le bandeau démo (le parent affiche déjà la mention "données fictives")
   ET les boutons logout (croix) pour éviter qu'un visiteur se déconnecte sans
   pouvoir revenir (pas de credentials).
   Annule aussi le padding-top compensatoire du bandeau (puisqu'il disparaît).
   ──────────────────────────────────────────────────────────────────── */
html.demo-iframe-mode .demo-banner,
html.demo-iframe-mode .agent-logout { display: none !important; }
html.demo-iframe-mode body.app-mode .agent-inbox-shell,
html.demo-iframe-mode body.app-mode .cockpit-shell,
html.demo-iframe-mode body.app-mode .agent-login-shell { padding-top: 0; }

/* ====================================================================
   DÉMO VITRINE : Switcher de persona (Citoyen · Agent · Mairie)
   Visible uniquement en mode démo (cfg.isDemo). Permet à un prospect de
   parcourir les 3 modules vendus sans connaître les URLs ni s'authentifier.
   Additif + gated : zéro impact hors démo. (ADR 0013)
   ==================================================================== */
/* Contrôle repliable ancré en HAUT À DROITE : ne masque ni la saisie chat
   (en bas) ni le contenu. Replié par défaut → footprint minimal. */
.demo-persona-switcher {
  position: fixed;
  top: 10px;
  right: 10px;
  bottom: auto;
  left: auto;
  transform: none;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}
.demo-persona-switcher .dps-toggle {
  pointer-events: auto;
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ci-font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  background: rgba(0, 0, 25, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 7px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(0, 0, 40, 0.32);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  transition: background 0.18s ease, transform 0.1s ease;
}
.demo-persona-switcher .dps-toggle:hover { background: rgba(0, 0, 40, 0.92); }
.demo-persona-switcher .dps-toggle:active { transform: scale(0.97); }
.demo-persona-switcher .dps-toggle .dps-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ci-teal); opacity: 1; flex: 0 0 auto;
}
.demo-persona-switcher .dps-caret { font-size: 10px; opacity: 0.85; }
.demo-persona-switcher .dps-menu {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  min-width: 152px;
  background: rgba(0, 0, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 40, 0.42);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.demo-persona-switcher .dps-caption {
  font-family: var(--ci-font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 2px 8px 4px;
}
.demo-persona-switcher .dps-pill {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--ci-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.82);
  background: transparent;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background 0.16s ease, color 0.16s ease, transform 0.1s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  text-align: left;
}
.demo-persona-switcher .dps-pill:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.demo-persona-switcher .dps-pill:active { transform: scale(0.97); }
.demo-persona-switcher .dps-pill.active {
  color: #fff;
  background: linear-gradient(135deg, var(--ci-blue-marianne), var(--ci-teal));
  box-shadow: 0 2px 10px rgba(46, 196, 182, 0.4);
}
.demo-persona-switcher .dps-pill .dps-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: 0.6; flex: 0 0 auto;
}
.demo-persona-switcher .dps-pill.active .dps-dot { opacity: 1; }

@media (max-width: 768px) {
  .demo-persona-switcher { top: 8px; right: 8px; }
  .demo-persona-switcher .dps-toggle { font-size: 11px; padding: 6px 10px; }
}

/* ====================================================================
   COCKPIT ÉLU (Module 3) : KPIs, headline, plan action, PDF
   ==================================================================== */

/* Quand persona = elu, neutralise les wrappers .phone */
.app-mode[data-persona="elu"] .phone,
.app-mode[data-persona="elu"] .phone-body {
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  min-height: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.app-mode[data-persona="elu"] { background: var(--ci-cream-deep) !important; }

/* SHELL */
.cockpit-shell {
  background: var(--ci-cream-deep);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* HEADER */
.cockpit-header {
  background: #fff;
  border-bottom: 1px solid var(--ci-line);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 auto;
}
.cockpit-header-left { display: flex; align-items: center; gap: 14px; }
.cockpit-header-title {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 16px;
  color: var(--ci-blue-marianne);
}
.cockpit-header-subtitle { font-size: 11px; color: var(--ci-ink-soft); }
.cockpit-header-right { display: flex; align-items: center; gap: 8px; }
.cockpit-period-select {
  padding: 7px 12px;
  border: 1px solid var(--ci-line); border-radius: 8px;
  font-size: 12px; font-family: inherit;
  background: #fff; cursor: pointer;
}

/* BODY */
.cockpit-body {
  flex: 1 1 auto;
  padding: 24px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}
.cockpit-loading {
  text-align: center; padding: 40px;
  color: var(--ci-ink-soft); font-size: 14px;
}

/* HEADLINE narratif, format chips visuelles (pas un pavé de texte) */
.cockpit-headline-card {
  position: relative;
  background: linear-gradient(135deg, #000091 0%, #1a1a6e 60%, #0d2466 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 12px 30px rgba(0, 0, 70, 0.18);
  overflow: hidden;
}
.cockpit-headline-card::before {
  content: '';
  position: absolute;
  top: -120px; right: -100px;
  width: 380px; height: 320px;
  background: radial-gradient(circle, rgba(0,123,255,.35), transparent 60%);
  pointer-events: none;
}
.cockpit-headline-eyebrow {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--ci-teal);
  margin-bottom: 10px;
}
.cockpit-headline-text {
  /* Fallback texte simple (utilisé si summary indisponible) */
  font-family: var(--ci-font-display);
  font-size: 15px; line-height: 1.45;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}

/* Hook : 1 ligne max avec les 2 chiffres principaux en grand.
   Chaque "chiffre + label" est dans un .cockpit-hook-group nowrap pour éviter le saut de ligne au milieu. */
.cockpit-headline-hook {
  position: relative;
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 6px 10px;
  font-family: var(--ci-font-sans);
  font-size: 13px;
  color: rgba(255,255,255,.75);
  margin-bottom: 14px;
}
.cockpit-hook-group {
  display: inline-flex; align-items: baseline; gap: 6px;
  white-space: nowrap;
}
.cockpit-headline-hook strong {
  font-family: var(--ci-font-display);
  font-weight: 800;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -.6px;
  background: linear-gradient(95deg, #FFFFFF 0%, #98E2DA 55%, #2EC4B6 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.cockpit-hook-label { font-weight: 500; }
.cockpit-hook-dot { color: rgba(255,255,255,.3); font-weight: 400; padding: 0 4px; }
.cockpit-hook-delta {
  display: inline-flex; align-items: center;
  margin-left: 4px;
  padding: 3px 10px;
  background: rgba(46,196,182,.18);
  color: #2EC4B6;
  border: 1px solid rgba(46,196,182,.4);
  border-radius: 9999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .3px;
}
.cockpit-hook-delta.down {
  background: rgba(244,162,97,.18);
  color: #FFD9A8;
  border-color: rgba(244,162,97,.4);
}

/* Chips : 3 vignettes sobres avec trait gauche coloré (style GovTech, pas d'emoji) */
.cockpit-headline-chips {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.cockpit-chip {
  position: relative;
  display: flex; align-items: center;
  padding: 12px 14px 12px 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  transition: background .2s ease;
}
.cockpit-chip::before {
  content: '';
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
}
.cockpit-chip.rank-1::before { background: #2EC4B6; }
.cockpit-chip.rank-2::before { background: #98E2DA; }
.cockpit-chip.rank-sat::before { background: #FFD9A8; }
.cockpit-chip:hover { background: rgba(255,255,255,.08); }
.cockpit-chip-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cockpit-chip-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.cockpit-chip-val {
  font-family: var(--ci-font-display);
  font-weight: 700;
  font-size: 15.5px;
  line-height: 1.15;
  color: rgba(255,255,255,.95);
  letter-spacing: -.2px;
  text-transform: capitalize;
}

/* KPIs row */
.cockpit-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.cockpit-kpi {
  background: #fff;
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid var(--ci-line);
  position: relative;
}
.cockpit-kpi-num {
  font-family: var(--ci-font-display);
  font-size: 28px; font-weight: 800;
  color: var(--ci-blue-marianne);
  line-height: 1;
  margin-bottom: 6px;
}
.cockpit-kpi-label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ci-ink-soft);
}
.cockpit-kpi-delta {
  position: absolute; top: 14px; right: 14px;
  font-size: 11px; font-weight: 700;
  padding: 3px 8px; border-radius: 12px;
}
.cockpit-kpi-delta.positive { background: rgba(46, 196, 182, 0.15); color: #1a826b; }
.cockpit-kpi-delta.negative { background: rgba(220, 53, 69, 0.12); color: var(--ci-danger); }

/* GRID Top topics + Recos */
.cockpit-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 18px;
  margin-bottom: 22px;
}

.cockpit-card {
  background: #fff;
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid var(--ci-line);
  margin-bottom: 18px;
}
.cockpit-card-eyebrow {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--ci-teal);
  margin-bottom: 4px;
}
.cockpit-card-title {
  font-family: var(--ci-font-display);
  font-size: 16px; font-weight: 700;
  color: var(--ci-blue-marianne);
  margin-bottom: 14px;
}
.cockpit-empty {
  padding: 16px; text-align: center;
  color: var(--ci-ink-soft); font-size: 12px;
  background: var(--ci-cream-deep); border-radius: 8px;
}

/* Top topics */
.cockpit-topics { display: flex; flex-direction: column; gap: 8px; }
.cockpit-topic-row {
  display: grid;
  grid-template-columns: 130px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.cockpit-topic-label {
  font-size: 12px; font-weight: 600;
  color: var(--ci-ink);
  text-transform: capitalize;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cockpit-topic-bar-wrap {
  background: var(--ci-cream-deep);
  height: 8px; border-radius: 4px; overflow: hidden;
}
.cockpit-topic-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--ci-blue-marianne), var(--ci-teal));
  border-radius: 4px;
  transition: width .3s ease;
}
.cockpit-topic-count {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 14px;
  color: var(--ci-blue-marianne);
  text-align: right;
}

/* Plan d'action, 3 cards cliquables */
.cockpit-recos { background: #fff; }
.cockpit-reco-card {
  background: var(--ci-cream-warm);
  border: 1px solid var(--ci-line);
  border-left: 4px solid var(--ci-teal);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all .15s ease;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: flex-start;
}
.cockpit-reco-card:hover {
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 145, 0.08);
  transform: translateY(-1px);
}
.cockpit-reco-card.priority-haute { border-left-color: var(--ci-danger); }
.cockpit-reco-card.priority-moyenne { border-left-color: var(--ci-gold); }
.cockpit-reco-icon { font-size: 24px; line-height: 1; padding-top: 2px; }
.cockpit-reco-body { min-width: 0; }
.cockpit-reco-title {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 14px;
  color: var(--ci-blue-marianne);
  margin-bottom: 4px;
  line-height: 1.3;
}
.cockpit-reco-rationale {
  font-size: 12px; line-height: 1.4;
  color: var(--ci-ink); margin-bottom: 6px;
}
.cockpit-reco-impact {
  font-size: 11px; color: var(--ci-ink-soft);
  margin-bottom: 6px;
}
.cockpit-reco-cta {
  font-size: 11px; font-weight: 700;
  color: var(--ci-teal);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.cockpit-reco-priority {
  font-size: 9px; font-weight: 700;
  padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap;
  align-self: flex-start;
}
.cockpit-reco-priority.priority-haute   { background: rgba(220, 53, 69, 0.12); color: var(--ci-danger); }
.cockpit-reco-priority.priority-moyenne { background: rgba(244, 162, 97, 0.18); color: #c66a1c; }

/* Satisfaction par catégorie */
.cockpit-satisfaction-list { display: flex; flex-direction: column; gap: 6px; }
.cockpit-sat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px;
  background: var(--ci-cream-deep);
  border-radius: 6px;
}
.cockpit-sat-cat {
  font-size: 12px; font-weight: 600;
  color: var(--ci-ink);
  text-transform: capitalize;
}
.cockpit-sat-pct {
  font-family: var(--ci-font-display);
  font-weight: 700; font-size: 14px;
  color: var(--ci-blue-marianne);
}
.cockpit-sat-meta {
  font-size: 10px; color: var(--ci-ink-soft);
  font-family: var(--ci-font-sans); font-weight: 500;
  margin-left: 6px;
}

/* PDF button */
.cockpit-pdf-row {
  background: #fff;
  border-radius: 14px;
  padding: 22px 28px;
  border: 1px solid var(--ci-line);
  text-align: center;
  margin-top: 6px;
}
.cockpit-pdf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ci-blue-marianne);
  color: #fff;
  border: none; border-radius: 10px;
  padding: 12px 24px;
  font-size: 14px; font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.cockpit-pdf-btn:hover { background: var(--ci-blue-marianne-light); }
.cockpit-pdf-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.cockpit-pdf-help {
  margin-top: 10px;
  font-size: 11px; color: var(--ci-ink-soft);
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
  .cockpit-kpi-row { grid-template-columns: repeat(2, 1fr); }
  .cockpit-grid { grid-template-columns: 1fr; }
  .cockpit-header-right .agent-action-btn span { display: none; }
}

/* Animation pulse pour le micro en mode "écoute" (Speech API) */
@keyframes pulse {
  0%   { transform: translate(-2px, -12px) scale(1);   opacity: 1;   }
  50%  { transform: translate(-2px, -12px) scale(1.6); opacity: 0.5; }
  100% { transform: translate(-2px, -12px) scale(1);   opacity: 1;   }
}

/* Accessibilité, respecte prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .app-mode * { transition: none !important; animation: none !important; }
}

/* ====================================================================
   Mobile fixes (iframe sur /demo + ergonomie générale petite largeur)
   ==================================================================== */
@media (max-width: 768px) {
  /* Empêcher le scroll horizontal (cockpit & autres) pour éviter l'effet "flottement gauche-droite" */
  html.demo-iframe-mode body,
  html.demo-iframe-mode .cockpit-shell,
  html.demo-iframe-mode .agent-inbox-shell { overflow-x: hidden; max-width: 100vw; }
  /* Bloquer COMPLÈTEMENT le rebond iOS de l'iframe (overscroll: none au lieu de contain
     + retrait du -webkit-overflow-scrolling: touch qui amplifie le rebond).
     Cible html + body + wrappers principaux pour couvrir tous les conteneurs scrollables. */
  html.demo-iframe-mode,
  html.demo-iframe-mode body,
  html.demo-iframe-mode .app-shell,
  html.demo-iframe-mode .cockpit-shell,
  html.demo-iframe-mode .agent-inbox-shell,
  html.demo-iframe-mode .cockpit-body,
  html.demo-iframe-mode .agent-detail,
  html.demo-iframe-mode .agent-list,
  html.demo-iframe-mode .phone-body {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  /* Cockpit, titre commune toujours sur une ligne (truncate si trop long) */
  .cockpit-header-title {
    font-size: 17px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
  }
  /* Cockpit header : wrap pour que le select période + boutons ne soient PAS tronqués */
  .cockpit-header { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
  .cockpit-header-left { flex: 1 1 100%; min-width: 0; }
  .cockpit-header-right { flex: 1 1 100%; justify-content: flex-end; }
  .cockpit-period-select { font-size: 11.5px !important; padding: 6px 8px !important; max-width: 145px; }

  /* Agent header : titre commune sur 1 ligne (parallèle au cockpit) */
  .agent-header { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
  .agent-header-left { flex: 1 1 100%; min-width: 0; }
  .agent-header-right { flex: 1 1 100%; justify-content: flex-end; }

  /* Recommandations IA, plus compactes mobile */
  .cockpit-reco-card { padding: 12px 14px !important; }
  .cockpit-reco-title { font-size: 13px !important; }
  .cockpit-reco-rationale { font-size: 11.5px !important; line-height: 1.35 !important; }
  .cockpit-reco-impact { font-size: 10.5px !important; }
  .cockpit-reco-icon { font-size: 20px !important; }

  /* Headline cockpit, chips empilées sur 1 colonne mobile */
  .cockpit-headline-chips { grid-template-columns: 1fr !important; }
  .cockpit-headline-hook strong { font-size: 22px !important; }
  .cockpit-headline-card { padding: 14px 16px !important; }

  /* Inbox Agent mobile (mode démo) : layout 1/3 sidebar + 2/3 list/detail empilés */
  html.demo-iframe-mode .agent-layout {
    grid-template-columns: 32% 1fr !important;
    grid-template-rows: 38vh 1fr !important;
  }
  html.demo-iframe-mode .agent-sidebar {
    grid-column: 1; grid-row: 1 / span 2;
    flex-direction: column !important;
    overflow-x: hidden; overflow-y: auto;
    padding: 10px 6px !important;
    border-right: 1px solid var(--ci-line) !important;
    border-bottom: none !important;
  }
  html.demo-iframe-mode .agent-sidebar-section { margin-right: 0 !important; margin-bottom: 14px !important; }
  html.demo-iframe-mode .agent-sidebar-title { font-size: 9px !important; margin-bottom: 4px !important; }
  html.demo-iframe-mode .agent-nav-item { font-size: 11px !important; padding: 6px 7px !important; }
  html.demo-iframe-mode .agent-nav-count { font-size: 9px; padding: 1px 5px; }
  html.demo-iframe-mode .agent-list {
    grid-column: 2; grid-row: 1;
    max-height: none !important;
    border-bottom: 1px solid var(--ci-line);
  }
  html.demo-iframe-mode .agent-detail { grid-column: 2; grid-row: 2; }
  html.demo-iframe-mode .agent-list-toolbar { padding: 6px !important; }
  html.demo-iframe-mode .agent-search-input { font-size: 11.5px !important; }
  /* Cards messages : subject plus petit + wrap pour ne plus déborder dans la colonne 2/3 mobile */
  html.demo-iframe-mode .agent-msg-card { padding: 9px 11px !important; }
  html.demo-iframe-mode .agent-msg-subject {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    white-space: normal;
    word-break: break-word;
  }
  html.demo-iframe-mode .agent-msg-preview { font-size: 11px !important; -webkit-line-clamp: 2 !important; }
  html.demo-iframe-mode .agent-msg-meta { font-size: 9px !important; gap: 4px !important; }
  html.demo-iframe-mode .agent-msg-footer { font-size: 9px !important; }

  /* Suggestions chat citoyen mobile (mode démo) : scroll horizontal au lieu d'empiler 9 chips
     → libère 60-70% d'espace écran pour le chat */
  html.demo-iframe-mode .c-suggestions {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: flex-start !important;
    padding: 8px 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.demo-iframe-mode .c-suggestions::-webkit-scrollbar { display: none; }
  html.demo-iframe-mode .c-suggestions > button { flex-shrink: 0; }
}

/* ====================================================================
   Prompt "Ajouter à l'écran d'accueil", apparaît dans le chat après
   la 1ère réponse bot, sobre, fermable, auto-hide 30s.
   Réintégration du pattern issu de la démo legacy (Thoré).
   ==================================================================== */
.c-pwa-prompt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 12px;
  padding: 12px 14px;
  background: rgba(46, 196, 182, 0.08);
  border: 1px solid rgba(46, 196, 182, 0.25);
  border-radius: 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ci-ink, #1E1E1E);
  animation: pwaPromptIn 0.35s cubic-bezier(.2,.7,.3,1);
}
.c-pwa-prompt-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.c-pwa-prompt-text { flex: 1; min-width: 0; }
.c-pwa-prompt-text strong { color: var(--ci-blue-marianne, #000091); font-weight: 700; }
.c-pwa-prompt-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ci-ink-soft, rgba(0,0,0,.55));
  font-weight: 500;
}
.c-pwa-prompt-close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: none; border-radius: 50%;
  background: transparent;
  color: var(--ci-ink-soft, rgba(0,0,0,.55));
  font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.c-pwa-prompt-close:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ci-ink, #1E1E1E);
}
@keyframes pwaPromptIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .c-pwa-prompt { animation: none !important; }
}

/* ====================================================================
   Bannières d'alerte injectées (orchestration cross-iframe démo).
   Apparaissent dans le chat citoyen quand l'agent publie une alerte
   (postMessage parent → dispatchEvent dans l'iframe).
   ==================================================================== */
.c-alert-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 8px 12px; padding: 13px 15px;
  background: rgba(244, 162, 97, 0.10);
  border: 1.5px solid rgba(244, 162, 97, 0.65);   /* encadré coloré complet (plus de liseré gauche) */
  border-radius: 14px;
  font-size: 12.5px; line-height: 1.4;
  color: var(--ci-ink, #1E1E1E);
  animation: alertBannerIn 0.4s cubic-bezier(.2,.7,.3,1);
}
.c-alert-banner.urgent {
  background: rgba(220, 53, 69, 0.07);
  border-color: rgba(220, 53, 69, 0.60);          /* encadré rouge pour les alertes urgentes */
}
.c-alert-banner-icon { font-size: 20px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.c-alert-banner-body { flex: 1; min-width: 0; }
.c-alert-banner-title {
  font-family: var(--ci-font-display, 'Poppins', sans-serif);
  font-weight: 700; font-size: 13px;
  color: var(--ci-blue-marianne, #000091);
  margin-bottom: 3px;
}
.c-alert-banner.urgent .c-alert-banner-title { color: var(--ci-danger, #DC3545); }
.c-alert-banner-msg { color: var(--ci-ink, #1E1E1E); font-weight: 500; }
@keyframes alertBannerIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .c-alert-banner { animation: none !important; } }

/* ============================================================
   CIVIK-IA V2 : "Élégance Républicaine Invisible" (côté citoyen)
   Increment 1 : Accueil "Porte d'entrée Marianne".
   Scope STRICT : .c-home2 / .c-seal / .c-sat / .c-sheet, citoyen
   uniquement (agent et cockpit utilisent d'autres classes : 0 impact).
   Réf : 04-Documentation/civikia_v2_specifications_visuelles.md
   ============================================================ */
:root{
  --v2-cream:#F9F6F2;          /* papier d'État, 90% de la surface */
  --v2-ink:#161616;            /* noir encre profonde */
  --v2-silex:#666666;          /* gris silex, métadonnées */
  --v2-line:#E5E5E5;           /* bordures fines */
  --v2-blue:#000091;           /* bleu Marianne, accent étatique */
  --v2-white:#FFFFFF;          /* conteneurs de cartes */
  --v2-shadow-surface:0 12px 32px rgba(0,0,145,.03), 0 4px 8px rgba(0,0,145,.01);
  --v2-shadow-engage:0 20px 44px rgba(0,0,145,.07), 0 1px 3px rgba(0,0,0,.02);
  --v2-shadow-royale:0 10px 40px rgba(0,0,145,.05), 0 2px 6px rgba(0,0,145,.02);
  --v2-r-lg:32px; --v2-r-md:24px; --v2-r-sm:12px;
}

.c-home2{
  background:var(--v2-cream);
  height:100%;
  display:flex; flex-direction:column;
  padding:10px 22px 90px;
  box-sizing:border-box;
}
.app-mode .c-home2{ height:auto; min-height:calc(100dvh - 80px); }

/* Titre d'accueil : centré sur l'AXE DE LA PAGE (même axe que le logo en dessous),
   pas sur l'espace restant à gauche de la pastille (demande Thibaut 13/07/2026).
   Grille depuis le 24/08/2026 (bug Villenave-d'Ornon : la pastille, alors en
   absolu, recouvrait la fin d'un nom long) : tant que la place existe, les deux
   colonnes latérales restent égales et le titre est sur l'axe exact de la page ;
   quand le nom est trop long, la colonne de droite ne descend jamais sous la
   largeur de la pastille, le titre glisse vers la gauche puis s'abrège, au lieu
   de passer sous la pastille. */
.c-home2-top{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(auto,1fr);
  column-gap:8px; align-items:center;
  padding-top:4px; min-height:26px;
}
.c-home2-commune{
  grid-column:2; min-width:0; max-width:100%;
  font-family:var(--ci-font-sans);
  font-size:11px; font-weight:600; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--v2-silex);
  text-align:center;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
/* Pastille discrète "Installer l'app" (accueil, toujours visible, non-scroll) */
.c-install-chip{
  grid-column:3; justify-self:end; white-space:nowrap;
  background:rgba(0,0,145,.06); color:var(--ci-blue-marianne,#000091);
  border:1px solid rgba(0,0,145,.18); border-radius:9999px;
  padding:6px 12px; font-size:11px; font-weight:600; line-height:1; letter-spacing:.2px;
  cursor:pointer; font-family:var(--ci-font-sans);
}
.c-install-chip:hover{ background:rgba(0,0,145,.10); }
@media (max-width:600px){ .c-install-chip{ font-size:10.5px; padding:5px 10px; } }

/* Tiers supérieur : la Signature (sceau + ligne officielle) */
.c-home2-signature{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; margin-top:42px;
}
.c-seal{
  width:80px; height:80px; border-radius:50%;
  background:
    url('marianne-glyph.png') center 49% / 56% no-repeat,
    radial-gradient(circle at 50% 36%, #fffefb 0%, #f4efe6 76%, #ece5d7 100%);
  border:1px solid rgba(0,0,145,.10);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.70),
    inset 0 -1px 2px rgba(0,0,0,.05),
    0 6px 18px rgba(0,0,145,.06);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
/* Le logo officiel Marianne (M + flèche) remplace le M neutre dans le sceau. */
.c-seal-letter{ display:none; }
.c-home2-sigline{
  font-family:var(--ci-font-sans);
  font-size:15px; line-height:1.5; color:var(--v2-ink); font-weight:600;
  max-width:280px;
}
.c-home2-sigline span{ color:var(--v2-silex); font-weight:400; }
/* Desktop : la ligne « Marianne, l'assistante officielle de votre ville »
   tient sur UNE seule ligne (demande Thibaut 13/07/2026). */
@media (min-width:768px){
  .app-mode .c-home2-sigline{ max-width:none; }
}

/* Centre de gravité : la Zone de saisie royale */
.c-home2-ask{
  margin-top:32px;
  background:var(--v2-white);
  border:1px solid var(--v2-line);
  border-radius:var(--v2-r-md);
  padding:21px 18px 21px 22px;
  display:flex; align-items:center; gap:14px;
  box-shadow:var(--v2-shadow-royale);
  cursor:pointer;
  transition:box-shadow .25s ease, transform .2s ease;
}
.c-home2-ask:active{ transform:scale(.992); box-shadow:var(--v2-shadow-engage); }
.c-home2-ask-text{
  flex:1; font-family:var(--ci-font-sans);
  font-size:16px; color:var(--v2-silex); font-style:italic; font-weight:400;
  line-height:1.35;
}
/* Champ de saisie RÉEL : on peut taper une 1re question, l'envoyer → Marianne */
.c-home2-ask-input{
  flex:1; min-width:0;
  border:0; outline:0; background:none;
  font-family:var(--ci-font-sans);
  font-size:16px;                 /* 16px = anti-zoom iOS au focus */
  color:var(--v2-ink); line-height:1.35;
}
.c-home2-ask-input::placeholder{
  color:var(--v2-silex); font-style:italic; opacity:1;
}
.c-home2-ask-go{
  width:44px; height:44px; border-radius:50%;
  background:var(--v2-blue); color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,145,.22);
  border:0; padding:0; font:inherit; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.c-home2-ask-go:active{ transform:scale(.94); }
.c-home2-reassure{
  margin-top:14px; text-align:center;
  font-size:12.5px; color:var(--v2-silex); letter-spacing:.2px; line-height:1.55;
}
.c-home2-reassure .sub{ display:block; font-size:11.5px; opacity:.9; }

/* Tiers inférieur : satellites d'orientation */
.c-home2-satellites{
  margin-top:auto; padding-top:36px;
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.c-sat{
  background:transparent;
  border:1px solid var(--v2-line);
  border-radius:var(--v2-r-md);
  padding:18px 15px;
  cursor:pointer;
  /* Contenu centré : icône, titre et sous-texte alignés sur l'axe de la carte
     (demande Thibaut 13/07/2026, l'alignement à gauche déséquilibrait la page). */
  text-align:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.c-sat:active{ transform:scale(.98); background:rgba(0,0,145,.025); border-color:rgba(0,0,145,.18); }
.c-sat-icon{ color:var(--v2-blue); margin-bottom:11px; display:flex; justify-content:center; }
.c-sat-title{ font-size:14px; font-weight:600; color:var(--v2-ink); line-height:1.25; }
.c-sat-sub{ font-size:11.5px; color:var(--v2-silex); margin-top:4px; line-height:1.35; }

/* Bottom-sheet Services (glissant, pas de pop-up dur) */
.c-sheet-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(22,22,22,.32);
  display:flex; align-items:flex-end;
  animation:v2FadeIn .2s ease;
}
.c-sheet{
  width:100%; background:var(--v2-cream);
  border-radius:var(--v2-r-lg) var(--v2-r-lg) 0 0;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -16px 40px rgba(0,0,145,.10);
  animation:v2SheetUp .3s cubic-bezier(.25,1,.5,1);
}
.c-sheet-grip{ width:38px; height:4px; border-radius:2px; background:var(--v2-line); margin:0 auto 14px; }
.c-sheet-title{
  font-size:12px; font-weight:600; letter-spacing:.8px; text-transform:uppercase;
  color:var(--v2-silex); margin:0 4px 12px;
}
.c-sheet-row{
  display:flex; align-items:center; gap:14px;
  background:var(--v2-white); border:1px solid var(--v2-line);
  border-radius:var(--v2-r-md); padding:14px 16px; margin-bottom:10px;
  cursor:pointer; transition:box-shadow .2s ease, transform .15s ease;
}
.c-sheet-row:active{ transform:scale(.99); box-shadow:var(--v2-shadow-surface); }
.c-sheet-row.disabled{ opacity:.5; cursor:default; }
.c-sheet-row-icon{
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:rgba(0,0,145,.05); color:var(--v2-blue);
  display:flex; align-items:center; justify-content:center;
}
.c-sheet-row-body{ flex:1; }
.c-sheet-row-title{ font-size:14px; font-weight:600; color:var(--v2-ink); }
.c-sheet-row-sub{ font-size:11.5px; color:var(--v2-silex); margin-top:2px; }
.c-sheet-row-arrow{ color:var(--v2-silex); flex-shrink:0; }

@keyframes v2FadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes v2SheetUp{ from{transform:translateY(100%);} to{transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){
  .c-sheet-overlay, .c-sheet{ animation:none !important; }
  .c-home2-ask, .c-sat, .c-sheet-row{ transition:none !important; }
}

/* ============================================================
   CIVIK-IA V2, Increment 2 : Réponses "Référent Municipal"
   Dé-IA-isation des réponses Marianne : on abandonne les codes
   "chatbot tech" (puces colorées, pastilles numérotées pleines,
   chips clinquants) pour une mise en page de document officiel.
   (Surcharge les règles .c-bubble.bot définies plus haut.)
   ============================================================ */
/* Bulle = fiche "papier d'État" blanc pur, isolée du fond crème, avec un
   relief doux teinté bleu Marianne (assez présent pour "léviter" sur le crème). */
.c-bubble.bot{
  background:var(--v2-white, #fff);
  border:1px solid var(--v2-line, #e5e5e5);
  border-radius:18px 18px 18px 6px;
  color:var(--v2-ink, #161616);
  box-shadow:0 8px 22px rgba(0,0,145,.07), 0 2px 6px rgba(0,0,145,.05);
  backdrop-filter:none;
  padding:16px 18px;
}
/* Titres de section : contraste par la TAILLE, pas par le bleu massif */
.c-bubble.bot h4{ color:var(--v2-ink); font-weight:600; letter-spacing:-0.005em; }
.c-bubble.bot b{ color:var(--v2-blue); font-weight:600; }
/* Listes à puces : tiret demi-cadratin, fini les ronds teal "IA" */
.c-bubble.bot ul{ padding-left:18px; }
.c-bubble.bot ul li::before{
  content:'\2013';
  left:-18px; top:0;
  width:auto; height:auto; background:none; border-radius:0;
  color:var(--v2-blue); font-weight:600; line-height:1.5;
}
/* Listes numérotées → chiffre sobre + point, fini la pastille pleine */
.c-bubble.bot ol{ padding-left:22px; }
.c-bubble.bot ol li::before{
  content:counter(cibo-li) '.';
  left:-22px; top:2px;
  width:auto; height:auto; background:none; color:var(--v2-blue);
  font-weight:700; font-size:13px; border-radius:0; display:block;
}
.c-bubble.bot a{ color:var(--v2-blue); text-decoration-color:rgba(0,0,145,.35); }
.c-bubble.bot a:hover{ color:var(--ci-teal); }

/* Cartouche de sources : discret, institutionnel (pas des "chips" tech) */
.c-source-chips{ margin:8px 0 0 34px; gap:5px 12px; align-items:center; }
.c-source-chip{
  background:none; border:none; box-shadow:none;
  padding:1px 0; font-size:10.5px; font-weight:500;
  color:var(--v2-silex);
}
.c-source-chip svg{ color:var(--v2-blue); opacity:.8; }

/* ============================================================
   CIVIK-IA V2, Increment 4 : Sceau Marianne harmonisé
   Les avatars "M" du chat reprennent le sceau de l'accueil (pièce
   frappée), pour faire de Marianne une signature de marque cohérente.
   ============================================================ */
/* Avatar du header (sur fond bleu) : sceau crème + logo officiel Marianne (M + flèche) */
.c-chat-marianne{
  background:
    url('marianne-glyph.png') center 49% / 62% no-repeat,
    radial-gradient(circle at 50% 36%, #fffefb 0%, #f4efe6 76%, #ece5d7 100%) !important;
  color:transparent !important;
  font-size:0 !important;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.7),
    inset 0 -1px 2px rgba(0,0,0,.05),
    0 2px 8px rgba(0,0,0,.12);
}
/* Avatars des bulles (sur fond crème) : même sceau + logo officiel, plus petit + filet */
.c-bubble-avatar{
  background:
    url('marianne-glyph.png') center 49% / 62% no-repeat,
    radial-gradient(circle at 50% 36%, #fffefb 0%, #f4efe6 78%, #ece5d7 100%) !important;
  color:transparent !important;
  font-size:0 !important;
  border:1px solid rgba(0,0,145,.10);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.7),
    inset 0 -1px 2px rgba(0,0,0,.04),
    0 2px 6px rgba(0,0,145,.05);
}