/* Fiche content single (interviews, vidéos, méditations…) — rendu standalone par
 * GasContentFrontendController::renderHead/renderBody.
 *
 * Extrait du <style> inline du contrôleur (2026-06-18) et mis en conformité design
 * system : valeurs en px (invariantes au root — rem×10, no-op sur un site épinglé
 * 62.5%), couleurs en tokens var(--gas-*) avec fallbacks fidèles, police GAS au lieu
 * de system-ui. Enqueué avec dépendance gas-design-tokens.
 *
 * NB : la base font-size/line-height de .gas-content-single est posée ici (déplacée
 * depuis le contrôleur). Le terme « petit » des sous-textes (8.5–9.5px) est l'ancien
 * rendu fidèle à 62.5% (rem×10) ; à revoir si on tokenise l'échelle typo de cette page.
 */

.gas-content-single {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 10px;
    font-family: var(--gas-font-family, system-ui, sans-serif);
    font-size: var(--gas-text-m, 16px);
    line-height: var(--gas-leading-normal, 1.5);
    color: var(--gas-color-text, #222);
}
.gas-content-single__title { font-size: 20px; margin-bottom: 5px; }
.gas-content-single__meta { color: var(--gas-color-text-muted, #666); margin-bottom: 15px; font-size: 9.5px; }
.gas-content-single__player { margin: 20px 0; background: #000; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; color: var(--gas-white, #fff); border-radius: 8px; }
.gas-content-single__player iframe, .gas-content-single__player video { width: 100%; height: 100%; border: 0; border-radius: 8px; }
.gas-content-single__artifact { margin: 20px 0; padding: 12.5px 15px; background: var(--gas-color-surface-muted, #fafafa); border-left: 3px solid var(--gas-color-primary, #6a3eb6); border-radius: 4px; }
.gas-content-single__artifact h2 { font-size: 12.5px; margin-top: 0; }
.gas-content-single__artifact--internal { border-left-color: var(--gas-color-border-strong, #999); opacity: .85; }
.gas-content-single__topics { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
.gas-content-single__topic { padding: 2.5px 7.5px; background: var(--gas-neutral-200, #eee); border-radius: 999px; font-size: 8.5px; color: inherit; text-decoration: none; }
a.gas-content-single__topic:hover { text-decoration: underline; }
.gas-membership-paywall { padding: 20px; background: var(--gas-color-primary-bg, #f5f0fb); border: 1px solid var(--gas-color-border, #e0d8f5); border-radius: 8px; text-align: center; }
.gas-membership-paywall__title { font-size: 14px; margin-top: 0; color: var(--gas-color-text, #222); }
.gas-membership-paywall__description { color: var(--gas-color-text-muted, #555); margin-bottom: 15px; }
.gas-membership-paywall__divider { border-top: 2px solid var(--gas-color-primary, #6a3eb6); margin: 12.5px auto; width: 40px; }
.gas-membership-paywall__buttons { display: flex; gap: 7.5px; justify-content: center; flex-wrap: wrap; margin-bottom: 15px; }
.gas-membership-paywall__plans { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; display: inline-block; }
.gas-membership-paywall__plan { display: flex; justify-content: space-between; gap: 10px; padding: 5px 7.5px; background: var(--gas-color-surface-card, #fff); border: 1px solid var(--gas-color-border, #e0d8f5); border-radius: 4px; margin-bottom: 5px; font-size: 9.5px; }
.gas-membership-paywall__plan-name { font-weight: 600; }
.gas-membership-paywall__early-access { color: var(--gas-color-text-muted, #555); font-style: italic; margin-bottom: 15px; }
.gas-content-single__artifact--cta { background: var(--gas-color-primary-bg, #f0eaf9); border-left-color: var(--gas-color-primary, #6a3eb6); }
.gas-content-single__highlights { list-style: none; padding: 0; margin: 0; }
.gas-content-single__highlight-item { display: flex; gap: 7.5px; padding: 7.5px 0; border-bottom: 1px solid var(--gas-color-border-light, #eee); }
.gas-content-single__highlight-item:last-child { border-bottom: none; }
.gas-content-single__highlight-ts { flex-shrink: 0; font-variant-numeric: tabular-nums; font-size: 8.5px; color: var(--gas-color-primary, #6a3eb6); text-decoration: none; }
.gas-content-single__highlight-ts:hover { text-decoration: underline; }
.gas-content-single__highlight-quote { font-style: italic; flex: 1; }
.gas-content-single__highlight-context { display: block; font-size: 8.5px; color: var(--gas-color-text-muted, #666); margin-top: 2.5px; font-style: normal; }
.gas-content-single__json-list { list-style: none; padding: 0; margin: 0; }
.gas-content-single__json-item { padding: 6px 0; border-bottom: 1px solid var(--gas-color-border-light, #eee); }
.gas-content-single__json-item:last-child { border-bottom: none; }
.gas-content-single__json-main { font-weight: 500; }
.gas-content-single__json-detail { font-size: 9px; color: var(--gas-color-text-muted, #555); margin-top: 2px; }