/**
 * Simulateur de conformite MyColoc, habillage charte.
 * Palette : terracotta #C5704E, ivoire #F2EBE0, encre #231E1C.
 * Police Manrope en clair (jamais via variable Core Framework).
 *
 * @package MyColoc_Simulateurs
 */

.myc-conf {
	--myc-terracotta: #C5704E;
	--myc-ivoire: #F2EBE0;
	--myc-encre: #231E1C;
	--myc-clay: #8A6A57;
	--myc-line: #E2D6C5;
	--myc-bad: #B23A2E;
	--myc-warn: #B07A2E;
	--myc-ok: #4F7A52;
	font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--myc-encre);
	max-width: 880px;
	margin: 0 auto;
}

.myc-conf-form {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.myc-conf-sec {
	border-top: 1px solid var(--myc-line);
	padding-top: 1.25rem;
}
.myc-conf-sec:first-child {
	border-top: 0;
	padding-top: 0;
}

.myc-conf-sectitle {
	font-size: var(--text-m);
	font-weight: 700;
	letter-spacing: 0.01em;
	margin: 0 0 1rem;
	color: var(--myc-encre);
}

.myc-conf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem 1.25rem;
}

.myc-conf-field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.myc-conf-field[hidden] {
	display: none;
}

.myc-conf-label {
	font-size: var(--text-s);
	font-weight: 600;
	color: var(--myc-clay);
}
.myc-conf-opt {
	font-style: italic;
	font-weight: 400;
	opacity: 0.75;
}
.myc-conf-help {
	font-size: var(--text-s);
	color: var(--myc-clay);
	opacity: 0.85;
}
.myc-conf-todo {
	color: var(--myc-terracotta);
	font-weight: 600;
}

.myc-conf-field select,
.myc-conf-field input {
	font: inherit;
	color: var(--myc-encre);
	background: #FFFFFF;
	border: 1px solid var(--myc-line);
	border-radius: 10px;
	padding: 0.6rem 0.7rem;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.myc-conf-field select:focus,
.myc-conf-field input:focus {
	outline: none;
	border-color: var(--myc-terracotta);
	box-shadow: 0 0 0 3px rgba(197, 112, 78, 0.15);
}

/* Chambres */
.myc-conf-rooms {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
}
.myc-conf-room {
	background: var(--myc-ivoire);
	border: 1px solid var(--myc-line);
	border-radius: 14px;
	padding: 1rem 1.1rem;
}
.myc-conf-room-title {
	margin: 0 0 0.75rem;
	font-weight: 700;
	font-size: var(--text-s);
}
.myc-conf-grid-room {
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.myc-conf-room .myc-conf-field input,
.myc-conf-room .myc-conf-field select {
	background: #FFFFFF;
}
.myc-conf-room-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.85rem;
}
.myc-conf-ratio {
	font-size: var(--text-s);
	color: var(--myc-clay);
}

/* Cases a cocher */
.myc-conf-check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: var(--text-s);
	line-height: 1.5;
	cursor: pointer;
}
.myc-conf-check input {
	margin-top: 0.2rem;
	flex: 0 0 auto;
}

/* Boutons */
.myc-conf .mycoloc-btn-ghost {
	background: transparent;
	color: var(--myc-terracotta);
	border: 1px solid var(--myc-terracotta);
}
.myc-conf .mycoloc-btn-ghost:hover {
	background: rgba(197, 112, 78, 0.08);
}
.myc-conf-rm {
	padding: 0.4rem 0.8rem;
	font-size: var(--text-s);
}

.myc-conf-actions {
	margin-top: 1.25rem;
}
.myc-conf-error {
	color: var(--myc-bad);
	font-weight: 600;
	font-size: var(--text-s);
	margin: 0.75rem 0 0;
}

/* Resultat */
.myc-conf-result {
	margin-top: 1.5rem;
}
.myc-conf-score {
	background: var(--myc-ivoire);
	border-radius: 16px;
	padding: 1.5rem;
	text-align: center;
	border: 1px solid var(--myc-line);
}
.myc-conf-score-label {
	font-size: var(--text-s);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--myc-clay);
	margin: 0 0 0.75rem;
}
.myc-conf-gauge {
	height: 12px;
	background: #FFFFFF;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid var(--myc-line);
}
.myc-conf-gauge-fill {
	height: 100%;
	background: var(--myc-terracotta);
	border-radius: 999px;
	transition: width 0.5s ease;
}
.myc-conf-score-bad .myc-conf-gauge-fill { background: var(--myc-bad); }
.myc-conf-score-warn .myc-conf-gauge-fill { background: var(--myc-warn); }
.myc-conf-score-ok .myc-conf-gauge-fill { background: var(--myc-ok); }
.myc-conf-score-num {
	font-size: var(--text-2xl);
	font-weight: 800;
	margin: 0.6rem 0 0.2rem;
}
.myc-conf-status {
	font-weight: 700;
	margin: 0.4rem 0 0;
}
.myc-conf-qual {
	color: var(--myc-clay);
	margin: 0.2rem 0 0;
}

.myc-conf-block {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	border-left: 4px solid var(--myc-line);
	background: #FFFFFF;
}
.myc-conf-block.is-bad { border-left-color: var(--myc-bad); background: rgba(178, 58, 46, 0.05); }
.myc-conf-block.is-warn { border-left-color: var(--myc-warn); background: rgba(176, 122, 46, 0.05); }
.myc-conf-block.is-ok { border-left-color: var(--myc-ok); background: rgba(79, 122, 82, 0.05); }
.myc-conf-block.is-action { border-left-color: var(--myc-terracotta); background: rgba(197, 112, 78, 0.05); }
.myc-conf-block-title {
	margin: 0 0 0.6rem;
	font-size: var(--text-s);
	font-weight: 700;
}
.myc-conf-list {
	margin: 0;
	padding-left: 1.1rem;
	line-height: 1.55;
}
.myc-conf-list li {
	margin-bottom: 0.35rem;
}

.myc-conf-note {
	margin-top: 1.25rem;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	background: var(--myc-ivoire);
	border: 1px solid var(--myc-line);
}
.myc-conf-note p {
	margin: 0.3rem 0 0;
	line-height: 1.55;
}
.myc-conf-checklist {
	margin-top: 1.1rem;
	font-size: var(--text-s);
	color: var(--myc-clay);
	line-height: 1.55;
}
.myc-conf-result-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}
/* Legende du verdict : dit ce que signifie chaque couleur et ou trouver les
   points que l'ecran n'affiche pas. */
.myc-conf-legend {
	margin-top: 1.4rem;
	padding: 1rem 1.1rem;
	border-radius: 12px;
	background: var(--myc-ivoire);
	border: 1px solid var(--myc-line);
}
.myc-conf-legend-title {
	margin: 0 0 0.6rem;
	font-weight: 600;
	font-size: var(--text-s);
}
.myc-conf-legend ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.myc-conf-legend li {
	position: relative;
	padding-left: 1.1rem;
	margin-bottom: 0.35rem;
	font-size: var(--text-s);
	line-height: 1.55;
}
.myc-conf-legend li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: currentColor;
}
.myc-conf-legend li.myc-color-rouge { color: #8F2A20; }
.myc-conf-legend li.myc-color-orange { color: #8A5E1E; }
.myc-conf-legend li.myc-color-vert { color: #3C5F3F; }
.myc-conf-legend-mail {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--myc-line);
	font-size: var(--text-s);
	line-height: 1.55;
	color: var(--myc-clay);
}
.myc-conf-note-link {
	font-weight: 600;
	text-decoration: underline;
}

.myc-conf-disclaimer {
	margin-top: 1.5rem;
	padding-top: 1rem;
	border-top: 1px solid var(--myc-line);
	font-size: var(--text-s);
	color: var(--myc-clay);
	line-height: 1.6;
}

@media (max-width: 600px) {
	.myc-conf-score-num { font-size: var(--text-xl); }
	.myc-conf-result-actions .mycoloc-btn { width: 100%; }
}

/* ----------------------------------------------------------------
 *  Resultat verdict couleur (vert, orange, rouge), dans l'overlay.
 * ---------------------------------------------------------------- */
.myc-conf-empty {
	font-size: var(--text-m);
	color: var(--myc-muted, #7A6E64);
	background: var(--myc-surface, #FFFFFF);
	border: 1px solid var(--myc-line, rgba(35,30,28,.14));
	border-radius: 12px;
	padding: 1rem 1.1rem;
}

.myc-conf-result-inner {
	width: 100%;
}
.myc-verdict-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 0.6rem;
}
.myc-verdict-title {
	font-weight: 800;
	font-size: var(--text-l);
	line-height: 1.1;
	margin: 0;
}
.myc-verdict-lede {
	font-size: var(--text-m);
	color: var(--myc-muted, #7A6E64);
	margin: 0 0 1.1rem;
	max-width: 52ch;
}
.myc-verdict-door {
	margin: 1.1rem 0 0;
	padding: 0.9rem 1rem;
	border-radius: 12px;
	background: var(--myc-ivoire-deep, #EAE1D3);
	font-size: var(--text-s);
	line-height: 1.55;
}

/* Pastilles de couleur (vocabulaire vert, orange, rouge). */
.myc-verdict-pill {
	display: inline-flex;
	align-items: center;
	font-size: var(--text-xs);
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	padding: 0.22rem 0.6rem;
	border-radius: 999px;
	border: 1.5px solid transparent;
	white-space: nowrap;
}
.myc-verdict-pill.myc-color-vert { color: #3C5F3F; background: rgba(79, 122, 82, 0.14); border-color: rgba(79, 122, 82, 0.5); }
.myc-verdict-pill.myc-color-orange { color: #8A5E1E; background: rgba(176, 122, 46, 0.15); border-color: rgba(176, 122, 46, 0.5); }
.myc-verdict-pill.myc-color-rouge { color: #8F2A20; background: rgba(178, 58, 46, 0.13); border-color: rgba(178, 58, 46, 0.5); }

/* Liste des points detailles. */
.myc-conf-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}
.myc-conf-point {
	background: var(--myc-surface, #FFFFFF);
	border: 1px solid var(--myc-line, rgba(35,30,28,.14));
	border-left: 4px solid var(--myc-line, rgba(35,30,28,.14));
	border-radius: 12px;
	padding: 0.85rem 1rem;
}
.myc-conf-point.myc-color-vert { border-left-color: #4F7A52; }
.myc-conf-point.myc-color-orange { border-left-color: #B07A2E; }
.myc-conf-point.myc-color-rouge { border-left-color: #B23A2E; }
.myc-conf-point-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}
.myc-conf-point-q {
	font-weight: 700;
	font-size: var(--text-m);
}
.myc-conf-point-a {
	margin-top: 0.25rem;
	font-size: var(--text-s);
}
.myc-conf-point-client {
	margin: 0.5rem 0 0;
	font-size: var(--text-s);
	line-height: 1.55;
	color: var(--myc-muted, #7A6E64);
}
.myc-conf-point-src {
	margin: 0.4rem 0 0;
	font-size: var(--text-s);
	color: var(--myc-muted, #7A6E64);
	opacity: 0.85;
}

/* Rappel de tous les points passes en revue. */
.myc-conf-review {
	margin-top: 1.4rem;
}
.myc-conf-review-title {
	font-size: var(--text-s);
	font-weight: 700;
	margin: 0 0 0.6rem;
}
.myc-conf-review-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.myc-conf-review-list li {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: var(--text-s);
}

@media (max-width: 600px) {
	.myc-verdict-title { font-size: var(--text-l); }
	.myc-conf-result-actions .mycoloc-btn { width: 100%; }
}

/* Lisibilite de l'ecran de resultat : tailles augmentees et aeration */
.myc-conf-result-inner { font-size: var(--text-m); max-width: 640px; }
.myc-verdict-title { font-size: var(--text-xl); line-height: 1.15; }
.myc-verdict-lede { font-size: var(--text-l); line-height: 1.6; }
.myc-verdict-door { font-size: var(--text-m); line-height: 1.6; }
.myc-verdict-pill { font-size: var(--text-s); }
.myc-conf-points { gap: 1rem; }
.myc-conf-point { padding: 1.1rem 1.2rem; }
.myc-conf-point-q { font-size: var(--text-l); }
.myc-conf-point-a { font-size: var(--text-m); margin-top: 0.35rem; }
.myc-conf-point-client { font-size: var(--text-m); line-height: 1.6; margin-top: 0.6rem; }
.myc-conf-point-src { font-size: var(--text-s); line-height: 1.5; }
.myc-conf-review { margin-top: 1.8rem; }
.myc-conf-review-title { font-size: var(--text-m); letter-spacing: 0.02em; margin: 0 0 0.7rem; }
.myc-conf-review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.myc-conf-review-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--text-m); line-height: 1.5; }

/* Questions numeriques du parcours branche */
.mycoloc-numwrap {
	display: flex;
	align-items: baseline;
	gap: var(--space-s);
	border-bottom: 2px solid var(--border-primary);
	padding-bottom: var(--space-2xs);
	margin: var(--space-m) 0 var(--space-s);
	max-width: 26rem;
}
.mycoloc-num {
	flex: 1 1 auto;
	width: 100%;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--secondary);
	padding: 0;
}
.mycoloc-num:focus { outline: none; }
.mycoloc-numwrap:focus-within { border-bottom-color: #C5704E; }
.mycoloc-numunit { color: var(--text-muted); font-size: var(--text-m); }

/* Message contextuel : bureaux, requalification, regime indetermine */
.myc-conf-note {
	background: #F2EBE0;
	border-left: 3px solid #C5704E;
	border-radius: 10px;
	padding: var(--space-s) var(--space-m);
	margin: var(--space-m) 0 0;
	font-size: var(--text-s);
	line-height: 1.6;
	color: #3D3530;
}

/* Rappel reglementaire d'une question : affiche quelle que soit la reponse,
   pour que le proprietaire reparte avec l'information meme s'il repond oui. */
.myc-conf-info{
	background: #F2EBE0;
	border-left: 3px solid #C5704E;
	border-radius: 10px;
	padding: var(--space-s) var(--space-m);
	margin: var(--space-m) 0 0;
	font-size: var(--text-s);
	line-height: 1.6;
	color: #3D3530;
}

/* Regime retenu, rappele en tete du resultat */
.myc-conf-regime {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #F2EBE0;
	border-radius: 999px;
	padding: 6px 14px;
	font-size: var(--text-s);
	font-weight: 600;
	color: #231E1C;
	margin: 0 0 var(--space-s);
}

/* Note sur la derogation du bourgmestre, sous le verdict */
.myc-conf-derogation {
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--text-muted);
	font-style: italic;
	margin: var(--space-2xs) 0 0;
}

/* Lien d'aide sous une question, vers une page du site */
.myc-conf-help-link {
	color: #A35636;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.myc-conf-help-link:hover { color: #8C3B1E; }
.myc-conf-note[hidden] { display: none; }

/* Ecran d'arret : le point qui bloque, cite et source */
.myc-conf-blocage {
	margin-top: 1.25rem;
	padding: 1.1rem 1.2rem;
	border-radius: 12px;
	background: var(--myc-ivoire);
	border-left: 3px solid var(--myc-rouge, #B24A3C);
}
.myc-conf-blocage-titre {
	margin: 0;
	font-weight: 700;
	font-size: var(--text-m);
	line-height: 1.45;
}
.myc-conf-blocage-texte {
	margin: 0.35rem 0 0;
	font-size: var(--text-s);
	line-height: 1.6;
}
.myc-conf-blocage-source {
	margin: 0.5rem 0 0;
	font-size: var(--text-xs);
	line-height: 1.5;
	color: var(--myc-muted, #9A8E82);
}
.mycoloc-step.is-verifying { opacity: .6; pointer-events: none; }

/* Question a choix multiple : une pastille indique ce qui est coche */
.mycoloc-opt-check{
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border: 1.5px solid var(--myc-line);
	border-radius: 5px;
	display: inline-block;
}
.mycoloc-opt.is-sel .mycoloc-opt-check{
	background: #C5704E;
	border-color: #C5704E;
	box-shadow: inset 0 0 0 3px #fff;
}

/* Seuil annonce au-dessus d'un champ chiffre */
.myc-conf-seuil{
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.95rem;
	border-radius: 10px;
	background: var(--myc-ivoire);
	border-left: 3px solid #C5704E;
	font-size: var(--text-s);
	line-height: 1.5;
}