/* ==========================================================
   CHRONIQUES DE RUE (blog) — Cirkul'R — feuille de style
   Chargée en plus de style.css sur les pages de /blog/.
   ========================================================== */

.chronique{
  max-width:760px;
  margin:0 auto;
  padding:clamp(28px, 5vw, 56px) clamp(16px, 5vw, 32px) clamp(60px, 8vw, 100px);
}

/* ---------- FIL D'ARIANE ---------- */
.ariane{
  font-family:var(--font-corps);
  font-size:0.95rem;
  color:rgba(243,233,214,0.6);
  margin-bottom:clamp(24px, 4vw, 40px);
}
.ariane ol{ list-style:none; display:flex; flex-wrap:wrap; gap:0.4em; }
.ariane li + li::before{ content:"›"; margin-right:0.4em; color:var(--bronze); }
.ariane a{ color:var(--or); text-decoration:underline; text-underline-offset:0.18em; }

/* ---------- EN-TÊTE D'ARTICLE ---------- */
.chronique__entete{ text-align:center; margin-bottom:clamp(30px, 5vw, 48px); }

.chronique__rubrique{
  font-family:var(--font-display);
  font-size:0.8rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--bronze-clair);
  margin-bottom:0.8em;
}

.chronique__titre{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.8rem, 4.6vw, 2.9rem);
  line-height:1.2;
  letter-spacing:0.04em;
  color:var(--parchemin);
  margin-bottom:0.6em;
}

.chronique__meta{
  font-family:var(--font-corps);
  font-style:italic;
  font-size:1rem;
  color:rgba(243,233,214,0.6);
}

.chronique__chapo{
  font-family:var(--font-corps);
  font-style:italic;
  font-size:clamp(1.2rem, 2vw, 1.4rem);
  line-height:1.6;
  color:var(--or-vif);
  margin:clamp(24px, 4vw, 36px) 0;
}

/* ---------- CORPS DE TEXTE ---------- */
.chronique h2{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(1.25rem, 2.6vw, 1.6rem);
  line-height:1.3;
  letter-spacing:0.04em;
  color:var(--or-vif);
  margin:clamp(44px, 7vw, 64px) 0 0.8em;
  padding-top:0.9em;
  border-top:1px solid rgba(217,179,96,0.2);
  scroll-margin-top:calc(var(--hauteur-menu) + 16px);
}

.chronique h3{
  font-family:var(--font-display);
  font-weight:500;
  font-size:1.1rem;
  letter-spacing:0.04em;
  color:var(--or);
  margin:1.8em 0 0.6em;
}

.chronique p,
.chronique li{
  font-family:var(--font-corps);
  font-size:1.18rem;
  line-height:1.75;
  color:rgba(243,233,214,0.88);
}

.chronique p{ margin-bottom:1.1em; }
.chronique ul, .chronique ol{ margin:0 0 1.2em 1.3em; }
.chronique li{ margin-bottom:0.4em; }
.chronique strong{ color:var(--parchemin); font-weight:600; }

.chronique a{
  color:var(--or);
  text-decoration:underline;
  text-underline-offset:0.18em;
  transition:color 0.3s ease;
}
.chronique a:hover,
.chronique a:focus-visible{ color:var(--or-vif); }

/* ---------- SOMMAIRE ---------- */
.sommaire{
  background:var(--nuit-metal);
  border:1px solid rgba(217,179,96,0.2);
  padding:1.2em 1.4em;
  margin:0 0 1.5em;
}
.sommaire__titre{
  font-family:var(--font-display);
  font-size:0.85rem !important;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--bronze-clair) !important;
  margin-bottom:0.6em !important;
}
.sommaire ol{ margin:0 0 0 1.3em; }
.sommaire li{ font-size:1.08rem; margin-bottom:0.25em; }

/* ---------- FIGURES ---------- */
.chronique figure{ margin:2em 0; }
.chronique figure img{
  width:100%;
  height:auto;
  border:1px solid rgba(217,179,96,0.2);
  background:var(--nuit-metal);
}
.chronique figure.portrait img{ max-width:480px; margin:0 auto; }
.chronique figcaption{
  font-family:var(--font-corps);
  font-style:italic;
  font-size:0.98rem;
  line-height:1.5;
  color:rgba(243,233,214,0.65);
  margin-top:0.6em;
  text-align:center;
}

/* ---------- ENCADRÉS ---------- */
.encadre{
  border-left:3px solid var(--bronze);
  background:rgba(18,22,31,0.8);
  padding:1.2em 1.4em;
  margin:2em 0;
}
.encadre__titre{
  font-family:var(--font-display) !important;
  font-size:1rem !important;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--or-vif) !important;
  margin:0 0 0.8em !important;
  padding:0 !important;
  border:0 !important;
}
.encadre li{ font-size:1.08rem; }

.encadre--cirkulr{
  border-left-color:var(--or-vif);
  background:linear-gradient(135deg, rgba(169,116,63,0.18), rgba(18,22,31,0.9));
}

/* ---------- SOURCES / CRÉDITS ---------- */
.sources li, .credits li{
  font-size:0.98rem;
  line-height:1.55;
  color:rgba(243,233,214,0.72);
  overflow-wrap:anywhere;
}

/* ---------- INDEX DU BLOG ---------- */
.liste-chroniques{ list-style:none; margin:0 !important; }
.carte-chronique{
  border:1px solid rgba(217,179,96,0.2);
  background:var(--nuit-metal);
  margin-bottom:1.6em;
  overflow:hidden;
}
.carte-chronique img{ width:100%; height:auto; }
.carte-chronique__corps{ padding:1.2em 1.4em 1.4em; }
.carte-chronique h2{
  margin:0 0 0.5em;
  padding:0;
  border:0;
  font-size:clamp(1.15rem, 2.4vw, 1.4rem);
}
.carte-chronique h2 a{ text-decoration:none; color:var(--or-vif); }
.carte-chronique h2 a:hover{ text-decoration:underline; }
.carte-chronique p{ font-size:1.08rem; margin-bottom:0.6em; }
.carte-chronique--avenir{ opacity:0.7; }