/* ============================================================================
   Configurateur solaire — feuille de styles de l'interface commerciale.
   Direction artistique : sobre, contemporaine, architecturale.
   Un seul thème clair/minéral (pas de dark mode : rendu commercial homogène).
   ========================================================================== */

:root {
	/* Couleurs — fonds minéraux clairs, texte graphite */
	--bg:            #eef0f3;
	--surface:       #ffffff;
	--surface-2:     #f5f6f8;
	--surface-3:     #eceef2;
	--text:          #1f2429;
	--text-soft:     #5c636d;
	--text-faint:    #8b929b;
	--border:        #e2e5ea;
	--border-strong: #d2d7de;

	/* Accent inspiré de l'énergie solaire — ambre chaud, pas de jaune criard */
	--accent:        #e2892a;
	--accent-strong: #c9731a;
	--accent-soft:   #fbeedd;
	--accent-contrast:#ffffff;

	/* États */
	--ok:      #2f9e5f;
	--ok-soft: #e4f4ea;
	--danger:  #d24b43;
	--danger-soft:#fae7e5;

	/* Rayons */
	--radius-sm: 8px;
	--radius:    11px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Ombres discrètes */
	--shadow-sm: 0 1px 2px rgba(24,28,33,.06), 0 1px 1px rgba(24,28,33,.04);
	--shadow:    0 4px 14px rgba(24,28,33,.08);
	--shadow-lg: 0 12px 34px rgba(24,28,33,.14);

	/* Espacements */
	--sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
	--sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

	/* Contrôles tactiles */
	--control-h: 44px;

	/* Typo — pile système moderne */
	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
	        Arial, "Noto Sans", sans-serif;

	--sidebar-w: 380px;
	--header-h: 56px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
}

/* Le body ne défile jamais horizontalement ; le défilement vit dans la sidebar. */
body { overflow: hidden; }

button { font-family: inherit; }

/* ------------------------------------------------------------------ Layout */
#app {
	display: grid;
	grid-template-columns: var(--sidebar-w) 1fr;
	grid-template-rows: var(--header-h) 1fr;
	grid-template-areas:
		"header header"
		"sidebar scene";
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------- En-tête */
.app-header {
	grid-area: header;
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: 0 var(--sp-5);
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	z-index: 20;
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand__logo { width: 30px; height: 30px; flex: none; display: block; }
.brand__name {
	font-size: 18px; font-weight: 700; letter-spacing: .2px; color: var(--text);
}
.brand__tag {
	font-size: 12px; color: var(--text-faint); font-weight: 500;
	padding-left: var(--sp-3); border-left: 1px solid var(--border);
}
.header-spacer { flex: 1; }
.header-project {
	font-size: 13px; color: var(--text-soft);
}
.header-project b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------- Sidebar */
.sidebar {
	grid-area: sidebar;
	background: var(--surface);
	border-right: 1px solid var(--border);
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	-webkit-overflow-scrolling: touch;
}

.section {
	border-bottom: 1px solid var(--border);
	padding: var(--sp-5);
}
.section:last-of-type { border-bottom: none; }
.section__head {
	display: flex; align-items: center; gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
}
.section__num {
	width: 22px; height: 22px; flex: none;
	display: grid; place-items: center;
	background: var(--surface-3); color: var(--text-soft);
	border-radius: var(--radius-pill);
	font-size: 12px; font-weight: 700;
}
.section__title { margin: 0; font-size: 15px; font-weight: 650; }
.section__hint { margin: 0 0 var(--sp-4); color: var(--text-soft); font-size: 12.5px; }

/* --------------------------------------------------------------- Champs */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.field { display: flex; flex-direction: column; gap: 5px; }
.field--full { grid-column: 1 / -1; }
.field > label {
	font-size: 12px; font-weight: 600; color: var(--text-soft);
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .unit {
	position: absolute; right: 10px; font-size: 12px; color: var(--text-faint);
	pointer-events: none;
}
input[type="number"], select {
	width: 100%; height: var(--control-h);
	padding: 0 var(--sp-3);
	background: var(--surface); color: var(--text);
	border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
	font-size: 14px; outline: none;
	transition: border-color .15s, box-shadow .15s;
	-moz-appearance: textfield;
}
input[type="number"].has-unit { padding-right: 30px; }
/* Supprime les flèches spinner (Chromium/Safari) qui rognent la valeur sous l'unité. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"]:focus, select:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"].invalid {
	border-color: var(--danger);
	box-shadow: 0 0 0 3px var(--danger-soft);
}
select { cursor: pointer; }

/* --------------------------------------------------------------- Boutons */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: var(--sp-2);
	height: var(--control-h); padding: 0 var(--sp-4);
	border: 1px solid transparent; border-radius: var(--radius-sm);
	font-size: 14px; font-weight: 600; cursor: pointer;
	transition: background .15s, border-color .15s, opacity .15s, transform .05s;
	white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent); color: var(--accent-contrast); }
.btn--primary:hover { background: var(--accent-strong); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.btn--danger:hover { background: var(--danger-soft); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn__spinner {
	width: 15px; height: 15px; border-radius: 50%;
	border: 2px solid rgba(255,255,255,.45); border-top-color: #fff;
	animation: spin .7s linear infinite; display: none;
}
.btn.is-loading .btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.btn-row { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.btn-row .btn { flex: 1; }

/* ------------------------------------------------------- Segmented control */
.segmented {
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--surface-3); border-radius: var(--radius-sm);
	padding: 4px; margin-bottom: var(--sp-3);
}
.segmented button {
	height: 38px; border: none; background: transparent; cursor: pointer;
	border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-soft);
	transition: background .15s, color .15s, box-shadow .15s;
}
.segmented button[aria-pressed="true"] {
	background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}
.segmented button:disabled { opacity: .5; cursor: not-allowed; }

/* --------------------------------------------------- Éléments (cotes + pose) */
.el-config { display: flex; flex-direction: column; gap: var(--sp-3); }
.el-config__item {
	display: flex; flex-direction: column; gap: var(--sp-2);
	padding: var(--sp-3);
	background: var(--surface); border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
}
.el-config__label { display: flex; align-items: center; gap: var(--sp-2); }
.el-config__label svg { width: 20px; height: 20px; color: var(--accent-strong); flex-shrink: 0; }
.el-config__label span { font-size: 13px; font-weight: 600; }
.el-config__dims { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.input-wrap--sm { width: 78px; flex-shrink: 0; }
.el-config__x { color: var(--text-faint); font-size: 13px; }
.el-config__place { height: var(--control-h); padding: 0 var(--sp-3); margin-left: auto; flex-shrink: 0; }

.subhead {
	font-size: 12px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; color: var(--text-faint);
	margin: var(--sp-5) 0 var(--sp-3);
}

/* ------------------------------------------------------- Liste d'éléments */
.el-list { display: flex; flex-direction: column; gap: 6px; margin-top: var(--sp-3); }
.el-list:empty { display: none; }
.el-item {
	display: flex; align-items: center; gap: var(--sp-3);
	padding: 8px var(--sp-3);
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: var(--radius-sm); font-size: 13px;
}
.el-item__type { font-weight: 600; }
.el-item__dim { color: var(--text-soft); font-size: 12px; }
.el-item__spacer { flex: 1; }
.el-item__del {
	border: none; background: transparent; color: var(--danger);
	cursor: pointer; padding: 4px; border-radius: 6px; display: grid; place-items: center;
}
.el-item__del:hover { background: var(--danger-soft); }

/* --------------------------------------------------- Encadré informatif */
.note {
	display: flex; gap: var(--sp-2); align-items: flex-start;
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: var(--sp-3);
	font-size: 12px; color: var(--text-soft); margin-top: var(--sp-3);
}
.note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--text-faint); }

.status-msg {
	margin-top: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--radius-sm);
	font-size: 13px; font-weight: 500; display: none;
}
.status-msg.show { display: block; }
.status-msg--info   { background: var(--surface-2); color: var(--text-soft); border:1px solid var(--border); }
.status-msg--ok     { background: var(--ok-soft); color: #1c7a45; border:1px solid #bfe6cd; }
.status-msg--error  { background: var(--danger-soft); color: #a4362f; border:1px solid #f0c9c6; }

/* --------------------------------------------------------- Résultat cards */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.stat {
	background: var(--surface-2); border: 1px solid var(--border);
	border-radius: var(--radius-sm); padding: var(--sp-3);
}
.stat--wide { grid-column: 1 / -1; }
.stat--accent { background: var(--accent-soft); border-color: #f0dcc2; }
.stat__label { font-size: 11.5px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .4px; }
.stat__value { font-size: 20px; font-weight: 700; margin-top: 2px; }
.stat__value small { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.stat--accent .stat__value { color: var(--accent-strong); }

.price-legal { margin-top: var(--sp-3); font-size: 11px; color: var(--text-faint); font-style: italic; }

/* checkbox options fictives */
.opt-row { display: flex; align-items: center; gap: var(--sp-3); padding: 8px 0; }
.opt-row input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.opt-row label { font-size: 13px; cursor: pointer; flex: 1; }
.opt-row .opt-price { color: var(--text-soft); font-size: 12.5px; }

/* --------------------------------------------------------------- Scène 3D */
.scene {
	grid-area: scene;
	position: relative;
	overflow: hidden;
	background: #cdd6df;
}
#renderCanvas {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	display: block; outline: none; touch-action: none;
}

/* Barre d'outils scène (haut) */
.scene-toolbar {
	position: absolute; top: var(--sp-4); left: 50%; transform: translateX(-50%);
	display: flex; gap: 4px; z-index: 8;
	background: rgba(255,255,255,.92); backdrop-filter: blur(6px);
	border: 1px solid var(--border); border-radius: var(--radius-pill);
	padding: 5px; box-shadow: var(--shadow);
}
.scene-toolbar button {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 12px; border: none; background: transparent;
	border-radius: var(--radius-pill); cursor: pointer; color: var(--text);
	font-size: 12.5px; font-weight: 600;
}
.scene-toolbar button:hover { background: var(--surface-3); }
.scene-toolbar button svg { width: 16px; height: 16px; }
.scene-toolbar button.icon-only { padding: 0 9px; }
.scene-toolbar .sep { width: 1px; background: var(--border); margin: 4px 2px; }

/* Panneau d'affichage (soleil) */
.display-panel {
	position: absolute; top: calc(var(--sp-4) + 46px); left: 50%; transform: translateX(-50%);
	display: none; flex-direction: column; gap: 6px; z-index: 8;
	background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
	border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
	box-shadow: var(--shadow); width: 272px;
	/* Le panneau porte maintenant plusieurs couches de decor : on le laisse
	   defiler plutot que deborder du canvas sur les petits ecrans. */
	max-height: calc(100% - 92px); overflow-y: auto;
}
.display-panel__sep {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
	font-size: 12px; font-weight: 700; color: var(--text-soft);
}
.display-panel__sep input[type="checkbox"] { margin: 0; }
.display-panel.show { display: flex; }
.display-panel__title { font-size: 12px; font-weight: 700; color: var(--text-soft); }
.display-panel input[type="range"] { width: 100%; accent-color: var(--accent); }
.display-panel .row { display: flex; align-items: center; justify-content: space-between; }
.display-panel .row span { font-size: 12px; color: var(--text-faint); }

/* Bandeau de mode placement */
.placement-banner {
	position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 9;
	display: none; align-items: center; gap: var(--sp-3);
	background: var(--text); color: #fff; border-radius: var(--radius-pill);
	padding: 9px var(--sp-4); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 500;
	max-width: min(90%, 520px);
}
.placement-banner.show { display: flex; }
.placement-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex:none;
	animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
.placement-banner button {
	border: none; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
	border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: 600;
}
.placement-banner button:hover { background: rgba(255,255,255,.28); }

/* Barre de synthèse permanente (bas de scène) */
.summary-bar {
	position: absolute; left: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); z-index: 7;
	display: flex; align-items: center; gap: var(--sp-5);
	background: rgba(255,255,255,.95); backdrop-filter: blur(8px);
	border: 1px solid var(--border); border-radius: var(--radius);
	padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow);
	overflow-x: auto;
}
.summary-item { display: flex; flex-direction: column; line-height: 1.2; white-space: nowrap; }
.summary-item .k { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing:.4px; color: var(--text-faint); }
.summary-item .v { font-size: 16px; font-weight: 700; }
.summary-item--price .v { color: var(--accent-strong); }
.summary-sep { width: 1px; align-self: stretch; background: var(--border); }
.summary-status { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
.summary-status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-faint); }
.summary-status.is-ok .dot { background: var(--ok); }
.summary-status.is-empty .dot { background: var(--text-faint); }

/* ------------------------------------------------- Overlays hérités (3D) */
/* Conteneur des overlays de manipulation, calé sur la scène. */
#legacy-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#legacy-overlays > * { pointer-events: auto; }

/* Éléments hérités masqués (pilotés par la nouvelle UI, jamais affichés). */
.legacy-hidden { position: absolute !important; left: -99999px !important; top: -99999px !important;
	width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

/* ---------------------------------------------------- Mobile / bottom sheet */
.mobile-tab-bar { display: none; }

@media (max-width: 860px) {
	:root { --header-h: 52px; }
	/* En-tête compact : on masque le tag et l'info projet, on garde marque + reset. */
	.brand__tag, .header-project { display: none; }
	#btnReset { flex: none; }
	#app {
		grid-template-columns: 1fr;
		grid-template-rows: var(--header-h) 1fr;
		grid-template-areas:
			"header"
			"scene";
	}
	.scene { grid-area: scene; }

	/* La sidebar devient un bottom sheet coulissant sous la scène. */
	.sidebar {
		position: fixed; left: 0; right: 0; bottom: 0;
		height: 62vh; max-height: 62vh;
		border-right: none; border-top: 1px solid var(--border);
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		box-shadow: 0 -8px 30px rgba(24,28,33,.16);
		transform: translateY(calc(100% - 96px));
		transition: transform .28s ease;
		z-index: 30;
	}
	.sidebar.open { transform: translateY(0); }
	.sidebar__handle {
		display: flex; flex-direction: column; align-items: center; gap: 6px;
		padding: 10px 0 6px; cursor: pointer; position: sticky; top: 0;
		background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		z-index: 2;
	}
	.sidebar__handle .grip { width: 40px; height: 4px; border-radius: 2px; background: var(--border-strong); }
	.sidebar__handle .lbl { font-size: 12px; font-weight: 600; color: var(--text-soft); }

	/* Scène : ~42% de haut, sous le header, au-dessus du sheet. */
	#renderCanvas { height: 100%; }

	.summary-bar {
		left: 8px; right: 8px; bottom: calc(96px + 8px);
		gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
	}
	.summary-item .v { font-size: 14px; }
	.scene-toolbar { top: 8px; padding: 4px; }
	.scene-toolbar button { height: 32px; padding: 0 9px; font-size: 0; gap: 0; }
	.scene-toolbar button svg { width: 18px; height: 18px; }
	.scene-toolbar button.always-label { font-size: 12px; padding: 0 12px; }
	.segmented button { height: var(--control-h); }
	.cards { grid-template-columns: 1fr 1fr 1fr; }
}

.sidebar__handle { display: none; } /* visible seulement en mobile via media query */
@media (max-width: 860px) { .sidebar__handle { display: flex; } }