/* ============================================================
 * SC Guide — Socle visuel des guides (thème SOMBRE)
 * Navigation (sommaire sticky + barre de progression), enveloppe
 * de page, hero, et composants éditoriaux réutilisables.
 * Hérite des tokens de sc-core.css. Les modules de DONNÉES
 * spécifiques à un guide sont stylés dans le plugin hôte.
 * ============================================================ */

/* ---------- Conteneurs ---------- */
.sc-guide-wrap {
	font-family: var(--sc-font-body);
	color: var(--sc-ink);
	max-width: 1180px;
	margin: 0 auto 28px;
	padding: clamp(20px, 3vw, 40px);
	/* Fond sombre porté par le bloc lui-même : le guide reste lisible quel que
	 * soit le fond (souvent blanc) du thème hôte, comme les autres modules SC. */
	background:
		radial-gradient(1100px 480px at 12% -8%, rgba(124,141,240,.10), transparent 60%),
		radial-gradient(900px 460px at 95% 0%, rgba(155,140,240,.10), transparent 55%),
		linear-gradient(180deg, var(--sc-bg) 0%, var(--sc-bg-2) 100%);
	border: 1px solid var(--sc-line);
	border-radius: 24px;
	box-shadow: 0 18px 50px -20px rgba(0,0,0,.55);
}
.sc-guide-wrap * { box-sizing: border-box; }

/* ---------- Barre de progression de lecture ---------- */
.sc-guide-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px;
	background: transparent; z-index: 9999; pointer-events: none;
}
.sc-guide-progress span {
	display: block; height: 100%; width: 0%;
	background: linear-gradient(100deg, var(--sc-accent), var(--sc-accent-2));
	transition: width .1s linear;
}

/* ---------- Fil d'Ariane ---------- */
.scg-breadcrumb {
	font-size: 12.5px; color: var(--sc-muted);
	padding: 18px 0 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.scg-breadcrumb a { color: var(--sc-accent); text-decoration: none; }
.scg-breadcrumb a:hover { text-decoration: underline; }

/* ---------- Hero ---------- */
.scg-hero {
	position: relative; overflow: hidden;
	background: linear-gradient(135deg, var(--sc-card), var(--sc-card-2));
	border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius);
	padding: 38px 30px; margin: 14px 0 24px;
}
.scg-hero-glow {
	position: absolute; top: -60%; right: -10%; width: 520px; height: 520px;
	background: radial-gradient(circle, rgba(124,141,240,0.22), transparent 62%);
	pointer-events: none;
}
.scg-hero-inner { position: relative; max-width: 760px; }
.scg-hero-kicker {
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--sc-accent); margin-bottom: 12px;
}
.scg-hero-title {
	font-family: var(--sc-font-head); font-weight: 700;
	font-size: clamp(26px, 4vw, 40px); line-height: 1.12; margin: 0 0 14px; color: var(--sc-ink);
}
.scg-hero-lead { font-size: 16px; line-height: 1.6; color: var(--sc-ink-2); margin: 0; }
.scg-hero-guide { padding: 30px 26px; }
.scg-hero-guide .scg-hero-title { font-size: clamp(22px, 3vw, 30px); }

/* ============================================================
 * PAGE D'ACCUEIL — grille de cartes
 * ============================================================ */
.scg-cards {
	display: grid; gap: 18px;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.scg-card {
	display: flex; flex-direction: column;
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius); padding: 22px; text-decoration: none;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.scg-card:hover {
	transform: translateY(-3px); border-color: var(--sc-accent);
	box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.scg-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.scg-card-icon { font-size: 30px; line-height: 1; }
.scg-card-tag {
	font-size: 11px; font-weight: 600; color: var(--sc-accent);
	background: var(--sc-accent-bg); padding: 4px 11px; border-radius: var(--sc-radius-pill);
}
.scg-card-title {
	font-family: var(--sc-font-head); font-weight: 600; font-size: 19px;
	margin: 0 0 8px; color: var(--sc-ink); line-height: 1.25;
}
.scg-card-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-2); margin: 0 0 16px; flex: 1; }
.scg-card-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	font-size: 12px; color: var(--sc-muted); border-top: 1px solid var(--sc-line); padding-top: 12px;
}
.scg-card-cta { margin-left: auto; color: var(--sc-accent); font-weight: 600; }

/* ============================================================
 * GUIDE — en-tête
 * ============================================================ */
.scg-guide-head { margin: 6px 0 22px; }
.scg-guide-kicker {
	font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	color: var(--sc-accent); margin-bottom: 10px;
}
.scg-guide-h1 {
	font-family: var(--sc-font-head); font-weight: 700;
	font-size: clamp(24px, 3.6vw, 38px); line-height: 1.15; margin: 0 0 14px; color: var(--sc-ink);
}
.scg-guide-meta { display: flex; flex-wrap: wrap; gap: 10px; }
.scg-meta-pill {
	font-size: 12px; font-weight: 600; color: var(--sc-ink-2);
	background: var(--sc-card-2); border: 1px solid var(--sc-line);
	padding: 5px 12px; border-radius: var(--sc-radius-pill);
}
.scg-meta-live { color: var(--sc-pos); }

/* ============================================================
 * LAYOUT — sommaire sticky + contenu
 * ============================================================ */
.scg-layout {
	display: grid; gap: 30px;
	grid-template-columns: 250px minmax(0, 1fr);
	align-items: start;
}
.scg-toc {
	position: sticky; top: 24px;
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm); padding: 6px;
	max-height: calc(100vh - 48px); overflow-y: auto;
}
.scg-toc-toggle { display: none; }
.scg-toc-title {
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--sc-muted); margin: 10px 12px 8px;
}
.scg-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: scg-toc; }
.scg-toc-list li { margin: 0; }
.scg-toc-list a {
	counter-increment: scg-toc;
	display: block; padding: 8px 12px 8px 34px; position: relative;
	font-size: 13px; line-height: 1.35; color: var(--sc-ink-2); text-decoration: none;
	border-radius: 9px; transition: background .12s ease, color .12s ease;
}
.scg-toc-list a::before {
	content: counter(scg-toc); position: absolute; left: 10px; top: 8px;
	font-family: var(--sc-font-head); font-size: 11px; font-weight: 600; color: var(--sc-muted);
}
.scg-toc-list a:hover { background: var(--sc-card-2); color: var(--sc-ink); }
.scg-toc-list a.is-active { background: var(--sc-accent-bg); color: var(--sc-ink); font-weight: 600; }
.scg-toc-list a.is-active::before { color: var(--sc-accent); }

/* ============================================================
 * CONTENU — chapitres & prose
 * ============================================================ */
.scg-content { min-width: 0; }
.scg-chapter { scroll-margin-top: 24px; padding: 14px 0 6px; }
.scg-chapter + .scg-chapter { border-top: 1px solid var(--sc-line); margin-top: 26px; padding-top: 30px; }
.scg-chapter-title {
	font-family: var(--sc-font-head); font-weight: 600;
	font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; margin: 0 0 16px; color: var(--sc-ink);
}
.scg-chapter-intro { color: var(--sc-ink-2); margin-bottom: 14px; text-align: justify; text-justify: inter-word; hyphens: auto; }
.scg-prose p { font-size: 15.5px; line-height: 1.72; color: var(--sc-ink-2); margin: 0 0 16px; text-align: justify; text-justify: inter-word; hyphens: auto; }
.scg-prose strong { color: var(--sc-ink); }
.scg-prose a { color: var(--sc-accent); text-decoration: none; }
.scg-prose a:hover { text-decoration: underline; }
.scg-block-title {
	font-family: var(--sc-font-head); font-weight: 600; font-size: 17px;
	margin: 26px 0 14px; color: var(--sc-ink);
}

/* ---------- KPI band ---------- */
.scg-kpiband {
	background: linear-gradient(135deg, var(--sc-card), var(--sc-card-2));
	border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
	padding: 24px; margin: 22px 0;
}
.scg-kpiband-title {
	font-family: var(--sc-font-head); font-weight: 600; font-size: 16px;
	margin: 0 0 18px; color: var(--sc-ink);
}
.scg-kpiband-grid {
	display: grid; gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.scg-kpi {
	background: var(--sc-bg-2); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm); padding: 16px; text-align: center;
}
.scg-kpi-value {
	display: block; font-family: var(--sc-font-head); font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px); color: var(--sc-ink); line-height: 1.1; margin-bottom: 6px;
}
.scg-kpi-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--sc-ink-2); }
.scg-kpi-hint { display: block; font-size: 11px; color: var(--sc-muted); margin-top: 4px; }
.scg-kpiband-cta { margin-top: 18px; text-align: center; }

/* ---------- Callouts ---------- */
.scg-callout {
	display: flex; gap: 14px; align-items: flex-start;
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-left: 3px solid var(--sc-accent);
	border-radius: var(--sc-radius-sm); padding: 16px 18px; margin: 20px 0;
}
.scg-callout-ico { font-size: 20px; line-height: 1.4; flex-shrink: 0; }
.scg-callout-body { font-size: 14px; line-height: 1.6; color: var(--sc-ink-2); }
.scg-callout-title { display: block; color: var(--sc-ink); margin-bottom: 4px; }
.scg-callout-body a { color: var(--sc-accent); text-decoration: none; }
.scg-callout-body a:hover { text-decoration: underline; }
.scg-callout-list { margin: 6px 0 0; padding-left: 18px; }
.scg-callout-list li { margin-bottom: 6px; }
.scg-callout-live { border-left-color: var(--sc-accent-2); }
.scg-callout-warn { border-left-color: #f0c36d; }
.scg-callout-success { border-left-color: var(--sc-pos); }
.scg-callout-risk { border-left-color: var(--sc-neg); background: rgba(240,128,154,0.06); }

/* ---------- CTA row ---------- */
.scg-cta-row { margin: 22px 0; }
.scg-cta-row-title { font-size: 14px; font-weight: 600; color: var(--sc-ink); margin: 0 0 12px; }
.scg-cta-row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.scg-btn {
	display: inline-block; font-family: var(--sc-font-body); font-size: 13px; font-weight: 600;
	color: var(--sc-ink); background: var(--sc-card-2);
	border: 1px solid var(--sc-line-2); border-radius: var(--sc-radius-pill);
	padding: 9px 18px; text-decoration: none; transition: all .15s ease; cursor: pointer;
}
.scg-btn:hover { border-color: var(--sc-accent); color: var(--sc-ink); }
.scg-btn-primary {
	color: #0e1525; background: linear-gradient(100deg, var(--sc-accent), var(--sc-accent-2));
	border-color: transparent;
}
.scg-btn-primary:hover { filter: brightness(1.08); color: #0e1525; }

/* ---------- Cartes info / profils ---------- */
.scg-cardgrid {
	display: grid; gap: 14px; margin: 18px 0;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.scg-infocard {
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm); padding: 18px;
	display: flex; flex-direction: column;
}
.scg-infocard-cta { margin-top: auto; padding-top: 14px; }
.scg-infocard-cta .sc-btn-premium { width: 100%; }
.scg-infocard-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.scg-infocard-ico { font-size: 22px; }
.scg-infocard-title { font-family: var(--sc-font-head); font-weight: 600; font-size: 15px; margin: 0; color: var(--sc-ink); }
.scg-infocard-text { font-size: 13.5px; line-height: 1.55; color: var(--sc-ink-2); margin: 0 0 10px; }
.scg-infocard-rows { margin: 0; }
.scg-infocard-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--sc-line); font-size: 13px; }
.scg-infocard-row dt { color: var(--sc-muted); margin: 0; }
.scg-infocard-row dd { margin: 0; color: var(--sc-ink); font-weight: 600; text-align: right; }

/* ---------- Checklist interactive ---------- */
.scg-checklist {
	background: var(--sc-card); border: 1px solid var(--sc-line);
	border-radius: var(--sc-radius-sm); padding: 18px 20px; margin: 20px 0;
}
.scg-checklist-title { font-family: var(--sc-font-head); font-weight: 600; font-size: 15px; margin: 0 0 12px; color: var(--sc-ink); }
.scg-checklist-list { list-style: none; margin: 0; padding: 0; }
.scg-checklist-item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.scg-checklist-input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--sc-accent); flex-shrink: 0; cursor: pointer; }
.scg-checklist-item label { font-size: 14px; line-height: 1.5; color: var(--sc-ink-2); cursor: pointer; }
.scg-checklist-input:checked + label { color: var(--sc-muted); text-decoration: line-through; }
.scg-checklist-progress { font-size: 12.5px; font-weight: 600; color: var(--sc-accent); margin-top: 10px; }
.scg-checklist-note { font-size: 12px; color: var(--sc-muted); margin: 8px 0 0; font-style: italic; }

/* ---------- Graphiques ---------- */
.scg-chartfig { margin: 22px 0; }
.scg-chartfig-title { font-family: var(--sc-font-head); font-weight: 600; font-size: 16px; margin: 0 0 12px; color: var(--sc-ink); }
.scg-chartfig-note, .scg-table-note { font-size: 12px; color: var(--sc-muted); margin: 8px 0 0; }

/* ---------- Tableaux de guide ---------- */
.scg-tablewrap { margin: 22px 0; }
.scg-plat-nom { font-weight: 600; color: var(--sc-ink); }
.scg-plat-link { text-decoration: none; }
.scg-plat-link:hover .scg-plat-nom { color: var(--sc-accent); }

/* ---------- Pied de guide ---------- */
.scg-guide-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--sc-line); }
.scg-back { color: var(--sc-accent); text-decoration: none; font-weight: 600; font-size: 14px; }
.scg-back:hover { text-decoration: underline; }

/* ============================================================
 * RESPONSIVE — sommaire repliable sur mobile
 * ============================================================ */
@media (max-width: 900px) {
	.scg-layout { grid-template-columns: 1fr; gap: 16px; }
	.scg-toc {
		position: static; max-height: none; padding: 0;
		background: var(--sc-card); overflow: visible;
	}
	.scg-toc-toggle {
		display: flex; align-items: center; justify-content: space-between; width: 100%;
		background: transparent; border: 0; color: var(--sc-ink);
		font-family: var(--sc-font-body); font-size: 14px; font-weight: 600;
		padding: 14px 16px; cursor: pointer;
	}
	.scg-toc-chevron { width: 10px; height: 10px; border-right: 2px solid var(--sc-muted); border-bottom: 2px solid var(--sc-muted); transform: rotate(45deg); transition: transform .2s ease; }
	.scg-toc-toggle[aria-expanded="true"] .scg-toc-chevron { transform: rotate(-135deg); }
	.scg-toc-nav { display: none; padding: 0 8px 10px; }
	.scg-toc.is-open .scg-toc-nav { display: block; }
	.scg-toc-title { display: none; }
}