/* =============================================================
   Perspectives — rubrique éditoriale de Y
   Étend /style.css (mêmes tokens). Fichier statique, non généré.
   ============================================================= */

/* ---------- Index de la rubrique ---------- */
.persp-hero{ padding:clamp(150px,22vh,260px) 0 clamp(30px,5vh,60px); }
.persp-hero .lead{ max-width:52ch; margin-top:clamp(20px,3.5vh,32px); }

.persp-list{ margin-top:clamp(40px,7vh,80px); border-top:1px solid var(--line); }
.persp-item{
  display:block; padding:clamp(26px,4vh,40px) 0; border-bottom:1px solid var(--line);
  transition:background .5s var(--ease);
}
.persp-item:hover{ background:linear-gradient(90deg, rgba(243,242,237,.02), transparent 70%); }
.persp-item__meta{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:12px; display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center;
}
.persp-item__meta .sep{ opacity:.5; }
.persp-item__title{
  font-size:clamp(21px,2.6vw,30px); font-weight:500; letter-spacing:-.02em; line-height:1.2;
  color:var(--ink); margin-bottom:12px;
}
.persp-item:hover .persp-item__title{ color:var(--ink); }
.persp-item__desc{ color:var(--ink-soft); font-size:clamp(15px,1.8vw,17px); line-height:1.55; max-width:64ch; }
.persp-item__tags{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }

.persp-tag{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); padding:5px 11px; border:1px solid var(--line); border-radius:100px;
}

.persp-empty{ margin-top:clamp(40px,7vh,80px); color:var(--ink-soft); font-size:17px; }

/* ---------- Page article ---------- */
.persp-article{ padding-top:clamp(140px,20vh,230px); }
.persp-article__inner{ max-width:none; }
.persp-crumb{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:26px;
}
.persp-crumb a{ color:var(--ink-soft); transition:color .3s var(--ease); }
.persp-crumb a:hover{ color:var(--ink); }
.persp-crumb .sep{ margin:0 8px; opacity:.5; }

.persp-head{ max-width:720px; }
.persp-head__eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:22px;
}
.persp-head__eyebrow .sep{ opacity:.5; }
.persp-title{
  font-size:clamp(30px,5.2vw,52px); font-weight:400; letter-spacing:-.035em; line-height:1.08;
  color:var(--ink); text-wrap:balance;
}
.persp-head__by{
  margin-top:clamp(22px,3.5vh,32px); display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  color:var(--ink-soft); font-size:14.5px;
}
.persp-head__tags{ display:flex; flex-wrap:wrap; gap:8px; }

.persp-demo{
  max-width:720px; margin:clamp(22px,3.5vh,30px) 0 0;
  padding:12px 16px; border:1px solid var(--accent); border-radius:4px;
  background:var(--accent-dim); color:var(--ink);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em;
}

/* ---------- Corps de lecture (.prose) ---------- */
.prose{
  max-width:720px; margin-top:clamp(38px,6vh,64px);
  color:var(--ink-soft);
  font-size:clamp(16.5px,1.15rem,18.5px); line-height:1.75; letter-spacing:-.003em;
}
.prose > * + *{ margin-top:1.35em; }
.prose h2, .prose h3, .prose h4{ color:var(--ink); letter-spacing:-.02em; line-height:1.25; scroll-margin-top:90px; }
.prose h2{ font-size:clamp(23px,3vw,30px); font-weight:500; margin-top:2em; }
.prose h3{ font-size:clamp(19px,2.3vw,23px); font-weight:500; margin-top:1.7em; }
.prose h4{ font-size:clamp(16.5px,1.9vw,19px); font-weight:600; margin-top:1.5em; }
.prose h2 .anchor, .prose h3 .anchor{ opacity:0; margin-left:.35em; color:var(--ink-faint); text-decoration:none; transition:opacity .2s var(--ease); }
.prose h2:hover .anchor, .prose h3:hover .anchor{ opacity:1; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose em{ font-style:italic; }
.prose a{ color:var(--ink); border-bottom:1px solid var(--ink-faint); transition:border-color .3s var(--ease); }
.prose a:hover{ border-color:var(--ink); }

.prose ul, .prose ol{ padding-left:1.35em; }
.prose li{ margin-top:.5em; }
.prose li::marker{ color:var(--ink-faint); }

.prose blockquote{
  margin-left:0; padding:.1em 0 .1em 1.25em; border-left:2px solid var(--line);
  color:var(--ink); font-style:italic;
}
.prose blockquote p{ margin-top:.6em; }

.prose code{
  font-family:var(--mono); font-size:.86em;
  background:rgba(243,242,237,.06); padding:.15em .4em; border-radius:4px;
  color:var(--ink);
}
.prose pre{
  background:var(--bg-2); border:1px solid var(--line); border-radius:6px;
  padding:clamp(16px,2.4vw,22px); overflow-x:auto;
  font-size:14px; line-height:1.65; -webkit-overflow-scrolling:touch;
}
.prose pre code{ background:none; padding:0; border-radius:0; font-size:inherit; color:var(--ink-soft); }

.prose img{ max-width:100%; height:auto; border-radius:6px; border:1px solid var(--line-2); display:block; }
.prose figure{ margin-left:0; margin-right:0; }
.prose figcaption{ margin-top:12px; color:var(--ink-faint); font-size:13.5px; text-align:center; }

.prose table{ width:100%; border-collapse:collapse; font-size:15px; }
.prose thead th{
  text-align:left; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); font-weight:400; padding:0 16px 12px; border-bottom:1px solid var(--line);
}
.prose tbody td{ padding:14px 16px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top; }

.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }

/* encadré technique : <aside class="callout"> … </aside> */
.prose .callout{
  padding:clamp(18px,2.4vw,24px); border:1px solid var(--line); border-radius:6px;
  background:rgba(243,242,237,.02); color:var(--ink-soft); font-size:15.5px; line-height:1.6;
}
.prose .callout > * + *{ margin-top:.8em; }
.prose .callout strong{ color:var(--ink); }
.prose .callout--accent{ border-left:2px solid var(--accent); }

/* ---------- Pied d'article : navigation ---------- */
.persp-foot{
  max-width:720px; margin-top:clamp(50px,9vh,96px);
  padding-top:clamp(26px,4vh,36px); border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center;
}
.persp-foot a{ color:var(--ink-soft); font-size:14.5px; transition:color .3s var(--ease); }
.persp-foot a:hover{ color:var(--ink); }

/* ---------- Bloc « dernières perspectives » sur la home ---------- */
.home-persp__grid{ margin-top:clamp(40px,7vh,72px); display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
.home-persp__card{
  padding:clamp(24px,2.6vw,34px) clamp(20px,2vw,28px); border:1px solid var(--line); margin:-.5px;
  display:flex; flex-direction:column; gap:12px; transition:background .5s var(--ease);
}
.home-persp__card:hover{ background:rgba(243,242,237,.02); }
.home-persp__date{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.home-persp__title{ font-size:clamp(16px,1.9vw,19px); font-weight:500; letter-spacing:-.01em; color:var(--ink); line-height:1.3; }
.home-persp__more{ margin-top:clamp(30px,5vh,44px); }
.home-persp__more a{ color:var(--ink-soft); border-bottom:1px solid var(--line); padding-bottom:4px; transition:color .3s var(--ease), border-color .3s var(--ease); }
.home-persp__more a:hover{ color:var(--ink); border-color:rgba(243,242,237,.35); }

@media (max-width:760px){
  .home-persp__grid{ grid-template-columns:1fr; }
  .prose table{ display:block; overflow-x:auto; }
}