/* ============================================================
   BLOKKUS — Schémas explicatifs (SVG intégrés)
   Bilingues, adaptatifs clair/sombre, sans dépendance externe.
   ============================================================ */

.bk-schema{
	margin:0 0 28px;
	/* Jetons locaux, dérivés des variables de marque : le basculement
	   clair/sombre est donc automatique. */
	--sch-box:      var(--blokkus-surface-alt);
	--sch-line:     var(--blokkus-border);
	--sch-text:     var(--blokkus-text);
	--sch-muted:    var(--blokkus-muted);
	--sch-brand:    var(--blokkus-deep);
	--sch-brand-bg: color-mix(in srgb, var(--blokkus-deep) 12%, var(--blokkus-surface));
	--sch-trust:    var(--blokkus-mint);
	--sch-trust-bg: color-mix(in srgb, var(--blokkus-mint) 16%, var(--blokkus-surface));
	--sch-warn:     var(--blokkus-orange);
	--sch-threat:   var(--blokkus-accent);
}

.bk-schema svg{
	display:block;
	width:100%;
	height:auto;
}

/* Bascule mobile / desktop : une seule des deux figures est rendue. */
.bk-schema .sch-wide{display:none;}
.bk-schema .sch-narrow{display:block;}

@media screen and (min-width:768px){
	.bk-schema .sch-wide{display:block;}
	.bk-schema .sch-narrow{display:none;}
}

/* ---- Primitives graphiques ---- */
.bk-schema .s-box{
	fill:var(--sch-box);
	stroke:var(--sch-line);
	stroke-width:1;
}

.bk-schema .s-box-brand{
	fill:var(--sch-brand-bg);
	stroke:var(--sch-brand);
	stroke-width:1.5;
}

.bk-schema .s-box-trust{
	fill:var(--sch-trust-bg);
	stroke:var(--sch-trust);
	stroke-width:1.5;
}

.bk-schema .s-chip{
	fill:var(--blokkus-surface);
	stroke:var(--sch-line);
	stroke-width:1;
}

.bk-schema .s-flow{
	fill:none;
	stroke:var(--sch-brand);
	stroke-width:1.6;
}

.bk-schema .s-flow-soft{
	fill:none;
	stroke:var(--sch-muted);
	stroke-width:1.4;
	stroke-dasharray:5 4;
}

.bk-schema .s-rule{
	fill:none;
	stroke:var(--sch-line);
	stroke-width:1;
}

/* ---- Textes ---- */
.bk-schema text{
	font-family:var(--blokkus-font-body);
	fill:var(--sch-text);
}

.bk-schema .s-title{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:18px;
	fill:var(--sch-brand);
	letter-spacing:.02em;
}

.bk-schema .s-label{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:15px;
	fill:var(--sch-text);
}

.bk-schema .s-sub{
	font-size:13px;
	fill:var(--sch-text);
}

.bk-schema .s-small{
	font-size:11.5px;
	fill:var(--sch-muted);
}

.bk-schema .s-note{
	font-size:12px;
	font-style:italic;
	fill:var(--sch-muted);
}

.bk-schema .s-num{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:14px;
	fill:var(--sch-brand);
}

/* ---- Légende sous le schéma ---- */
.bk-schema figcaption{
	margin-top:14px;
	font-size:14px;
	line-height:1.5;
	color:var(--blokkus-text-secondary);
}

.bk-schema .sch-facts{
	list-style:none;
	margin:12px 0 0;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.bk-schema .sch-facts li{
	border:1px solid var(--sch-line);
	border-radius:999px;
	padding:7px 14px;
	font-size:13px;
	background:var(--blokkus-surface);
	color:var(--blokkus-text);
}

@media (prefers-reduced-motion:reduce){
	.bk-schema *{animation:none !important;transition:none !important;}
}

/* ---- Variante : titres de cartes d'étape ---- */
.bk-schema .s-step-title{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:14px;
	fill:var(--sch-brand);
}

.bk-schema .s-phase{
	font-family:var(--blokkus-font-heading);
	font-weight:700;
	font-size:12px;
	letter-spacing:.04em;
	fill:var(--sch-muted);
	text-transform:uppercase;
}

/* ---- Les quatre états de classification ----
   La pastille porte la couleur pleine de la charte ; le libellé porte une
   variante assombrie, les couleurs claires ne passant pas le contraste sur
   fond blanc. Les classes sont indispensables : un attribut fill sur le
   <text> serait écrasé par la règle .s-step-title. */
.bk-schema{
	--sch-doubt:      #8c919b;
	--sch-trust-ink:  color-mix(in srgb, var(--blokkus-mint) 55%, var(--blokkus-ink));
	--sch-doubt-ink:  color-mix(in srgb, #8c919b 55%, var(--blokkus-ink));
	--sch-warn-ink:   color-mix(in srgb, var(--blokkus-orange) 55%, var(--blokkus-ink));
	--sch-threat-ink: var(--blokkus-accent);
}

html[data-theme="dark"] .bk-schema{
	--sch-doubt:      #a6afc6;
	--sch-trust-ink:  var(--blokkus-mint);
	--sch-doubt-ink:  #a6afc6;
	--sch-warn-ink:   var(--blokkus-orange);
	--sch-threat-ink: var(--blokkus-accent);
}

.bk-schema .s-state-trust{fill:var(--sch-trust-ink);}
.bk-schema .s-state-doubt{fill:var(--sch-doubt-ink);}
.bk-schema .s-state-warn{fill:var(--sch-warn-ink);}
.bk-schema .s-state-threat{fill:var(--sch-threat-ink);}

/* ---- En-têtes de colonnes des schémas en liste ---- */
.bk-schema .s-colhead{
	font-size:12px;
	font-weight:600;
	fill:var(--sch-muted);
	letter-spacing:.01em;
}