/* pillars.css — styles partagés des pages piliers Pleine Nuit (DA nocturne dark).
   Consomme les tokens :root du styles.css du front. */

.pillar-hero { padding: 4.5rem 0 2rem; text-align: center; }
.pillar-hero .overline { color: var(--primary); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; display: block; margin-bottom: .8rem; }
.pillar-hero h1 { font-size: 2.9rem; max-width: 760px; margin: 0 auto 1.2rem; line-height: 1.15; }
.pillar-hero .lead { max-width: 680px; margin: 0 auto; color: var(--text-light); font-size: 1.2rem; line-height: 1.6; }

.pillar-wrap { max-width: 820px; margin: 0 auto 4rem; padding: 0 20px; }

.pillar-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2.5rem 0 3rem; }
.pillar-toc h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: 1rem; }
.pillar-toc ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 2rem; }
.pillar-toc a { color: var(--text); border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.pillar-toc a:hover { color: var(--primary); border-bottom-color: var(--primary); }

.pillar-section { margin: 2.75rem 0; }
.pillar-section h2 { font-size: 1.9rem; margin-bottom: 1rem; scroll-margin-top: 90px; }
.pillar-section h3 { font-size: 1.3rem; margin: 1.75rem 0 .6rem; }
.pillar-section p { margin-bottom: 1.1rem; line-height: 1.8; }
.pillar-section ul, .pillar-section ol { margin: 0 0 1.2rem 1.3rem; line-height: 1.8; }
.pillar-section li { margin-bottom: .4rem; }

.verdict { background: var(--surface); border-left: 4px solid var(--primary); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.3rem 1.6rem; margin: 1.5rem 0; }
.verdict strong { color: var(--primary); }

.pillar-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.pillar-table th, .pillar-table td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.pillar-table th { font-family: var(--font-serif); color: var(--text); background: var(--fill); }

.ymyl-callout { background: var(--callout-bg, #2A2410); color: var(--callout-text, #E8C77A); border: 1px solid var(--callout-border, #4A3F1C); border-radius: 6px; padding: 1.1rem 1.4rem; margin: 1.75rem 0; font-size: .92rem; line-height: 1.6; }

.cta-box { background: linear-gradient(135deg, var(--secondary) 0%, var(--bg) 100%); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; margin: 2.75rem 0; text-align: center; }
.cta-box h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.cta-box p { color: var(--text-light); margin-bottom: 1.25rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.read-next { margin: 3rem 0; }
.read-next h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.read-next-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.read-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.3rem; }
.read-card .kicker { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); display: block; margin-bottom: .4rem; }
.read-card p { color: var(--text); font-weight: 600; line-height: 1.4; }
.read-next .cat-link { display: inline-block; margin-top: 1.25rem; color: var(--primary); font-weight: 600; }

@media (max-width: 640px) {
    .pillar-hero h1 { font-size: 2.1rem; }
    .pillar-toc ul, .read-next-grid { grid-template-columns: 1fr; }
}