/* ==========================================================
   BLOG · pages /blog/. Reprend le design system de style.css.
   ========================================================== */

.bhead{padding:clamp(120px,14vw,180px) 0 clamp(36px,5vw,56px);position:relative;z-index:1}
.bhead .h2{max-width:18ch}

.crumb{
  display:flex;gap:8px;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--grey-2);margin-bottom:22px;
}
.crumb a:hover{color:var(--navy)}
.crumb i{font-style:normal;opacity:.5}

/* ---------- liste d'articles ---------- */
.posts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));
  gap:16px;padding-bottom:clamp(60px,8vw,110px);position:relative;z-index:1;
}
.pcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,3vw,30px);display:flex;flex-direction:column;gap:11px;
  transition:transform .24s var(--ease),border-color .24s,box-shadow .24s;
}
.pcard:hover{
  transform:translateY(-5px);border-color:rgba(117,132,214,.4);
  box-shadow:0 28px 52px -38px rgba(43,54,84,.62);
}
.pcard__cat{
  font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  background:linear-gradient(100deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.pcard__t{
  margin:0;font-size:clamp(17px,1.9vw,21px);font-weight:800;
  letter-spacing:-.028em;line-height:1.28;color:var(--navy);
}
.pcard__x{margin:0;font-size:14px;line-height:1.6;color:var(--grey);font-weight:500}
.pcard__m{margin-top:auto;padding-top:8px;font-size:12px;font-weight:700;color:var(--grey-2)}

.postsoon{
  text-align:center;font-size:13px;font-weight:600;color:var(--grey-2);
  padding-bottom:clamp(60px,8vw,110px);
}

/* ---------- article ---------- */
.art{position:relative;z-index:1;padding:clamp(120px,14vw,180px) 0 clamp(50px,7vw,90px)}
.art__wrap{max-width:720px;margin:0 auto}
.art__h1{
  font-size:clamp(30px,4.6vw,52px);font-weight:800;letter-spacing:-.04em;
  line-height:1.08;color:var(--navy);margin:0 0 20px;
}
.pm{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  font-size:12.5px;font-weight:700;color:var(--grey-2);
  padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid var(--line);
}
.pm__cat{
  background:linear-gradient(100deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.14em;text-transform:uppercase;font-size:10.5px;
}

.art__body{font-size:clamp(15px,1.55vw,17.5px);line-height:1.75;color:var(--ink);font-weight:500}
.art__body > *{margin:0}
.art__body > * + *{margin-top:22px}
.art__body h2{
  font-size:clamp(21px,2.6vw,29px);font-weight:800;letter-spacing:-.03em;
  line-height:1.2;color:var(--navy);margin-top:clamp(40px,5vw,58px);
}
.art__body h3{
  font-size:clamp(17px,1.9vw,21px);font-weight:800;letter-spacing:-.02em;
  color:var(--navy);margin-top:clamp(30px,4vw,42px);
}
.art__body strong{font-weight:800;color:var(--navy)}
.art__body a{
  color:var(--violet);font-weight:700;
  box-shadow:inset 0 -1px 0 rgba(117,132,214,.4);transition:box-shadow .2s;
}
.art__body a:hover{box-shadow:inset 0 -2px 0 var(--violet)}
.art__body ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:11px}
.art__body ul li{position:relative;padding-left:22px}
.art__body ul li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
}
.art__body blockquote{
  margin:clamp(30px,4vw,42px) 0;padding:clamp(20px,2.6vw,28px);
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--violet);
  border-radius:0 var(--r) var(--r) 0;
  font-size:clamp(16px,1.8vw,20px);font-weight:700;letter-spacing:-.02em;
  line-height:1.45;color:var(--navy);
}

/* ---------- a lire ensuite ---------- */
.relwrap{position:relative;z-index:1;padding:clamp(44px,6vw,74px) 0;border-top:1px solid var(--line)}
.relwrap h2{
  font-size:clamp(18px,2.1vw,24px);font-weight:800;letter-spacing:-.025em;
  color:var(--navy);margin:0 0 22px;
}
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}

/* ---------- CTA d'article ---------- */
.bcta{
  position:relative;z-index:1;margin:clamp(40px,5vw,64px) auto 0;max-width:720px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,3.6vw,40px);text-align:center;
  box-shadow:0 30px 60px -50px rgba(43,54,84,.6);
}
.bcta h2{
  margin:0 0 10px;font-size:clamp(20px,2.4vw,27px);font-weight:800;
  letter-spacing:-.03em;color:var(--navy);
}
.bcta p{margin:0 0 22px;font-size:14.5px;color:var(--grey);font-weight:500;line-height:1.6}

@media(max-width:620px){
  .bhead{padding-top:clamp(104px,22vw,140px)}
}