/* ============================================================
   Cerveau27 — Design System (vendorisé depuis le projet
   claude.ai/design 7aec4548). Un seul fichier : tokens + base
   + kit (c27k-) + composants (c27-). Chemins d'assets normalisés.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&family=Libre+Franklin:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Spline+Sans+Mono:wght@400;500;600&family=Caveat:wght@500;600;700&display=swap');

/* ---- Color tokens ---- */
:root {
  --bleu-france:#000091; --bleu-700:#1212a8; --bleu-600:#2323c4; --bleu-500:#3a3ae0;
  --bleu-400:#6a6af4; --bleu-200:#c6c6fb; --bleu-100:#e7e7fb; --bleu-050:#f1f1fc;
  --rouge:#e1000f; --rouge-700:#b3000c; --rouge-600:#c8000d; --rouge-200:#f6c4c1;
  --rouge-100:#fce3e1; --rouge-050:#fdf0ee;
  --paper:#fbf8f1; --paper-2:#f5efe3; --paper-3:#efe7d6; --card:#ffffff;
  --ink:#1b1a17; --ink-2:#45433c; --ink-3:#6f6c61; --ink-4:#9a968a;
  --line:#e7dfce; --line-2:#ded3bd; --line-ink:#1b1a17;
  --success:#18753c; --success-100:#e3f3e8; --warning:#b34000; --warning-100:#fbe7da;
  --error:#ce0500; --error-100:#fce3e0; --info:#0063cb; --info-100:#e4effb;
  --surface-page:var(--paper); --surface-alt:var(--paper-2); --surface-sunken:var(--paper-3);
  --surface-card:var(--card); --surface-primary:var(--bleu-france);
  --surface-primary-tint:var(--bleu-100); --surface-accent-tint:var(--rouge-100);
  --text-strong:var(--ink); --text-body:var(--ink-2); --text-muted:var(--ink-3);
  --text-faint:var(--ink-4); --text-on-primary:#ffffff; --text-link:var(--bleu-500);
  --border-default:var(--line); --border-strong:var(--line-2); --border-ink:var(--line-ink);
  --border-focus:var(--bleu-500);
  --primary:var(--bleu-france); --primary-hover:var(--bleu-700); --primary-soft:var(--bleu-100);
  --accent:var(--rouge); --accent-hover:var(--rouge-700); --accent-soft:var(--rouge-100);
  --focus-ring:0 0 0 3px var(--bleu-200);
}

/* ---- Typography tokens ---- */
:root {
  --font-display:'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Spline Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-hand:'Caveat', 'Segoe Script', cursive;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --fs-display:60px; --fs-h1:44px; --fs-h2:34px; --fs-h3:26px; --fs-h4:21px; --fs-h5:18px;
  --fs-lead:20px; --fs-body:16px; --fs-sm:14px; --fs-xs:13px; --fs-2xs:11px;
  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tight:-0.02em; --ls-snug:-0.01em; --ls-normal:0; --ls-wide:0.04em; --ls-caps:0.08em;
  --overline:var(--fw-semibold) var(--fs-2xs)/1.2 var(--font-mono);
}

/* ---- Spacing & layout tokens ---- */
:root {
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --container:1200px; --container-wide:1360px; --container-text:720px; --gutter:24px; --header-h:68px;
}

/* ---- Effects tokens ---- */
:root {
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --border-thin:1px; --border-med:1.5px; --border-thick:2px;
  --shadow-xs:0 1px 2px rgba(43,36,20,0.05);
  --shadow-sm:0 1px 3px rgba(43,36,20,0.07), 0 1px 2px rgba(43,36,20,0.04);
  --shadow-md:0 4px 12px rgba(43,36,20,0.08), 0 2px 4px rgba(43,36,20,0.05);
  --shadow-lg:0 12px 28px rgba(43,36,20,0.10), 0 6px 10px rgba(43,36,20,0.05);
  --shadow-xl:0 24px 48px rgba(43,36,20,0.14);
  --shadow-blue:0 8px 24px rgba(0,0,145,0.16);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-in-out:cubic-bezier(0.45,0,0.4,1);
  --ease-spring:cubic-bezier(0.34,1.32,0.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --t-base:all var(--dur-base) var(--ease-out);
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--surface-page); color:var(--text-strong);
  font-family:var(--font-sans); font-size:var(--fs-body); line-height:var(--lh-normal);
  font-weight:var(--fw-regular); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--bleu-100); color:var(--bleu-france); }
h1,h2,h3,h4,h5 {
  font-family:var(--font-display); color:var(--text-strong); font-weight:var(--fw-semibold);
  line-height:var(--lh-tight); letter-spacing:var(--ls-tight); margin:0 0 0.4em; text-wrap:balance;
}
h1 { font-size:var(--fs-h1); } h2 { font-size:var(--fs-h2); } h3 { font-size:var(--fs-h3); }
h4 { font-size:var(--fs-h4); font-weight:var(--fw-medium); } h5 { font-size:var(--fs-h5); font-weight:var(--fw-medium); }
p { margin:0 0 1em; text-wrap:pretty; }
a { color:var(--text-link); text-decoration-thickness:1px; text-underline-offset:2px; }
a:hover { color:var(--bleu-700); }
strong,b { font-weight:var(--fw-semibold); }
small { font-size:var(--fs-sm); }
.c27-overline {
  font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted);
}

/* ---- Brand "stylo" utilities ---- */
.c27-underline {
  position:relative; display:inline; background-image:url("assets/stroke-underline.svg");
  background-repeat:no-repeat; background-position:left 100%; background-size:100% 0.42em; padding-bottom:0.12em;
}
.c27-circled { position:relative; display:inline-block; padding:0.12em 0.42em; }
.c27-circled::after {
  content:""; position:absolute; inset:-0.18em -0.1em -0.22em -0.1em;
  background:url("assets/stroke-circle.svg") center/100% 100% no-repeat; pointer-events:none;
}
.c27-hand { font-family:var(--font-hand); font-weight:var(--fw-bold); color:var(--accent); line-height:1; transform:rotate(-4deg); display:inline-block; }
.c27-tricolore {
  display:inline-block; width:36px; height:4px; border-radius:2px;
  background:linear-gradient(to right, var(--bleu-france) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66% 100%);
  box-shadow:inset 0 0 0 1px var(--line);
}
.c27-icon { flex:none; display:block; }

/* ============================================================
   KIT — screen layouts (c27k-)
   ============================================================ */
.c27k-app { min-height:100vh; display:flex; flex-direction:column; background:var(--paper); }
.c27k-main { flex:1; }
.c27k-header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.86); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.c27k-header__in { max-width:var(--container-wide); margin:0 auto; height:var(--header-h); padding:0 24px; display:flex; align-items:center; gap:22px; }
.c27k-brandlink { text-decoration:none; flex:none; }
.c27k-nav { display:flex; align-items:center; gap:2px; }
.c27k-navlink { position:relative; display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink-3); text-decoration:none; padding:8px 12px; border-radius:var(--radius-xs); cursor:pointer; transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.c27k-navlink:hover { color:var(--ink); background:var(--paper-2); }
.c27k-navlink.is-active { color:var(--bleu-france); font-weight:var(--fw-semibold); }
.c27k-navlink.is-active::after { content:""; position:absolute; left:12px; right:12px; bottom:-1px; height:2.5px; border-radius:2px; background:var(--bleu-france); }
.c27k-header__right { margin-left:auto; display:flex; align-items:center; gap:12px; }
.c27k-jbadge { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); color:var(--rouge-700); background:var(--rouge-050); border:1px solid var(--rouge-200); border-radius:var(--radius-pill); padding:4px 10px; letter-spacing:.03em; white-space:nowrap; }

.c27k-footer { border-top:1px solid var(--line); background:var(--paper-2); margin-top:56px; }
.c27k-footer__in { max-width:var(--container-wide); margin:0 auto; padding:26px 24px; display:flex; align-items:center; gap:20px; }
.c27k-footer__note { margin:0; font-size:var(--fs-xs); color:var(--ink-3); flex:1; }
.c27k-footer__note b { color:var(--ink-2); }
.c27k-tricolore { display:inline-block; width:48px; height:5px; border-radius:3px; background:linear-gradient(to right, var(--bleu-france) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66% 100%); box-shadow:inset 0 0 0 1px var(--line); flex:none; }

.c27k-wrap { max-width:var(--container); margin:0 auto; padding:36px 24px 0; }
.c27k-wrap--wide { max-width:var(--container-wide); }

.c27k-pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px; }
.c27k-pagehead__eyebrow { margin-bottom:10px; }
.c27k-pagehead__title { font-size:var(--fs-h1); margin:0; letter-spacing:-0.025em; }
.c27k-pagehead__sub { margin:12px 0 0; font-size:var(--fs-lead); line-height:1.5; color:var(--ink-2); max-width:60ch; }
.c27k-pagehead__actions { display:flex; align-items:center; gap:10px; flex:none; padding-bottom:4px; }
.c27k-uline { position:relative; display:inline-block; white-space:nowrap; color:var(--bleu-france); }
.c27k-uline::after { content:""; position:absolute; left:-2%; right:-2%; bottom:-0.16em; height:0.42em; background:url("assets/stroke-underline.svg") left center / 100% 100% no-repeat; }

.c27k-sectiontitle { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:4px 0 18px; }
.c27k-sectiontitle h2 { font-size:var(--fs-h3); margin:0; display:flex; align-items:baseline; gap:10px; }
.c27k-sectiontitle__count { font-family:var(--font-mono); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink-4); letter-spacing:0; }

.c27k-grid { display:grid; gap:20px; }
.c27k-grid--cands { grid-template-columns:repeat(4,1fr); }
.c27k-grid--themes { grid-template-columns:repeat(3,1fr); }
.c27k-grid--props { grid-template-columns:repeat(2,1fr); }

.c27k-filterbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 0; }
.c27k-filterbar__search { width:320px; max-width:100%; }
.c27k-filterbar__spacer { flex:1; }
.c27k-filterbar__count { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--ink-3); }
.c27k-chiprow { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

.c27k-empty { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:60px 20px; color:var(--ink-3); }
.c27k-empty__ic { width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--paper-3); color:var(--ink-4); margin-bottom:4px; }
.c27k-empty b { font-family:var(--font-display); font-size:var(--fs-h4); color:var(--ink); font-weight:var(--fw-semibold); }

.c27k-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); }
.c27k-panel--pad { padding:20px 22px; }

.c27k-hero { background:linear-gradient(180deg, #fff 0%, var(--paper) 100%); border-bottom:1px solid var(--line); }
.c27k-hero__in { max-width:var(--container); margin:0 auto; padding:48px 24px 40px; }
.c27k-hero__title { font-size:var(--fs-display); line-height:1.04; letter-spacing:-0.03em; margin:0 0 16px; max-width:16ch; }
.c27k-hero__sub { font-size:var(--fs-lead); color:var(--ink-2); line-height:1.55; max-width:56ch; margin:0 0 26px; }
.c27k-hero__stats { display:flex; gap:40px; flex-wrap:wrap; margin-top:30px; padding-top:26px; border-top:1px solid var(--line); }
.c27k-hero__cta { display:flex; gap:12px; flex-wrap:wrap; }

.c27k-news { display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer; }
.c27k-news:last-child { border-bottom:none; }
.c27k-news:hover .c27k-news__title { color:var(--bleu-france); }
.c27k-news__date { flex:none; width:92px; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-3); padding-top:3px; letter-spacing:.02em; }
.c27k-news__body { flex:1; min-width:0; }
.c27k-news__title { font-family:var(--font-display); font-size:var(--fs-h5); font-weight:var(--fw-semibold); color:var(--ink); margin:4px 0 6px; line-height:1.3; transition:color var(--dur-fast) var(--ease-out); }
.c27k-news__excerpt { font-size:var(--fs-sm); color:var(--ink-2); margin:0; line-height:1.5; }
.c27k-news__meta { display:flex; align-items:center; gap:8px; }

.c27k-candhead { display:flex; gap:24px; align-items:center; padding:30px 0 26px; }
.c27k-candhead__photo { flex:none; }
.c27k-candhead__name { font-size:var(--fs-h1); margin:6px 0 6px; letter-spacing:-0.02em; }
.c27k-candhead__meta { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.c27k-candhead__party { font-size:var(--fs-body); color:var(--ink-2); }
.c27k-candhead__stats { display:flex; gap:32px; margin-left:auto; flex:none; }

.c27k-themehero { display:flex; gap:18px; align-items:center; padding:30px 0 22px; }
.c27k-themehero__icon { width:64px; height:64px; border-radius:var(--radius-md); display:grid; place-items:center; flex:none; }
.c27k-compare { display:flex; flex-direction:column; gap:0; }
.c27k-compare__cand { display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); }
.c27k-compare__who { flex:none; width:210px; display:flex; gap:12px; align-items:flex-start; }
.c27k-compare__whoname { font-family:var(--font-display); font-size:var(--fs-h5); font-weight:var(--fw-semibold); color:var(--ink); line-height:1.2; }
.c27k-compare__whoparty { font-size:var(--fs-2xs); color:var(--ink-3); margin-top:2px; font-family:var(--font-mono); }
.c27k-compare__props { flex:1; display:flex; flex-direction:column; gap:12px; }

.c27k-breadcrumb { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:var(--fs-sm); color:var(--ink-3); padding:6px 0 2px; }
.c27k-breadcrumb a { color:var(--ink-3); text-decoration:none; cursor:pointer; }
.c27k-breadcrumb a:hover { color:var(--bleu-france); }
.c27k-breadcrumb__sep { color:var(--ink-4); }

@media (max-width:1080px) {
  .c27k-grid--cands { grid-template-columns:repeat(3,1fr); }
  .c27k-grid--props { grid-template-columns:1fr; }
  .c27k-nav { display:none; }
}
@media (max-width:720px) {
  .c27k-grid--cands, .c27k-grid--themes { grid-template-columns:repeat(2,1fr); }
}

/* ============================================================
   COMPONENTS (c27-)
   ============================================================ */

/* Logo */
.c27-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; line-height:1; }
.c27-logo__mark { display:inline-grid; place-items:center; flex:none; background:var(--bleu-france); color:#fff; font-family:var(--font-display); font-weight:var(--fw-semibold); letter-spacing:-0.04em; position:relative; }
.c27-logo__mark::after { content:""; position:absolute; top:-3px; right:-3px; width:30%; height:30%; max-width:9px; max-height:9px; min-width:5px; min-height:5px; border-radius:50%; background:var(--rouge); box-shadow:0 0 0 2px var(--card); }
.c27-logo__word { font-family:var(--font-display); color:var(--text-strong); font-weight:var(--fw-semibold); letter-spacing:-0.02em; }
.c27-logo__word b { color:var(--bleu-france); font-weight:var(--fw-semibold); }
.c27-logo__sub { font-family:var(--font-mono); color:var(--text-muted); letter-spacing:var(--ls-caps); text-transform:uppercase; display:block; margin-top:2px; }

/* Avatar */
.c27-avatar { position:relative; display:inline-grid; place-items:center; flex:none; isolation:isolate; }
.c27-avatar__inner { width:100%; height:100%; overflow:hidden; display:grid; place-items:center; background:var(--paper-3); color:var(--ink); position:relative; }
.c27-avatar__mono { font-family:var(--font-display); font-weight:var(--fw-semibold); letter-spacing:-0.02em; line-height:1; width:100%; height:100%; display:grid; place-items:center; }
.c27-avatar--ring-bleu .c27-avatar__inner { box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--bleu-france); }
.c27-avatar--ring-tricolore::before { content:""; position:absolute; inset:-3px; border-radius:inherit; z-index:-1; background:conic-gradient(from 220deg, var(--bleu-france) 0 33%, #d8d8e4 33% 50%, var(--rouge) 50% 83%, #d8d8e4 83% 100%); }
.c27-avatar--ring-tricolore .c27-avatar__inner { box-shadow:0 0 0 2.5px var(--card); }

/* Badge */
.c27-badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-weight:var(--fw-semibold); font-size:var(--fs-2xs); letter-spacing:var(--ls-wide); text-transform:uppercase; line-height:1; padding:4px 8px; border-radius:var(--radius-xs); white-space:nowrap; border:1px solid transparent; }
.c27-badge--lg { font-size:var(--fs-xs); padding:5px 10px; }
.c27-badge__dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.c27-badge--neutral { background:var(--paper-3); color:var(--ink-2); }
.c27-badge--bleu { background:var(--bleu-100); color:var(--bleu-700); }
.c27-badge--rouge { background:var(--rouge-100); color:var(--rouge-700); }
.c27-badge--success { background:var(--success-100); color:var(--success); }
.c27-badge--warning { background:var(--warning-100); color:var(--warning); }
.c27-badge--error { background:var(--error-100); color:var(--error); }
.c27-badge--info { background:var(--info-100); color:var(--info); }
.c27-badge--solid.c27-badge--neutral { background:var(--ink); color:#fff; }
.c27-badge--solid.c27-badge--bleu { background:var(--bleu-france); color:#fff; }
.c27-badge--solid.c27-badge--rouge { background:var(--rouge); color:#fff; }
.c27-badge--solid.c27-badge--success { background:var(--success); color:#fff; }
.c27-badge--solid.c27-badge--warning { background:var(--warning); color:#fff; }
.c27-badge--solid.c27-badge--error { background:var(--error); color:#fff; }
.c27-badge--solid.c27-badge--info { background:var(--info); color:#fff; }
.c27-badge--outline { background:transparent; border-color:currentColor; }
.c27-badge--outline.c27-badge--neutral { color:var(--ink-3); border-color:var(--line-2); }

/* Tag */
.c27-tag { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-sans); font-weight:var(--fw-medium); font-size:var(--fs-xs); line-height:1; padding:6px 11px; border-radius:var(--radius-pill); background:var(--card); color:var(--ink-2); border:1px solid var(--line-2); white-space:nowrap; cursor:default; text-decoration:none; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
button.c27-tag, a.c27-tag { cursor:pointer; }
button.c27-tag:hover, a.c27-tag:hover { background:var(--paper-2); border-color:var(--ink-4); }
.c27-tag:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.c27-tag--active { background:var(--bleu-france); color:#fff; border-color:var(--bleu-france); }
.c27-tag--active:hover { background:var(--bleu-700) !important; border-color:var(--bleu-700) !important; color:#fff; }
.c27-tag__dot { width:8px; height:8px; border-radius:50%; flex:none; }
.c27-tag--sm { font-size:var(--fs-2xs); padding:4px 9px; gap:5px; }

/* Stat */
.c27-stat { display:flex; flex-direction:column; gap:3px; }
.c27-stat__label { display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:var(--fs-2xs); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-3); }
.c27-stat__label svg { color:var(--ink-4); }
.c27-stat__value { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h2); line-height:1.05; letter-spacing:-0.02em; color:var(--ink); }
.c27-stat__row { display:flex; align-items:baseline; gap:9px; }

/* Candidate card */
.c27-candcard { display:flex; flex-direction:column; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; text-decoration:none; color:inherit; padding:0; font:inherit; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.c27-candcard:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--line-2); }
.c27-candcard:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.c27-candcard__media { position:relative; aspect-ratio:1 / 1; background:var(--paper-2); display:grid; place-items:center; overflow:hidden; }
.c27-candcard__media--photo { background:linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 70%, var(--paper-3) 100%); }
.c27-candcard__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.c27-candcard__badge { position:absolute; top:11px; left:11px; z-index:2; }
.c27-candcard__tri { position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(to right, var(--bleu-france) 0 33.33%, #fff 33.33% 66.66%, var(--rouge) 66.66% 100%); }
.c27-candcard__body { padding:14px 15px 15px; display:flex; flex-direction:column; gap:3px; }
.c27-candcard__name { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h4); letter-spacing:-0.01em; line-height:1.15; color:var(--ink); }
.c27-candcard__party { font-size:var(--fs-xs); color:var(--ink-3); }
.c27-candcard__meta { display:flex; align-items:center; gap:14px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.c27-candcard__stat { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-3); letter-spacing:.02em; }
.c27-candcard__stat b { font-weight:var(--fw-semibold); color:var(--ink); font-size:var(--fs-sm); }

/* Theme tile */
.c27-themetile { position:relative; display:flex; flex-direction:column; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px; cursor:pointer; text-decoration:none; color:inherit; overflow:hidden; font:inherit; transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.c27-themetile::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--_tc, var(--bleu-france)); opacity:0; transition:opacity var(--dur-base) var(--ease-out); }
.c27-themetile:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-2); }
.c27-themetile:hover::before { opacity:1; }
.c27-themetile:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.c27-themetile__icon { width:44px; height:44px; border-radius:var(--radius-sm); display:grid; place-items:center; background:var(--_tint, var(--bleu-100)); color:var(--_tc, var(--bleu-france)); margin-bottom:14px; }
.c27-themetile__name { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h4); letter-spacing:-0.01em; color:var(--ink); margin:0 0 4px; }
.c27-themetile__desc { font-size:var(--fs-xs); line-height:1.5; color:var(--ink-3); margin:0; }
.c27-themetile__meta { display:flex; align-items:center; gap:7px; margin-top:14px; }
.c27-themetile__count { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-3); letter-spacing:.02em; }
.c27-themetile__count b { color:var(--ink); font-weight:var(--fw-semibold); }
.c27-themetile__arrow { margin-left:auto; color:var(--ink-4); transition:transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.c27-themetile:hover .c27-themetile__arrow { transform:translateX(3px); color:var(--_tc, var(--bleu-france)); }

/* Proposal card */
.c27-propcard { position:relative; display:flex; flex-direction:column; text-align:left; width:100%; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:16px 18px; cursor:pointer; text-decoration:none; color:inherit; transition:box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.c27-propcard:hover { box-shadow:var(--shadow-md); border-color:var(--line-2); }
.c27-propcard__top { display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.c27-propcard__cand { display:flex; align-items:center; gap:8px; min-width:0; }
.c27-propcard__candname { font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c27-propcard__spacer { flex:1; }
.c27-propcard__num { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-4); letter-spacing:.04em; }
.c27-propcard__title { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-h4); line-height:1.22; letter-spacing:-0.01em; color:var(--ink); margin:0 0 7px; text-wrap:pretty; }
.c27-propcard__summary { font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2); margin:0; }
.c27-propcard__foot { display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); }
.c27-propcard__metaitem { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-3); letter-spacing:.02em; }

/* Source link */
.c27-source { display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 13px; text-decoration:none; color:inherit; cursor:pointer; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.c27-source:hover { background:var(--paper-2); border-color:var(--line-2); }
.c27-source__logo { flex:none; width:34px; height:34px; border-radius:var(--radius-xs); display:grid; place-items:center; font-family:var(--font-display); font-weight:var(--fw-bold); font-size:15px; color:#fff; }
.c27-source__main { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px; }
.c27-source__pub { display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-3); letter-spacing:.03em; text-transform:uppercase; }
.c27-source__title { font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink); line-height:1.35; }
.c27-source__date { font-size:var(--fs-2xs); color:var(--ink-4); font-family:var(--font-mono); white-space:nowrap; }
.c27-source__ext { color:var(--ink-4); flex:none; }
.c27-source:hover .c27-source__ext { color:var(--bleu-france); }

/* Input (search) */
.c27-input { width:100%; font-family:var(--font-sans); font-size:var(--fs-sm); color:var(--ink); background:var(--card); border:1px solid var(--line-2); border-radius:var(--radius-sm); padding:9px 13px; outline:none; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.c27-input:focus { border-color:var(--bleu-500); box-shadow:var(--focus-ring); }
.c27-input::placeholder { color:var(--ink-4); }

/* Buttons */
.c27-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-weight:var(--fw-semibold); font-size:var(--fs-sm); padding:10px 18px; border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:var(--t-base); }
.c27-btn--primary { background:var(--bleu-france); color:#fff; }
.c27-btn--primary:hover { background:var(--bleu-700); color:#fff; }
.c27-btn--secondary { background:var(--card); color:var(--ink); border-color:var(--line-2); }
.c27-btn--secondary:hover { background:var(--paper-2); }

/* Tabs */
.c27k-tabs { display:flex; gap:4px; border-bottom:1px solid var(--line); }
.c27k-tab { display:inline-flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; font-family:var(--font-sans); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink-3); padding:10px 14px; border-bottom:2px solid transparent; }
.c27k-tab:hover { color:var(--ink); }
.c27k-tab.is-active { color:var(--bleu-france); border-bottom-color:var(--bleu-france); font-weight:var(--fw-semibold); }
.c27k-tab__count { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-4); }

/* Right panel (drawer) sur clic d'une position */
.c27-overlay { position:fixed; inset:0; background:rgba(27,26,23,.42); z-index:100; opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease-out); }
.c27-overlay.open { opacity:1; pointer-events:auto; }
.c27-drawer { position:fixed; top:0; right:0; height:100vh; width:min(920px,96vw); background:var(--card); box-shadow:var(--shadow-xl); z-index:101; transform:translateX(101%); transition:transform var(--dur-slow) var(--ease-out); overflow-y:auto; }
.c27-drawer.open { transform:none; }
.c27-drawer__in { padding:22px 24px 40px; }
.c27-drawer__top { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.c27-drawer__who { display:flex; align-items:center; gap:9px; min-width:0; }
.c27-drawer__whoname { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.c27-drawer__close { margin-left:auto; flex:none; width:32px; height:32px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); color:var(--ink-3); cursor:pointer; display:grid; place-items:center; }
.c27-drawer__close:hover { background:var(--paper-2); color:var(--ink); }
.c27-drawer__title { font-size:var(--fs-h3); line-height:1.2; margin:2px 0 12px; }
.c27-drawer__meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-bottom:16px; }
.c27-nat { display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:var(--fs-2xs); font-weight:var(--fw-semibold); letter-spacing:var(--ls-wide); text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-xs); }
.c27-nat--mesure { background:var(--bleu-100); color:var(--bleu-700); }
.c27-nat--orientation { background:var(--paper-3); color:var(--ink-2); }
.c27-drawer__sec { margin-top:20px; }
.c27-drawer__label { font:var(--overline); color:var(--ink-3); margin-bottom:8px; display:block; }
.c27-drawer__sec p { margin:0 0 8px; font-size:var(--fs-sm); line-height:1.6; color:var(--ink-2); }
.c27-quote { border-left:3px solid var(--rouge); background:var(--rouge-050); padding:9px 12px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:8px 0; font-size:var(--fs-sm); color:var(--ink); font-style:italic; }
.c27-srcrow { display:flex; align-items:baseline; gap:8px; justify-content:space-between; margin-top:8px; }
.c27-srcrow a { font-size:var(--fs-sm); font-weight:var(--fw-medium); }
.c27-srcrow span { font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-4); flex:none; }
.c27-rel { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:8px; }
.c27-relcard { display:flex; flex-direction:column; align-items:stretch; text-align:left; width:100%; background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; cursor:pointer; font:inherit; color:inherit; transition:background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.c27-relcard:hover { background:#fff; border-color:var(--line-2); }
.c27-relcard__top { display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.c27-relcard__name { font-size:var(--fs-2xs); font-family:var(--font-mono); color:var(--ink-3); }
.c27-relcard__sim { margin-left:auto; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-4); }
.c27-relcard__idee { font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--ink); line-height:1.3; }
.c27-empty-mini { font-size:var(--fs-sm); color:var(--ink-4); font-style:italic; }

/* Tableau propositions */
.c27-prevtext { font-size:var(--fs-2xs); color:var(--ink-3); margin-top:3px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.c27-prow:hover { background:var(--bleu-050) !important; }
.c27-pg { min-width:30px; height:30px; padding:0 7px; border:1px solid var(--line-2); background:var(--card); border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--ink-2); }
.c27-pg:hover { background:var(--paper-2); }
.c27-pg.is-active { background:var(--bleu-france); color:#fff; border-color:var(--bleu-france); }

/* Bio / key-value */
.c27k-bio { max-width:680px; }
.c27k-keyval { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.c27k-keyval:last-child { border-bottom:none; }
.c27k-keyval b { color:var(--ink); font-weight:var(--fw-semibold); }
.c27k-keyval span { color:var(--ink-3); text-align:right; }