/* Page /blog v3 : sidebar de filtres, composition bento, cartes plein cadre (préfixe blg-) */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.blg-hero{padding-bottom:3.5rem}
.blg-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent);mask-image:radial-gradient(70% 90% at 50% 0%,#000,transparent)}
.blg-kicker{display:inline-flex;align-items:center;gap:.7rem;margin:0 0 1rem;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.blg-kicker::before,.blg-kicker::after{content:"";width:2.2rem;height:2px;background:linear-gradient(90deg,transparent,var(--accent))}
.blg-kicker::after{rotate:180deg}

/* Section : overflow visible (pour le sticky) ; le fond animé est clippé dans .blg-bg */
.blg-sec{position:relative;isolation:isolate;padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(4rem,8vw,6rem)}
.blg-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blg-bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
.blg-aura{position:absolute;border-radius:50%;filter:blur(100px)}
.blg-aura.a1{width:34rem;height:34rem;left:-12rem;top:2rem;background:radial-gradient(circle,#0B5CFF,transparent 65%);opacity:.28;animation:drift 18s ease-in-out infinite alternate}
.blg-aura.a2{width:30rem;height:30rem;right:-10rem;top:34rem;background:radial-gradient(circle,#00B8FF,transparent 65%);opacity:.2;animation:drift 22s ease-in-out infinite alternate-reverse}

/* Mise en page : sidebar + contenu (minmax(0,…) : une colonne ne s'élargit jamais à cause de son contenu) */
.blg-layout{display:grid;grid-template-columns:290px minmax(0,1fr);gap:2.5rem;align-items:start}
.blg-side,.blg-main{min-width:0}
html:not(.js) .blg-side{display:none}html:not(.js) .blg-layout{grid-template-columns:minmax(0,1fr)}
.blg-side{position:sticky;top:5.5rem;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.blg-panel{min-width:0;padding:1.4rem;border-radius:1.8rem;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 70px -45px rgba(11,92,255,.55)}
.blg-h{margin:1.4rem 0 .6rem;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.blg-s{position:relative;display:block}
.blg-s svg{position:absolute;left:.95rem;top:50%;translate:0 -50%;width:1.1rem;height:1.1rem;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.blg-s input{padding-left:2.6rem;border-radius:980px;min-height:46px}
.blg-cats{display:grid;gap:.3rem}
.blg-cat{position:relative;display:flex;align-items:center;gap:.75rem;width:100%;min-height:48px;padding:.5rem .7rem;border:0;border-radius:1rem;background:transparent;color:var(--ink);font:inherit;font-weight:600;text-align:left;cursor:pointer;transition:background .25s,color .25s,transform .25s}
.blg-cat:hover{background:var(--soft);transform:translateX(3px)}
.blg-cat::before{content:"";position:absolute;left:-.4rem;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--accent);scale:1 0;transition:scale .3s}
.blg-cat[aria-pressed="true"]{background:var(--soft);color:var(--accent)}
.blg-cat[aria-pressed="true"]::before{scale:1 1}
.blg-ic{display:grid;place-items:center;flex:none;width:2.1rem;height:2.1rem;border-radius:.7rem;background:var(--bg);border:1px solid var(--line);transition:background .25s,color .25s}
.blg-ic .ico-s{width:1.1rem;height:1.1rem}
.blg-cat[aria-pressed="true"] .blg-ic{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.blg-lab{flex:1}
.blg-n{min-width:1.7rem;padding:.1rem .5rem;border-radius:99px;background:var(--bg);border:1px solid var(--line);font-size:.78rem;font-weight:700;text-align:center;color:var(--muted)}
.blg-cat[aria-pressed="true"] .blg-n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.blg-reset{margin-top:1.2rem;width:100%;min-height:42px;font-size:.92rem}.blg-reset[hidden]{display:none}
.blg-cta{padding:1.5rem;border-radius:1.8rem;background:linear-gradient(160deg,#0F1D45,#050B1E);border:1px solid #1E2D57;color:#F5F7FB}
.blg-cta h2{font-size:1.3rem;margin:0 0 .4rem}.blg-cta p{color:#AEB8CF;font-size:.95rem;margin:0 0 1rem}.blg-cta .btn{width:100%}
.blg-count{margin:0 0 1.2rem;color:var(--muted)}.blg-count b{font:700 1.5rem "Bricolage Grotesque",sans-serif;color:var(--ink)}

/* Composition bento : 2 colonnes dans la zone de contenu, article à la une sur toute la largeur, cartes de même hauteur */
.blg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(23rem,auto);gap:1.4rem;counter-reset:blg}
@media (min-width:700px){.blg-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(26rem,auto)}.blg-item[data-feat]{grid-column:1/-1}}
.blg-item{display:flex;min-width:0;counter-increment:blg}.blg-item[hidden]{display:none}
.blg-item.blg-pop{animation:blgPop .65s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*70ms)}
@keyframes blgPop{from{opacity:0;transform:translateY(24px) scale(.96)}}

/* Carte plein cadre */
.blg-card{--mx:50%;--my:0%;position:relative;flex:1;min-width:0;display:flex;flex-direction:column;border-radius:2rem;overflow:hidden;isolation:isolate;color:#F5F7FB;background:linear-gradient(160deg,#0F1D45,#050B1E);border:1px solid #1E2D57;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .3s}
.blg-card:hover,.blg-card:focus-within{transform:translateY(-8px);border-color:transparent;box-shadow:0 40px 70px -36px rgba(11,92,255,.75)}
.blg-card::before{content:"";position:absolute;inset:0;z-index:5;padding:1.5px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:conic-gradient(from var(--a),transparent 0 55%,var(--accent),#00B8FF,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:blgSpin 4s linear infinite}
.blg-card:hover::before,.blg-card:focus-within::before{opacity:1}
@keyframes blgSpin{to{--a:360deg}}
.blg-card::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(91,155,255,.2),transparent 60%)}
.blg-card:hover::after{opacity:1}
.blg-cover{position:absolute;inset:0;z-index:0;overflow:hidden}
.blg-cover::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,11,30,.1) 0%,rgba(5,11,30,.25) 38%,rgba(5,11,30,.95) 100%)}
.blg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.blg-ph{position:absolute;left:0;right:0;top:12%;margin:auto;width:42%;height:auto;max-height:42%;opacity:.9}
.blg-card:hover .blg-img{transform:scale(1.08)}
.blg-no{position:absolute;top:.8rem;right:1.3rem;z-index:2;font:700 2.8rem/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.55);transition:color .4s,-webkit-text-stroke-color .4s}
.blg-no::before{content:counter(blg,decimal-leading-zero)}
.blg-card:hover .blg-no{color:rgba(255,255,255,.92);-webkit-text-stroke-color:transparent}
.blg-tags{position:absolute;top:1.2rem;left:1.2rem;z-index:2;display:flex;flex-wrap:wrap;gap:.4rem;max-width:calc(100% - 5.5rem)}
.blg-chip,.blg-flag{padding:.3rem .9rem;border-radius:980px;font-size:.82rem;font-weight:600;color:#fff}
.blg-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.blg-flag{display:none;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
.blg-body{position:relative;z-index:2;margin-top:auto;padding:1.6rem 1.7rem 1.8rem;min-width:0}
.blg-meta{display:flex;gap:.9rem;margin:0 0 .6rem;font-size:.86rem;color:rgba(245,247,251,.75)}
.blg-meta time+span{position:relative}.blg-meta time+span::before{content:"";position:absolute;left:-.55rem;top:50%;width:3px;height:3px;border-radius:50%;background:currentColor}
.blg-body h2{margin:0 0 .6rem;font-size:1.45rem;letter-spacing:-.02em;line-height:1.14;color:#fff;overflow-wrap:anywhere}
/* Toute la carte est cliquable : le lien couvre la carte (clippée par .blg-card{overflow:hidden}) */
.blg-body h2 a{color:inherit;text-decoration:none}.blg-body h2 a::after{content:"";position:absolute;inset:-100vh -100vw;z-index:6}
.blg-card:has(h2 a:focus-visible){outline:3px solid var(--accent);outline-offset:3px}.blg-body h2 a:focus-visible{outline:none}
.blg-desc{margin:0;color:#C9D3EE;font-size:.96rem;line-height:1.55;max-height:0;opacity:0;overflow:hidden;transition:max-height .55s cubic-bezier(.2,.7,.2,1),opacity .4s,margin .4s}
.blg-card:hover .blg-desc,.blg-card:focus-within .blg-desc{max-height:6.5rem;opacity:1;margin-bottom:.9rem}
.blg-more{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#9CC2FF}
.blg-more svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s}
.blg-card:hover .blg-more svg{transform:translateX(6px)}
@media (hover:none){.blg-desc{max-height:none;opacity:1;margin-bottom:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}}

/* Article à la une */
@media (min-width:700px){
  .blg-item[data-feat] .blg-flag{display:inline-block}
  .blg-item[data-feat] .blg-body{max-width:36rem;padding:2.2rem}
  .blg-item[data-feat] h2{font-size:clamp(1.8rem,2.8vw,2.4rem);line-height:1.08}
  .blg-item[data-feat] .blg-desc{max-height:none;opacity:1;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
}
.blg-empty{padding:3.5rem 1.5rem;border-radius:1.8rem;border:2px dashed var(--line);text-align:center}
.blg-empty[hidden]{display:none}.blg-empty p{margin-inline:auto;color:var(--muted)}
.blg-loadwrap{display:flex;justify-content:center;margin-top:2.5rem}.blg-loadwrap [hidden]{display:none}

/* Mobile : sidebar au-dessus, catégories en bandeau défilant (dans son propre conteneur, sans élargir la page) */
@media (max-width:900px){
  .blg-layout{grid-template-columns:minmax(0,1fr)}.blg-side{position:static}
  .blg-cats{display:flex;gap:.5rem;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:.3rem;scrollbar-width:none}
  .blg-cats::-webkit-scrollbar{display:none}
  .blg-cat{width:auto;flex:none;white-space:nowrap;border:1px solid var(--line)}
  .blg-cat:hover{transform:none}.blg-cat::before{display:none}
  .blg-cta{display:none}
}
@media (max-width:480px){
  .blg-panel{padding:1.1rem}
  .blg-body{padding:1.3rem 1.2rem 1.4rem}
  .blg-body h2{font-size:1.3rem}
}
@media (prefers-reduced-motion:reduce){
  .blg-card,.blg-img,.blg-cat,.blg-desc,.blg-more svg{transition:none}
  .blg-item.blg-pop,.blg-card::before,.blg-aura{animation:none}.blg-card:hover{transform:none}
  .blg-desc{max-height:none;opacity:1;margin-bottom:.9rem}
}