/* psra-blog-index */
.psra-blog{padding:0 0 80px;background:var(--psra-bg)}

/* ---- premium dark hero ---- */
.psra-blog__hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:46px 0 50px;background:var(--psra-primary-dd)}
.psra-blog__hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:none;background-size:26px 26px;-webkit-mask-image:radial-gradient(560px 320px at 50% 4%,#000,transparent 78%);mask-image:radial-gradient(560px 320px at 50% 4%,#000,transparent 78%);opacity:.5}
.psra-blog__hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#E6C766}
.psra-blog__bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.psra-blog__bg i{position:absolute;border-radius:50%;filter:blur(64px);opacity:.4;animation:psra-blog-float 17s ease-in-out infinite}
.psra-blog__bg i:nth-child(1){width:320px;height:320px;left:-70px;top:-90px;background:var(--psra-primary)}
.psra-blog__bg i:nth-child(2){width:280px;height:280px;right:-60px;top:-50px;background:#2b2b2b;animation-delay:-6s}
.psra-blog__bg i:nth-child(3){width:240px;height:240px;left:46%;bottom:-130px;background:var(--psra-primary-100);animation-delay:-10s}
@keyframes psra-blog-float{0%,100%{transform:translate(0,0)}50%{transform:translate(22px,-18px)}}
.psra-blog__hero-in{position:relative;z-index:1;animation:psra-blog-rise .6s cubic-bezier(.16,1,.3,1) both}

.psra-blog__hero .psra-crumbs{color:rgba(255,255,255,.6);margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px}
.psra-blog__hero .psra-crumbs a{color:rgba(255,255,255,.6);text-decoration:none}
.psra-blog__hero .psra-crumbs a:hover{color:var(--psra-primary-100)}
.psra-blog__hero .psra-crumbs__cur{color:#fff;font-weight:600}
.psra-blog__hero .psra-crumbs__sep{color:rgba(255,255,255,.35)}

.psra-blog__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);margin-bottom:15px;color:var(--psra-ink)}
.psra-blog__eyebrow svg{color:var(--psra-primary-100)}
.psra-blog__h1{margin:0;font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-1.3px;color:#fff;line-height:1.05}
.psra-blog__sub{margin:12px 0 0;color:rgba(255,255,255,.74);font-size:16px;max-width:640px;line-height:1.6}

/* ---- body ---- */
.psra-blog__body{padding-top:30px}

/* ---- chips ---- */
.psra-blogchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.psra-blogchips a{font-size:13.5px;font-weight:600;color:var(--psra-ink-2);background:var(--psra-bg,#fff);border:1.5px solid var(--psra-line);padding:8px 16px;border-radius:999px;text-decoration:none;transition:border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.psra-blogchips a:hover{border-color:var(--psra-primary);color:var(--psra-primary-d);transform:translateY(-2px);box-shadow:0 8px 18px -10px color-mix(in srgb, var(--psra-primary) 50%, transparent)}
.psra-blogchips a.is-on{background:var(--psra-primary-100);border-color:transparent;color:var(--psra-primary);box-shadow:0 10px 22px -10px color-mix(in srgb, var(--psra-primary) 70%, transparent)}

.psra-blog__wrap.has-aside{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.psra-blog__main{min-width:0}

/* ---- featured (magazine overlay) ---- */
.psra-blog-hero{position:relative;display:block;min-height:400px;border-radius:24px;overflow:hidden;text-decoration:none;color:var(--psra-ink);margin-bottom:30px;box-shadow:0 30px 70px -34px rgba(0,0,0,.5);animation:psra-blog-rise .6s cubic-bezier(.16,1,.3,1) both}
.psra-blog-hero__media{position:absolute;inset:0;z-index:0;background:var(--psra-primary-dd);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.psra-blog-hero::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.12)}
.psra-blog-hero:hover .psra-blog-hero__media{transform:scale(1.05)}
.psra-blog-hero__badge{position:absolute;top:18px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--psra-primary);background:var(--psra-primary-100);padding:7px 13px;border-radius:999px;box-shadow:0 10px 22px -10px color-mix(in srgb, var(--psra-primary) 80%, transparent)}
.psra-blog-hero__badge svg{width:13px;height:13px}
.psra-blog-hero__body{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:400px;padding:34px;max-width:760px}
.psra-blog-hero__cat{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--psra-primary);background:rgba(230,199,102,.95);padding:5px 12px;border-radius:999px;margin-bottom:14px}
.psra-blog-hero__title{font-size:clamp(24px,3.2vw,38px);font-weight:800;letter-spacing:-.8px;line-height:1.12;color:var(--psra-ink);margin-bottom:12px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.psra-blog-hero__exc{font-size:15.5px;color:var(--psra-ink);line-height:1.6;margin-bottom:16px;max-width:600px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.psra-blog-hero__meta{font-size:13px;color:var(--psra-ink);margin-bottom:18px}
.psra-blog-hero__cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:14.5px;font-weight:700;color:var(--psra-ink);background:var(--psra-accent);padding:11px 20px;border-radius:12px;box-shadow:0 14px 30px -12px color-mix(in srgb, var(--psra-accent) 85%, transparent);transition:transform .2s ease,filter .2s ease}
.psra-blog-hero:hover .psra-blog-hero__cta{transform:translateX(3px);filter:brightness(1.05)}

/* ---- grid + premium card polish ---- */
.psra-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:24px}
.psra-blog__wrap.has-aside .psra-blog-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.psra-blog .psra-pcard{border-radius:18px;box-shadow:0 12px 30px -22px rgba(20,20,20,.5);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.psra-blog .psra-pcard:hover{transform:translateY(-6px);box-shadow:0 26px 50px -24px rgba(20,20,20,.45);border-color:var(--psra-primary-100)}
.psra-blog .psra-pcard__media{overflow:hidden}
.psra-blog .psra-pcard__media img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.psra-blog .psra-pcard:hover .psra-pcard__media img{transform:scale(1.07)}
.psra-blog .psra-pcard__cat{align-self:flex-start;color:#8a6a14;background:var(--psra-primary-soft);padding:4px 10px;border-radius:999px}
.psra-blog-grid>*{opacity:0;animation:psra-blog-rise .55s cubic-bezier(.16,1,.3,1) forwards}
.psra-blog-grid>*:nth-child(1){animation-delay:.05s}
.psra-blog-grid>*:nth-child(2){animation-delay:.10s}
.psra-blog-grid>*:nth-child(3){animation-delay:.15s}
.psra-blog-grid>*:nth-child(4){animation-delay:.20s}
.psra-blog-grid>*:nth-child(5){animation-delay:.25s}
.psra-blog-grid>*:nth-child(6){animation-delay:.30s}
.psra-blog-grid>*:nth-child(7){animation-delay:.35s}
.psra-blog-grid>*:nth-child(8){animation-delay:.40s}
.psra-blog-grid>*:nth-child(n+9){animation-delay:.44s}
@keyframes psra-blog-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---- pager ---- */
.psra-blogpager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:36px 0 0}
.psra-blogpager a,.psra-blogpager span,.psra-blogpager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 14px;border:1.5px solid var(--psra-line);border-radius:13px;text-decoration:none;color:var(--psra-ink-2);background:var(--psra-bg,#fff);font-weight:700;font-size:14.5px;transition:border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
.psra-blogpager a:hover{border-color:var(--psra-primary);color:var(--psra-primary-d);transform:translateY(-2px);box-shadow:0 10px 22px -12px color-mix(in srgb, var(--psra-primary) 60%, transparent)}
.psra-blogpager .cur,.psra-blogpager .current{background:var(--psra-primary-100);border-color:transparent;color:var(--psra-primary);box-shadow:0 10px 22px -10px color-mix(in srgb, var(--psra-primary) 70%, transparent)}
.psra-blogpager .dots{border:none;background:none}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){.psra-blog__bg i,.psra-blog__hero-in,.psra-blog-hero,.psra-blog-grid>*{animation:none!important;opacity:1!important;transform:none!important}}

/* ---- responsive ---- */
@media (max-width:900px){.psra-blog__wrap.has-aside{grid-template-columns:1fr}.psra-blog-hero{min-height:340px}.psra-blog-hero__body{min-height:340px;padding:26px}}
@media (max-width:560px){.psra-blog__hero{padding:36px 0 40px}.psra-blog-hero{min-height:300px}.psra-blog-hero__body{min-height:300px}}
/* ---- blog landing: intro / categories / CTA ---- */
.psra-blogintro{padding:34px 0 6px}
.psra-blogintro__in{max-width:840px}
.psra-blogintro__lede{margin:0;font-size:18px;line-height:1.65;color:var(--psra-ink-2)}
.psra-blogintro__mission{margin:16px 0 0;font-size:16px;line-height:1.6;color:var(--psra-muted)}
.psra-blogintro__mission strong{color:var(--psra-primary-d)}
.psra-blogcat-sec{padding:46px 0 6px}
.psra-blogcat__head{max-width:640px;margin:0 0 28px}
.psra-blogcat__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--psra-primary-d);margin-bottom:10px}
.psra-blogcat__eyebrow svg{color:var(--psra-primary);flex:none}
.psra-blogcat__h2{margin:0 0 8px;font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.5px;color:var(--psra-ink)}
.psra-blogcat__sub{margin:0;font-size:15.5px;color:var(--psra-muted)}
.psra-blogcat__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.psra-blogcat{position:relative;padding:24px 22px;background:var(--psra-bg,#fff);border:1px solid var(--psra-line);border-radius:18px;overflow:hidden;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease}
.psra-blogcat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--psra-primary);opacity:0;transition:opacity .2s ease}
.psra-blogcat:hover{transform:translateY(-4px);border-color:var(--psra-primary-100);box-shadow:0 24px 46px -30px rgba(20,20,20,.4)}
.psra-blogcat:hover::before{opacity:1}
.psra-blogcat__ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;color:var(--psra-primary-d);background:var(--psra-primary-soft);border:1px solid var(--psra-primary-100);margin-bottom:14px}
.psra-blogcat__title{margin:0 0 7px;font-size:16.5px;font-weight:800;line-height:1.3;color:var(--psra-ink)}
.psra-blogcat__desc{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--psra-muted)}
.psra-blogcat__topics{margin:0;font-size:12.5px;font-weight:600;color:var(--psra-primary-d);line-height:1.5}
.psra-blogcta{position:relative;overflow:hidden;margin:48px 0 0;padding:52px 0;color:#fff;background:#0d0d0d}
.psra-blogcta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:transparent}
.psra-blogcta__glow{position:absolute;right:-90px;bottom:-110px;width:340px;height:340px;border-radius:50%;background:transparent;pointer-events:none}
.psra-blogcta__in{position:relative;z-index:1;text-align:center;max-width:760px;margin:0 auto}
.psra-blogcta__h2{color:#fff;-webkit-text-fill-color:#fff;margin:0 0 12px;font-size:clamp(24px,3.4vw,34px);font-weight:800;letter-spacing:-.6px}
.psra-blogcta__sub{margin:0 auto 22px;font-size:16px;line-height:1.6;color:#c8c8c8;-webkit-text-fill-color:#c8c8c8;max-width:640px}
.psra-blogcta__feats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-bottom:26px}
.psra-blogcta__feat{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--psra-ink);-webkit-text-fill-color:#e8e8e8;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 14px}
.psra-blogcta__feat svg{color:var(--psra-primary-100);flex:none}
.psra-blogcta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.psra-blogcta__btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:999px;background:var(--psra-primary);color:var(--psra-primary)!important;-webkit-text-fill-color:var(--psra-primary)!important;font-size:14.5px;font-weight:800;text-decoration:none;box-shadow:0 16px 34px -16px color-mix(in srgb, var(--psra-primary) 80%, transparent);transition:transform .15s ease,box-shadow .2s ease}
.psra-blogcta__btn:hover{transform:translateY(-2px);box-shadow:0 20px 40px -16px color-mix(in srgb, var(--psra-primary) 90%, transparent)}
.psra-blogcta__btn svg{flex:none}
.psra-blogcta__sec{display:inline-flex;align-items:center;gap:7px;padding:13px 24px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff!important;-webkit-text-fill-color:#fff!important;font-size:14px;font-weight:700;text-decoration:none;transition:background .15s ease,border-color .15s ease}
.psra-blogcta__sec:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
@media(max-width:900px){.psra-blogcat__grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
@media(max-width:560px){.psra-blogcat__grid{grid-template-columns:1fr}}


/* ---- corrections de contraste --------------------------------------------
   Quatre blocs utilisaient --psra-ink (#161616) comme couleur de texte sur des
   surfaces sombres. */

/* Le bouton déclarait le même ton en fond et en texte, avec !important :
   l'étiquette n'était pas pâle, elle était exactement le bouton. Sur une
   section #0d0d0d, l'appel principal doit être clair. */
.psra-blogcta__btn{
  background:var(--psra-bg) !important;
  color:var(--psra-ink) !important;
  -webkit-text-fill-color:var(--psra-ink) !important;
}
.psra-blogcta__btn svg{ color:var(--psra-ink) }
.psra-blogcta__btn:hover{ background:#f1f1f1 !important }

/* Les pastilles translucides ne sont posées que sur du sombre. */
.psra-blogcta__feat{
  color:rgba(255,255,255,.88);
  -webkit-text-fill-color:rgba(255,255,255,.88);
}
.psra-blogcta__feat svg{ color:rgba(255,255,255,.6) }
.psra-blog__eyebrow{ color:#fff }
.psra-blog__eyebrow svg{ color:rgba(255,255,255,.7) }

/* La carte à la une pose son texte sur la photographie de l'article. Un gris
   foncé y est illisible sur la plupart des images : il faut du blanc, et un
   vrai dégradé plutôt qu'un voile uniforme à 12 %, qui n'assombrit pas assez
   le bas où le texte se trouve. */
.psra-blog-hero::after{
  background:linear-gradient(180deg,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.78) 100%);
}
.psra-blog-hero__title,
.psra-blog-hero__exc,
.psra-blog-hero__meta,
.psra-blog-hero__cat,
.psra-blog-hero__cta{ color:#fff }
.psra-blog-hero__exc{ color:rgba(255,255,255,.92) }
.psra-blog-hero__meta{ color:rgba(255,255,255,.78) }
.psra-blog-hero__cat{
  color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.24);
}
.psra-blog-hero__cta{ background:none; color:#fff }
.psra-blog-hero__cta svg{ color:#fff }

/* Le texte doit rester lisible même si l'article n'a pas d'image. */
.psra-blog-hero__media{ background-color:var(--psra-ink) }


/* ---- l'index, en page de journal -----------------------------------------
   Un bandeau, puis une page d'articles. */

.psra-blog__hero{
  background:none; color:var(--psra-ink);
  padding:52px 0 34px; border-bottom:1px solid var(--psra-line);
  margin-bottom:38px;
}
.psra-blog__hero *{ color:inherit }
.psra-blog__eyebrow{
  background:none; border:0; padding:0 0 9px; margin:0 0 16px;
  border-bottom:1px solid var(--psra-line);
  font-size:10.8px; font-weight:650; letter-spacing:.14em; text-transform:uppercase;
  color:var(--psra-muted);
}
.psra-blog__eyebrow svg{ color:var(--psra-muted) }
.psra-blog__h1{
  font-family:var(--psra-serif);
  font-size:clamp(36px,5.4vw,62px); font-weight:600;
  letter-spacing:-.014em; line-height:1.05; color:var(--psra-ink);
}
.psra-blog__sub{
  font-family:var(--psra-serif); font-style:italic; font-weight:400;
  font-size:clamp(17px,2vw,20px); line-height:1.5; color:var(--psra-ink-2);
  max-width:56ch;
}

/* L'article en tête : l'image à côté du texte, pas dessous. Un titre posé sur
   une photographie quelconque oblige à un dégradé sombre, et tous les articles
   finissent par se ressembler quelle que soit leur image. */
.psra-blog-hero{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:0 40px; align-items:center;
  min-height:0; border-radius:0; overflow:visible;
  padding:0 0 34px; margin:0 0 36px;
  border-bottom:1px solid var(--psra-line);
  background:none; color:var(--psra-ink);
}
.psra-blog-hero::after{ display:none }
.psra-blog-hero__media{
  position:relative; inset:auto; order:2;
  aspect-ratio:4/3; border-radius:var(--psra-radius-lg,16px);
  background-color:var(--psra-bg-2); background-size:cover; background-position:center;
}
.psra-blog-hero__body{
  position:static; order:1; min-height:0; padding:0;
  display:flex; flex-direction:column; align-items:flex-start;
}
.psra-blog-hero__badge{
  position:static; margin:0 0 14px;
  background:var(--psra-ink); color:var(--psra-bg);
  border:0; backdrop-filter:none;
}
.psra-blog-hero__cat{
  background:none; border:0; backdrop-filter:none; padding:0 0 8px; margin:0 0 13px;
  border-bottom:1px solid var(--psra-line);
  color:var(--psra-muted); font-size:10.8px; letter-spacing:.14em;
}
.psra-blog-hero__title{
  font-family:var(--psra-serif); font-weight:600;
  font-size:clamp(28px,3.9vw,44px); letter-spacing:-.014em; line-height:1.08;
  color:var(--psra-ink); margin-bottom:14px;
}
.psra-blog-hero__exc{
  font-family:var(--psra-serif); font-style:italic; font-weight:400;
  font-size:clamp(16px,1.7vw,18.5px); line-height:1.55;
  color:var(--psra-ink-2); margin-bottom:16px; max-width:46ch;
}
.psra-blog-hero__meta{ color:var(--psra-muted); font-size:12.4px; margin-bottom:18px }
.psra-blog-hero__cta{
  color:var(--psra-ink); background:none;
  border-bottom:1px solid var(--psra-ink); padding-bottom:2px;
}
.psra-blog-hero__cta svg{ color:var(--psra-ink) }
.psra-blog-hero:hover .psra-blog-hero__media{ transform:none }

/* La grille : des filets entre les rangées plutôt que des boîtes, pour que la
   page se lise comme une feuille et non comme un plateau de tuiles. */
@media (min-width:861px){
  .psra-blog-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0 36px;
  }
  .psra-blog-grid > *{
    padding:30px 0 32px;
    border-top:1px solid var(--psra-line);
  }
  .psra-blog-grid > *:nth-child(-n+3){ border-top:0; padding-top:0 }
}

@media (max-width:860px){
  .psra-blog-hero{ grid-template-columns:1fr; gap:18px 0 }
  .psra-blog-hero__media{ order:1 }
  .psra-blog-hero__body{ order:2 }
}


/* ---- les filtres et la pagination ----------------------------------------
   .psra-blogchips__c n'avait aucune règle : le filtre s'affichait comme un
   lien brut. */
.psra-blogchips{ gap:0 22px; margin:0 0 30px; padding:0 0 14px; border-bottom:1px solid var(--psra-line) }
.psra-blogchips a{
  font-size:11.4px; font-weight:650; letter-spacing:.11em; text-transform:uppercase;
  color:var(--psra-muted); text-decoration:none; padding:0 0 3px;
  border-bottom:2px solid transparent; transition:color .18s ease, border-color .18s ease;
}
.psra-blogchips a:hover{ color:var(--psra-ink) }
.psra-blogchips a.is-on{ color:var(--psra-ink); border-bottom-color:var(--psra-ink) }

.psra-blogpager{ gap:0 4px; margin:52px 0 0; padding-top:26px; border-top:1px solid var(--psra-line) }
.psra-blogpager a, .psra-blogpager span{
  min-width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  font-size:13.6px; font-weight:600; border-radius:50%;
  color:var(--psra-muted); text-decoration:none;
}
.psra-blogpager a:hover{ color:var(--psra-ink); background:var(--psra-bg-soft) }
.psra-blogpager .current, .psra-blogpager span[aria-current]{
  background:var(--psra-ink); color:var(--psra-bg);
}


/* Les calques décoratifs du bandeau étaient conçus pour luire sur un fond
   sombre. Sur du blanc ils salissent ou ne se voient pas. */
.psra-blog__bg{ display:none }
.psra-blog__hero::before{ display:none }

/* Le dernier trait doré de la page devient le filet employé partout ailleurs. */
.psra-blog__hero::after{
  height:1px; background:var(--psra-line);
}