/* ═══════════════════════════════════════════════════════════════════
   DSN Pilote · Akorede Conseil — système de design landing
   Vert sapin #1B4332 · Vert forêt #2D6A4F · Vert accent #40916C
   Letter-spacing large · Filets fins · Sections numérotées 01·02·…
   Partagé par landing.html + landing-expert-comptable.html
   + landing-daf.html + landing-rh.html
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --sapin:       #1B4332;
  --foret:       #2D6A4F;
  --accent:      #40916C;
  --accent-soft: #74c69d;
  --cream:       #f7f5ef;
  --paper:       #fbfaf6;
  --noir:        #1A1A1A;
  --gris:        #4A4A4A;
  --gris-2:      #8a8a8a;
  --gris-3:      #b8b8b8;
  --gris-clair:  #F5F5F5;
  --ligne:       #e4e1d9;

  --max:    1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
  --rule:   1px solid var(--ligne);
  --ease:   cubic-bezier(.2,.7,.2,1);
}

html{ font-size:16px; scroll-behavior:smooth; }
body{
  font-family:'Inter', Helvetica, 'Montserrat', system-ui, sans-serif;
  background:var(--paper); color:var(--noir);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.55;
}
::selection{ background:var(--sapin); color:var(--cream); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ── Typographie ── */
.eyebrow{
  font-size:.72rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--foret);
}
.eyebrow .dot{
  display:inline-block; width:5px; height:5px; background:var(--accent);
  border-radius:50%; margin:0 .55em .1em .25em; vertical-align:middle;
}
h1,h2,h3,h4{ font-family:'Inter', sans-serif; color:var(--noir); letter-spacing:-.01em; line-height:1.1; }
h1{ font-size:clamp(2.4rem, 5.2vw, 4.6rem); font-weight:800; letter-spacing:-.03em; }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.8rem); font-weight:700; letter-spacing:-.02em; }
h3{ font-size:1.25rem; font-weight:700; letter-spacing:.02em; }
.display-serif{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:400; letter-spacing:-.01em; }
.mono{ font-family:'JetBrains Mono', 'SF Mono', Menlo, monospace; font-feature-settings:"tnum"; }

/* ── Navigation ── */
nav.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,246,.86);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:var(--rule);
}
nav.topbar .inner{
  max-width:var(--max); margin:0 auto; padding:.9rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
}
.brandmark{ display:flex; align-items:center; gap:.7rem; }
.brandmark .brand-mark{ flex-shrink:0; }
.brandmark .a-logo{ font-weight:800; letter-spacing:.08em; font-size:.95rem; color:var(--sapin); }
.brandmark .a-logo small{
  display:block; font-size:.58rem; letter-spacing:.32em; color:var(--foret);
  font-weight:500; margin-top:2px; border-top:1px solid var(--accent);
  padding-top:2px; width:fit-content;
}
.brandmark .product{
  font-weight:800; font-size:1.2rem; letter-spacing:-.02em; color:var(--sapin);
}
.brandmark .product em{ font-style:normal; color:var(--foret); }
.brandmark .product .vertical-tag{
  display:inline-block; margin-left:.5rem;
  padding:.12rem .5rem; background:var(--sapin); color:var(--cream);
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  border-radius:var(--radius); vertical-align:2px; font-weight:600;
}
nav.topbar ul{ list-style:none; display:flex; gap:1.15rem; margin-left:auto; align-items:center; flex-wrap:nowrap; }
nav.topbar a.nav-link{
  font-size:.83rem; font-weight:500; color:var(--gris); white-space:nowrap;
  padding:.4rem 0; border-bottom:1px solid transparent;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
nav.topbar a.nav-link:hover{ color:var(--sapin); border-color:var(--accent); }
nav.topbar a.nav-link .num{
  color:var(--accent); font-weight:600; letter-spacing:.1em; margin-right:.35em;
  font-family:'JetBrains Mono', monospace; font-size:.78em;
}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
  padding:.72rem 1.15rem; font-size:.86rem; font-weight:600;
  letter-spacing:.04em; border-radius:var(--radius);
  transition:all .2s var(--ease); cursor:pointer;
  border:1px solid transparent;
}
.btn-primary{ background:var(--sapin); color:var(--cream); border-color:var(--sapin); }
.btn-primary:hover{ background:var(--noir); border-color:var(--noir); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--sapin); border-color:var(--sapin); }
.btn-ghost:hover{ background:var(--sapin); color:var(--cream); }
.btn-ghost-dark{ background:transparent; color:var(--cream); border-color:rgba(255,255,255,.45); }
.btn-ghost-dark:hover{ background:var(--cream); color:var(--sapin); border-color:var(--cream); }
.btn .arrow{ display:inline-block; transition:transform .25s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

/* ── Hero ── */
section.hero{
  background:var(--sapin); color:var(--cream);
  position:relative; overflow:hidden;
  border-bottom:6px solid var(--accent);
}
section.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  pointer-events:none;
  mask-image:linear-gradient(to bottom, black 30%, transparent 100%);
}
.hero-inner{
  max-width:var(--max); margin:0 auto;
  padding:clamp(3rem, 7vw, 6rem) var(--gutter) clamp(2.5rem, 6vw, 5rem);
  display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(2rem, 5vw, 5rem);
  position:relative; z-index:1; align-items:center;
}
.hero-kicker{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent-soft); font-weight:600; margin-bottom:1.75rem;
}
.hero-kicker .bar{ display:inline-block; width:32px; height:1px; background:var(--accent-soft); }
.hero-kicker .breadcrumb{ color:rgba(247,245,239,.5); }
.hero-kicker .breadcrumb a{ border-bottom:1px solid rgba(255,255,255,.2); }
.hero h1{ color:var(--cream); font-weight:300; }
.hero h1 strong{ display:block; font-weight:800; letter-spacing:-.035em; }
.hero h1 .serif{ font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:300; color:var(--accent-soft); }
.hero p.lede{
  margin-top:1.75rem; font-size:clamp(1.05rem, 1.3vw, 1.18rem);
  color:rgba(247,245,239,.82); max-width:48ch; line-height:1.6;
}
.hero-actions{ margin-top:2.2rem; display:flex; gap:.85rem; flex-wrap:wrap; align-items:center; }
.hero-note{
  font-size:.75rem; color:rgba(247,245,239,.55); margin-left:.5rem; letter-spacing:.04em;
}
.hero-note .mono{ color:var(--accent-soft); }

/* Panneau latéral droit (persona card) */
.hero-side{
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  padding:1.75rem 1.6rem;
  color:rgba(247,245,239,.86);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.45);
}
.hero-side .label{
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:1rem; padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.hero-side h3{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-weight:300; font-size:1.35rem; color:var(--cream);
  line-height:1.3; margin-bottom:1rem; letter-spacing:-.01em;
}
.hero-side .quote-attr{
  font-size:.75rem; color:var(--accent-soft); letter-spacing:.08em;
  margin-bottom:1.25rem; font-family:'Inter', sans-serif; text-transform:uppercase;
}
.hero-side .pain-list{
  list-style:none; display:flex; flex-direction:column; gap:.5rem;
  padding-top:1rem; border-top:1px dashed rgba(255,255,255,.18);
}
.hero-side .pain-list li{
  display:flex; gap:.7rem; font-size:.85rem; color:rgba(247,245,239,.75);
  align-items:flex-start; line-height:1.5;
}
.hero-side .pain-list li .mk{ color:#e06c6c; font-family:'JetBrains Mono', monospace; min-width:1em; }

/* Stats bar sous hero */
.hero-stats{
  background:#163828; color:var(--cream);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero-stats .inner{
  max-width:var(--max); margin:0 auto;
  display:grid; grid-template-columns:repeat(4, 1fr);
  padding:1.2rem var(--gutter); gap:2rem;
}
.hero-stats .stat{ display:flex; align-items:baseline; gap:.9rem; }
.hero-stats .stat .num{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:2rem; color:var(--accent-soft); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.hero-stats .stat .lbl{ font-size:.78rem; color:rgba(247,245,239,.72); line-height:1.3; }

/* ── Sections ── */
section.bloc{
  padding:clamp(4.5rem, 8vw, 7rem) 0;
  border-bottom:var(--rule); position:relative;
}
section.bloc.alt{ background:var(--cream); }
section.bloc.dark{
  background:var(--sapin); color:var(--cream);
  border-bottom-color:rgba(255,255,255,.08);
}
section.bloc.dark h2{ color:var(--cream); }
section.bloc.dark .eyebrow{ color:var(--accent-soft); }

.container{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }

.section-head{
  display:grid; grid-template-columns:80px 1fr; gap:1.5rem;
  align-items:baseline; margin-bottom:3rem;
}
.section-head .num{
  font-family:'JetBrains Mono', monospace;
  font-size:1rem; color:var(--foret); font-weight:600;
  letter-spacing:.1em;
  border-top:2px solid var(--sapin); padding-top:.7rem;
}
section.dark .section-head .num{ color:var(--accent-soft); border-top-color:var(--accent-soft); }
.section-head .title h2{ margin-bottom:.6rem; }
.section-head .title p{
  color:var(--gris); max-width:62ch; font-size:1.05rem;
}
section.dark .section-head .title p{ color:rgba(247,245,239,.7); }

/* ── Pain points grid (par vertical) ── */
.pain-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;
}
.pain-card{
  background:var(--paper); border:var(--rule);
  padding:1.75rem 1.5rem; border-radius:var(--radius);
  transition:border-color .25s var(--ease);
  position:relative;
}
.pain-card:hover{ border-color:var(--accent); }
.pain-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:#e06c6c; opacity:.5;
}
.pain-card .pain-id{
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  color:var(--gris-3); letter-spacing:.18em; margin-bottom:.8rem;
}
.pain-card h3{
  font-size:1rem; color:var(--noir); letter-spacing:0;
  margin-bottom:.7rem; line-height:1.35;
}
.pain-card p{ font-size:.88rem; color:var(--gris); line-height:1.55; }

/* ── Solution / workflow ── */
.workflow{
  background:var(--cream); border:var(--rule);
  padding:2.5rem; border-radius:var(--radius);
  position:relative;
}
.workflow-header{
  display:flex; align-items:baseline; gap:.85rem; margin-bottom:2rem;
  padding-bottom:1rem; border-bottom:1px dashed var(--ligne);
}
.workflow-header .lbl{
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  letter-spacing:.18em; color:var(--foret);
}
.workflow-header h3{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-weight:400; font-size:1.5rem; color:var(--noir); letter-spacing:-.01em;
}
.workflow-steps{ display:flex; flex-direction:column; gap:1.25rem; }
.wf-step{
  display:grid; grid-template-columns:50px 1fr 180px; gap:1.5rem;
  align-items:center; padding:1rem 0;
  border-top:1px solid var(--ligne);
}
.wf-step:first-child{ border-top:0; padding-top:0; }
.wf-step .idx{
  font-family:'JetBrains Mono', monospace;
  font-weight:600; font-size:.82rem; color:var(--sapin);
  padding:.35rem .6rem; background:rgba(64,145,108,.12);
  border-radius:var(--radius); text-align:center; letter-spacing:.08em;
}
.wf-step h4{
  font-size:1rem; font-weight:600; color:var(--noir);
  margin-bottom:.3rem; letter-spacing:0;
}
.wf-step p{ font-size:.9rem; color:var(--gris); line-height:1.5; }
.wf-step .time{
  font-family:'JetBrains Mono', monospace;
  font-size:.78rem; color:var(--foret); letter-spacing:.08em;
  text-align:right;
}

/* ── ROI / chiffres clés ── */
.roi-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0;
  border-top:var(--rule); border-left:var(--rule);
}
.roi-cell{
  padding:2rem 1.75rem;
  border-right:var(--rule); border-bottom:var(--rule);
  background:var(--paper);
}
.roi-cell .k{
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--foret); margin-bottom:.75rem;
}
.roi-cell .v{
  font-family:'Fraunces', Georgia, serif; font-weight:400;
  font-size:2.8rem; color:var(--sapin); letter-spacing:-.02em;
  line-height:1; margin-bottom:.6rem;
}
.roi-cell p{ font-size:.85rem; color:var(--gris); line-height:1.5; }

/* ── Testimonial vertical ── */
.testimonial-vertical{
  background:var(--sapin); color:var(--cream);
  padding:clamp(3rem, 5vw, 4.5rem) var(--gutter); text-align:center;
}
.testimonial-vertical .qm{
  font-family:'Fraunces', Georgia, serif;
  font-size:5.5rem; line-height:.5;
  color:var(--accent-soft); opacity:.4; margin-bottom:1rem;
}
.testimonial-vertical blockquote{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(1.3rem, 2.2vw, 1.8rem); line-height:1.4;
  font-weight:300; font-style:italic;
  color:var(--cream); max-width:40ch; margin:0 auto;
}
.testimonial-vertical cite{
  display:block; margin-top:2rem;
  font-family:'Inter', sans-serif; font-style:normal;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-soft); font-weight:600;
}

/* ── FAQ ── */
.faq{ display:flex; flex-direction:column; }
.faq details{ border-top:var(--rule); padding:1.4rem 0; }
.faq details:last-of-type{ border-bottom:var(--rule); }
.faq summary{
  cursor:pointer; list-style:none;
  display:flex; align-items:flex-start; gap:1.25rem;
  font-size:1.05rem; font-weight:600; color:var(--noir);
  transition:color .2s var(--ease);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--sapin); }
.faq summary .q-num{
  font-family:'JetBrains Mono', monospace;
  font-size:.82rem; color:var(--accent); font-weight:600;
  min-width:50px; padding-top:2px;
}
.faq summary .q-txt{ flex:1; }
.faq summary .q-toggle{
  width:22px; height:22px;
  border:1px solid var(--ligne); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:var(--foret); font-weight:500;
  transition:transform .3s var(--ease), border-color .2s var(--ease);
  flex-shrink:0;
}
.faq details[open] summary .q-toggle{ transform:rotate(45deg); border-color:var(--sapin); color:var(--sapin); }
.faq details .answer{
  padding:1rem 0 0 calc(50px + 1.25rem);
  font-size:.95rem; color:var(--gris); line-height:1.65; max-width:70ch;
}

/* ── CTA final ── */
.cta-final{
  display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem, 5vw, 4rem);
  align-items:center; padding:clamp(3rem, 5vw, 4.5rem) 0;
}
.cta-final h2{ margin-bottom:1.2rem; }
.cta-final h2 em{ font-family:'Fraunces', Georgia, serif; font-style:italic; color:var(--foret); font-weight:400; }
.cta-final p{ color:var(--gris); font-size:1.05rem; max-width:48ch; margin-bottom:2rem; }
.cta-final .actions{ display:flex; gap:.85rem; flex-wrap:wrap; }
.cta-box{
  background:var(--cream); border:var(--rule);
  padding:2rem; border-radius:var(--radius);
}
.cta-box .k{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--foret); font-weight:600; margin-bottom:1rem;
}
.cta-box .contact-row{
  display:flex; align-items:center; gap:.85rem;
  padding:.85rem 0; border-top:var(--rule); font-size:.95rem;
}
.cta-box .contact-row:first-of-type{ border-top:0; }
.cta-box .contact-row .label{
  color:var(--gris); min-width:90px; font-size:.8rem; letter-spacing:.06em;
}
.cta-box .contact-row .val{ color:var(--noir); font-weight:500; }
.cta-box .contact-row a.val{ color:var(--sapin); border-bottom:1px solid var(--accent); }

/* ── Navigation croisée verticaux ── */
.crossnav{
  background:var(--cream); border-top:var(--rule); border-bottom:var(--rule);
  padding:2.5rem 0;
}
.crossnav .inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
}
.crossnav .eyebrow{ margin-bottom:1.5rem; }
.crossnav .pages{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
}
.crossnav a.cn-card{
  padding:1.5rem; background:var(--paper); border:var(--rule);
  border-radius:var(--radius); display:flex; flex-direction:column; gap:.4rem;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.crossnav a.cn-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.crossnav a.cn-card.current{ border-color:var(--sapin); background:var(--sapin); color:var(--cream); }
.crossnav a.cn-card.current .role{ color:var(--accent-soft); }
.crossnav a.cn-card.current .title-line{ color:var(--cream); }
.crossnav a.cn-card .role{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.18em; color:var(--foret);
  text-transform:uppercase;
}
.crossnav a.cn-card .title-line{
  font-weight:600; color:var(--noir); font-size:1rem; letter-spacing:0;
}
.crossnav a.cn-card .arrow{
  font-family:'JetBrains Mono', monospace; color:var(--accent);
  font-size:.9rem; margin-top:.3rem;
}
.crossnav a.cn-card.current .arrow{ color:var(--accent-soft); }

/* ── Footer ── */
footer.site{
  background:var(--noir); color:#cfcecb;
  padding:4rem 0 1.5rem;
}
footer .grid{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.5rem;
  margin-bottom:3rem;
}
footer .col h4{
  font-size:.75rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:1.1rem; font-weight:600;
}
footer .col ul{ list-style:none; display:flex; flex-direction:column; gap:.6rem; }
footer .col ul a{ color:#a9a8a5; font-size:.9rem; }
footer .col ul a:hover{ color:var(--accent-soft); }
footer .brand-sig{ display:flex; flex-direction:column; gap:1rem; }
footer .brand-sig .logo{ display:inline-flex; flex-direction:column; align-items:flex-start; }
footer .brand-sig .logo .main{
  font-weight:800; letter-spacing:.08em; font-size:1.6rem; color:var(--cream);
}
footer .brand-sig .logo .sub{
  font-size:.7rem; letter-spacing:.4em;
  color:var(--accent-soft); font-weight:500;
  margin-top:.35rem; padding-top:.35rem; width:85%;
  border-top:1px solid var(--accent);
}
footer .brand-sig p{
  font-size:.86rem; color:#a9a8a5; line-height:1.65; max-width:36ch;
}
footer .colophon{
  max-width:var(--max); margin:0 auto; padding:1.5rem var(--gutter) 0;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem; color:#7a7975; letter-spacing:.04em;
}
footer .colophon .mono{ color:var(--accent-soft); }

/* ── Responsive ── */
@media (max-width:1200px){
  /* Desktops étroits : masque les préfixes numériques décoratifs et resserre. */
  nav.topbar a.nav-link .num{ display:none; }
  nav.topbar ul{ gap:1rem; }
}
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-stats .inner{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .pain-grid{ grid-template-columns:1fr 1fr; }
  .roi-grid{ grid-template-columns:1fr 1fr; }
  .wf-step{ grid-template-columns:40px 1fr; }
  .wf-step .time{ grid-column:2; text-align:left; }
  .cta-final{ grid-template-columns:1fr; }
  .section-head{ grid-template-columns:1fr; gap:.75rem; }
  .section-head .num{ width:fit-content; }
  .crossnav .pages{ grid-template-columns:1fr; }
  footer .grid{ grid-template-columns:1fr 1fr; }
  nav.topbar ul{ display:none; }
}
@media (max-width:560px){
  .pain-grid{ grid-template-columns:1fr; }
  .roi-grid{ grid-template-columns:1fr; }
  .hero-stats .inner{ grid-template-columns:1fr; }
  footer .grid{ grid-template-columns:1fr; }
  footer .colophon{ flex-direction:column; gap:.5rem; text-align:center; }
  .brandmark .product .vertical-tag{ display:none; }
}

/* ── Reveal on scroll ── */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════════════════════════════════
   BLOG — hub listing + article template
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hub hero (plus compact que landing hero) ── */
section.blog-hero{
  background:var(--sapin); color:var(--cream);
  border-bottom:6px solid var(--accent);
  padding:clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
  position:relative; overflow:hidden;
}
section.blog-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(to bottom, black 30%, transparent 100%);
  pointer-events:none;
}
.blog-hero .container{ position:relative; z-index:1; }
.blog-hero .kicker{
  font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent-soft); font-weight:600; margin-bottom:1.25rem;
  display:flex; align-items:center; gap:.8rem;
}
.blog-hero .kicker .bar{ width:32px; height:1px; background:var(--accent-soft); }
.blog-hero h1{
  color:var(--cream); font-weight:300;
  font-size:clamp(2rem, 4vw, 3.2rem);
}
.blog-hero h1 strong{ display:block; font-weight:800; letter-spacing:-.03em; }
.blog-hero h1 .serif{ font-family:'Fraunces', Georgia, serif; font-style:italic; color:var(--accent-soft); font-weight:300; }
.blog-hero p.lede{
  margin-top:1.25rem; color:rgba(247,245,239,.82);
  max-width:52ch; font-size:1.05rem;
}

/* ── Article featured card ── */
.featured-article{
  background:var(--paper); border:var(--rule);
  border-radius:var(--radius);
  margin-top:-3rem; margin-bottom:3rem;
  position:relative; z-index:3;
  display:grid; grid-template-columns:1.4fr 1fr; gap:0;
  box-shadow:0 25px 60px -30px rgba(0,0,0,.25);
  overflow:hidden;
}
.featured-article .text{
  padding:2.5rem;
}
.featured-article .featured-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.3rem .65rem; background:var(--sapin); color:var(--cream);
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  border-radius:var(--radius); font-weight:600; margin-bottom:1.2rem;
}
.featured-article .meta{
  display:flex; gap:.85rem; margin-bottom:.85rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; color:var(--foret); letter-spacing:.1em;
  text-transform:uppercase;
}
.featured-article .meta .sep{ color:var(--gris-3); }
.featured-article h2{
  font-size:clamp(1.6rem, 2.6vw, 2.2rem); color:var(--noir);
  font-weight:700; letter-spacing:-.015em; margin-bottom:1rem;
  line-height:1.15;
}
.featured-article h2 em{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-weight:400; color:var(--foret);
}
.featured-article p{
  font-size:1rem; color:var(--gris); line-height:1.6;
  margin-bottom:1.5rem; max-width:50ch;
}
.featured-article .visual{
  background:linear-gradient(135deg, var(--sapin) 0%, var(--foret) 100%);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  padding:2rem;
}
.featured-article .visual::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size:24px 24px;
}
.featured-article .visual .big-num{
  font-family:'Fraunces', Georgia, serif;
  font-size:clamp(5rem, 10vw, 9rem); font-weight:300;
  color:var(--accent-soft); line-height:.9; letter-spacing:-.03em;
  position:relative; z-index:1;
}
.featured-article .visual .big-num sub{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.25em; display:block;
  color:rgba(255,255,255,.55); margin-top:.5rem;
  text-transform:uppercase; font-weight:600; vertical-align:baseline;
}

/* ── Cards grid (suggested articles) ── */
.articles-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.5rem;
  margin-bottom:3rem;
}
.article-card{
  background:var(--paper); border:var(--rule);
  border-radius:var(--radius);
  padding:1.75rem; display:flex; flex-direction:column; gap:.85rem;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
  text-decoration:none; color:inherit;
}
.article-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.article-card.coming{ opacity:.55; pointer-events:none; }
.article-card .card-meta{
  font-family:'JetBrains Mono', monospace;
  font-size:.68rem; letter-spacing:.18em; color:var(--gris-2);
  text-transform:uppercase; display:flex; gap:.6rem;
}
.article-card .card-meta .status{ color:var(--foret); }
.article-card.coming .card-meta .status{ color:var(--gris-3); }
.article-card h3{
  font-size:1.1rem; color:var(--noir); line-height:1.3;
  letter-spacing:0; margin-top:.1rem;
}
.article-card p{
  font-size:.88rem; color:var(--gris); line-height:1.55;
}
.article-card .read-more{
  margin-top:auto; padding-top:.9rem; border-top:1px dashed var(--ligne);
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.12em; color:var(--accent);
  font-weight:600;
}
.article-card.coming .read-more{ color:var(--gris-3); }

/* ── Article template (typographie éditoriale) ── */
article.post{
  max-width:720px; margin:0 auto;
  padding:clamp(2.5rem, 5vw, 4rem) var(--gutter) 2rem;
}
article.post .post-head{
  border-bottom:var(--rule); padding-bottom:2rem; margin-bottom:2.5rem;
}
article.post .breadcrumb{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.15em; color:var(--gris);
  margin-bottom:1.5rem; text-transform:uppercase;
}
article.post .breadcrumb a{ color:var(--foret); border-bottom:1px solid var(--ligne); }
article.post .breadcrumb a:hover{ color:var(--sapin); border-color:var(--sapin); }
article.post .breadcrumb .sep{ color:var(--gris-3); margin:0 .5em; }
article.post h1{
  font-size:clamp(2rem, 4vw, 3rem); font-weight:800;
  letter-spacing:-.025em; color:var(--noir); line-height:1.1;
  margin-bottom:1.25rem;
}
article.post h1 em{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-weight:400; color:var(--foret);
}
article.post .post-meta{
  display:flex; gap:1rem; flex-wrap:wrap; align-items:center;
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; color:var(--gris); letter-spacing:.1em;
  text-transform:uppercase;
}
article.post .post-meta .vertical-tag{
  background:var(--sapin); color:var(--cream);
  padding:.25rem .6rem; border-radius:var(--radius);
  font-weight:600; letter-spacing:.15em;
}
article.post .post-meta .dot-sep{ color:var(--gris-3); }
article.post .lede{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-size:1.3rem; line-height:1.45; color:var(--gris);
  font-weight:300; letter-spacing:-.005em;
  margin:2rem 0 1rem; padding-left:1.2rem;
  border-left:2px solid var(--accent);
}
article.post .body{
  font-size:1.05rem; line-height:1.75; color:var(--noir);
}
article.post .body h2{
  font-size:1.6rem; font-weight:700; letter-spacing:-.01em;
  color:var(--noir); margin:3rem 0 1rem;
  padding-top:1rem; border-top:1px solid var(--ligne);
  display:flex; align-items:baseline; gap:1rem;
}
article.post .body h2 .num{
  font-family:'JetBrains Mono', monospace;
  font-size:.85rem; color:var(--accent); font-weight:600;
  letter-spacing:.1em;
}
article.post .body h3{
  font-size:1.15rem; font-weight:600; letter-spacing:0;
  color:var(--noir); margin:2rem 0 .8rem;
}
article.post .body p{ margin-bottom:1rem; color:var(--gris); }
article.post .body p strong{ color:var(--noir); font-weight:600; }
article.post .body ul, article.post .body ol{
  margin:1rem 0 1.5rem 1.5rem; color:var(--gris);
}
article.post .body li{ margin-bottom:.5rem; }
article.post .body blockquote{
  background:var(--cream); border-left:3px solid var(--accent);
  padding:1.25rem 1.5rem; margin:2rem 0;
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-size:1.15rem; line-height:1.5; color:var(--noir);
  border-radius:var(--radius);
}
article.post .body blockquote cite{
  display:block; margin-top:.8rem;
  font-family:'Inter', sans-serif; font-style:normal;
  font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--foret); font-weight:600;
}
article.post .body table{
  width:100%; border-collapse:collapse; margin:1.5rem 0;
  font-size:.92rem;
}
article.post .body table th, article.post .body table td{
  padding:.75rem 1rem; text-align:left;
  border-bottom:var(--rule);
}
article.post .body table th{
  background:var(--cream); color:var(--noir); font-weight:600;
  font-size:.75rem; letter-spacing:.1em; text-transform:uppercase;
}
article.post .body table td.mono{
  font-family:'JetBrains Mono', monospace; color:var(--sapin);
  font-size:.88rem;
}
article.post .body .callout{
  background:var(--sapin); color:var(--cream);
  padding:1.5rem 1.75rem; border-radius:var(--radius);
  margin:2rem 0;
}
article.post .body .callout .callout-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent-soft); margin-bottom:.7rem;
}
article.post .body .callout h4{
  color:var(--cream); font-size:1.05rem; margin-bottom:.7rem;
  letter-spacing:0;
}
article.post .body .callout p{ color:rgba(247,245,239,.88); font-size:.95rem; margin-bottom:0; }

/* ── Article CTA fin ── */
article.post .post-cta{
  margin:4rem 0 2rem; padding:2rem; background:var(--cream);
  border:var(--rule); border-radius:var(--radius);
}
article.post .post-cta h3{
  font-family:'Fraunces', Georgia, serif; font-style:italic;
  font-weight:400; font-size:1.4rem; color:var(--noir);
  margin-bottom:.7rem; letter-spacing:-.01em;
}
article.post .post-cta p{
  font-size:.95rem; color:var(--gris); margin-bottom:1.25rem;
}
article.post .post-cta .actions{ display:flex; gap:.75rem; flex-wrap:wrap; }

/* ── Article footer nav ── */
article.post .post-nav{
  border-top:var(--rule); padding-top:2rem; margin-top:3rem;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
article.post .post-nav a{
  font-family:'JetBrains Mono', monospace;
  font-size:.82rem; color:var(--foret); letter-spacing:.08em;
}
article.post .post-nav a:hover{ color:var(--sapin); }

/* ── Filtre par tag (chips) ── */
.filter-bar{
  display:flex; align-items:center; gap:.75rem;
  flex-wrap:wrap; margin-bottom:2rem;
  padding-bottom:1.25rem; border-bottom:var(--rule);
}
.filter-bar .filter-label{
  font-family:'JetBrains Mono', monospace;
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gris); font-weight:600; margin-right:.5rem;
}
.filter-bar .chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.filter-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; font-size:.82rem; font-weight:500;
  background:var(--paper); border:1px solid var(--ligne);
  color:var(--gris); border-radius:999px;
  cursor:pointer; transition:all .2s var(--ease);
  font-family:'Inter', sans-serif;
}
.filter-chip:hover{ border-color:var(--accent); color:var(--sapin); }
.filter-chip.active{
  background:var(--sapin); border-color:var(--sapin);
  color:var(--cream); font-weight:600;
}
.filter-chip .count{
  font-family:'JetBrains Mono', monospace;
  font-size:.7rem; color:var(--gris-2); letter-spacing:.05em;
}
.filter-chip.active .count{ color:var(--accent-soft); }

/* Tag sur carte article */
.article-card .vertical-tag{
  display:inline-block; padding:.18rem .55rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.64rem; letter-spacing:.15em; text-transform:uppercase;
  background:rgba(64,145,108,.12); color:var(--foret);
  border-radius:var(--radius); font-weight:600;
  width:fit-content;
}
.article-card[data-vertical="expert-comptable"] .vertical-tag{
  background:rgba(64,145,108,.12); color:var(--foret);
}
.article-card[data-vertical="daf"] .vertical-tag{
  background:rgba(27,67,50,.14); color:var(--sapin);
}
.article-card[data-vertical="rh"] .vertical-tag{
  background:rgba(116,198,157,.22); color:#1e7149;
}

/* Hide animation */
.article-card.filtered-out{
  display:none;
}

/* Stats banner sur hub */
.blog-meta-bar{
  background:var(--cream); border-top:var(--rule); border-bottom:var(--rule);
  padding:1rem 0; margin-bottom:3rem;
}
.blog-meta-bar .inner{
  max-width:var(--max); margin:0 auto;
  padding:0 var(--gutter);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  font-family:'JetBrains Mono', monospace;
  font-size:.75rem; letter-spacing:.1em; color:var(--gris);
  text-transform:uppercase;
}
.blog-meta-bar .counter strong{ color:var(--sapin); font-weight:700; }

/* Responsive ajustements */
@media (max-width:980px){
  .featured-article{ grid-template-columns:1fr; }
  .featured-article .text{ padding:2rem; }
  .articles-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .articles-grid{ grid-template-columns:1fr; }
  article.post{ padding:2rem 1.25rem; }
  .filter-bar{ flex-direction:column; align-items:flex-start; }
}