/* ---------- Blog Delyos : liste et article (complète styles.css) ---------- */
.blog-page .nav-links a.on{color:var(--fg); position:relative}
.blog-page .nav-links a.on::after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--mint)}

.crumbs{display:flex; flex-wrap:wrap; gap:8px; font-size:12.5px; color:var(--mute-2); margin-bottom:22px}
.crumbs a{color:var(--mute); text-decoration:none}
.crumbs a:hover{color:var(--fg)}
.crumbs span[aria-current]{color:var(--mute)}

/* --- en-tête du blog --- */
.blog-hero{padding-block:56px 40px; position:relative; overflow:hidden}
.blog-hero::before{content:""; position:absolute; inset:-30% -10% auto auto; width:640px; height:640px; background:radial-gradient(closest-side, rgba(112,226,171,.12), transparent 70%); pointer-events:none}
.blog-hero .wrap{position:relative}
.blog-hero h1{font-size:clamp(28px, 5.4vw, 48px); max-width:18ch; margin-top:14px}
@media (min-width:980px){.blog-hero h1{font-size:clamp(30px,3.4vw,44px)}}
.blog-hero h1 em{font-style:normal; color:var(--mint-ink)}
.blog-hero .lead{margin-top:20px}
.tag-row{display:flex; flex-wrap:wrap; gap:8px; margin-top:30px}
.tag{display:inline-flex; align-items:center; gap:8px; font-size:13px; padding:7px 13px; border:1px solid var(--line-2); border-radius:999px; color:var(--mute); text-decoration:none; transition:border-color .2s, color .2s, background .2s}
.tag small{font:500 11px var(--mono); color:var(--mute-2)}
.tag:hover{border-color:var(--mute); color:var(--fg)}
.tag.on{background:var(--mint); border-color:var(--mint); color:#1D1F1E}
.tag.on small{color:rgba(29,31,30,.6)}

/* --- grille d'articles --- */
.blog-list{padding-block:24px 112px}
.blog-empty{color:var(--mute); padding:40px 0}
.post-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px}
@media (max-width:980px){.post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.post-grid{grid-template-columns:1fr}}
.post-card{display:grid; grid-template-rows:auto 1fr; background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-l); overflow:hidden; transition:transform .25s, border-color .25s}
.post-card:hover{transform:translateY(-3px); border-color:var(--line-2)}
.post-media{display:block; aspect-ratio:16/9; background:var(--ink-3); overflow:hidden}
.post-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.post-card:hover .post-media img{transform:scale(1.03)}
.post-ph{display:block; width:100%; height:100%; background:
  radial-gradient(circle at 30% 40%, rgba(112,226,171,.25), transparent 50%),
  linear-gradient(135deg, var(--ink-3), var(--ink-2))}
.post-body{padding:22px 24px 24px; display:grid; gap:12px; align-content:start}
.post-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12.5px; color:var(--mute)}
.post-meta time{color:var(--mute)}
.post-tag{color:var(--mint-ink); font-weight:500}
.post-card h2, .post-card h3{font-size:19px; font-weight:500; letter-spacing:-.01em; line-height:1.3}
.post-card h2 a, .post-card h3 a{color:inherit; text-decoration:none}
.post-card h2 a:hover, .post-card h3 a:hover{color:var(--mint-ink)}
.post-card p{font-size:14.5px; color:var(--mute); font-weight:300; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.post-more{font-size:14px; color:var(--mint-ink); text-decoration:none; margin-top:4px; display:inline-flex; gap:8px}
.post-more:hover{text-decoration:underline; text-underline-offset:4px}
/* article à la une : pleine largeur, image à gauche */
@media (min-width:981px){
  .post-card.featured{grid-column:1/-1; grid-template-columns:1.15fr 1fr; grid-template-rows:none}
  .post-card.featured .post-media{aspect-ratio:auto; min-height:320px}
  .post-card.featured .post-body{padding:36px 40px; align-content:center; gap:16px}
  .post-card.featured h2{font-size:28px; letter-spacing:-.02em}
  .post-card.featured p{font-size:16px; -webkit-line-clamp:4}
}
.post-grid.compact .post-body{padding:18px 20px 20px}
.post-grid.compact h3{font-size:16.5px}

/* --- page article --- */
.post-head{padding-block:56px 32px}
.post-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px}
.post-tags a{font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mint-ink); text-decoration:none; padding:5px 10px; border:1px solid rgba(112,226,171,.35); border-radius:999px}
.post-tags a:hover{background:var(--mint-ghost)}
.post-head h1{font-size:clamp(30px,4.4vw,50px); max-width:24ch; text-wrap:balance}
.post-lead{margin-top:20px; font-size:18px; color:var(--mute); max-width:62ch; font-weight:300; line-height:1.55}
.post-meta-lg{margin-top:24px; font-size:14px}
.post-author{display:inline-flex; align-items:center; gap:10px; color:var(--fg); font-weight:500}
.post-cover{margin:0 0 8px}
.post-cover img{display:block; width:100%; max-height:560px; object-fit:cover; border-radius:var(--r-l); border:1px solid var(--line)}
.post-layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:56px; padding-block:40px 24px; align-items:start}
@media (max-width:980px){.post-layout{grid-template-columns:minmax(0,1fr); gap:32px}}

/* contenu rédactionnel */
.post-content{max-width:720px; font-size:17px; line-height:1.75; font-weight:300; color:var(--fg)}
.post-content > *+*{margin-top:1.15em}
.post-content h2{font-size:clamp(24px,2.6vw,30px); margin-top:2em; scroll-margin-top:100px}
.post-content h3{font-size:clamp(19px,2vw,22px); margin-top:1.8em; font-weight:500; scroll-margin-top:100px}
.post-content h4{font-size:17px; font-weight:500; margin-top:1.6em}
.post-content p{color:var(--fg)}
.post-content strong{font-weight:600}
.post-content a{color:var(--mint-ink); text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(112,226,171,.4)}
.post-content a:hover{text-decoration-color:currentColor}
.post-content ul, .post-content ol{padding-left:1.3em; display:grid; gap:.45em}
.post-content li::marker{color:var(--mint-ink)}
.post-content blockquote{margin:1.6em 0; padding:18px 24px; border-left:3px solid var(--mint); background:var(--ink-2); border-radius:0 14px 14px 0; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:300}
.post-content blockquote::before{content:none}
.post-content blockquote p+p{margin-top:.8em}
.post-content figure{margin:2em 0}
.post-content figure img, .post-content > img{display:block; width:100%; height:auto; border-radius:var(--r-m); border:1px solid var(--line)}
.post-content figcaption{margin-top:10px; font-size:13px; color:var(--mute); text-align:center}
.post-content hr{border:0; height:1px; background:var(--line-2); margin:2.4em 0}
.post-content code{font:400 .9em var(--mono); background:var(--ink-2); border:1px solid var(--line); padding:2px 6px; border-radius:6px}
.post-content pre{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-m); padding:18px 20px; overflow:auto; font-size:14px; line-height:1.55}
.post-content pre code{background:none; border:0; padding:0; font-size:inherit}
.post-content .table-wrap{overflow-x:auto; margin:1.6em 0}
.post-content table{width:100%; border-collapse:collapse; font-size:15px}
.post-content th, .post-content td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-2)}
.post-content th{font-weight:500; color:var(--mint-ink); font-size:13px; letter-spacing:.02em}
.post-content iframe{width:100%; aspect-ratio:16/9; height:auto; border:0; border-radius:var(--r-m)}

/* colonne latérale */
.post-side{position:sticky; top:96px; display:grid; gap:14px}
@media (max-width:980px){.post-side{position:static}}
.side-card{background:var(--ink-2); border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; display:grid; gap:12px}
.side-k{font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mint-ink)}
.side-card p{font-size:14px; color:var(--mute)}
.share{display:flex; flex-wrap:wrap; gap:8px}
.share a, .share button{font:400 13px var(--display); color:var(--fg); background:transparent; border:1px solid var(--line-2); border-radius:999px; padding:7px 13px; text-decoration:none; cursor:pointer; transition:border-color .2s}
.share a:hover, .share button:hover{border-color:var(--mint)}
.side-cta .btn{justify-self:start}

/* navigation précédent / suivant */
.post-foot{padding-block:24px 56px}
.post-nav{display:grid; grid-template-columns:1fr 1fr; gap:14px; border-top:1px solid var(--line-2); padding-top:28px}
@media (max-width:620px){.post-nav{grid-template-columns:1fr}}
.pn{display:grid; gap:6px; text-decoration:none; color:var(--fg); padding:18px 20px; border:1px solid var(--line); border-radius:var(--r-m); background:var(--ink-2); transition:border-color .2s}
.pn:hover{border-color:var(--mint)}
.pn small{font-size:12px; color:var(--mint-ink)}
.pn span{font-size:15px; font-weight:500; line-height:1.35}
.pn.next{text-align:right}

.related{padding-block:40px 112px; border-top:1px solid var(--line)}
.related-h{font-size:clamp(24px,3vw,34px); margin-bottom:32px}
.related-h em{font-style:normal; color:var(--mint-ink)}

@media (max-width:560px){
  .blog-hero, .post-head{padding-block:36px 24px}
  .post-content{font-size:16px}
  .post-body{padding:18px}
}

/* page article : place sous la barre de navigation flottante (comme l'accueil et la liste) */
.post-head{padding-top:128px!important}
@media (max-width:640px){.post-head{padding-top:112px!important}}

.blog-hero.spot > *, .blog-list.spot > *{position:relative; z-index:1}
.blog-hero{padding-top:128px!important}
@media (max-width:640px){.blog-hero{padding-top:112px!important}}

/* blog : réseau de points connectés à droite du titre */
.blog-hero::before{display:none}
.blog-hero .bnet{position:absolute!important; top:0; right:0; width:min(50%,640px); height:100%; pointer-events:none; z-index:0!important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%); mask-image:linear-gradient(90deg,transparent,#000 30%)}
@media (max-width:760px){.bnet{width:100%; opacity:.35}}

.nw-media{display:block; background:radial-gradient(120% 140% at 85% 0%, rgba(112,226,171,.16), transparent 60%), var(--ink-2)}
.nw-trio{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:clamp(14px,3vw,28px); height:100%; box-sizing:border-box; align-content:center}
.nw-trio img{width:100%!important; height:auto!important; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--line)}
.nw-sep{display:none}

.bh-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:56px; align-items:center}
.bh-toc{display:grid; gap:2px; max-width:380px; justify-self:end; width:100%; padding:10px; border-radius:20px; border:1px solid var(--line-2); background:color-mix(in srgb, var(--ink-2) 72%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:0 30px 60px -40px rgba(0,0,0,.6)}
.bh-k{font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mute-2); padding:10px 14px 12px}
.bh-toc button{all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:grid; grid-template-columns:1fr auto 14px; align-items:center; gap:12px; padding:12px 14px; border-radius:12px; font-size:14.5px; color:var(--mute); transition:color .2s, background .2s}
.bh-toc button small{min-width:26px; text-align:center; font:500 11.5px var(--mono); color:var(--mute); padding:3px 8px; border-radius:999px; border:1px solid var(--line-2); transition:all .2s}
.bh-toc button::after{content:"→"; font-size:13px; color:var(--mint-ink); opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s}
.bh-toc button:hover{color:var(--fg); background:color-mix(in srgb, var(--fg) 4%, transparent); box-shadow:none}
.bh-toc button:hover::after{opacity:1; transform:none}
.bh-toc button:focus-visible{outline:2px solid var(--mint); outline-offset:2px}
.bh-toc button.on{color:var(--fg); background:var(--mint-ghost); box-shadow:none}
.bh-toc button.on small{background:var(--mint); border-color:var(--mint); color:#1D1F1E}
.bh-toc button.on::after{opacity:1; transform:none}
:root[data-mode="light"] .bh-toc{background:color-mix(in srgb, #FFFFFF 78%, transparent); box-shadow:0 30px 60px -40px rgba(29,31,30,.25)}
.blog-hero .bnet{opacity:.45}
.post-card.is-hidden{display:none!important}
@media (max-width:900px){.bh-grid{grid-template-columns:1fr; gap:28px}.bh-toc{justify-self:start; max-width:none}}
.blog-hero.spot-off::after{opacity:0!important}
.bh-toc{position:relative; z-index:2}
.bh-toc button{padding:10px 14px}
.bh-more{position:relative}
.bh-toc .bh-more-t::after{content:""; width:7px; height:7px; border-right:1.5px solid var(--mute); border-bottom:1.5px solid var(--mute); transform:translateY(-2px) rotate(45deg); opacity:1; transition:transform .25s}
.bh-toc .bh-more-t[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.bh-toc .bh-more-t.on{color:var(--fg); background:var(--mint-ghost)}
.bh-toc .bh-more-t.on small{background:var(--mint); border-color:var(--mint); color:#1D1F1E}
.bh-drop{position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:5; display:grid; gap:2px; padding:8px; border-radius:16px; border:1px solid var(--line-2); background:var(--ink-2); box-shadow:0 24px 50px -20px rgba(0,0,0,.55); animation:bhdrop .18s ease-out}
.bh-drop[hidden]{display:none}
:root[data-mode="light"] .bh-drop{background:#FFFFFF; box-shadow:0 24px 50px -24px rgba(29,31,30,.28)}
@keyframes bhdrop{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.bh-toc{overflow:visible}
.blog-hero{overflow:visible; z-index:3}
.bh-toc .bh-more-t{width:100%}
.blog-hero .bnet{clip-path:inset(0)}
.bh-toc .bh-more-t.on::after,.bh-toc .bh-more-t:hover::after{transform:translateY(-2px) rotate(45deg)}
.bh-toc .bh-more-t[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)!important}
.bh-drop button.cur{color:var(--fg)}
.bh-drop button.cur::after{content:"✓"; opacity:1; transform:none}
.bh-drop::before{content:""; position:absolute; left:0; right:0; top:-10px; height:10px}
.bh-list{position:relative; height:184px; overflow:hidden; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent); mask-image:linear-gradient(180deg,transparent 0,#000 14px,#000 calc(100% - 26px),transparent)}
.bh-track{display:grid; gap:2px; padding:4px 0 18px; will-change:transform}
.bh-toc .bh-hint{display:flex; justify-content:center; padding-top:2px}
.bh-hint i{width:7px; height:7px; border-right:1.5px solid var(--mute-2); border-bottom:1.5px solid var(--mute-2); transform:rotate(45deg); animation:bhhint 1.8s ease-in-out infinite}
@keyframes bhhint{0%,100%{transform:translateY(-2px) rotate(45deg); opacity:.5}50%{transform:translateY(2px) rotate(45deg); opacity:1}}
.bh-toc.at-end .bh-hint i{opacity:0; animation:none}
/* titre du blog : même taille que le titre de la page d'accueil */
.blog-hero h1{font-size:clamp(28px,5.4vw,48px)!important}
@media (min-width:980px){.blog-hero h1{font-size:min(calc(2.367vw + 7.9px),38.2px)!important}}
.bh-toc .bh-k{color:var(--mint-ink); font:500 9.5px var(--display); letter-spacing:.1em}
.post-card:hover{border-color:rgba(112,226,171,.4)}
:root[data-mode="light"] .post-card:hover{border-color:rgba(63,191,132,.8); box-shadow:0 0 0 .5px rgba(63,191,132,.8)}
.post-card .nw-ex{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.post-card .post-body > p{text-align:justify; hyphens:auto; -webkit-hyphens:auto}

/* article : couverture « personnes à l’honneur » (lettre mensuelle) */
.nw-cover{position:relative; overflow:hidden; border-radius:var(--r-l); border:1px solid var(--line); padding:clamp(22px,4vw,44px); background:radial-gradient(120% 140% at 85% 0%, rgba(112,226,171,.16), transparent 60%), var(--ink-2)}
.nw-sep{display:none}
.post-head h1 .nw-ed{display:block; font-style:normal; color:var(--mint-ink)}
.nw-k{display:inline-block; font:500 11.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mint-ink); margin-bottom:18px}
.nw-row{display:grid; grid-template-columns:repeat(3,minmax(0,200px)); gap:clamp(12px,2.4vw,32px)}
.nw-p{display:grid; gap:4px; align-content:start}
.nw-p img{width:100%!important; height:auto!important; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r-m); border:1px solid var(--line); margin-bottom:8px; max-height:none}
.nw-p b{font-size:15px; font-weight:500; color:var(--fg)}
.nw-p span{font-size:12.5px; font-weight:300; color:var(--mute); line-height:1.4}
@media (max-width:560px){.nw-p b{font-size:13px}.nw-p span{font-size:11.5px}}
.post-content p, .post-content li, .post-content blockquote p, .post-head .post-lead{text-align:justify; hyphens:auto; -webkit-hyphens:auto}
.post-side .side-card .side-k{color:var(--mint-ink)!important; font:500 11px var(--display)!important; letter-spacing:.1em; text-transform:uppercase}

/* mises à jour aperçus blog (octobre) */
.post-more{position:relative; justify-self:start; align-self:start; width:fit-content}
.post-more::after{content:"→"; position:absolute; left:100%; margin-left:8px; top:0; text-decoration:none; opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s}
.post-more:hover::after{opacity:1; transform:none}
body.spot-off-all .spot::after{opacity:0!important}
.post.spot > *, .related.spot > *{position:relative; z-index:1}