/* =========================================================
   Blog (liste, catégorie, article) - nouveau design
   Charge apres demo-design-v7.css
   ========================================================= */
.page-hero--blog:before{background:linear-gradient(90deg,#0C1A2Ef7 12%,#0C1A2Ee6 50%,#0C1A2Eb3 80%,#0C1A2Ed9),url('/images/radio-communale.jpg') 70% 40%/cover}
.blog-hero .hero-grid{grid-template-columns:1fr;padding:84px 0 56px}
.blog-hero h1{max-width:880px}
.blog-hero .intro{max-width:640px}
.blog-crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:#9fb3c0;margin-bottom:22px}
.blog-crumbs a{color:#cfdde5;border-bottom:1px solid #ffffff30}
.blog-crumbs a:hover{color:#37B7C9;border-color:#37B7C9}
.blog-crumbs span[aria-hidden]{color:#5d7384}

/* filtres categories */
.blog-filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 36px}
.blog-filters a{display:inline-flex;align-items:center;gap:8px;border:1px solid #d3dde0;background:#fff;border-radius:999px;padding:9px 16px;font-size:14px;font-weight:600;color:#0C1A2E;transition:border-color .2s,background .2s}
.blog-filters a small{font-size:12px;color:#6b7c86;font-weight:500}
.blog-filters a:hover{border-color:#37B7C9}
.blog-filters a[aria-current]{background:#0C1A2E;border-color:#0C1A2E;color:#fff}
.blog-filters a[aria-current] small{color:#9fc9d1}

/* article a la une */
.post-featured{display:grid;grid-template-columns:1.15fr .85fr;gap:0;background:#fff;border:1px solid #dce3e5;border-radius:22px;overflow:hidden;margin-bottom:34px;transition:box-shadow .25s,border-color .25s}
.post-featured:hover{border-color:#37B7C980;box-shadow:0 22px 50px -30px #0C1A2E55}
.post-featured .post-thumb{aspect-ratio:auto;height:100%;min-height:320px;border-radius:0}
.post-featured .post-body{padding:40px}
.post-featured h3{font-size:clamp(24px,2.3vw,32px);letter-spacing:-1px;line-height:1.2}
.post-featured p{font-size:16px}

/* grille de cartes */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dce3e5;border-radius:18px;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.post-card:hover{border-color:#37B7C980;transform:translateY(-3px);box-shadow:0 18px 40px -24px #0C1A2E40}
.post-thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:#0C1A2E}
.post-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.post-card:hover .post-thumb img,.post-featured:hover .post-thumb img{transform:scale(1.03)}
.post-thumb-empty{display:grid;place-items:center;height:100%;color:#37B7C9;font-size:42px}
.post-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12.5px;color:#6b7c86;margin-bottom:12px}
.post-cat{background:#37B7C91f;color:#1C7C8C;font-weight:700;border-radius:999px;padding:3px 10px}
.post-card h3{font-size:19px;line-height:1.35;letter-spacing:-.3px;color:#0C1A2E;margin-bottom:10px}
.post-card h3 a:hover,.post-featured h3 a:hover{color:#1C7C8C}
.post-body p{font-size:14.5px;color:#54636d;line-height:1.7;margin-bottom:20px}
.post-go{margin-top:auto;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #e3e9eb;padding-top:16px;font-size:13.5px;font-weight:700;color:#0C1A2E}
.post-go span{width:32px;height:32px;border-radius:50%;border:1px solid #cfdadd;display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.post-card:hover .post-go span,.post-featured:hover .post-go span{background:#37B7C9;border-color:#37B7C9;color:#0C1A2E}
.blog-empty{background:#fff;border:1px dashed #cfdadd;border-radius:18px;padding:48px;text-align:center;color:#54636d}

/* pagination */
.blog-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:46px}
.blog-pager a,.blog-pager span{min-width:44px;height:44px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;border:1px solid #d3dde0;background:#fff;font-size:14px;font-weight:600;color:#0C1A2E}
.blog-pager a:hover{border-color:#37B7C9}
.blog-pager span[aria-current]{background:#0C1A2E;border-color:#0C1A2E;color:#fff}

/* ================= ARTICLE ================= */
.article-hero .hero-grid{grid-template-columns:1fr;padding:78px 0 50px}
.article-hero h1{font-size:clamp(34px,4.2vw,56px);letter-spacing:-2px;line-height:1.1;max-width:920px}
.article-hero .intro{max-width:720px}
.article-facts{display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;color:#b9c8d2;margin-top:6px}
.article-facts span{display:inline-flex;align-items:center;gap:8px}
.article-facts i{color:#37B7C9}
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.article-cover{margin:0 0 38px;border-radius:20px;overflow:hidden;border:1px solid #dce3e5;background:#0C1A2E}
.article-cover img{display:block;width:100%;height:auto}

/* lecteur audio */
.article-audio{display:flex;align-items:center;gap:16px;background:#0C1A2E;color:#fff;border-radius:16px;padding:16px 20px;margin-bottom:34px}
.article-audio .play{background:#37B7C9;color:#0C1A2E}
.article-audio .a-info{flex:1;min-width:0}
.article-audio strong{display:block;font-size:14px}
.article-audio small{font-size:12px;color:#9fb3c0}
.article-audio input[type=range]{width:100%;accent-color:#37B7C9;margin-top:6px}
.article-audio .time{color:#9fb3c0}

/* corps de texte */
.prose{font-size:18px;line-height:1.8;color:#1d2f3d}
.prose>*{margin:0}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(26px,2.4vw,32px);letter-spacing:-1px;line-height:1.25;margin-top:1.9em;color:#0C1A2E}
.prose h3{font-size:22px;letter-spacing:-.4px;line-height:1.3;margin-top:1.6em;color:#0C1A2E}
.prose h4{font-size:18px;margin-top:1.4em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:.6em}
.prose a{color:#1C7C8C;border-bottom:1px solid #37B7C980}
.prose a:hover{border-bottom-color:#1C7C8C}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:#1C7C8C}
.prose blockquote{margin:1.6em 0;padding:6px 0 6px 24px;border-left:3px solid #37B7C9;font-family:Manrope,sans-serif;font-size:21px;line-height:1.55;color:#0C1A2E}
.prose img{max-width:100%;height:auto;border-radius:14px}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{border-bottom:1px solid #dce3e5;padding:10px 12px;text-align:left}
.prose th{background:#eef3f4}
.prose strong{color:#0C1A2E}
/* CTA inseres dans le contenu ([cta]) */
.prose .cta-card{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;align-items:start;background:#0C1A2E;color:#fff;border-radius:18px;padding:28px;margin:2em 0}
.prose .cta-card .cta-icon{grid-row:span 2;width:52px;height:52px;border-radius:14px;background:#37B7C91f;color:#37B7C9;display:grid;place-items:center;font-size:24px}
.prose .cta-card h3{color:#fff;margin:0;font-size:21px}
.prose .cta-card p{color:#b9c8d2;font-size:15px;line-height:1.6;margin:6px 0 0}
.prose .cta-card .cta-actions{grid-column:2;display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.prose .cta-card a{border:0}
.prose .cta-btn-primary{display:inline-flex;align-items:center;gap:8px;background:#37B7C9;color:#0C1A2E!important;border-radius:8px;padding:12px 18px;font-size:14px;font-weight:700}
.prose .cta-btn-secondary{display:inline-flex;align-items:center;gap:8px;color:#fff!important;border:1px solid #ffffff40!important;border-radius:8px;padding:12px 18px;font-size:14px;font-weight:600}

/* colonne laterale */
.article-aside{position:sticky;top:110px;display:flex;flex-direction:column;gap:18px}
.aside-box{background:#fff;border:1px solid #dce3e5;border-radius:16px;padding:22px}
.aside-box h2{font-size:15px;letter-spacing:0;margin-bottom:12px;color:#0C1A2E}
.aside-toc ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.45}
.aside-toc a{color:#54636d}
.aside-toc a:hover,.aside-toc a.is-active{color:#1C7C8C}
.aside-cta{background:#0C1A2E;border-color:#0C1A2E;color:#fff}
.aside-cta h2{color:#fff;font-size:18px}
.aside-cta p{font-size:14px;color:#b9c8d2;line-height:1.6;margin-bottom:16px}
.aside-cta .button{width:100%;justify-content:space-between}
.aside-share{display:flex;gap:8px}
.aside-share a,.aside-share button{width:40px;height:40px;border-radius:10px;border:1px solid #d3dde0;background:#fff;display:grid;place-items:center;color:#0C1A2E;font-size:16px}
.aside-share a:hover,.aside-share button:hover{border-color:#37B7C9;color:#1C7C8C}

.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;padding-top:26px;border-top:1px solid #dce3e5}
.article-tags span{border:1px solid #d8e1df;border-radius:999px;padding:5px 12px;font-size:13px;color:#52656c}
.article-author{display:flex;gap:18px;align-items:center;margin-top:30px;background:#fff;border:1px solid #dce3e5;border-radius:16px;padding:22px}
.article-author img,.article-author .avatar{width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0;background:#0C1A2E;color:#37B7C9;display:grid;place-items:center;font-weight:800;font-family:Manrope,sans-serif;font-size:20px}
.article-author strong{display:block;color:#0C1A2E}
.article-author small{color:#6b7c86;font-size:13px}
.article-author p{font-size:14px;color:#54636d;margin-top:6px;line-height:1.6}
.article-faq{margin-top:56px}
.article-faq h2{margin-bottom:22px}
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.article-nav a{display:block;background:#fff;border:1px solid #dce3e5;border-radius:14px;padding:18px 20px;font-size:15px;font-weight:700;color:#0C1A2E;line-height:1.4}
.article-nav a small{display:block;font-size:12px;font-weight:600;color:#1C7C8C;margin-bottom:6px}
.article-nav a:hover{border-color:#37B7C9}
.article-nav .next{text-align:right;grid-column:2}
.related{background:#eef3f4}

@media(max-width:1000px){.post-grid{grid-template-columns:repeat(2,1fr)}.article-layout{grid-template-columns:1fr;gap:40px}.article-aside{position:static}}
@media(max-width:720px){
    .page-hero--blog:before{background:linear-gradient(#0C1A2Ed6,#0C1A2Ef2),url('/images/radio-communale.jpg') 50% top/cover}
    .blog-hero .hero-grid,.article-hero .hero-grid{padding:48px 0 36px}
    .post-grid{grid-template-columns:1fr;gap:18px}
    .post-featured{grid-template-columns:1fr}
    .post-featured .post-thumb{min-height:0;aspect-ratio:16/9}
    .post-featured .post-body{padding:24px}
    .blog-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px 28px;padding:0 18px 6px}
    .blog-filters a{flex-shrink:0}
    .prose{font-size:17px}
    .prose .cta-card{grid-template-columns:1fr;padding:22px}
    .prose .cta-card .cta-icon{grid-row:auto}
    .prose .cta-card .cta-actions{grid-column:1}
    .article-nav{grid-template-columns:1fr}.article-nav .next{grid-column:1}
    .article-audio{padding:14px}
}

/* categories principales */
.blog-filters a i{color:#1C7C8C}
.blog-filters a[aria-current] i{color:#37B7C9}
.blog-filters-sep{width:1px;align-self:stretch;background:#d3dde0;margin:4px 6px}
.blog-filters a.is-theme{font-weight:500;background:transparent}
.blog-mains{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px}
.blog-main{position:relative;display:flex;flex-direction:column;gap:4px;background:#0C1A2E;color:#fff;border-radius:18px;padding:26px 26px 24px;transition:transform .25s,box-shadow .25s}
.blog-main:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px #0C1A2E80}
.blog-main-icon{width:48px;height:48px;border-radius:13px;background:#37B7C91f;color:#37B7C9;display:grid;place-items:center;font-size:22px;margin-bottom:14px}
.blog-main strong{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.4px}
.blog-main small{font-size:13px;color:#9fb3c0}
.blog-main-go{position:absolute;top:24px;right:24px;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff30;display:grid;place-items:center;transition:background .2s,color .2s}
.blog-main:hover .blog-main-go{background:#37B7C9;border-color:#37B7C9;color:#0C1A2E}
@media(max-width:720px){.blog-mains{grid-template-columns:1fr;gap:12px}.blog-main{flex-direction:row;align-items:center;flex-wrap:wrap;padding:18px}.blog-main-icon{margin:0 10px 0 0;width:42px;height:42px}.blog-main small{width:100%;padding-left:52px;margin-top:-6px}.blog-main-go{top:50%;transform:translateY(-50%);right:16px}}

/* les <nav> du blog heritent du nav{height:86px;justify-content:space-between} du header */
nav.blog-crumbs,nav.blog-filters,nav.blog-pager,nav.article-nav{height:auto;gap:8px}
nav.blog-crumbs{justify-content:flex-start;align-items:center}
nav.blog-filters{justify-content:flex-start;gap:10px}
nav.blog-pager{justify-content:center}
nav.article-nav{display:grid;gap:16px}
.blog-main strong{padding-right:44px}

/* ===== V4 (25/09/2026) : hero reduit + image dediee, lecteur audio, badge audio ===== */
.page-hero--blog:before{background:linear-gradient(90deg,#0C1A2Ef7 10%,#0C1A2Ee0 42%,#0C1A2E80 70%,#0C1A2E40),url('/images/blog/blog-hero.webp?v=2') 100% 45%/cover}
.blog-hero .hero-grid{padding:52px 0 40px}
.blog-hero h1{font-size:clamp(36px,4vw,54px)}
.blog-hero .intro{margin:16px 0 0}
.article-hero .hero-grid{padding:52px 0 40px}
.article-hero h1{font-size:clamp(30px,3.6vw,48px)}
.article-hero .intro{margin:16px 0 18px}
.article-listen{display:inline-flex;align-items:center;gap:8px;color:#37B7C9;font-weight:600;border-bottom:1px solid #37B7C960}
.article-listen:hover{border-bottom-color:#37B7C9}
.post-audio{display:inline-flex;align-items:center;gap:5px;color:#1C7C8C;font-weight:600}

/* lecteur audio */
.article-audio{display:flex;align-items:center;gap:20px;background:radial-gradient(ellipse at 90% 0,#37B7C926,transparent 60%),#0C1A2E;color:#fff;border-radius:18px;padding:20px 24px;margin-bottom:38px;box-shadow:0 20px 44px -28px #0C1A2E}
.a-play{flex-shrink:0;width:60px;height:60px;border:0;border-radius:50%;background:#37B7C9;color:#0C1A2E;font-size:26px;display:grid;place-items:center;box-shadow:0 0 0 8px #37B7C91f;transition:transform .2s,box-shadow .2s}
.a-play:hover{transform:scale(1.05)}
.is-playing .a-play{box-shadow:0 0 0 8px #37B7C933,0 0 0 16px #37B7C914}
.a-main{flex:1;min-width:0}
.a-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.a-head strong{font-family:Manrope,sans-serif;font-size:16px}
.a-voice{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:#9fc9d1;background:#ffffff0f;border:1px solid #ffffff1a;border-radius:999px;padding:3px 10px}
.a-wave{display:flex;align-items:center;gap:3px;height:38px;margin:12px 0 4px;cursor:pointer}
.a-wave i{flex:1;min-width:2px;border-radius:3px;background:#ffffff26;transition:background .2s}
.a-wave i.on{background:#37B7C9}
.is-playing .a-wave i.on:nth-child(3n){animation:aw .7s ease-in-out infinite alternate}
@keyframes aw{to{transform:scaleY(.6)}}
.a-seek{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,#37B7C9 var(--p,0%),#ffffff26 var(--p,0%));outline-offset:4px;margin:0}
.a-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #37B7C9}
.a-seek::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#fff;border:3px solid #37B7C9}
.a-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:12.5px;color:#9fb3c0}
.a-time{font-variant-numeric:tabular-nums}
.a-speed{border:1px solid #ffffff30;background:transparent;color:#fff;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:700}
.a-speed:hover{border-color:#37B7C9;color:#37B7C9}
@media(max-width:720px){
  .page-hero--blog:before{background:linear-gradient(#0C1A2Ee0,#0C1A2Ef2),url('/images/blog/blog-hero.webp?v=2') 80% center/cover}
  .blog-hero .hero-grid,.article-hero .hero-grid{padding:36px 0 30px}
  .article-audio{gap:14px;padding:16px}
  .a-play{width:50px;height:50px;font-size:22px}
  .a-wave{height:30px}
}
.article-main,.a-main{min-width:0}
@media(max-width:1000px){.article-layout{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.a-wave i:nth-child(n+37){display:none}.a-wave{gap:2px}}
/* hero article : image de l'article en fond */
.article-hero.has-cover:before{background:linear-gradient(90deg,#0C1A2Ef5 12%,#0C1A2Ee0 45%,#0C1A2E8c 75%,#0C1A2E59),var(--hero-img) 70% 40%/cover}
.article-hero.has-cover .hero-grid{padding:64px 0 48px}
.article-hero + .section{padding-top:48px}
@media(max-width:720px){.article-hero.has-cover:before{background:linear-gradient(#0C1A2Ed9,#0C1A2Ef0),var(--hero-img) 60% center/cover}.article-hero.has-cover .hero-grid{padding:36px 0 30px}.article-hero + .section{padding-top:28px}}
/* hauteur ajustee au texte (annule .hero{min-height:640px} au-dela de 1450px) */
.hero.blog-hero,.hero.article-hero{min-height:0}
.blog-hero .hero-grid{padding:56px 0 52px}
/* image du hero blog : calee a droite, sujet visible */
.page-hero--blog.blog-hero:before{background:linear-gradient(90deg,#0C1A2E 0%,#0C1A2E 38%,#0C1A2Ed9 52%,#0C1A2E26 72%,#0C1A2E00 100%),url('/images/blog/blog-hero.webp?v=2') right 42%/62% auto no-repeat,#0C1A2E}
@media(max-width:1000px){.page-hero--blog.blog-hero:before{background:linear-gradient(90deg,#0C1A2E 0%,#0C1A2Ee6 45%,#0C1A2E59 100%),url('/images/blog/blog-hero.webp?v=2') 85% center/cover,#0C1A2E}}
@media(max-width:720px){.page-hero--blog.blog-hero:before{background:linear-gradient(#0C1A2Ed9,#0C1A2Ef0),url('/images/blog/blog-hero.webp?v=2') 80% center/cover}}
.blog-hero + .section{padding-top:40px}@media(max-width:720px){.blog-hero + .section{padding-top:26px}}
.prose p.see-also{border-left:3px solid #37B7C9;background:#37B7C914;padding:12px 16px;border-radius:0 10px 10px 0;font-size:16px}
.prose p.see-also a{font-weight:600}