/* Minimal design system for Democratie Directe */
:root{
  --dd-blue:#0b4f6c;
  --dd-ivory:#f7f6f2;
  --dd-green:#1f7a4c;
  --glass-bg: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.6);
  --glass-shadow: 0 8px 32px rgba(11,79,108,0.12);
}
body{
  background: var(--dd-ivory);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{color:var(--dd-blue)}
.card{border-radius:8px}
.btn-primary{background:var(--dd-blue);border-color:var(--dd-blue)}

/* Glassmorphism overlay for main content */
/* full-bleed background element (placed behind content) */
.dd-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('/democratie/assets/dd-bg.jpg'); /* fallback route serves from templates/ by default */
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  filter: saturate(1.05) contrast(0.95);
}
.dd-bg::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.28));
  pointer-events: none;
}

.dd-glass {
  max-width: 980px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.45));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 12px 36px rgba(11,79,108,0.18);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}

.dd-glass .display-5 {
  color: var(--dd-blue);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  margin-bottom: .25rem;
}
@media (max-width:576px){
  .display-5{font-size:1.5rem}
}

@media (max-width:768px) {
  .dd-glass { padding: 1rem; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.86); }
  .dd-bg { background-attachment: scroll; }
}

@media (prefers-reduced-transparency: reduce) {
  .dd-glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.94); }
}

/* Plan de match / timeline styles */
.plan-section { margin-top: 2rem; }
.plan-grid { display: flex; gap: 1.25rem; align-items: flex-start; }
.plan-left { flex: 2; }
.plan-right { flex: 1; min-width: 240px; }
.phase { background: rgba(255,255,255,0.6); border-radius: 10px; padding: 1rem; margin-bottom: 1rem; border: 1px solid rgba(255,255,255,0.6); }
.phase h3 { margin-top: 0; color: var(--dd-blue); }
.phase .meta { font-size: .95rem; color: #334; margin-bottom: .5rem; }
.checklist { margin: 0; padding-left: 1.15rem; }
.checklist li { margin-bottom: .35rem; }
.glossary { background: rgba(255,255,255,0.6); padding: .75rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.5); }
.glossary dt { font-weight: 700; color: var(--dd-blue); }
.glossary dd { margin: 0 0 0.75rem 0; }

/* Mandats mini-cards */
.mandats-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.mandat-card { background: rgba(255,255,255,0.66); border-radius: 8px; padding: .6rem; border: 1px solid rgba(255,255,255,0.5); font-size: .95rem; }

@media (max-width: 900px) {
  .plan-grid { flex-direction: column; }
  .mandats-mini { grid-template-columns: 1fr; }
}

/* collapse / summary helpers */
.phase-summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.phase-summary p { margin: 0; color: #123; opacity: .95; }
.more-btn { background: transparent; border: 1px solid rgba(11,79,108,0.14); color: var(--dd-blue); padding: .25rem .6rem; border-radius: 6px; font-weight: 600; cursor: pointer; }
.more-btn .toggle-icon { display: inline-block; margin-left: .35rem; transition: transform .2s ease, opacity .18s linear; }

/* smoother collapse with opacity and slide */
.collapse-body { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height .36s cubic-bezier(.2,.9,.2,1), opacity .24s linear, transform .28s ease; }
.collapse-body.show { max-height: 2000px; opacity: 1; transform: translateY(0); }

/* button open state for icon */
.more-btn.open .toggle-icon { transform: rotate(180deg) scale(1.05); }

@media (max-width: 720px) {
  .phase { padding: .8rem; }
  .phase-summary p { font-size: .95rem; }
  .more-btn { font-size: .9rem; padding: .2rem .5rem; }
}

/* respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .collapse-body { transition: none !important; }
  .more-btn .toggle-icon { transition: none !important; }
}

/* focus styles for keyboard users */
.more-btn:focus-visible{
  outline: 3px solid rgba(11,79,108,0.14);
  outline-offset: 3px;
  box-shadow: 0 6px 20px rgba(11,79,108,0.14), 0 0 0 4px rgba(11,79,108,0.06);
  border-color: rgba(11,79,108,0.28);
}

/* Simulateur styles */
.simulateur-steps { display: flex; flex-direction: column; gap: .5rem; }
.simulate-step { font-weight: 600; color: #123; background: rgba(255,255,255,0.84); padding: .5rem .75rem; border-radius: 8px; border: 1px solid rgba(0,0,0,0.04); }
.simulate-step input { margin-right: .75rem; transform: scale(1.06); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Slightly bolder mandats modal headings for quick scanning */
.mandat-card h4{ font-weight:700; color:var(--dd-blue); }

/* mandat excerpt for scanability */
.mandat-excerpt { margin: .5rem 0 0.6rem 0; color: #123; opacity: .95; font-weight:600; }
.mandat-excerpt { display: -webkit-box; display: box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }

/* Toggle all button in modal header spacing */
#mandatsToggleAll { margin-left: .5rem; }

/* reduce heavy effects for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .more-btn:focus-visible{ box-shadow: none; outline: 3px solid rgba(11,79,108,0.14); }

/* Questionnaire modern wizard styles */
.q-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.58), rgba(250,255,250,0.42));
  border-radius: 14px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 10px 30px rgba(11,79,108,0.08), inset 0 1px 0 rgba(255,255,255,0.45);
}
.q-top .progress { height: 12px; background: linear-gradient(180deg, rgba(11,79,108,0.06), rgba(11,79,108,0.02)); border-radius:10px; }
.progress-bar { background: linear-gradient(90deg, #0fb3a3 0%, #0b8fa6 60%, #066b9a 100%); box-shadow: 0 4px 18px rgba(15,179,163,0.12); }
.btn-chip { display:inline-flex; align-items:center; gap:.5rem; margin:.25rem; padding:.5rem .9rem; border-radius:999px; border:1px solid rgba(11,79,108,0.08); cursor:pointer; user-select:none; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,255,250,0.86)); }
.btn-chip:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(11,79,108,0.06); }
.btn-chip input { position:absolute; opacity:0; pointer-events:none; }
.btn-chip input:checked + span, .btn-chip[aria-pressed="true"] { box-shadow: 0 6px 20px rgba(11,79,108,0.12); border: 1px solid rgba(11,79,108,0.12); }
.q-section-score { font-weight:700; color:var(--dd-blue); background: rgba(255,255,255,0.5); padding: 0.12rem .5rem; border-radius: 6px; }
.q-gauge { width:96px; background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(245,255,250,0.9)); border-radius:8px; padding:.4rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* High-contrast variant for accessibility */
/* Uses system preference when available and provides a manual toggle via .high-contrast on <body> */
@media (prefers-contrast: more) {
  :root{
    --dd-blue: #002a3a; /* darker blue */
    --dd-ivory: #ffffff;
    --dd-green: #006d55;
  }
  body { background: var(--dd-ivory); color: var(--dd-blue); }
  .dd-glass, .q-card { background: #ffffff !important; border: 2px solid rgba(0,42,58,0.98) !important; box-shadow: none !important; }
  .progress-bar { background: linear-gradient(90deg,#009985 0%, #006b8f 100%) !important; box-shadow: none !important; }
  .btn-primary, .btn-primary:focus, .btn-primary:hover { background: #002a3a !important; border-color: #002a3a !important; color: #ffffff !important; box-shadow: none !important; }
  .btn-chip { background: #ffffff !important; color: #002a3a !important; border: 2px solid rgba(0,42,58,0.9) !important; }
  .more-btn { background: #ffffff !important; color: #002a3a !important; border: 2px solid rgba(0,42,58,0.9) !important; }
  .q-section-score { background: #002a3a !important; color: #fff !important; }
  .q-gauge { background: #ffffff !important; color: #002a3a !important; border: 2px solid rgba(0,42,58,0.9) !important; }
  .mandat-excerpt, .phase .meta, .phase-summary p { color: #001921 !important; }
  /* high contrast focus ring for keyboard users */
  :focus-visible { outline: 3px solid #ffeb3b !important; outline-offset: 3px; }
}

/* Manual high-contrast toggle: add class .high-contrast on <body> to enable same rules */
.high-contrast {
  --dd-blue: #002a3a;
}
.high-contrast .dd-glass,
.high-contrast .q-card { background: #ffffff; border: 2px solid rgba(0,42,58,0.98); box-shadow: none; }
.high-contrast .progress-bar { background: linear-gradient(90deg,#009985 0%, #006b8f 100%); }
.high-contrast .btn-primary { background:#002a3a; border-color:#002a3a; color:#fff; }
.high-contrast .btn-chip, .high-contrast .more-btn { background:#fff; color:#002a3a; border:2px solid rgba(0,42,58,0.9); }
.high-contrast .q-section-score { background:#002a3a; color:#fff; }
.high-contrast :focus-visible { outline: 3px solid #ffeb3b; outline-offset: 3px; }
}

/* Highlight unanswered questions */
.unanswered { outline: 2px dashed rgba(255,0,0,0.12); background: rgba(255,240,240,0.5); }
.unanswered .btn-chip { border-color: rgba(255,0,0,0.12); }

/* Score sheet print styles */
@media print {
  body * { visibility: hidden !important; }
  #qSheet, #qSheet * { visibility: visible !important; }
  #qSheet { position: absolute; left: 0; top: 0; width: 100%; background: #fff; color:#000; padding: 1.2rem; }
  /* make the sheet compact and paginated */
  #qSheet ul { columns: 2; -webkit-columns: 2; -moz-columns: 2; }
  .btn, .btn-chip, .more-btn, #qCalculate, #qSave, #qReset, #qPrint { display: none !important; }
  a { color: #000; text-decoration: none; }
}

/* Small utility to make sheet visible in compact view */
#qSheet { border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.98); }