/* ═══════════════════════════════════════════════
   SYSTÈME — Vie Publique CI
   Couleurs      : bleu #0168b3 · encre #191c21 · orange #F2921D (logo)
                   papier #FCF9F5 · crème #F6F1E8 · filet #EAE4D8
   Typographie   : Epilogue (titres) · Public Sans (texte)
   Échelle       : h1 clamp(34-60) · h2 clamp(26-34) · h3 20 · h4 18
                   corps 16/1.65 · méta 13 · sur-titre 11 maj.
   Boutons       : hauteur 48 · rayon 10 · Epilogue 800 15
                   .btn-primary (bleu plein) · .btn-outline (contour bleu)
                   .btn-accent (orange plein)
   ═══════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin:0; background:#FCF9F5; color:#191c21; font-family:'Public Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:#0168b3; text-decoration:none; }
a:hover { color:#015089; }
h1,h2,h3,h4,h5,dd,dl,figure,p { margin:0; }
ul { list-style:none; margin:0; padding:0; }
.wrap { max-width:1200px; margin:0 auto; padding-left:24px; padding-right:24px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.noscroll::-webkit-scrollbar { display:none; }
.noscroll { -ms-overflow-style:none; scrollbar-width:none; }
.tnum { font-variant-numeric:tabular-nums; }
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; display:inline-block; line-height:1; }

/* ── Typographie ─────────────────────────────── */
.eyebrow { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.h2 { font-family:Epilogue; font-weight:900; font-size:clamp(26px,3.4vw,34px); letter-spacing:-.03em; line-height:1; color:#191c21; }
.lede { font-size:16px; line-height:1.65; color:#5B5349; }
.meta { font-size:13px; font-weight:500; color:#6E6357; }

/* ── En-tête de section (identique partout) ──── */
.sec { padding-top:clamp(48px,6vw,72px); }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; border-bottom:2px solid #191c21; padding-bottom:14px; margin-bottom:32px; }
.sec-title { display:flex; align-items:center; gap:12px; }
.sec-bar { display:block; width:5px; height:30px; background:#0168b3; border-radius:3px; }
.sec-link { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#6E6357; }

/* ── Boutons (3 variantes, mêmes métriques) ──── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; padding:0 24px; border-radius:10px; border:none; font-family:Epilogue; font-weight:800; font-size:15px; cursor:pointer; white-space:nowrap;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease,box-shadow .25s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:#0168b3; color:#fff; }
.btn-primary:hover { background:#015089; color:#fff; box-shadow:0 10px 22px -12px rgba(1,104,179,.9); }
.btn-outline { background:transparent; border:2px solid #0168b3; color:#0168b3; }
.btn-outline:hover { background:#0168b3; color:#fff; }
.btn-accent { background:#F2921D; color:#231403; }
.btn-accent:hover { background:#D97D0C; color:#231403; box-shadow:0 10px 22px -12px rgba(242,146,29,.9); }

/* ── Cartes & animations ─────────────────────── */
.card { background:#fff; border:1px solid #EAE4D8; border-radius:14px; overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(25,28,33,.28); border-color:#E8A76A; }
.card:hover .zoom { transform:scale(1.06); }
.zoom { transition:transform .8s cubic-bezier(.2,.7,.3,1); }
.ph { background:repeating-linear-gradient(135deg,#EDE5D7 0 10px,#E5DCCB 10px 20px); display:grid; place-items:center; }
.ph-label { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#7A7160; }
.ul-anim { background-image:linear-gradient(#F2921D,#F2921D); background-size:0 2px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .3s ease; }
.ul-anim:hover { background-size:100% 2px; }
@keyframes rise { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none; } }
.rise { animation:rise .6s cubic-bezier(.2,.7,.3,1) both; }
.spin { width:36px; height:36px; border-radius:999px; border:3px solid #E6DFD1; border-bottom-color:#0168b3; margin:0 auto; animation:spink .9s linear infinite; }
@keyframes spink { to { transform:rotate(360deg); } }
.load { text-align:center; padding:40px 0; }
.load p { margin-top:14px; font-size:14px; color:#6E6357; }

/* ── En-tête ─────────────────────────────────── */
.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-bottom:1px solid #E7E2D9; }
.hdr-in { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:12px; padding-bottom:12px; }
.hdr-logo img { height:54px; width:auto; object-fit:contain; }
.nav { display:flex; align-items:center; gap:6px; font-family:Epilogue; font-weight:700; font-size:14px; }
.nav a { padding:9px 16px; border-radius:999px; color:#3D4249; white-space:nowrap; transition:background .2s ease,color .2s ease; }
.nav a:hover { background:#F1EADD; color:#191c21; }
.nav a[aria-current="page"] { background:#0168b3; color:#fff; }
.burger { display:none; flex-direction:column; justify-content:center; gap:5px; width:46px; height:46px; padding:0 11px; border:1px solid #DDD5C6; border-radius:10px; background:#fff; cursor:pointer; }
.burger span { display:block; height:2px; background:#191c21; border-radius:1px; }
.rail { background:#F6F1E8; border-top:1px solid #E7E2D9; }
.rail-in { display:flex; align-items:center; overflow-x:auto; height:46px; }
.rail-lbl { display:flex; align-items:center; gap:8px; padding-right:18px; flex-shrink:0; }
.rail-lbl i { display:block; width:4px; height:14px; background:#F2921D; border-radius:2px; }
.rail a { display:flex; align-items:center; height:24px; padding:0 18px; flex-shrink:0; white-space:nowrap; border-left:1px solid #E1DACC; font-size:14px; font-weight:500; color:#3D4249; }

/* Tiroir mobile */
.drawer { position:fixed; inset:0; z-index:100; display:none; }
.drawer.open { display:block; }
.drawer-bg { position:absolute; inset:0; background:rgba(18,22,27,.55); backdrop-filter:blur(3px); }
.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(82vw,300px); background:#fff; box-shadow:-20px 0 50px -20px rgba(0,0,0,.5); padding:20px; display:flex; flex-direction:column; gap:8px; }
.drawer-panel a { padding:13px 16px; border-radius:10px; color:#3D4249; font-family:Epilogue; font-weight:700; font-size:16px; }
.drawer-panel a[aria-current="page"] { background:#0168b3; color:#fff; }
.drawer-close { width:44px; height:44px; border:1px solid #DDD5C6; border-radius:10px; background:#fff; font-size:20px; line-height:1; color:#191c21; cursor:pointer; }

/* ── Héros ───────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:#12161B; }
.hero > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.hero-veil { position:absolute; inset:0; background:linear-gradient(105deg,rgba(12,20,30,.94) 0%,rgba(12,20,30,.74) 48%,rgba(60,32,8,.55) 100%); }
.hero-glow { position:absolute; right:-90px; top:-90px; width:340px; height:340px; border-radius:999px; background:radial-gradient(circle,rgba(242,146,29,.32),transparent 68%); }
.hero-in { position:relative; padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(48px,7vw,84px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.hero-tag { display:inline-flex; align-items:center; padding:7px 16px; border-radius:999px; background:rgba(242,146,29,.16); border:1px solid rgba(242,146,29,.5); color:#FFC98A; }
.hero h1 { font-family:Epilogue; font-weight:900; font-size:clamp(34px,5.4vw,60px); line-height:1.04; letter-spacing:-.035em; color:#fff; max-width:16ch; text-wrap:balance; }
.hero p { max-width:56ch; font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); }
.searchbar { width:100%; max-width:620px; display:flex; align-items:stretch; gap:8px; background:#fff; border-radius:14px; padding:7px; box-shadow:0 22px 48px -22px rgba(0,0,0,.65); }
.searchbar input { flex:1; min-width:0; border:none; outline:none; background:transparent; font-family:'Public Sans'; font-size:16px; color:#191c21; padding:0 12px 0 16px; }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.chips a { padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff; font-size:13px; font-weight:600; transition:background .25s ease,transform .25s ease; }
.chips a:hover { background:rgba(255,255,255,.18); color:#fff; transform:translateY(-2px); }

/* ── Chiffres ────────────────────────────────── */
.figs { background:#F6F1E8; border-bottom:1px solid #E7E2D9; }
.figs-in { padding-top:36px; padding-bottom:40px; }
.figs-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; }
.fig { background:#fff; border:1px solid #EAE4D8; border-top:3px solid #0168b3; border-radius:12px; padding:16px 18px; }
.fig dd { font-family:Epilogue; font-weight:800; font-size:clamp(22px,2.6vw,28px); letter-spacing:-.03em; white-space:nowrap; margin-bottom:8px; }
.fig dt { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.fig dt span { display:block; margin-top:5px; font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:#6E6357; }

/* ── Actualités ──────────────────────────────── */
.news { display:flex; flex-wrap:wrap; gap:28px; align-items:stretch; }
.news-main { flex:2 1 420px; min-width:0; position:relative; border-radius:18px; overflow:hidden; border:1px solid #EAE4D8; background:#12161B; min-height:440px; cursor:pointer; }
.news-main img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.news-main .veil { position:absolute; inset:0; background:linear-gradient(to top,rgba(10,14,20,.94) 0%,rgba(10,14,20,.45) 45%,rgba(10,14,20,.05) 100%); }
.news-main .body { position:relative; min-height:440px; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,3vw,38px); }
.news-main h3 { font-family:Epilogue; font-weight:800; font-size:clamp(24px,3vw,34px); line-height:1.12; letter-spacing:-.025em; color:#fff; max-width:20ch; text-wrap:balance; margin-bottom:12px; }
.news-side { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:4px; }
.news-item { padding:16px; border-radius:12px; border:1px solid transparent; background:#fff; cursor:pointer;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease; }
.news-item:hover { transform:translateY(-3px); box-shadow:0 14px 32px -18px rgba(25,28,33,.3); border-color:#E8A76A; }
.news-item h4 { font-family:Epilogue; font-weight:700; font-size:18px; line-height:1.25; letter-spacing:-.015em; margin-bottom:6px; }
.news-item p { font-size:14px; line-height:1.55; color:#6E6357; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tag-live { padding:5px 11px; border-radius:6px; background:#F2921D; color:#231403; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.tag-ghost { padding:5px 11px; border-radius:6px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.tag-brief { padding:3px 8px; border-radius:5px; background:rgba(242,146,29,.14); color:#A65A05; font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.tag-cat { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#0168b3; }

/* ── Vidéos ──────────────────────────────────── */
.vids { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; }
.vid-thumb { position:relative; aspect-ratio:16/9; overflow:hidden; background:#E5DFD3; }
.vid-thumb img { width:100%; height:100%; object-fit:cover; }
.vid-play { position:absolute; inset:0; display:grid; place-items:center; }
.vid-play i { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:rgba(242,146,29,.95); box-shadow:0 8px 20px -6px rgba(0,0,0,.5); }
.vid-play i::after { content:''; width:0; height:0; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }
.vid-body { padding:16px 18px 20px; }
.vid-body h3 { font-family:Epilogue; font-weight:700; font-size:17px; line-height:1.25; letter-spacing:-.015em; margin-bottom:8px; }

/* ── Profil ville ────────────────────────────── */
.city { position:relative; overflow:hidden; border-radius:22px; border:1px solid #EAE4D8; background:#fff; display:flex; flex-wrap:wrap; }
.city-text { flex:1 1 380px; min-width:0; padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; justify-content:center; }
.city-media { flex:1 1 320px; min-width:0; min-height:300px; position:relative; }
.city-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.city-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:0 0 30px; }
.city-stats > div { background:#F6F1E8; border-radius:12px; border-top:3px solid #0168b3; padding:14px 16px; }
.city-stats dt { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6E6357; margin-bottom:6px; }
.city-stats dd { font-family:Epilogue; font-weight:800; font-size:24px; letter-spacing:-.03em; color:#0168b3; }

/* ── Annuaires ───────────────────────────────── */
.dirs { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.dir-media { position:relative; height:190px; overflow:hidden; }
.dir-media img { width:100%; height:100%; object-fit:cover; }
.dir-body { padding:24px 22px 26px; text-align:center; }
.dir-body h3 { font-family:Epilogue; font-weight:800; font-size:20px; letter-spacing:-.02em; margin-bottom:8px; }
.dir-body p { font-size:15px; line-height:1.55; color:#6E6357; }

/* ── Actus des élus ──────────────────────────── */
.elus { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; }
.elus h3 { padding-bottom:10px; border-bottom:1px solid #191c21; margin-bottom:4px; }
.elu-row { display:flex; align-items:baseline; gap:16px; padding:14px 0; color:inherit; }
.elu-date { flex-shrink:0; width:52px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6E6357; line-height:1.35; }
.elu-date span { display:block; font-weight:500; letter-spacing:0; text-transform:none; }
.elu-name { display:block; font-family:Epilogue; font-weight:700; font-size:17px; line-height:1.2; letter-spacing:-.015em; color:#191c21; }
.elu-role { display:block; margin-top:3px; font-size:14px; line-height:1.4; color:#6E6357; }

/* ── Newsletter ──────────────────────────────── */
.nl { position:relative; overflow:hidden; border-radius:22px; background:#12161B; padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:36px; align-items:center; }
.nl-glow { position:absolute; left:-80px; bottom:-120px; width:340px; height:340px; border-radius:999px; background:radial-gradient(circle,rgba(242,146,29,.28),transparent 68%); }
.nl h2 { color:#fff; margin-bottom:14px; }
.nl p { font-size:16px; line-height:1.65; color:rgba(255,255,255,.75); max-width:52ch; }
.nl form { position:relative; }
.nl label { display:block; margin-bottom:10px; color:rgba(255,255,255,.6); }
.nl-field { display:flex; flex-wrap:wrap; gap:10px; }
.nl input { flex:1 1 200px; min-width:0; height:48px; padding:0 16px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); color:#fff; font-family:'Public Sans'; font-size:16px; outline:none; }
.nl input:focus { border-color:#F2921D; }
.nl .fine { margin-top:16px; font-size:13px; line-height:1.6; color:rgba(255,255,255,.62); }
.nl .fine a { color:#FFC98A; text-decoration:underline; text-underline-offset:4px; }
#newsletter-message { margin-top:12px; font-size:13px; font-weight:700; }

/* ── Pied de page ────────────────────────────── */
.ftr { background:#F6F1E8; border-top:1px solid #E7E2D9; margin-top:clamp(48px,6vw,72px); }
.ftr-in { padding-top:clamp(40px,5vw,64px); padding-bottom:clamp(40px,5vw,64px); display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:40px; }
.ftr-about { grid-column:span 2; min-width:0; }
.ftr-about h4 { font-family:Epilogue; font-weight:900; font-size:20px; letter-spacing:-.02em; text-transform:uppercase; color:#0168b3; margin-bottom:16px; }
.ftr-about p { font-size:16px; line-height:1.7; color:#5B5349; max-width:72ch; }
.ftr-social { display:flex; gap:10px; flex-wrap:wrap; }
.ftr-social a { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px; border-radius:10px; border:1px solid #DDD5C6; background:#fff; font-size:14px; font-weight:600; color:#3D4249; transition:transform .25s ease,border-color .25s ease; }
.ftr-social a:hover { transform:translateY(-2px); border-color:#0168b3; color:#0168b3; }
.ftr-bar { border-top:1px solid #E7E2D9; }
.ftr-bar-in { padding-top:22px; padding-bottom:22px; display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#6E6357; }
.ftr-bar-in a { color:#6E6357; }

/* ── Modale vidéo ────────────────────────────── */
.modal { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.modal.open { display:flex; }
.modal-bg { position:absolute; inset:0; background:rgba(12,16,21,.9); backdrop-filter:blur(4px); cursor:pointer; }
.modal-box { position:relative; width:100%; max-width:960px; aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); }
.modal-box iframe { width:100%; height:100%; border:0; }
.modal-close { position:absolute; top:12px; right:12px; z-index:2; width:44px; height:44px; border-radius:999px; border:none; background:rgba(18,22,27,.7); color:#fff; cursor:pointer; display:grid; place-items:center; }
.modal-close:hover { background:#F2921D; color:#231403; }

/* ── Points de rupture ───────────────────────── */
@media (max-width:860px) {
  .nav { display:none; }
  .burger { display:flex; }
  .hdr-logo img { height:44px; }
  .ftr-about { grid-column:span 1; }
}
@media (max-width:560px) {
  .wrap { padding-left:18px; padding-right:18px; }
  .searchbar { flex-wrap:wrap; }
  .searchbar input { flex:1 1 100%; padding:10px 12px; }
  .searchbar .btn { flex:1 1 100%; }
  .news-main, .news-main .body { min-height:360px; }
}


/* ═══════════════════════════════════════════════
   PAGES LISTE (Actualités, Documents publics)
   ═══════════════════════════════════════════════ */

/* Héros compact — sans photo de fond, image à droite */
.hero-page { background:linear-gradient(105deg,#0F1620 0%,#16202B 52%,#2A1A0A 100%); }
.hero-page .hero-in { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,4vw,48px); align-items:center; text-align:left;
  padding-top:clamp(36px,4.5vw,56px); padding-bottom:clamp(36px,4.5vw,56px); }
.hero-page h1 { font-family:Epilogue; font-weight:900; font-size:clamp(30px,4.4vw,48px); line-height:1.06; letter-spacing:-.035em; color:#fff; max-width:22ch; text-wrap:balance; margin-bottom:16px; }
.hero-page p { max-width:52ch; font-size:17px; line-height:1.6; color:rgba(255,255,255,.82); }
.hero-media { margin:0; position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:#FCF9F5;
  border:1px solid rgba(255,255,255,.16); box-shadow:0 22px 48px -22px rgba(0,0,0,.6);
  display:grid; place-items:center; padding:clamp(14px,2vw,26px); }
.hero-media::after { content:''; position:absolute; left:0; right:0; bottom:0; height:5px; background:linear-gradient(90deg,#0168b3 50%,#F2921D 50%); }
.hero-media img { display:block; width:100%; height:auto; }
@media (max-width:860px) { .hero-page .hero-in { grid-template-columns:minmax(0,1fr); } }

/* Grille de page */
.page-grid { display:grid; grid-template-columns:300px minmax(0,1fr); gap:40px; align-items:start; padding-top:clamp(40px,5vw,60px); }

/* Panneau de filtres */
.filters { position:sticky; top:96px; display:flex; flex-direction:column; gap:16px; }
.fbox { background:#fff; border:1px solid #EAE4D8; border-radius:12px; padding:18px 20px; }
.fbox > .eyebrow { display:block; color:#191c21; margin-bottom:12px; }
.fbox-accent { border-top:3px solid #0168b3; }
.field { position:relative; }
.field input[type="text"], .field input[type="date"], .fbox select {
  width:100%; height:44px; padding:0 14px; border:1px solid #DDD5C6; border-radius:10px; background:#FCF9F5;
  font-family:'Public Sans'; font-size:14px; color:#191c21; outline:none; transition:border-color .2s ease, box-shadow .2s ease; }
.field input[type="text"] { padding-right:42px; }
.field input:focus, .fbox select:focus { border-color:#0168b3; box-shadow:0 0 0 3px rgba(1,104,179,.12); }
.field .material-symbols-outlined { position:absolute; right:12px; top:12px; font-size:20px; color:#6E6357; pointer-events:none; }
.fbox select { appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#6E6357 50%),linear-gradient(135deg,#6E6357 50%,transparent 50%);
  background-position:calc(100% - 19px) 20px, calc(100% - 14px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.radios { display:flex; flex-direction:column; gap:2px; }
.radio { display:flex; align-items:center; gap:11px; padding:9px 10px; margin:0 -10px; border-radius:8px; cursor:pointer; transition:background .2s ease; }
.radio:hover { background:#F6F1E8; }
.radio input { appearance:none; flex-shrink:0; width:18px; height:18px; margin:0; border:2px solid #C9C0AE; border-radius:999px; cursor:pointer; transition:border-color .2s ease; }
.radio input:checked { border-color:#0168b3; border-width:6px; }
.radio span { font-size:14px; font-weight:500; color:#3D4249; }
.radio input:checked + span { color:#191c21; font-weight:600; }
.dates { display:flex; flex-direction:column; gap:14px; }
.dates label { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6E6357; margin-bottom:6px; }
.fbox .btn { width:100%; height:44px; font-size:14px; }

/* Barre de résultats */
.results-bar { display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-bottom:2px solid #191c21; padding-bottom:12px; margin-bottom:24px; }
.results-count { font-family:Epilogue; font-weight:800; font-size:18px; letter-spacing:-.02em; color:#191c21; }

/* Cartes d'article horizontales */
.list { display:flex; flex-direction:column; gap:16px; }
.art { display:flex; flex-wrap:wrap; cursor:pointer; }
.art-media { flex:0 0 34%; min-width:220px; position:relative; min-height:200px; overflow:hidden; }
.art-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.art-body { flex:1 1 320px; min-width:0; padding:22px 24px; display:flex; flex-direction:column; }
.art-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.art h3 { font-family:Epilogue; font-weight:700; font-size:20px; line-height:1.25; letter-spacing:-.02em; color:#191c21; margin-bottom:8px; text-wrap:pretty; }
.art p { font-size:15px; line-height:1.6; color:#6E6357; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.art-more { margin-top:auto; padding-top:16px; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0168b3; }
.art-more .material-symbols-outlined { font-size:17px; transition:transform .3s ease; }
.art:hover .art-more .material-symbols-outlined { transform:translateX(4px); }
.badge-ville { padding:4px 10px; border-radius:6px; background:rgba(242,146,29,.14); border:1px solid rgba(242,146,29,.35); color:#A65A05; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.badge-actu { padding:4px 10px; border-radius:6px; background:rgba(1,104,179,.1); color:#00508b; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }

/* États vides / erreur */
.state { padding:48px 28px; text-align:center; background:#F6F1E8; border:1px solid #EAE4D8; border-radius:14px; }
.state .material-symbols-outlined { font-size:40px; color:#7A7160; }
.state p { margin-top:10px; font-weight:600; color:#3D4249; }
.state-err { background:#FFF2F1; border-color:#F4C9C5; }
.state-err p { color:#ba1a1a; }

/* Pagination */
.pager { margin-top:36px; display:flex; align-items:center; justify-content:center; gap:10px; }
.pager button { width:48px; height:48px; display:grid; place-items:center; border:1px solid #DDD5C6; border-radius:10px; background:#fff; color:#3D4249; cursor:pointer; transition:border-color .2s ease,color .2s ease,transform .2s ease; }
.pager button:hover:not(:disabled) { border-color:#0168b3; color:#0168b3; transform:translateY(-2px); }
.pager button:disabled { opacity:.35; cursor:not-allowed; }
.pager .pager-pos { padding:0 14px; font-family:Epilogue; font-weight:800; font-size:14px; color:#191c21; }

@media (max-width:1000px) {
  .page-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
  .filters { position:static; }
}
@media (max-width:560px) {
  .art-media { flex:1 1 100%; min-height:190px; }
  .art-body { padding:18px 18px 20px; }
}

/* Héros sans illustration */
.hero-page.hero-solo .hero-in { grid-template-columns:minmax(0,1fr); }

/* Pagination numérotée */
.pager .num { width:48px; height:48px; display:grid; place-items:center; border:1px solid #DDD5C6; border-radius:10px; background:#fff;
  font-family:Epilogue; font-weight:700; font-size:15px; color:#3D4249; cursor:pointer;
  transition:border-color .2s ease,color .2s ease,transform .2s ease; }
.pager .num:hover { border-color:#0168b3; color:#0168b3; transform:translateY(-2px); }
.pager .num[aria-current="page"] { background:#0168b3; border-color:#0168b3; color:#fff; cursor:default; transform:none; }

/* Pastilles de nature (documents) — une teinte par nature */
.nat { display:inline-block; padding:4px 10px; border-radius:6px; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(1,104,179,.1); color:#00508b; border:1px solid rgba(1,104,179,.2); }
.nat-loi        { background:rgba(1,104,179,.1);   color:#00508b; border-color:rgba(1,104,179,.22); }
.nat-ordonnance { background:rgba(107,45,145,.1);  color:#6B2D91; border-color:rgba(107,45,145,.22); }
.nat-decret     { background:rgba(242,146,29,.15); color:#A65A05; border-color:rgba(242,146,29,.38); }
.nat-arrete     { background:rgba(25,28,33,.07);   color:#3D4249; border-color:rgba(25,28,33,.16); }
.nat-circulaire { background:rgba(10,92,107,.1);   color:#0A5C6B; border-color:rgba(10,92,107,.22); }
.nat-rapport    { background:rgba(11,92,60,.1);    color:#0B5C3C; border-color:rgba(11,92,60,.22); }
.nat-statistique{ background:rgba(140,47,57,.1);   color:#8C2F39; border-color:rgba(140,47,57,.22); }
.nat-annuaire   { background:rgba(107,84,0,.1);    color:#6B5400; border-color:rgba(107,84,0,.24); }
.nat-budget     { background:rgba(180,83,9,.1);    color:#9A4708; border-color:rgba(180,83,9,.22); }
.nat-deliberation { background:rgba(63,63,120,.1); color:#3F3F78; border-color:rgba(63,63,120,.22); }

/* Carte document */
.doc { display:block; padding:24px 26px; color:inherit; }
.doc h3 { font-family:Epilogue; font-weight:700; font-size:clamp(18px,2.2vw,22px); line-height:1.3; letter-spacing:-.02em; color:#191c21; margin:14px 0 16px; text-wrap:pretty; }
.doc-foot { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; padding-top:16px; border-top:1px solid #EAE4D8; }
.doc-foot dl { display:flex; flex-wrap:wrap; gap:4px 28px; margin:0; }
.doc-foot dt { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#6E6357; }
.doc-foot dd { margin:2px 0 0; font-size:14px; font-weight:500; color:#3D4249; }
.doc-go { flex-shrink:0; display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0168b3; }
.doc-go .material-symbols-outlined { font-size:17px; transition:transform .3s ease; }
.doc:hover .doc-go .material-symbols-outlined { transform:translateX(4px); }