:root{
  /* Existing palette (kept for compatibility) */
  --bg:#f7f7f7;
  --fg:#3a3a3a;
  --muted:#6b7280;
  --border:#e5e6ea;
  --primary:#63b245;
  --primary-600:#4a8f36;
  --row:#fafafa;
  --primary-tint:#e6f4e6;
  /* New tokens (design system) mapped to existing */
  --card:#ffffff;
  --text:var(--fg);
  --brand:var(--primary);
  --brand-ink:#0E7A43;
  --radius:12px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1300px;margin:0 auto;padding:1rem}
.site-header{position:sticky;top:0;background:#fff;z-index:10;border-bottom:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.03)}
.site-header .shadow{display:none}
.site-header .container{padding:.5rem 1rem}
.header-right .nav a{padding:.28rem .5rem;border-radius:8px;transition:background .15s ease,color .15s ease}
.header-right .nav a:hover{background:#f7f7f7;color:var(--primary)}
.header-right .nav a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.site-stats .badge{background:var(--primary-tint);color:var(--primary-600);border:1px solid var(--border)}
.site-header .header-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.site-stats--mobile{display:none}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:.3rem;border:1px solid var(--border);background:#f9fafb;border-radius:10px;padding:.32rem .4rem;cursor:pointer;min-height:34px;min-width:34px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.menu-toggle:hover{background:#f1f5f9}
.menu-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.menu-icon{position:relative;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s ease,background .2s ease}
.menu-icon::before,.menu-icon::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--fg);border-radius:2px;transition:transform .2s ease,top .2s ease,opacity .2s ease}
.menu-icon::before{top:-5px}
.menu-icon::after{top:5px}
.menu-toggle[aria-expanded="true"] .menu-icon{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-icon::before{top:0;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-icon::after{top:0;transform:rotate(-45deg)}
.menu-toggle[aria-expanded="true"]{background:#ebf7eb;border-color:var(--primary)}
.header-right{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.site-stats{display:flex;align-items:center;gap:.4rem;color:var(--muted)}
.site-stats .label{font-size:.85em}
.site-stats.site-stats--mobile{display:none}
.site-header .site-stats .badge{font-size:.8rem;padding:.08rem .4rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;margin-right:1rem;color:inherit}
.brand img{display:block;height:34px}
@media(min-width:900px){.brand img{height:42px}}
.nav{display:flex;gap:1rem;flex-wrap:wrap}
.nav a{color:inherit;text-decoration:none}
.site-header .nav a{font-size:1rem}
.nav a:hover{color:var(--primary)}
h1{font-size:1.6rem;margin:1rem 0 .5rem}
h2{font-size:1.2rem;margin:1.2rem 0 .5rem}
h3{font-size:1.05rem;margin:1rem 0 .4rem}
p{color:var(--muted)}
/* Ensure lists in content cards follow the same text tone and spacing */
.card ul,.card ol{color:var(--muted);margin:.4rem 0 0.6rem 1.2rem;padding:0}
.card li{margin:.2rem 0}
/* Base link style for textual content */
a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--primary-600)}
/* Remove underline inside pagination chips/buttons */
.pagination a, .pill a, .chip a, .tabs .tab{ text-decoration:none }
.table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.table th,.table td{padding:.6rem .7rem;border-bottom:1px solid var(--border)}
.table thead th{background:var(--primary-tint);text-align:left;font-weight:600}
.table tbody tr:nth-child(even){background:var(--row)}
.table tbody tr:hover{background:#eef7ee}
.num{text-align:right}
.btn{display:inline-block;background:var(--primary);color:#fff;padding:.35rem .6rem;border-radius:6px;text-decoration:none}
.btn:hover{background:var(--primary-600)}
.btn.btn-lg{padding:.6rem .9rem;font-size:1.05rem}
.btn.btn-outline{background:#fff;color:var(--primary);border:1px solid var(--primary)}
.btn.btn-outline:hover{background:#ebf7eb}
/* New button variants */
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:#f3f4f6}
/* Loading state for buttons (used on search submit) */
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.btn.is-loading{position:relative;pointer-events:none}
.btn.is-loading::after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border-radius:50%;border:2px solid #fff;border-right-color:transparent;transform:translate(-50%,-50%);animation:spin .6s linear infinite}
/* Outline variant spinner color */
.btn.btn-outline.is-loading::after{border-color:var(--primary);border-right-color:transparent}
/* Keep layout stable by hiding text without changing width */
.btn.is-loading{color:transparent}
.btn.btn-outline.is-loading{color:transparent}
/* Ensure buttons (anchors) keep readable text color despite global a:hover */
a.btn, .btn{color:#fff;text-decoration:none}
a.btn:hover, .btn:hover{color:#fff;text-decoration:none}
.btn:focus{color:#fff}
a.btn.btn-outline, .btn.btn-outline{color:var(--primary)}
a.btn.btn-outline:hover, .btn.btn-outline:hover{color:var(--primary)}
.filters label{display:flex;flex-direction:column;font-size:.9rem}
input,select,button{padding:.35rem .4rem;border:1px solid var(--border);border-radius:6px;background:#fff}
button.btn{border:none;cursor:pointer}
.pagination{display:flex;align-items:center;gap:.5rem;margin:1rem 0}
.card{border:1px solid var(--border);border-radius:8px;padding:.8rem;margin:1rem 0;background:#fff}
.card h2{margin-top:0}
.metrics{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.6rem}
@media(min-width:700px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.metrics{grid-template-columns:repeat(3,minmax(0,1fr))}}
.metric{padding:.5rem .6rem;border:1px solid var(--border);border-radius:8px;background:#fff}
.metric .label{font-size:.82rem;color:var(--muted)}
.metric .value{font-weight:700;color:var(--fg)}
/* Make tab panels edge-to-edge for tables */
.card.tab-panel{padding:0}
.card.tab-panel h2{margin:0;padding:.7rem .9rem;border-bottom:1px solid var(--border)}
.card.tab-panel .table-scroll{width:100%}
.card.tab-panel .table{border-left:0;border-right:0;border-radius:0}
@media(max-width:640px){.num{text-align:left}}

/* Make tables horizontally scrollable on small screens to prevent overflow */
@media(max-width:700px){
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%}
  .table th,.table td{white-space:nowrap}
}

/* Responsive navigation (burger) */
@media(max-width:900px){
  .site-header .header-bar{position:relative}
  .site-header .header-bar{flex-wrap:wrap}
  .site-header .header-bar{gap:.4rem}
  .menu-toggle{display:inline-flex}
  .header-right{gap:.6rem}
  /* Mobile: show top full-width stats above brand/burger */
  .site-stats{display:none}
  .site-stats.site-stats--mobile{display:flex;flex-basis:100%;width:100%;justify-content:center;margin-bottom:.1rem}
  .site-stats--mobile .badge .label{display:inline}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:.2rem;background:#fff;border-bottom:1px solid var(--border);padding:.6rem 1rem 1rem;box-shadow:0 2px 6px rgba(0,0,0,.04)}
  .nav.is-open{display:flex}
  .header-right .nav a{padding:.5rem .4rem;border-radius:6px}
}

/* Minimal additions */
.hero{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.2rem;margin:.5rem 0 1rem}
.hero h1{margin:.2rem 0 .2rem;font-size:1.8rem}
.hero .hero-search{margin-top:.6rem}
.hero .hero-search .search-form{max-width:720px}
.search-form{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.search-form.is-inline{gap:.5rem}
.search-form .search-field{position:relative;flex:1 1 320px}
.search-form .icon-search{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted)}
.search-form .search-input{width:100%;padding:.6rem .9rem .6rem 2.1rem;border:1px solid var(--border);border-radius:9999px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04) inset}
.search-form .search-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,178,69,.15)}
.search-form .btn{border-radius:9999px}
.table-scroll{overflow:auto;max-width:100%;width:100%;display:block}
.table.compact{font-size:.92rem}
.table.compact th,.table.compact td{padding:.4rem .5rem;line-height:1.35}
.table .addr{max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.table a.addr-link{color:var(--primary);text-decoration:none;font-weight:500}
.table a.addr-link:hover{color:var(--primary-600);text-decoration:underline}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:.35rem;align-items:stretch;margin:.5rem 0;padding:.3rem;background:var(--row);border:1px solid var(--border);border-radius:12px}
.tabs .tab{padding:.45rem .7rem;border:1px solid transparent;text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:.35rem;border-radius:8px;transition:background .15s ease,color .15s ease, border-color .15s ease;font-weight:600}
.tabs .tab:hover{background:#f7f7f7;border-color:var(--border)}
.tabs .tab.is-active{background:#fff;border-color:var(--border);color:var(--primary);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tabs .tab:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.tabs .muted{color:var(--muted);font-weight:400}
.tabs .hr{display:none}
.tab-panel{display:none}
.tab-panel.is-active{display:block}
/* Tab icons */
  .tabs .tab .icon{width:16px;height:16px;display:inline-block;background-color:currentColor;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
  .tabs .tab:hover{background:#f7f7f7}
/* Count badge in tabs */
  .tabs .count-badge{display:inline-block;margin-left:.25rem;padding:.1rem .4rem;border-radius:9999px;background:#eef2f1;color:var(--fg);font-size:.8em;line-height:1;border:1px solid rgba(0,0,0,0.06)}

/* Icon masks for tabs (inherit current text color) */
.tabs .tab .icon-pc-logts{ -webkit-mask-image:url('/assets/svg/pc-logts.svg'); mask-image:url('/assets/svg/pc-logts.svg'); }
.tabs .tab .icon-pc-locaux{ -webkit-mask-image:url('/assets/svg/pc-locaux.svg'); mask-image:url('/assets/svg/pc-locaux.svg'); }
.tabs .tab .icon-pa{ -webkit-mask-image:url('/assets/svg/pa.svg'); mask-image:url('/assets/svg/pa.svg'); }
.tabs .tab .icon-pd{ -webkit-mask-image:url('/assets/svg/pd.svg'); mask-image:url('/assets/svg/pd.svg'); }

/* Generic inline icons (sidebar, links) */
.inline-icon{width:16px;height:16px;display:inline-block;background-color:currentColor;vertical-align:-3px;margin-right:.35rem;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center}
.icon-pc-logts{ -webkit-mask-image:url('/assets/svg/pc-logts.svg'); mask-image:url('/assets/svg/pc-logts.svg'); }
.icon-pc-locaux{ -webkit-mask-image:url('/assets/svg/pc-locaux.svg'); mask-image:url('/assets/svg/pc-locaux.svg'); }
.icon-pa{ -webkit-mask-image:url('/assets/svg/pa.svg'); mask-image:url('/assets/svg/pa.svg'); }
.icon-pd{ -webkit-mask-image:url('/assets/svg/pd.svg'); mask-image:url('/assets/svg/pd.svg'); }
.icon-triangle-arrow{ -webkit-mask-image:url('/assets/svg/triangle-arrow.svg'); mask-image:url('/assets/svg/triangle-arrow.svg'); }
.inline-icon.icon-triangle-arrow{ width:10px; height:10px; margin-right:.28rem; vertical-align:-1px; opacity:.8 }
.list-neighbours li{line-height:1.45}

/* Sidebar type links with counts */
.type-list{list-style:none;margin:.5rem 0 0;padding:0}
.type-list li{margin:.45rem 0}
.type-link{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:10px;padding:.6rem .7rem;background:#fff;color:inherit;text-decoration:none}
.type-link:hover{border-color:var(--primary);background:#f3f8f2}
.type-link .left{display:inline-flex;align-items:center;gap:.45rem;font-weight:600}
.badge-green{display:inline-block;background:var(--primary-tint);color:var(--primary-600);border:1px solid var(--border);border-radius:9999px;padding:.12rem .55rem;font-size:.85rem;line-height:1}
.tabs .tab.is-active .count-badge{background:var(--primary);color:#fff;border-color:transparent}

/* Breadcrumb */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.3rem .4rem;margin:.2rem 0 .35rem;color:var(--muted);align-items:center}
.breadcrumb a{text-decoration:none;color:inherit}
.breadcrumb a:hover{color:var(--primary)}
.breadcrumb .sep{color:var(--muted);display:inline-block;vertical-align:middle;margin:0 .15rem;opacity:.9;width:18px;height:18px}
.breadcrumb .current{font-weight:600;color:var(--fg)}
/* Back link */
.back-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--primary);text-decoration:none;font-weight:500;margin:.05rem 0 .25rem}
.back-link:hover{color:var(--primary-600);text-decoration:underline}
.back-link .icon{display:inline-block;vertical-align:middle;color:inherit}
/* Home actions */
.home-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:1rem 0}
/* Cards grid (regions, departements) */
.cards-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
@media(min-width:640px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card-button{display:block;background:#fff;border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;text-decoration:none;color:inherit;transition:box-shadow .15s ease,border-color .15s ease,transform .08s ease}
.card-button:hover{border-color:var(--primary);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.card-button:active{transform:translateY(1px)}
/* Generic cards */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.card.section{padding:.9rem 1rem}
.card.section > h1:first-child{margin-top:.05rem}
.detail-main .card.section .detail-header h1{margin-top:.05rem}
.detail-main .card.section{display:block}
.detail-main .card.section > section{margin:0}
.detail-main .card.section > section + section{margin-top:1rem}
.detail-main .card.section > section + section::before{content:none}
.detail-main .card.section h2{margin:0 0 .6rem; padding:.35rem .5rem; background:#f5f6f7; color:inherit; border-top:1px solid var(--border); border-bottom:1px solid var(--border); border-radius:0}
.detail-main .card.section h2.emph{ background:rgba(99,178,69,.06); color:var(--primary-600); border-top:1px solid rgba(99,178,69,.35); border-bottom:1px solid rgba(99,178,69,.35) }
.detail-main .card.section h3{margin:.6rem 0 .3rem}

/* Chips metrics */
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f8fafc;border:1px solid var(--border);font-size:14px}
.pill .pill-dot{width:8px;height:8px;border-radius:999px;display:inline-block}
.pill .pill-dot.success{background:var(--brand)}
.pill .pill-dot.neutral{background:#9ca3af}
.chip{padding:.2rem .55rem;border:1px solid var(--border);border-radius:9999px}
.chip.is-active{background:rgba(99,178,69,.12);border-color:var(--primary);color:var(--primary-600)}

/* Tabs with roles */
.tabs{display:flex;gap:.6rem;flex-wrap:wrap;margin:.6rem 0}
.tabs .tab{display:inline-flex;align-items:center;gap:.4rem;min-width:42px;height:34px;padding:0 .75rem;border-radius:18px;border:2px solid var(--border);background:#eef7ee;color:inherit;text-decoration:none}
.tabs .tab.is-active{border-color:var(--primary);background:#fff;color:var(--primary-600);font-weight:600}
.tabs .tab .icon{display:inline-block}

/* Pagination and size selector styling */
.pagination{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pagination .sizes .chip,
.pagination .pages .chip{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:34px; padding:0 .75rem; border-radius:18px; border:2px solid var(--primary); color:var(--brand-ink); background:rgba(99,178,69,.1) }
.pagination .sizes .chip:not(.is-active),
.pagination .pages .chip:not(.is-active){ border-color:var(--border); color:var(--text); background:#eef7ee }
.pagination .chip.is-active{ background:#fff; box-shadow:0 1px 1px rgba(0,0,0,.04); }
.pagination .btn.btn-ghost{ display:inline-flex; align-items:center; justify-content:center; min-width:96px; height:34px; padding:0 .9rem; border-radius:18px; background:#eef7ee; border:2px solid var(--primary); color:var(--brand-ink); text-decoration:none }
.pagination .btn.btn-ghost:hover{ filter:brightness(0.98) }
.pagination .btn.btn-ghost[aria-disabled="true"]{ background:#f5f6f7; border-color:var(--border); color:var(--muted); opacity:1; pointer-events:none }
.pagination .ellipsis{ color:var(--muted); padding:0 .25rem }

/* Focus visible */
:focus-visible{outline:3px solid rgba(99,178,69,.45);outline-offset:2px}
.card-button .title{font-weight:800;text-transform:uppercase;letter-spacing:.02em;color:var(--fg)}
.card-button .meta{margin-top:.2rem;color:var(--muted)}
/* Enhancements for sortable headers and filters */
.filters .spacer{flex:1 1 auto}
.btn.btn-sm{padding:.25rem .5rem;font-size:.9rem}
.table thead th a{color:inherit;text-decoration:none}
.table thead th a:hover{color:var(--primary)}

/* Commune context module */
.ctx{margin-top:1rem}
.ctx-intro{margin:.4rem 0 .8rem}
.ctx-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:1rem}
@media(max-width:960px){.ctx-grid{grid-template-columns:1fr}}
.kpi{list-style:none;margin:.2rem 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem}
.kpi li{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--border);border-radius:8px;background:#fff;padding:.4rem .5rem}
.kpi span{color:var(--muted)}
.tbl-compare{width:100%;border:1px solid var(--border);border-collapse:separate;border-spacing:0;border-radius:8px;overflow:hidden;background:#fff}
.tbl-compare th,.tbl-compare td{padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.tbl-compare thead th{background:#f5f6f7}
.ctx-reading-note{font-size:.9rem;color:var(--muted);margin:.3rem 0 0}
.list-neighbours{list-style:none;margin:.2rem 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.3rem .8rem}
.recent-list{list-style:disc;margin:.2rem 0 0 1.1rem}
.sort-ind{font-size:.85em;color:var(--muted);margin-left:.25rem}
/* Department communes list: compact rows + styled links */
.table.table-communes.compact th,.table.table-communes.compact td{padding:.34rem .5rem}
.table.table-communes .name a{color:var(--primary);text-decoration:underline;font-weight:600}
.table.table-communes .name a:hover{color:var(--primary-600);text-decoration:underline}
.table.table-communes .breakdown{white-space:nowrap}
.table.table-communes .breakdown .tag{margin-right:.25rem;margin-bottom:.1rem}
.row-link{color:var(--primary);text-decoration:none}
.row-link:hover{color:var(--primary-600);text-decoration:underline}
.row-link.action{font-size:.9rem;white-space:nowrap}
/* Toolbar + segmented controls */
.toolbar{display:flex;align-items:center;gap:.8rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;background:#f8fafc;margin:.6rem 0}
.toolbar .search{flex:1 1 360px;max-width:560px}
.toolbar .search input{width:100%}
.toolbar .actions{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.btn-group{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.btn-group .btn{background:#fff;color:var(--primary);border-radius:0;border:0;border-right:1px solid var(--border);min-width:44px;text-align:center}
.btn-group .btn:last-child{border-right:0}
.btn-group .btn.is-active{background:var(--primary);color:#fff}
.btn.is-active{box-shadow:0 0 0 2px rgba(0,0,0,0.05) inset}

/* Accessibility helper */

/* Tags */
.tag{display:inline-block;padding:.12rem .4rem;border-radius:9999px;background:#eef2f1;color:var(--fg);border:1px solid rgba(0,0,0,.06);line-height:1}
.tag.small{font-size:.78em;padding:.08rem .35rem}
/* Category color variants */
.tag.cat-10{background:#e6f0ff;color:#1e40af;border-color:#dbe7ff}
.tag.cat-20{background:#e6f7f2;color:#065f46;border-color:#d6f0e8}
.tag.cat-30{background:#fff7ed;color:#9a3412;border-color:#ffedd5}
.tag.cat-40{background:#fef3c7;color:#92400e;border-color:#fde68a}
.tag.cat-50{background:#f3e8ff;color:#6b21a8;border-color:#e9d5ff}
.tag.cat-80{background:#eef2f1;color:#374151;border-color:#e5e7eb}
.tag.cat-90{background:#fde2e2;color:#991b1b;border-color:#fecaca}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* Help text and chips */
.help{color:var(--muted);margin:.2rem 0 1rem}
.chip{display:inline-block;background:#eaf7e8;color:var(--fg);border:1px solid #d7ebd3;padding:.15rem .5rem;border-radius:9999px;font-size:.85rem;margin-left:.5rem}
/* Badges for status/meta */
.badge{display:inline-block;background:#eef2ff;color:#2236d3;border:1px solid #c7d2fe;border-radius:9999px;padding:.1rem .5rem;font-size:.85rem}
.muted{color:var(--muted)}
.section-sep{margin:1.2rem 0;text-align:center;color:var(--border);letter-spacing:.2em}
/* Narrative grid for variable explanations */
.narrative-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:800px){.narrative-grid{grid-template-columns:1fr 1fr}}
.narrative-item{border:1px solid var(--border);border-radius:8px;padding:.8rem;background:#fff}
.section-sep{margin:1.2rem 0;text-align:center;color:var(--border);letter-spacing:.2em}

/* Detail page layout */
.detail-layout{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:1024px){.detail-layout{grid-template-columns:1fr 300px}}
.detail-main{min-width:0}
.detail-aside{min-width:0}
.detail-aside .widget{border:1px solid var(--border);border-radius:8px;background:#fff;padding:.8rem;margin-bottom:1rem}
.detail-aside .widget h3{margin-top:0}

/* Detail main content structure */
.detail-main .section h2, .detail-main h2{margin:1rem 0 .5rem}
.badges{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:.4rem 0 .8rem}
.badge.success{background:rgba(99,178,69,.12);color:var(--primary-600);border:1px solid var(--border);border-radius:9999px;padding:.1rem .55rem;font-size:.85rem}
.badge.neutral{background:#eef2f7;color:#374151;border:1px solid var(--border);border-radius:9999px;padding:.1rem .55rem;font-size:.85rem}
.facts-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.6rem .8rem}
@media(min-width:720px){.facts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fact{border:1px solid var(--border);border-radius:8px;padding:.6rem .7rem;background:#fff}
.fact .label{display:block;color:var(--muted);font-size:.85rem;margin-bottom:.15rem}
.fact .value{font-weight:600}

/* Callout */
.callout{border:1px solid var(--border);border-radius:8px;background:#fff;padding:.6rem .8rem}
.callout.info{border-left:4px solid var(--primary)}

/* Breadcrumb + back link spacing on detail */
.detail-header{display:flex;flex-direction:column;gap:.2rem;margin:.15rem 0 .3rem}
.detail-header .back-link{margin-top:.2rem}

/* Footer */
.site-footer{margin-top:2rem;background:#fff;border-top:1px solid var(--border)}
.site-footer .container{padding:1rem 1rem}
.footer-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem}
@media(min-width:700px){.footer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.site-footer a.footer-link{color:inherit;text-decoration:none;border-bottom:1px dashed rgba(99,178,69,.5)}
.site-footer a.footer-link:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* Home landing: full card width, centered content inside */
.home-landing{max-width:100%;margin:1rem 0;text-align:center}
.home-landing h1{margin-top:.2rem;font-size:2rem;line-height:1.2}
@media(min-width:900px){.home-landing h1{font-size:2.4rem}}
.home-landing .hero-top{background:var(--primary-tint);border:0;border-radius:8px 8px 0 0;padding:3rem 1rem 4rem;margin:-.8rem;margin-bottom:1rem}
.home-landing .hero-top h1{max-width:760px;margin:.2rem auto 1.2rem}
.home-landing .hero-top .muted{max-width:760px;margin:0 auto 1.6rem}
.home-landing .hero-top .hero-search{margin-top:1rem}
.home-landing .hero-top .hero-search .search-form{max-width:640px}
.home-landing .hero-top .muted{color:#2f4f34}
.home-landing > p.muted{max-width:900px;margin:0.2rem auto 0.8rem}
.home-landing .hero-search .search-form{max-width:720px;margin:0 auto}
.home-landing .metrics{max-width:1000px;margin:0 auto}
.home-landing ol{max-width:900px;margin:0.2rem auto 0.8rem;text-align:left}
.home-landing .home-actions{justify-content:center}
.home-landing .cards-grid{justify-content:center;max-width:1000px;margin:0 auto}
.home-landing blockquote{margin:0 auto;max-width:720px;font-style:italic}

/* Simple link lists (used on plan-du-site) */
.link-list{list-style:none;margin:0;padding:0}
.link-list li{list-style:none;margin:0;padding:.1rem 0}
.link-list a{color:inherit;text-decoration:none}
.link-list a:hover{color:var(--primary);text-decoration:underline}
.link-list.columns{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:.2rem 1rem}
@media(min-width:700px){.link-list.columns{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.link-list.columns{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Consent banner */
.consent-banner{position:fixed;right:12px;bottom:12px;z-index:50}
.consent-banner .consent-card{max-width:360px;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.08);padding:.8rem}
.consent-banner .consent-text{font-size:.92rem;color:var(--fg);margin:0 0 .6rem 0}
.consent-banner .consent-actions{display:flex;gap:.5rem;justify-content:flex-end}
.consent-banner .btn{padding:.35rem .6rem}
/* Mobile-friendly layout for the consent banner */
@media(max-width:600px){
  .consent-banner{left:8px;right:8px;bottom:8px}
  .consent-banner .consent-card{max-width:none;width:100%;padding:.9rem}
  .consent-banner .consent-text{font-size:.95rem}
  .consent-banner .consent-actions{justify-content:stretch;flex-wrap:nowrap;flex-direction:column;align-items:stretch}
  .consent-banner .consent-actions .btn{
    flex:0 0 auto;
    padding:.65rem 1rem;
    font-size:1rem;
    min-height:44px; /* comfortable tap target */
    border-radius:10px;
    width:100%;
  }
}