/* =====================================================
   LE 150 — Kit UI des pages piliers (hubs éditoriaux)
   Cohérent DA crème / encre / ambre. Assets locaux.
   ===================================================== */

.pillar-hero {
  padding: calc(80px + var(--spacing-lg)) 0 var(--spacing-lg);
  background: var(--noir);
  color: var(--blanc);
}
.pillar-hero .breadcrumb { font-family: var(--font-sans); font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin-bottom: var(--spacing-sm); }
.pillar-hero .breadcrumb a { color: var(--or-clair); }
.pillar-hero .breadcrumb .sep { margin: 0 8px; color: rgba(255,255,255,0.3); }
.pillar-hero .overline { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--or-clair); display: block; margin-bottom: var(--spacing-xs); }
.pillar-hero h1 { color: var(--blanc); margin-bottom: var(--spacing-sm); max-width: 18ch; }
.pillar-hero .lead { color: rgba(255,255,255,0.78); font-size: 1.25rem; max-width: 60ch; }

.pillar-body { padding: var(--spacing-xl) 0; }
.pillar-body .container { max-width: 820px; }

.tldr {
  background: var(--gris-clair);
  border: 1px solid var(--gris-moyen);
  border-left: 4px solid var(--or);
  border-radius: 12px;
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.tldr h2 { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--noir); margin-bottom: var(--spacing-sm); }
.tldr ul { display: grid; gap: 10px; }
.tldr li { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; padding-left: 22px; position: relative; color: var(--noir); }
.tldr li::before { content: "150"; position: absolute; left: 0; top: 1px; font-family: var(--font-serif); font-size: 0.7rem; font-weight: 700; color: var(--or); }

.pillar-section { margin-bottom: var(--spacing-lg); }
.pillar-section h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: var(--spacing-sm); }
.pillar-section h3 { font-family: var(--font-serif); font-size: 1.3rem; margin: var(--spacing-md) 0 var(--spacing-xs); }
.pillar-section p { margin-bottom: var(--spacing-sm); }
.pillar-section ul.bullets { margin: var(--spacing-sm) 0; display: grid; gap: 8px; }
.pillar-section ul.bullets li { position: relative; padding-left: 20px; font-size: 1.08rem; }
.pillar-section ul.bullets li::before { content: "—"; position: absolute; left: 0; color: var(--or); }

.pillar-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--spacing-sm); margin: var(--spacing-md) 0; }
.pillar-card {
  display: block;
  background: var(--blanc);
  border: 1px solid var(--gris-moyen);
  border-radius: 12px;
  padding: var(--spacing-md);
  transition: var(--transition);
}
.pillar-card:hover { border-color: var(--or); box-shadow: 0 8px 30px rgba(27,26,24,0.08); transform: translateY(-2px); }
.pillar-card .k { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--or); }
.pillar-card h3 { font-family: var(--font-serif); font-size: 1.2rem; margin: 6px 0; }
.pillar-card p { font-family: var(--font-sans); font-size: 0.92rem; color: var(--gris-texte); margin: 0; }

.next-block { background: var(--creme); border: 1px solid var(--gris-moyen); border-radius: 12px; padding: var(--spacing-md); margin-top: var(--spacing-lg); }
.next-block h2 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: var(--spacing-sm); }
.next-list { display: grid; gap: 0; margin-bottom: var(--spacing-md); }
.next-list li { font-family: var(--font-sans); padding: 12px 0; border-bottom: 1px dashed var(--gris-moyen); display: flex; gap: 10px; align-items: baseline; }
.next-list li:last-child { border-bottom: none; }
.next-list li .n { font-family: var(--font-serif); color: var(--or); font-weight: 700; }
.btn-pillar { display: inline-block; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em; color: var(--blanc); background: var(--or); border-radius: 9px; padding: 12px 22px; transition: var(--transition); }
.btn-pillar:hover { background: var(--rouge-editorial); }
.btn-pillar.ghost { background: transparent; color: var(--noir); border: 1px solid var(--gris-moyen); }
.btn-pillar.ghost:hover { border-color: var(--or); color: var(--or); }