/* =========================================================
   PAGE PORTRAIT INDIVIDUELLE (single-portrait.php)
   La section "Autres rencontres" réutilise .cards/.card de
   rubrique-articles.css et .rubrique-head de la même feuille.
   ========================================================= */

/* ---------- FIL D'ARIANE ---------- */
.breadcrumb{
  padding:20px 0 0;
  font-size:12.5px;
  color:var(--ink-soft);
}
.breadcrumb a:hover{ color:var(--brass-dark); }
.breadcrumb .sep{ margin:0 6px; color:#a89f88; }

/* ---------- BANDEAU PHOTO PLEIN ÉCRAN ---------- */
.portrait-banner{
  position:relative;
  height:440px;
  margin-top:20px;
  background:linear-gradient(150deg, var(--copper), var(--ink) 130%);
  display:flex;
  align-items:flex-end;
}
.portrait-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg, rgba(24,38,32,0.78) 0%, rgba(24,38,32,0) 55%);
}
.portrait-banner-content{
  position:relative;
  z-index:1;
  padding:0 0 40px;
  color:var(--paper);
}
.portrait-banner .eyebrow{ color:#d8b98c; margin-bottom:10px; display:block; }
.portrait-banner h1{
  color:var(--paper);
  font-size:40px;
  margin-bottom:8px;
}
.portrait-banner-role{
  font-size:15px;
  color:#d8d4c4;
}

/* ---------- CITATION EXERGUE ---------- */
.portrait-quote{
  padding:40px 0;
  border-bottom:1px solid var(--line);
}
.portrait-quote p{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:24px;
  line-height:1.5;
  max-width:52ch;
  color:var(--ink);
}
.portrait-quote p::before{ content:"« "; color:var(--copper); }
.portrait-quote p::after{ content:" »"; color:var(--copper); }

/* ---------- GRILLE SOMMAIRE + CONTENU ---------- */
.portrait-body-grid{
  display:grid;
  grid-template-columns:200px 1fr;
  gap:56px;
  align-items:start;
  padding:44px 0;
}

.portrait-body-solo{
  padding:44px 0;
}
.portrait-toc{
  position:sticky;
  top:24px;
  border-left:2px solid var(--line);
  padding-left:18px;
}
.portrait-toc .eyebrow{ display:block; margin-bottom:14px; }
.portrait-toc ul{ list-style:none; }
.portrait-toc li{ margin-bottom:10px; }
.portrait-toc a{
  font-size:13px;
  color:var(--ink-soft);
  line-height:1.4;
  display:block;
}
.portrait-toc a:hover{ color:var(--brass-dark); }

/* ---------- CORPS : QUESTIONS EN H2 STYLISÉES / RÉPONSES ---------- */
.portrait-body{
  max-width:640px;
  font-size:17px;
  line-height:1.75;
}
.portrait-body > *:first-child{ margin-top:0; }
.portrait-body h2{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-weight:400;
  font-size:21px;
  color:var(--copper);
  margin:36px 0 12px;
  scroll-margin-top:24px;
}
.portrait-body h2:first-child{ margin-top:0; }
.portrait-body h3{
  font-size:18px;
  margin:28px 0 12px;
  scroll-margin-top:24px;
}
.portrait-body p{ margin-bottom:16px; color:var(--ink); }
.portrait-body ul,
.portrait-body ol{ margin:0 0 16px 22px; }
.portrait-body a{
  color:var(--brass-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}

@media (max-width:900px){
  .portrait-banner{ height:320px; }
  .portrait-body-grid{ grid-template-columns:1fr; }
  .portrait-toc{
    position:static;
    border-left:none;
    border:1px solid var(--line);
    padding:18px;
    border-radius:4px;
  }
}
@media (max-width:600px){
  .portrait-banner{ height:260px; }
  .portrait-banner h1{ font-size:28px; }
  .portrait-quote p{ font-size:20px; }
  .portrait-body h2{ font-size:18px; }
  .portrait-body{ font-size:16px; }
}