/* ============================================================
   SIS · Co-Construction — design tokens (civic-tech)
   Identité distincte du rouge Tarba : bleu encre / teal /
   ambre civique / violet convergence + sémantique scrutin.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* --- palette gouvernance --- */
  --c-cc-ink:        #1F4E79;  /* bleu encre, structure & gouvernance */
  --c-cc-ink-2:     #163958;
  --c-cc-ink-soft:  #E5EDF5;
  --c-cc-deliberate: #1AA897; /* teal, délibération / divergence / présence */
  --c-cc-deliberate-2: #138577;
  --c-cc-deliberate-soft: #DDF3F0;
  --c-cc-civic:     #E0A02E;  /* ambre civique, vote, "à trier" */
  --c-cc-civic-2:   #B27A14;
  --c-cc-civic-soft: #FAEDD0;
  --c-cc-converge:  #7A5AC9;  /* violet, convergence / caractérisation */
  --c-cc-converge-2:#5C3FA8;
  --c-cc-converge-soft: #ECE5F8;

  /* --- sémantique scrutin --- */
  --c-cc-consent:   #2E9E5B;  /* vert d'accord */
  --c-cc-consent-soft: #DCF1E4;
  --c-cc-object:    #C9453B;  /* rouge objection */
  --c-cc-object-soft: #F8DEDB;
  --c-cc-reserve:   #E0A02E;  /* = ambre civique */
  --c-cc-reserve-soft: var(--c-cc-civic-soft);

  /* --- neutres --- */
  --c-cc-bg:        #F6F8FA;
  --c-cc-surface:   #FFFFFF;
  --c-cc-surface-2: #FAFBFC;
  --c-cc-line:      #DEE4EB;
  --c-cc-line-soft: #ECEFF3;
  --c-cc-text:      #15233A;
  --c-cc-text-2:    #4A5870;
  --c-cc-text-mute: #7A8699;

  /* --- type --- */
  --c-cc-font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', serif;
  --c-cc-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --c-cc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- shape & motion --- */
  --c-cc-r-sm: 6px;
  --c-cc-r-md: 10px;
  --c-cc-r-lg: 16px;
  --c-cc-r-xl: 22px;
  --c-cc-r-pill: 999px;

  --c-cc-shadow-1: 0 1px 2px rgba(21, 35, 58, .06), 0 1px 1px rgba(21, 35, 58, .04);
  --c-cc-shadow-2: 0 4px 18px rgba(21, 35, 58, .08), 0 1px 3px rgba(21, 35, 58, .04);
  --c-cc-shadow-3: 0 14px 40px rgba(21, 35, 58, .12), 0 2px 6px rgba(21, 35, 58, .06);

  --c-cc-easing: cubic-bezier(.22, .61, .36, 1);

  /* --- spacing scale (semantic, in rem) --- */
  --c-cc-s1: 4px;
  --c-cc-s2: 8px;
  --c-cc-s3: 12px;
  --c-cc-s4: 16px;
  --c-cc-s5: 24px;
  --c-cc-s6: 32px;
  --c-cc-s7: 48px;
  --c-cc-s8: 64px;

  /* tactile cible 44px (mobile) */
  --c-cc-touch: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-cc-bg:        #0E1521;
    --c-cc-surface:   #161F30;
    --c-cc-surface-2: #1B2538;
    --c-cc-line:      #29344A;
    --c-cc-line-soft: #1F2A3D;
    --c-cc-text:      #ECF1F8;
    --c-cc-text-2:    #A9B5C9;
    --c-cc-text-mute: #7888A0;

    --c-cc-ink:        #6FA6D9;
    --c-cc-ink-2:     #92BCE4;
    --c-cc-ink-soft:  #1B2A40;
    --c-cc-deliberate: #3DCAB7;
    --c-cc-deliberate-2: #6EDDCC;
    --c-cc-deliberate-soft: #133431;
    --c-cc-civic:     #F0B852;
    --c-cc-civic-2:   #F5C977;
    --c-cc-civic-soft: #3A2B0F;
    --c-cc-converge:  #9F86E0;
    --c-cc-converge-2:#B9A6EA;
    --c-cc-converge-soft: #271E40;

    --c-cc-consent:   #5BBE82;
    --c-cc-consent-soft: #173726;
    --c-cc-object:    #E26960;
    --c-cc-object-soft: #3B1F1D;
  }
}

/* ============================================================
   Resets locaux utiles aux composants (n'imposent rien à l'app)
   ============================================================ */

html, body {
  background: var(--c-cc-bg);
  color: var(--c-cc-text);
  font-family: var(--c-cc-font-body);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Helpers d'écriture utilisés dans les example.html
   (debug event log, headers de démo). Ne sont PAS injectés
   dans les shadow roots des composants.
   ============================================================ */

.cc-demo {
  min-height: 100vh;
  padding: var(--c-cc-s6) var(--c-cc-s5);
  max-width: 1240px;
  margin: 0 auto;
}
.cc-demo__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--c-cc-s5);
  padding-bottom: var(--c-cc-s4);
  border-bottom: 1px solid var(--c-cc-line);
  margin-bottom: var(--c-cc-s6);
}
.cc-demo__title {
  font-family: var(--c-cc-font-display);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -.01em;
  margin: 0;
}
.cc-demo__title code {
  font-family: var(--c-cc-font-mono);
  font-size: .82em;
  color: var(--c-cc-ink);
  background: var(--c-cc-ink-soft);
  padding: 2px 8px;
  border-radius: var(--c-cc-r-sm);
}
.cc-demo__sub {
  color: var(--c-cc-text-2);
  font-size: 14px;
}
.cc-demo__sub b { color: var(--c-cc-text); font-weight: 600; }
.cc-demo__controls {
  display: flex; gap: var(--c-cc-s3); flex-wrap: wrap;
  margin-bottom: var(--c-cc-s5);
}
.cc-demo__btn {
  font: 500 13px/1 var(--c-cc-font-body);
  background: var(--c-cc-surface);
  color: var(--c-cc-text);
  border: 1px solid var(--c-cc-line);
  border-radius: var(--c-cc-r-pill);
  padding: 8px 14px;
  cursor: pointer;
  transition: background .15s var(--c-cc-easing), border-color .15s var(--c-cc-easing);
}
.cc-demo__btn:hover { background: var(--c-cc-ink-soft); border-color: var(--c-cc-ink); color: var(--c-cc-ink); }
.cc-demo__btn[aria-pressed="true"] {
  background: var(--c-cc-ink); color: #fff; border-color: var(--c-cc-ink);
}
.cc-demo__stage {
  background: var(--c-cc-surface);
  border: 1px solid var(--c-cc-line);
  border-radius: var(--c-cc-r-lg);
  box-shadow: var(--c-cc-shadow-1);
  padding: var(--c-cc-s5);
  min-height: 200px;
}
.cc-demo__stage--mobile {
  background: linear-gradient(180deg, #0E1521 0%, #1B2538 100%);
  padding: var(--c-cc-s6) var(--c-cc-s4);
  display: flex; justify-content: center;
}
.cc-demo__phone {
  width: 390px; max-width: 100%;
  background: var(--c-cc-bg);
  border-radius: 38px;
  border: 8px solid #0B1018;
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
  overflow: hidden;
  min-height: 720px;
}

/* --- debug event log --- */
#cc-debug {
  position: fixed; right: 16px; bottom: 16px; z-index: 999;
  width: min(440px, calc(100vw - 32px));
  height: 280px;
  background: rgba(15, 22, 36, .96);
  color: #C9D6EA;
  border: 1px solid #2A3A56;
  border-radius: var(--c-cc-r-md);
  box-shadow: var(--c-cc-shadow-3);
  font: 12px/1.45 var(--c-cc-font-mono);
  display: flex; flex-direction: column;
  backdrop-filter: blur(10px);
}
#cc-debug header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #2A3A56;
  color: #E0A02E;
  font-weight: 500;
  font-family: var(--c-cc-font-body); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
}
#cc-debug .cc-debug__count {
  color: #7A8699;
  font-family: var(--c-cc-font-mono);
  letter-spacing: 0; text-transform: none;
}
#cc-debug .cc-debug__clear {
  background: transparent; color: #7A8699; border: none;
  font: inherit; cursor: pointer; font-size: 11px;
}
#cc-debug .cc-debug__clear:hover { color: #C9453B; }
#cc-debug ol {
  list-style: none; margin: 0; padding: 6px 12px;
  overflow-y: auto; flex: 1;
  display: flex; flex-direction: column-reverse;
}
#cc-debug li {
  padding: 4px 0;
  border-bottom: 1px dashed #1F2C42;
}
#cc-debug li:last-child { border-bottom: none; }
#cc-debug .t { color: #5A7090; margin-right: 8px; }
#cc-debug .n { color: #E0A02E; font-weight: 500; }
#cc-debug .d { color: #8AB4D8; }
#cc-debug.empty::after {
  content: "En attente d'événements sis:*…";
  color: #5A7090; font-family: var(--c-cc-font-body);
  padding: 18px 12px; text-align: center;
}
#cc-debug.empty ol { display: none; }