/*
  vigie-qc.css — Maquette CSS unifiée (Vigie Québec)
  Objectif : base visuelle légère et réutilisable pour pages 2018/2022/2026
  Remarque : couleurs partis conformes aux cartes; obfuscation via code|rgb possible côté HTML
*/

:root {
  /* Couleurs de base (mode clair) */
  --qc-bg: #ffffff;
  --qc-ink: #11131a;
  --qc-muted: #516079;
  --qc-line: #d5dbe6;
  --qc-glass-1: rgba(255,255,255,0.98);
  --qc-glass-2: rgba(255,255,255,0.94);

  /* Focus & accents */
  --qc-accent: #0053c3;
  --qc-focus: 3px solid #ffb300;

  /* Couleurs partis (fixes) */
  --party-caq: #00cfe7;
  --party-pq:  #0040ff;
  --party-qs:  #ffd800;
  --party-pcq: #ff00c8;
  --party-plq: #ff2b2b;
  --party-pvq: #00c851;
  --party-na:  #666666;
}

/* Reset léger */
* { box-sizing: border-box; }
html, body { height: 100%; }
body.qc {
  margin: 0;
  color: var(--qc-ink);
  background: var(--qc-bg);
  font-family: 'Arial Black', Arial, Helvetica, sans-serif;
}

/* Containers */
.qc-wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.qc-header { display:flex; align-items:center; gap:10px; padding: 10px 0; }
.qc-header h1 { margin:0; font-size: 18px; letter-spacing:.08em; text-transform:uppercase; }

/* Cartes / panneaux */
.qc-panel {
  background: linear-gradient(180deg, var(--qc-glass-1), var(--qc-glass-2));
  border: 1px solid var(--qc-line);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 28px rgba(0,0,0,.08);
}
.qc-panel .qc-hd { padding-bottom: 10px; border-bottom: 1px solid var(--qc-line); margin-bottom: 10px; }
.qc-panel .qc-bd { font-size: 14px; line-height: 1.5; }

/* Listes de liens (menus) */
.qc-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.qc-menu a {
  display: block; padding: 12px 14px; text-decoration: none; color: inherit;
  border: 2px solid var(--qc-line); border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0));
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
}
.qc-menu a:hover, .qc-menu a:focus-visible {
  border-color: var(--qc-accent); outline: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); transform: translateY(-2px);
}

/* Chips/indicateurs */
.qc-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px; border:1px solid var(--qc-line); background: rgba(0,0,0,.18); font-size:12px; }
.qc-dot { width:10px; height:10px; border-radius:4px; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.qc-dot.caq { background: var(--party-caq); }
.qc-dot.pq  { background: var(--party-pq); }
.qc-dot.qs  { background: var(--party-qs); }
.qc-dot.pcq { background: var(--party-pcq); }
.qc-dot.plq { background: var(--party-plq); }
.qc-dot.pvq { background: var(--party-pvq); }
.qc-dot.na  { background: var(--party-na); }

/* Swatches code|rgb + icône fdl */
.qc-sw { display:inline-block; width:12px; height:12px; border-radius:4px; margin-right:8px; border:1px solid #cbd5e1 }
.qc-fdl { height:18px; width:auto; vertical-align:middle; margin:0 6px 0 0; border-radius:4px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 8px 16px rgba(0,83,195,0.18) }

/* Tables compactes */
.qc-table { width:100%; border-collapse: collapse; font-size: 12px; }
.qc-table th, .qc-table td { padding: 6px 8px; border-bottom: 1px dashed var(--qc-line); text-align:left; }
.qc-table th { color: var(--qc-muted); font-weight: normal; }

/* Boutons */
.qc-btn { display:inline-flex; align-items:center; justify-content:center; padding:8px 12px; border-radius:10px; border:1px solid var(--qc-line); background: #f7f9fc; color: var(--qc-ink); cursor:pointer; }
.qc-btn:hover { border-color: var(--qc-accent); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.qc-btn:active { transform: translateY(1px); }

/* Boutons aux couleurs de partis */
.qc-btn--caq { background: var(--party-caq); color:#0b0f14; border-color: rgba(0,0,0,0.12); }
.qc-btn--pq  { background: var(--party-pq);  color:#ffffff;  border-color: rgba(0,0,0,0.12); }
.qc-btn--qs  { background: var(--party-qs);  color:#0b0f14; border-color: rgba(0,0,0,0.12); }
.qc-btn--pcq { background: var(--party-pcq); color:#ffffff;  border-color: rgba(0,0,0,0.12); }
.qc-btn--plq { background: var(--party-plq); color:#ffffff;  border-color: rgba(0,0,0,0.12); }
.qc-btn--pvq { background: var(--party-pvq); color:#0b0f14; border-color: rgba(0,0,0,0.12); }
.qc-btn--na  { background: var(--party-na);  color:#ffffff;  border-color: rgba(0,0,0,0.12); }
.qc-btn[class*="qc-btn--"]:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.18); filter: saturate(1.05) brightness(1.05); }

/* Fonds aux couleurs de partis */
.qc-bg--caq { background: var(--party-caq) !important; color:#0b0f14 !important; }
.qc-bg--pq  { background: var(--party-pq)  !important; color:#ffffff !important; }
.qc-bg--qs  { background: var(--party-qs)  !important; color:#0b0f14 !important; }
.qc-bg--pcq { background: var(--party-pcq) !important; color:#ffffff !important; }
.qc-bg--plq { background: var(--party-plq) !important; color:#ffffff !important; }
.qc-bg--pvq { background: var(--party-pvq) !important; color:#0b0f14 !important; }
.qc-bg--na  { background: var(--party-na)  !important; color:#ffffff !important; }

/* Démo/Utilitaire de bloc paddé pour fonds */
.qc-bg-pad { padding: 12px; border-radius: 12px; border: 1px solid rgba(0,0,0,0.12); }

/* Utilitaires */
.qc-muted { color: var(--qc-muted); }
.qc-ok { color: #00e676; }
.qc-warn { color: #ffb300; }
.qc-bad { color: #ff5a5a; }
.qc-focus:focus-visible { outline: var(--qc-focus); outline-offset: 4px; }

@media (max-width: 680px){
  .qc-wrap { padding: 12px; }
}