/*
 * Schémas tracés par le site dans les guides ([cve_schema], plugin : includes/schemas/).
 * Couleurs et polices : variables de theme.css uniquement. Les SVG restent lisibles à 288 px de large :
 * panneaux de 360 unités au plus, textes courts, explications dans la liste .schema__reperes.
 */

/* Portée : figure.schema[id] (les schémas des guides) ; le schéma de niche des fiches (figure.schema sans id) garde ses règles. */
.schema[id] { margin: 28px 0; padding: 18px 18px 14px; border: 1px solid var(--ligne); border-radius: var(--rayon-l); background: var(--blanc); }
.schema__corps { display: grid; gap: 16px; }
.schema__svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; overflow: visible; }
figcaption.schema__legende { display: block; margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: var(--t-s); color: var(--encre-douce); line-height: 1.55; }
figcaption.schema__legende strong { color: var(--encre); }

/* --- Éléments SVG --- */
.sc-trait { fill: none; stroke: var(--encre); stroke-width: 2; stroke-linejoin: round; }
.sc-fin { fill: none; stroke: var(--ligne-forte); stroke-width: 1.5; }
.sc-meuble { fill: #efe3cf; stroke: #b99c72; stroke-width: 1.5; }
.sc-plan { fill: #d9d4cb; stroke: #a49d91; stroke-width: 1.5; }
.sc-sol { fill: none; stroke: var(--encre-douce); stroke-width: 2; }
.sc-mur { fill: var(--gris-2); stroke: var(--ligne-forte); stroke-width: 1.5; }
.sc-appareil { fill: #2c2a30; stroke: var(--encre); stroke-width: 1.5; }
.sc-porte { fill: #4a5560; fill-opacity: .55; stroke: #1b1a1d; stroke-width: 1.5; }
.sc-grille { fill: none; stroke: #c9ced4; stroke-width: 2; stroke-linecap: round; }
.sc-grille-masquee { fill: none; stroke: var(--alerte); stroke-width: 2; stroke-linecap: round; }
.sc-plein { fill: #b99c72; stroke: #8a7350; stroke-width: 1.5; }
.sc-niche { fill: none; stroke: var(--bordeaux); stroke-width: 2; stroke-dasharray: 6 5; }
.sc-cote { fill: none; stroke: var(--encre-douce); stroke-width: 1.5; }
.sc-air-froid { fill: none; stroke: var(--focus); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-air-chaud { fill: none; stroke: var(--bordeaux); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-air-bloque { fill: none; stroke: var(--alerte); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.sc-fleche-froid { fill: var(--focus); }
.sc-fleche-chaud { fill: var(--bordeaux); }
.sc-fleche-cote { fill: var(--encre-douce); }
.sc-zone-froide { fill: #dcebf7; stroke: #8db4d6; stroke-width: 1.5; }
.sc-zone-tempere { fill: #f6e1e7; stroke: #c98aa0; stroke-width: 1.5; }
.sc-bouteille { fill: #3d4a3a; stroke: #1b1a1d; stroke-width: 1.2; }
.sc-bouteille-ref { fill: var(--bordeaux); stroke: var(--bordeaux-2); stroke-width: 1.2; }
.sc-accent { fill: var(--bordeaux); }
.sc-croix { fill: none; stroke: var(--alerte); stroke-width: 3.5; stroke-linecap: round; }
.sc-texte, .sc-texte-fort, .sc-texte-petit { font-family: var(--texte); fill: var(--encre); }
.sc-texte { font-size: 17px; }
.sc-texte-fort { font-size: 18px; font-weight: 700; }
.sc-texte-petit { font-size: 16px; fill: var(--encre-douce); }
.sc-texte-inverse { font-family: var(--texte); font-size: 17px; font-weight: 700; fill: var(--blanc); }
.sc-texte-niche { font-family: var(--texte); font-size: 16px; font-weight: 700; fill: var(--bordeaux); }
.sc-porte-ouverte { fill: none; stroke: #4a5560; stroke-width: 5; stroke-linecap: round; }
.sc-texte-alerte { font-family: var(--texte); font-size: 16px; font-weight: 700; fill: var(--alerte); }
.sc-pastille { fill: var(--bordeaux); stroke: var(--blanc); stroke-width: 2; }
.sc-pastille-texte { font-family: var(--texte); font-size: 16px; font-weight: 700; fill: var(--blanc); text-anchor: middle; dominant-baseline: central; }

/* --- Liste des repères liés aux pastilles --- */
.schema__reperes { list-style: none; counter-reset: repere; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-s); line-height: 1.5; }
.schema__reperes > li { counter-increment: repere; position: relative; padding-left: 36px; min-height: 26px; }
.schema__reperes > li::before { content: counter(repere); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--bordeaux); color: var(--blanc); font-weight: 700; font-size: var(--t-xs); display: grid; place-items: center; }
.schema__reperes strong { color: var(--encre); }
@media (min-width: 760px) { .schema__reperes--2 { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* --- Panneaux côte à côte --- */
.schema-colonnes { display: grid; gap: 18px; }
@media (min-width: 600px) { .schema-colonnes { grid-template-columns: 1fr 1fr; gap: 22px; } }
.schema-panneau { min-width: 0; display: grid; gap: 8px; align-content: start; }
.schema-panneau__titre { margin: 0; font: 700 var(--t-s)/1.3 var(--texte); color: var(--encre); }
.schema-panneau__titre--alerte { color: var(--alerte); }
.schema-panneau--alerte { padding: 10px; border-radius: var(--rayon); background: var(--alerte-fond); }
.schema-panneau .schema__svg { max-width: 360px; }

/* --- Étapes numérotées --- */
.schema-etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 10px; }
.schema-etape { counter-increment: etape; position: relative; padding: 12px 14px 12px 54px; border: 1px solid var(--ligne); border-radius: var(--rayon); background: var(--gris); }
.schema-etape::before { content: counter(etape); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: var(--bordeaux); color: var(--blanc); font-weight: 700; font-size: var(--t-s); display: grid; place-items: center; }
.schema-etape__titre { margin: 0 0 2px; font: 700 var(--t-base)/1.35 var(--texte); color: var(--encre); }
.schema-etape__texte { margin: 0; font-size: var(--t-s); line-height: 1.55; color: var(--encre-douce); }
@media (min-width: 900px) { .schema-etapes--2 { grid-template-columns: 1fr 1fr; } }

/* --- Questions oui / non --- */
.schema-question { margin: 6px 0 0; font-size: var(--t-s); line-height: 1.5; }
.schema-reponses { display: grid; gap: 6px; margin-top: 8px; }
@media (min-width: 600px) { .schema-reponses { grid-template-columns: 1fr 1fr; } }
.schema-reponse { margin: 0; padding: 8px 10px; border-radius: var(--rayon); font-size: var(--t-s); line-height: 1.45; border-left: 4px solid; background: var(--blanc); }
.schema-reponse strong { display: block; }
.schema-reponse--oui { border-color: var(--vif); }
.schema-reponse--oui strong { color: var(--vif-texte); }
.schema-reponse--non { border-color: var(--alerte); }
.schema-reponse--non strong { color: var(--alerte); }
.schema-conclusion { display: grid; gap: 10px; margin-top: 4px; }
@media (min-width: 600px) { .schema-conclusion { grid-template-columns: 1fr 1fr; } }
.schema-conclusion > p { margin: 0; padding: 12px 14px; border-radius: var(--rayon); font-size: var(--t-s); line-height: 1.5; }
.schema-conclusion__oui { background: var(--vif-pale); }
.schema-conclusion__non { background: var(--alerte-fond); }

/* --- Barres horizontales (plages) --- */
.schema-barres { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.schema-barre { display: grid; gap: 4px; }
@media (min-width: 600px) { .schema-barre { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; column-gap: 14px; } }
.schema-barre__libelle { font-size: var(--t-s); line-height: 1.35; }
.schema-barre__libelle strong { display: block; color: var(--encre); }
.schema-barre__libelle small { color: var(--encre-douce); font-size: var(--t-xs); }
.schema-barre__piste { position: relative; height: 30px; border-radius: 15px; background: var(--gris-2); }
.schema-barre__plage { position: absolute; top: 0; bottom: 0; left: var(--debut); right: calc(100% - var(--fin)); min-width: 30px; border-radius: 15px; background: var(--bordeaux); color: var(--blanc); font-size: var(--t-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0 8px; }
.schema-barre__plage--interieur { background: var(--focus); }
.schema-barre__plage--vif { background: var(--vif); }
.schema-barre__repere { position: absolute; top: -4px; bottom: -4px; left: var(--pos); width: 2px; background: var(--encre); }
.schema-graduation { display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--encre-douce); }
@media (min-width: 600px) { .schema-graduation { margin-left: calc(11rem + 14px); } }

/* --- Étiquette énergie reconstituée --- */
.schema-etiquette-bloc { display: grid; gap: 18px; }
@media (min-width: 640px) { .schema-etiquette-bloc { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr); align-items: start; } }
.schema-etiquette { position: relative; border: 2px solid var(--encre); border-radius: 6px; padding: 10px; background: var(--blanc); font-size: var(--t-xs); max-width: 280px; width: 100%; margin: 0 auto; }
.schema-etiquette__haut { display: flex; justify-content: space-between; align-items: center; padding-bottom: 6px; border-bottom: 1px solid var(--ligne-forte); font-weight: 700; }
.schema-etiquette__qr { width: 34px; height: 34px; background: repeating-linear-gradient(90deg, var(--encre) 0 3px, transparent 3px 6px), repeating-linear-gradient(0deg, var(--encre) 0 3px, transparent 3px 6px); background-blend-mode: multiply; opacity: .75; border: 2px solid var(--encre); }
.schema-etiquette__classes { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 3px; }
.schema-etiquette__classes li { display: flex; align-items: center; gap: 6px; }
.schema-etiquette__barre { height: 18px; display: flex; align-items: center; padding-left: 6px; font-weight: 700; clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%); }
.schema-etiquette__classe { margin-left: auto; min-width: 30px; height: 22px; display: grid; place-items: center; background: var(--encre); color: var(--blanc); font-weight: 700; clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%); padding-left: 6px; }
.schema-etiquette__conso { text-align: center; padding: 6px 0; border-top: 1px solid var(--ligne-forte); border-bottom: 1px solid var(--ligne-forte); font-weight: 700; font-size: var(--t-base); }
.schema-etiquette__bas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 6px; text-align: center; font-weight: 700; }
.schema-etiquette__bas span:not(.sc-pastille-html) { display: block; font-weight: 400; color: var(--encre-douce); }
.schema-etiquette .sc-pastille-html { position: absolute; }
.sc-pastille-html { width: 24px; height: 24px; border-radius: 50%; background: var(--bordeaux); color: var(--blanc); font-weight: 700; font-size: var(--t-xs); display: inline-grid; place-items: center; border: 2px solid var(--blanc); box-shadow: 0 0 0 1px var(--bordeaux); line-height: 1; }
.schema-etiquette__ligne { position: relative; }
.schema-etiquette__ligne > .sc-pastille-html { position: absolute; right: -22px; top: 50%; transform: translateY(-50%); }
.schema-etiquette__bas .schema-etiquette__ligne > .sc-pastille-html { position: static; transform: none; display: grid; margin: 4px auto 0; }
@media (max-width: 380px) { .schema-etiquette__ligne > .sc-pastille-html { right: -14px; } }

/* --- Opération posée --- */
.schema-calcul { margin: 0; padding: 14px 16px; border-radius: var(--rayon); background: var(--gris); display: grid; gap: 6px; font-size: var(--t-s); }
.schema-calcul__titre { margin: 0; font-weight: 700; color: var(--encre); }
.schema-calcul__operation { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: var(--t-base); }
.schema-calcul__terme { padding: 2px 8px; border-radius: var(--rayon); background: var(--blanc); border: 1px solid var(--ligne); }
.schema-calcul__resultat { padding: 2px 8px; border-radius: var(--rayon); background: var(--bordeaux); color: var(--blanc); font-weight: 700; }
.schema-calcul__note { margin: 0; color: var(--encre-douce); font-size: var(--t-xs); line-height: 1.5; }

/* --- Tableau sobre dans un schéma --- */
.schema-tableau { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.schema-tableau th, .schema-tableau td { padding: 6px 8px; border-bottom: 1px solid var(--ligne); text-align: left; vertical-align: top; }
.schema-tableau thead th { background: var(--gris-2); font-weight: 700; }

@media (max-width: 480px) {
	.schema[id] { padding: 14px 12px 12px; margin: 22px 0; }
	.schema-etape { padding-left: 48px; }
	.schema-etape::before { left: 10px; }
}

/* Texte posé sur un dessin : liseré clair pour rester lisible au-dessus des traits. */
.sc-halo { paint-order: stroke; stroke: var(--blanc); stroke-width: 5px; stroke-linejoin: round; }

/* Les listes des schémas ne reprennent pas les retraits et puces de .prose. */
.prose ol.schema-etapes, .prose ol.schema__reperes, .prose ul.schema-barres, .prose ul.schema-etiquette__classes { padding-left: 0; margin-left: 0; list-style: none; }
.prose .schema-etapes > li, .prose .schema__reperes > li, .prose .schema-barres > li { margin: 0; }