/* ============================================================
   Twin Peak Lab — Blog
   S'appuie sur les variables et composants de style.css.
   ============================================================ */

/* ----- Lien RSS discret ---------------------------------- */
.blog-rss {
    font-family: var(--font-mono);
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted);
    display: inline-flex; align-items: center; gap: 7px;
}
.blog-rss:hover { color: var(--accent); text-decoration: none; }
.blog-rss svg { width: 13px; height: 13px; }

/* ----- Grille des articards ------------------------------ */
.blog-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px;
    max-width: 980px; margin: 0 auto;
}
@media (max-width: 760px) { .blog-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ----- Carte article ------------------------------------- */
.post-card {
    display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; color: inherit;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.post-card:hover {
    border-color: #d8d8d3; transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(22, 25, 29, .07); text-decoration: none;
}
.post-thumb {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent-dark) 100%);
    position: relative;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-thumb .post-thumb-mark {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    opacity: .9;
}
.post-thumb .post-thumb-mark svg { width: 64px; height: auto; }
.post-thumb .video-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(22, 25, 29, .5); color: #fff;
    box-shadow: 0 1px 3px rgba(22, 25, 29, .25);
}
.post-thumb .video-badge svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.post-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.post-tag {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.post-card h3 { font-size: 1.18rem; line-height: 1.25; margin: 0 0 .5rem; }
.post-excerpt { color: var(--muted); font-size: .95rem; margin: 0 0 1.1rem; }
.post-meta {
    margin-top: auto; font-family: var(--font-mono); font-size: 12px;
    color: var(--muted); display: flex; gap: 9px; align-items: center;
}
.post-meta .dot { opacity: .5; }

/* ----- En-tête d'article --------------------------------- */
.post-hero { max-width: 760px; margin: 0 auto; }
.post-hero .post-tag { margin-bottom: 14px; }
.post-hero h1 { margin: 0 0 .4rem; }
.post-hero .post-meta { justify-content: flex-start; margin: 16px 0 0; }
.post-lead { font-size: 1.18rem; color: var(--muted); max-width: 760px; margin: 1.1rem auto 0; line-height: 1.5; }

/* ----- Visuel d'article ---------------------------------- */
.post-figure { max-width: 900px; margin: 44px auto; }
.post-figure img, .post-figure .ph {
    width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius);
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent-dark) 100%);
}
.post-figure figcaption {
    font-family: var(--font-mono); font-size: 12px; color: var(--muted);
    margin-top: 10px; text-align: center;
}

/* ----- Vidéo : clic pour lire, sans cookie (youtube-nocookie) ----- */
.video-embed {
    position: relative; max-width: 760px; margin: 40px auto 12px;
    aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
    background: #000; cursor: pointer;
}
.video-embed .video-poster {
    width: 100%; height: 100%; object-fit: cover; opacity: .82;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent-dark) 100%);
}
.video-embed .video-play {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    transition: transform .15s ease;
}
.video-embed:hover .video-play { transform: scale(1.06); }
.video-embed .video-play svg { width: 72px; height: 72px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45)); }
.video-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-note {
    font-family: var(--font-mono); font-size: 11px; color: var(--muted);
    text-align: center; margin: 0 auto 40px;
}

/* ----- Formules (rendu maison, sans dépendance) ---------- */
.formula {
    font-family: var(--font-mono);
    background: var(--paper-warm); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 16px 22px; margin: 24px auto;
    max-width: 720px; text-align: center; font-size: 1.06rem; line-height: 1.5;
    color: var(--ink); overflow-x: auto;
}
.formula.key { border: 2px solid var(--accent); background: var(--paper); font-size: 1.15rem; }
.formula .lbl { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.formula sub { font-size: .72em; }
.vec { font-weight: 700; font-style: normal; }   /* vecteur en gras (notation alternative aux flèches) */

/* liste « où : … » sous une formule */
.where { max-width: 720px; margin: -8px auto 24px; padding: 0; list-style: none; }
.where li { font-size: .92rem; color: var(--muted); margin: 0 0 .35rem; padding-left: 1.1rem; position: relative; }
.where li::before { content: "·"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.where b, .where .sym { font-family: var(--font-mono); color: var(--ink); font-weight: 600; font-style: normal; }

/* ----- Tableaux ------------------------------------------ */
.post-table-wrap { overflow-x: auto; margin: 28px auto; max-width: 840px; }
table.blog-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.blog-table caption { font-family: var(--font-mono); font-size: 12px; color: var(--muted); text-align: left; margin-bottom: 10px; }
.blog-table th, .blog-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.blog-table thead th {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--line);
    font-weight: 600;
}
.blog-table td.num, .blog-table th.num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.blog-table tbody tr:hover { background: var(--paper-warm); }
.blog-table tbody tr.is-key { background: rgba(15, 181, 172, .07); }

/* ----- Retour au blog ------------------------------------ */
.post-back {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); display: inline-flex; gap: 7px; align-items: center;
}
.post-back:hover { color: var(--accent); text-decoration: none; }