/* =========================================================================
   LJ METAL — Calculateur solaire (/calculateur/)
   Page autonome : globe 3D en fond, panneaux de verre, orange sur noir.
   ========================================================================= */

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
	--ljc-bg: #050506;
	--ljc-glass: rgba(13, 13, 15, .7);
	--ljc-glass-2: rgba(20, 20, 23, .78);
	--ljc-line: rgba(255, 255, 255, .08);
	--ljc-line-2: rgba(255, 255, 255, .14);
	--ljc-text: #F5F5F7;
	--ljc-mut: rgba(245, 245, 247, .66);
	--ljc-dim: rgba(245, 245, 247, .42);
	--ljc-accent: #F4791F;
	--ljc-accent-2: #FF9A4D;
	--ljc-accent-soft: rgba(244, 121, 31, .14);
	--ljc-radius: 24px;
	--ljc-top: 76px;
	--ljc-ease: cubic-bezier(.16, 1, .3, 1);
}

html, body.ljm-calc-tool {
	margin: 0;
	height: 100%;
	overflow: hidden;
	background: var(--ljc-bg);
}
body.ljm-calc-tool {
	color: var(--ljc-text);
	font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ljc *, .ljc *::before, .ljc *::after { box-sizing: border-box; }
/* Remises à zéro sans spécificité : chaque composant garde la main. */
:where(.ljc) :where(button, input, textarea) { font: inherit; color: inherit; }
:where(.ljc) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
:where(.ljc) :where(button:disabled) { cursor: default; }
.ljc :focus-visible { outline: 2px solid var(--ljc-accent); outline-offset: 3px; }
.ljc [hidden] { display: none !important; }
.ljc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ljc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ljc ::selection { background: var(--ljc-accent); color: #fff; }

.ljc { position: fixed; inset: 0; overflow: hidden; }

/* ---------------------------------------------------------------- globe */
.ljc-globe { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 1.6s ease; }
.ljc.is-globe-ready .ljc-globe { opacity: 1; }
.ljc-globe canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ljc[data-step-current="adresse"] .ljc-globe canvas { cursor: grab; }
.ljc[data-step-current="adresse"] .ljc-globe canvas:active { cursor: grabbing; }

.ljc.is-noglobe .ljc-globe {
	opacity: 1;
	background:
		radial-gradient(circle at 72% 30%, rgba(244, 121, 31, .28), transparent 34%),
		radial-gradient(circle at 70% 55%, rgba(255, 255, 255, .05), transparent 45%),
		var(--ljc-bg);
}

.ljc-veil {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(5, 5, 6, .9) 0%, rgba(5, 5, 6, .55) 34%, rgba(5, 5, 6, 0) 58%),
		linear-gradient(180deg, rgba(5, 5, 6, .6) 0%, rgba(5, 5, 6, 0) 18%, rgba(5, 5, 6, 0) 80%, rgba(5, 5, 6, .55) 100%);
	transition: background-color .9s ease, opacity .9s ease;
}
.ljc[data-step-current="carport"] .ljc-veil { background-color: rgba(5, 5, 6, .62); }
.ljc[data-step-current="resultats"] .ljc-veil { background-color: rgba(5, 5, 6, .74); }

/* ---------------------------------------------------------------- barre haute */
.ljc-top {
	position: absolute; z-index: 30; top: 0; left: 0; right: 0;
	height: var(--ljc-top);
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
	padding: 0 clamp(18px, 3vw, 36px);
	background: linear-gradient(180deg, rgba(5, 5, 6, .85), rgba(5, 5, 6, 0));
}
.ljc-brand img { display: block; height: 28px; width: auto; }
.ljc-steps {
	display: flex; gap: 4px; padding: 5px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--ljc-line);
	border-radius: 999px;
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.ljc-steps button {
	display: inline-flex; align-items: center; gap: 8px;
	height: 36px; padding: 0 16px 0 7px;
	border-radius: 999px;
	font-size: 13.5px; font-weight: 550; color: var(--ljc-dim);
	transition: background .3s, color .3s;
}
.ljc-steps button i {
	display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
	font-style: normal; font-size: 11px; font-weight: 650; letter-spacing: .02em;
	background: rgba(255, 255, 255, .06); color: var(--ljc-dim);
	transition: background .3s, color .3s;
}
.ljc-steps button:not(:disabled):hover { color: var(--ljc-text); }
.ljc-steps button.is-done { color: var(--ljc-mut); }
.ljc-steps button.is-done i { background: var(--ljc-accent-soft); color: var(--ljc-accent-2); }
.ljc-steps button.is-active { background: rgba(255, 255, 255, .08); color: var(--ljc-text); }
.ljc-steps button.is-active i { background: var(--ljc-accent); color: #fff; box-shadow: 0 0 18px rgba(244, 121, 31, .55); }
.ljc-steps button:disabled { opacity: .55; }

.ljc-top-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ljc-lock, .ljc-admin-btn {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; border-radius: 50%;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--ljc-line);
	color: var(--ljc-dim);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	transition: color .25s, border-color .25s, background .25s, box-shadow .25s;
}
.ljc-lock svg, .ljc-admin-btn svg { width: 19px; height: 19px; }
.ljc-lock:hover { color: var(--ljc-text); border-color: var(--ljc-line-2); }
.ljc-lock .is-open { display: none; }
.ljc-lock.is-open { color: var(--ljc-accent); border-color: rgba(244, 121, 31, .5); box-shadow: 0 0 22px rgba(244, 121, 31, .25); }
.ljc-lock.is-open .is-open { display: block; }
.ljc-lock.is-open .is-closed { display: none; }
.ljc-admin-btn {
	width: auto; padding: 0 16px 0 13px; border-radius: 999px;
	display: inline-flex; gap: 8px; font-size: 13.5px; font-weight: 600;
	color: var(--ljc-accent-2); border-color: rgba(244, 121, 31, .4); background: rgba(244, 121, 31, .1);
}
.ljc-admin-btn:hover { background: rgba(244, 121, 31, .18); }

/* ---------------------------------------------------------------- étapes */
.ljc-stage { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.ljc-step {
	position: absolute; inset: var(--ljc-top) 0 0 0;
	display: flex; align-items: center;
	padding: 0 clamp(20px, 5vw, 84px) 28px;
	visibility: hidden;
	transition: visibility 0s linear .7s;
}
.ljc-step.is-active { visibility: visible; transition-delay: 0s; }
.ljc-step.is-wide { justify-content: center; }

.ljc-panel {
	pointer-events: auto;
	position: relative;
	width: min(520px, 100%);
	max-height: calc(100dvh - var(--ljc-top) - 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .15) transparent;
	padding: 34px;
	background: var(--ljc-glass);
	border: 1px solid var(--ljc-line);
	border-radius: var(--ljc-radius);
	backdrop-filter: blur(24px) saturate(1.25); -webkit-backdrop-filter: blur(24px) saturate(1.25);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
	opacity: 0;
	transform: translateY(26px) scale(.985);
	filter: blur(8px);
	transition: opacity .55s var(--ljc-ease), transform .7s var(--ljc-ease), filter .55s var(--ljc-ease);
}
.ljc-step.is-active .ljc-panel { opacity: 1; transform: none; filter: none; transition-delay: .18s; }
.ljc-panel.is-intro {
	width: min(640px, 100%);
	background: none; border: 0; box-shadow: none;
	backdrop-filter: none; -webkit-backdrop-filter: none;
	padding: 0;
	overflow: visible;
}
.ljc-panel.is-wide { width: min(1220px, 100%); }

/* ---------------------------------------------------------------- typographie */
.ljc-kicker {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 16px;
	font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ljc-accent-2);
}
.ljc-kicker i {
	font-style: normal; display: inline-grid; place-items: center;
	min-width: 30px; height: 22px; padding: 0 7px; border-radius: 999px;
	background: var(--ljc-accent-soft); letter-spacing: .04em;
}
.ljc-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--ljc-accent); box-shadow: 0 0 12px var(--ljc-accent); }
.ljc-pulse::after {
	content: ''; position: absolute; inset: -5px; border-radius: 50%;
	border: 1px solid var(--ljc-accent); opacity: 0;
	animation: ljc-ping 2.2s var(--ljc-ease) infinite;
}
@keyframes ljc-ping { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.8); opacity: 0; } }

.ljc-h1 {
	margin: 0 0 20px;
	font-size: clamp(42px, 5.4vw, 80px);
	line-height: 1;
	font-weight: 640;
	letter-spacing: -.04em;
	text-wrap: balance;
}
.ljc-h1 em, .ljc-hero-value span {
	font-style: normal;
	background: linear-gradient(100deg, #FFB070 0%, var(--ljc-accent) 45%, #E4600B 100%);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
.ljc-h2 {
	margin: 0 0 8px;
	font-size: clamp(26px, 2.5vw, 34px);
	line-height: 1.12; font-weight: 630; letter-spacing: -.025em;
	text-wrap: balance;
}
.ljc-h2:focus, .ljc-h1:focus { outline: none; }
.ljc-lead { margin: 0 0 34px; max-width: 520px; font-size: 18px; line-height: 1.55; color: var(--ljc-mut); }
.ljc-lead.is-small { margin: 0; font-size: 14.5px; max-width: 360px; }

/* ---------------------------------------------------------------- recherche */
.ljc-search { position: relative; max-width: 560px; }
.ljc-search-box {
	position: relative; display: flex; align-items: center;
	height: 68px; padding: 0 8px 0 20px;
	background: rgba(22, 22, 25, .72);
	border: 1px solid var(--ljc-line-2);
	border-radius: 20px;
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
	transition: border-color .25s, box-shadow .25s;
}
.ljc-search-box:focus-within { border-color: rgba(244, 121, 31, .7); box-shadow: 0 0 0 4px rgba(244, 121, 31, .14), 0 24px 70px rgba(0, 0, 0, .5); }
.ljc-search-ico { width: 22px; height: 22px; flex: none; color: var(--ljc-accent); }
.ljc-search-box input {
	flex: 1; min-width: 0; height: 100%;
	padding: 0 14px; border: 0; background: none; outline: none;
	font-size: 18px; font-weight: 500;
}
.ljc-search-box input::placeholder { color: var(--ljc-dim); }
.ljc-search-box input:focus-visible { outline: none; }
.ljc-search-go {
	display: grid; place-items: center; flex: none;
	width: 52px; height: 52px; border-radius: 14px;
	background: var(--ljc-accent); color: #fff;
	box-shadow: 0 10px 30px rgba(244, 121, 31, .35);
	transition: transform .25s var(--ljc-ease), background .25s;
}
.ljc-search-go:hover { background: #E4680F; transform: translateX(2px); }
.ljc-search-go svg { width: 20px; height: 20px; }
.ljc-spin {
	width: 18px; height: 18px; margin-right: 12px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .15); border-top-color: var(--ljc-accent);
	animation: ljc-spin .8s linear infinite;
}
@keyframes ljc-spin { to { transform: rotate(360deg); } }
.ljc-search-msg { min-height: 20px; margin: 10px 4px 0; font-size: 13.5px; color: var(--ljc-dim); }

.ljc-ac {
	position: absolute; z-index: 5; left: 0; right: 0; top: 76px;
	margin: 0; padding: 6px; list-style: none;
	background: rgba(16, 16, 19, .94);
	border: 1px solid var(--ljc-line-2);
	border-radius: 18px;
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	max-height: 340px; overflow-y: auto;
	animation: ljc-pop .25s var(--ljc-ease);
}
@keyframes ljc-pop { from { opacity: 0; transform: translateY(-6px); } }
.ljc-ac li {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 14px; border-radius: 12px;
	font-size: 15px; cursor: pointer;
	color: var(--ljc-mut);
}
.ljc-ac li.is-on, .ljc-ac li:hover { background: rgba(255, 255, 255, .07); color: var(--ljc-text); }
.ljc-ac-flag { flex: none; width: 30px; padding: 3px 0; border-radius: 6px; background: rgba(255, 255, 255, .07); font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-align: center; color: var(--ljc-dim); }
.ljc-ac-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ljc-ac-tag { flex: none; font-size: 11px; font-weight: 600; color: var(--ljc-accent-2); background: var(--ljc-accent-soft); padding: 3px 8px; border-radius: 999px; }

.ljc-proofs {
	display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 30px;
	margin: 38px 0 0; padding: 0; list-style: none;
}
.ljc-proofs li { display: flex; flex-direction: column; gap: 2px; padding-left: 14px; border-left: 2px solid rgba(244, 121, 31, .55); }
.ljc-proofs b { font-size: 14px; font-weight: 620; }
.ljc-proofs span { font-size: 13px; color: var(--ljc-dim); }

/* ---------------------------------------------------------------- parcelle */
.ljc-site-commune { margin: 0 0 24px; color: var(--ljc-mut); font-size: 15px; }
.ljc-sunbox {
	padding: 22px; margin-bottom: 18px;
	border-radius: 18px;
	background: linear-gradient(160deg, rgba(244, 121, 31, .14), rgba(244, 121, 31, .02) 60%), rgba(255, 255, 255, .02);
	border: 1px solid rgba(244, 121, 31, .22);
}
.ljc-sunbox-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ljc-sunbox-label { font-size: 13px; color: var(--ljc-mut); }
.ljc-sunbox-value { margin: 6px 0 18px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ljc-sunbox-value b { font-size: 54px; line-height: 1; font-weight: 650; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ljc-sunbox-value span { font-size: 14px; color: var(--ljc-mut); }
.ljc-months { display: flex; align-items: flex-end; gap: 5px; height: 72px; }
.ljc-months i {
	flex: 1; height: calc(var(--h) * 100%);
	border-radius: 5px 5px 2px 2px;
	background: linear-gradient(180deg, var(--ljc-accent-2), rgba(244, 121, 31, .35));
	transform-origin: bottom;
	animation: ljc-grow .9s var(--ljc-ease) both;
	animation-delay: var(--d, 0ms);
}
@keyframes ljc-grow { from { transform: scaleY(0); } }
.ljc-months-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--ljc-dim); }

.ljc-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 11px; border-radius: 999px;
	font-size: 12px; font-weight: 620;
	background: rgba(255, 255, 255, .07); color: var(--ljc-mut);
}
.ljc-chip.is-accent { background: var(--ljc-accent-soft); color: var(--ljc-accent-2); }

.ljc-facts { margin: 0 0 26px; display: grid; gap: 10px; }
.ljc-facts div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-size: 14px; }
.ljc-facts dt { color: var(--ljc-dim); }
.ljc-facts dd { margin: 0; color: var(--ljc-text); }

@keyframes ljc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
[data-site].is-loading .ljc-sunbox-value b,
[data-site].is-loading [data-site-tarif],
[data-site].is-loading [data-site-source] { color: transparent; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); background-size: 200% 100%; animation: ljc-shimmer 1.3s linear infinite; }
[data-site].is-loading .ljc-sunbox-value b { min-width: 150px; display: inline-block; }
[data-site].is-loading .ljc-months i { background: rgba(255, 255, 255, .08); }

/* ---------------------------------------------------------------- boutons */
.ljc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.ljc-actions .ljc-btn.is-accent { margin-left: auto; } /* retour à gauche, suite à droite */
.ljc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 52px; padding: 0 24px;
	border-radius: 999px;
	font-size: 15px; font-weight: 620; letter-spacing: -.005em;
	text-decoration: none;
	transition: background .25s, color .25s, border-color .25s, transform .3s var(--ljc-ease), box-shadow .25s, opacity .25s;
}
.ljc-btn svg { width: 18px; height: 18px; transition: transform .3s var(--ljc-ease); }
.ljc-btn:hover svg { transform: translateX(3px); }
.ljc-btn.is-ghost:hover svg { transform: translateX(-3px); }
.ljc-btn.is-accent { background: var(--ljc-accent); color: #fff; box-shadow: 0 14px 40px rgba(244, 121, 31, .32); }
.ljc-btn.is-accent:hover { background: #E4680F; box-shadow: 0 18px 50px rgba(244, 121, 31, .42); }
.ljc-btn.is-accent:disabled { opacity: .4; box-shadow: none; }
.ljc-btn.is-ghost { padding: 0 14px; color: var(--ljc-mut); }
.ljc-btn.is-ghost:hover { color: var(--ljc-text); }
.ljc-btn.is-outline { border: 1px solid var(--ljc-line-2); color: var(--ljc-text); }
.ljc-btn.is-outline:hover { border-color: var(--ljc-accent); color: var(--ljc-accent-2); }
.ljc-btn.is-block { width: 100%; }
.ljc-btn.is-big { height: 58px; padding: 0 30px; font-size: 16px; }

/* ---------------------------------------------------------------- formulaire */
.ljc-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 26px; }
.ljc-presets button {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
	padding: 16px 14px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid var(--ljc-line);
	text-align: left;
	transition: border-color .25s, background .25s, transform .3s var(--ljc-ease);
}
.ljc-presets button:hover { border-color: var(--ljc-line-2); transform: translateY(-2px); }
.ljc-presets svg { width: 24px; height: 24px; margin-bottom: 10px; color: var(--ljc-dim); transition: color .25s; }
.ljc-presets b { font-size: 14px; font-weight: 620; }
.ljc-presets span { font-size: 12.5px; color: var(--ljc-dim); }
.ljc-presets button.is-active { border-color: var(--ljc-accent); background: var(--ljc-accent-soft); }
.ljc-presets button.is-active svg { color: var(--ljc-accent); }

.ljc-field { margin-bottom: 22px; }
.ljc-field-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ljc-field-head label { font-size: 14px; font-weight: 560; color: var(--ljc-mut); }
.ljc-field-head output { font-size: 20px; font-weight: 640; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ljc-hint { margin: 8px 0 0; font-size: 12.5px; color: var(--ljc-dim); }
.ljc-num { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ljc-dim); }
.ljc-num input {
	width: 96px; height: 42px; padding: 0 12px;
	border-radius: 12px; border: 1px solid var(--ljc-line-2);
	background: rgba(255, 255, 255, .04);
	font-size: 17px; font-weight: 620; color: var(--ljc-text); text-align: right;
	font-variant-numeric: tabular-nums;
}
.ljc-num input:focus { outline: none; border-color: var(--ljc-accent); }

.ljc input[type="range"] {
	-webkit-appearance: none; appearance: none;
	width: 100%; height: 26px; margin: 0; background: none; cursor: pointer;
	--p: 50%;
}
.ljc input[type="range"]::-webkit-slider-runnable-track {
	height: 6px; border-radius: 6px;
	background: linear-gradient(90deg, var(--ljc-accent) 0 var(--p), rgba(255, 255, 255, .1) var(--p) 100%);
}
.ljc input[type="range"]::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); }
.ljc input[type="range"]::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--ljc-accent); }
.ljc input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
	background: #fff; border: 5px solid var(--ljc-accent);
	box-shadow: 0 0 0 6px rgba(244, 121, 31, .16), 0 4px 14px rgba(0, 0, 0, .4);
	transition: transform .2s var(--ljc-ease);
}
.ljc input[type="range"]::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%;
	background: #fff; border: 5px solid var(--ljc-accent);
	box-shadow: 0 0 0 6px rgba(244, 121, 31, .16);
}
.ljc input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }

.ljc-toggles { display: grid; gap: 10px; margin: 6px 0 4px; }
.ljc-switch {
	display: flex; align-items: center; gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--ljc-line);
	cursor: pointer;
	transition: border-color .25s, background .25s;
}
.ljc-switch:hover { border-color: var(--ljc-line-2); }
.ljc-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ljc-switch i {
	position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	transition: background .3s;
}
.ljc-switch i::after {
	content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
	background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
	transition: transform .35s var(--ljc-ease);
}
.ljc-switch input:checked + i { background: var(--ljc-accent); }
.ljc-switch input:checked + i::after { transform: translateX(18px); }
.ljc-switch input:focus-visible + i { outline: 2px solid var(--ljc-accent); outline-offset: 3px; }
.ljc-switch span { display: flex; flex-direction: column; }
.ljc-switch b { font-size: 14.5px; font-weight: 580; }
.ljc-switch small { font-size: 12.5px; color: var(--ljc-dim); }
.ljc-switch:has(input:checked) { border-color: rgba(244, 121, 31, .38); background: rgba(244, 121, 31, .06); }
.ljc-switch.is-small { padding: 10px 12px; border-radius: 14px; }
.ljc-switch.is-small i { width: 38px; height: 22px; }
.ljc-switch.is-small i::after { width: 16px; height: 16px; }
.ljc-switch.is-small input:checked + i::after { transform: translateX(16px); }
.ljc-switch.is-small b { font-size: 13.5px; }

.ljc-ve {
	display: grid; gap: 10px;
	margin-top: 10px; padding: 18px 16px 16px;
	border-radius: 16px;
	background: rgba(244, 121, 31, .04);
	border: 1px dashed rgba(244, 121, 31, .25);
	animation: ljc-pop .35s var(--ljc-ease);
}
.ljc-ve .ljc-field { margin-bottom: 6px; }

/* ---------------------------------------------------------------- carport */
.ljc-panel-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.ljc-models { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ljc-models.is-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Six modèles : cartes plus basses pour tenir sur deux rangées. */
.ljc-models.is-6 .ljc-model-img { aspect-ratio: 16 / 9; }
.ljc-models.is-6 .ljc-model-body { padding: 12px 16px 14px; }
.ljc-models.is-6 .ljc-model-name { font-size: 19px; }
.ljc-models.is-6 .ljc-model-gain { margin-top: auto; padding-top: 8px; }
.ljc-models.is-6 .ljc-model-gain b { font-size: 18px; }
.ljc-model {
	position: relative; display: flex; flex-direction: column;
	border-radius: 20px; overflow: hidden;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--ljc-line);
	text-align: left;
	transition: border-color .3s, transform .45s var(--ljc-ease), box-shadow .3s, background .3s;
}
.ljc-model:hover { transform: translateY(-4px); border-color: var(--ljc-line-2); }
.ljc-model.is-active { border-color: var(--ljc-accent); background: rgba(244, 121, 31, .07); box-shadow: 0 20px 60px rgba(244, 121, 31, .18); }
.ljc-model-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #111; }
.ljc-model-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ljc-ease); }
/* Vue 3/4 (fond transparent) posée sur un studio sombre, halo orange
   renforcé sur la carte choisie. */
.ljc-model-img {
	background:
		radial-gradient(60% 45% at 50% 78%, rgba(244, 121, 31, .12), transparent 70%),
		radial-gradient(90% 80% at 50% 40%, #1d1d21, #0b0b0d 75%);
	transition: background .4s ease;
}
.ljc-model.is-active .ljc-model-img {
	background:
		radial-gradient(60% 45% at 50% 78%, rgba(244, 121, 31, .3), transparent 70%),
		radial-gradient(90% 80% at 50% 40%, #221c18, #0b0b0d 75%);
}
.ljc-model-img img[data-model-img] { object-fit: contain; }
.ljc-model-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 16px; }
.ljc-model-badge { font-size: 11px; font-weight: 620; letter-spacing: .08em; text-transform: uppercase; color: var(--ljc-dim); }
.ljc-model-name { font-size: 22px; font-weight: 660; letter-spacing: -.02em; }
.ljc-model-specs { font-size: 12.5px; color: var(--ljc-mut); }
.ljc-model-gain { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ljc-line); }
.ljc-model-specs:last-of-type { margin-bottom: 12px; }
.ljc-model-gain small { font-size: 11.5px; color: var(--ljc-dim); }
.ljc-model-gain small:first-child { width: 100%; }
.ljc-model-gain b { font-size: 20px; font-weight: 660; color: var(--ljc-accent-2); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.ljc-model-check {
	position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 50%;
	background: rgba(5, 5, 6, .55); border: 1.5px solid rgba(255, 255, 255, .5);
	backdrop-filter: blur(6px);
	transition: background .3s, border-color .3s;
}
.ljc-model.is-active .ljc-model-check { background: var(--ljc-accent); border-color: var(--ljc-accent); }
.ljc-model.is-active .ljc-model-check::after {
	content: ''; position: absolute; left: 9px; top: 5px; width: 6px; height: 12px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Modèles sur devis (SIGNATURE, autre installation) : grisés hors admin */
.ljc-model.is-locked { border-style: dashed; cursor: pointer; }
.ljc-model.is-locked .ljc-model-img,
.ljc-model.is-locked .ljc-model-name,
.ljc-model.is-locked .ljc-model-badge { opacity: .45; filter: grayscale(1); transition: opacity .3s, filter .3s; }
.ljc-model.is-locked:hover .ljc-model-img,
.ljc-model.is-locked:hover .ljc-model-name,
.ljc-model.is-locked:hover .ljc-model-badge { opacity: .7; filter: grayscale(.5); }
.ljc-model.is-locked .ljc-model-check { display: none; }
.ljc-model-lock { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--ljc-line-2); }
.ljc-model-lock b { font-size: 12px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ljc-accent-2); }
.ljc-model-lock small { font-size: 12.5px; line-height: 1.5; color: var(--ljc-mut); }
.ljc-model-lock em { margin-top: 4px; font-style: normal; font-size: 13px; font-weight: 620; color: var(--ljc-text); }
.ljc-model.is-locked:hover .ljc-model-lock em { color: var(--ljc-accent-2); }
.ljc-model-ico { display: block; width: 46%; margin: auto; color: rgba(245, 245, 247, .35); }
.ljc-model-img:has(.ljc-model-ico) { display: grid; place-items: center; }
.ljc-num.is-big input { width: 118px; height: 48px; font-size: 20px; }

.ljc-carport-opts { display: flex; flex-wrap: wrap; gap: 20px 36px; align-items: flex-end; margin-top: 26px; }
.ljc-opt { display: flex; flex-direction: column; gap: 10px; }
.ljc-carport-opts .ljc-opt > .ljc-seg,
.ljc-carport-opts .ljc-opt > .ljc-stepper { align-self: flex-start; } /* pas d'étirement à la largeur du libellé */
.ljc-opt-label { font-size: 12px; font-weight: 620; letter-spacing: .1em; text-transform: uppercase; color: var(--ljc-dim); }

.ljc-seg {
	display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--ljc-line);
}
.ljc-seg button {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 40px; padding: 0 14px;
	border-radius: 12px;
	font-size: 13.5px; font-weight: 580; color: var(--ljc-mut);
	transition: background .25s, color .25s, box-shadow .25s;
}
.ljc-seg button:hover { color: var(--ljc-text); }
.ljc-seg button.is-active { background: var(--ljc-accent); color: #fff; box-shadow: 0 8px 24px rgba(244, 121, 31, .3); }
.ljc-seg.is-panels button { min-height: 60px; padding: 8px 18px 8px 10px; text-align: left; }
.ljc-seg.is-panels span { display: flex; flex-direction: column; line-height: 1.25; }
.ljc-seg.is-panels small { font-size: 11.5px; font-weight: 500; opacity: .75; }
.ljc-swatch { width: 40px; height: 40px; border-radius: 10px; flex: none; border: 1px solid rgba(255, 255, 255, .14); }
.ljc-swatch.is-black {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 10px 10px,
		linear-gradient(180deg, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0 / 10px 10px,
		linear-gradient(135deg, #1b1d22, #07080a);
}
.ljc-swatch.is-clear {
	background:
		linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 10px 10px,
		linear-gradient(180deg, rgba(255, 255, 255, .5) 1px, transparent 1px) 0 0 / 10px 10px,
		radial-gradient(circle at 30% 30%, rgba(40, 60, 90, .9) 0 3px, transparent 3.5px) 0 0 / 10px 10px,
		linear-gradient(135deg, rgba(160, 190, 220, .45), rgba(90, 120, 150, .2));
}
.ljc-seg.is-small button { min-height: 34px; padding: 0 11px; font-size: 12.5px; border-radius: 10px; }
.ljc-seg.is-sub { margin-top: 6px; }

.ljc-stepper { display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ljc-line); }
.ljc-stepper button { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; color: var(--ljc-mut); transition: background .2s, color .2s; }
.ljc-stepper button:hover { background: rgba(255, 255, 255, .08); color: var(--ljc-text); }
.ljc-stepper output { min-width: 40px; text-align: center; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ljc-stepper.is-small button { width: 32px; height: 32px; font-size: 17px; }
.ljc-stepper.is-small output { min-width: 30px; font-size: 15px; }

/* ---------------------------------------------------------------- résultats */
.ljc-step.is-results { padding: 0; align-items: stretch; }
.ljc-res {
	pointer-events: auto;
	position: absolute; inset: 0;
	overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent;
	display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px;
	grid-auto-rows: max-content; /* hauteur fixe + overflow hidden : sans cela les lignes s'écrasent */
	padding: 18px max(clamp(20px, 4vw, 56px), calc((100% - 1340px) / 2)) 90px;
	opacity: 0; transform: translateY(30px);
	transition: opacity .6s var(--ljc-ease), transform .8s var(--ljc-ease);
}
.ljc-step.is-active .ljc-res { opacity: 1; transform: none; transition-delay: .25s; }
.ljc-res-main { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.ljc-hero {
	position: relative;
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 40px;
	padding: 34px 38px;
	border-radius: 28px;
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(244, 121, 31, .22), transparent 55%),
		var(--ljc-glass);
	border: 1px solid rgba(244, 121, 31, .28);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
	overflow: hidden;
}
.ljc-hero > * { grid-column: 1; }
.ljc-hero .ljc-kicker { margin-bottom: 18px; }
.ljc-hero-label { margin: 0; font-size: 18px; color: var(--ljc-mut); }
.ljc-hero-value {
	margin: 2px 0 6px; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	font-size: clamp(64px, 8.4vw, 128px); line-height: .95; font-weight: 660; letter-spacing: -.05em;
	font-variant-numeric: tabular-nums;
}
.ljc-hero-value small { font-size: clamp(18px, 1.6vw, 24px); font-weight: 560; letter-spacing: -.01em; color: var(--ljc-mut); }
.ljc-hero-sub { margin: 0; font-size: 17px; color: var(--ljc-mut); }
.ljc-hero-sub b { color: var(--ljc-text); font-weight: 650; font-variant-numeric: tabular-nums; }
.ljc-gauge { grid-column: 2; grid-row: 1 / span 5; position: relative; width: 190px; height: 190px; }
.ljc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ljc-gauge circle { fill: none; stroke-width: 9; }
.ljc-gauge-bg { stroke: rgba(255, 255, 255, .07); }
.ljc-gauge-fg {
	stroke: var(--ljc-accent); stroke-linecap: round;
	filter: drop-shadow(0 0 10px rgba(244, 121, 31, .6));
	transition: stroke-dashoffset 1.2s var(--ljc-ease);
}
.ljc-gauge span {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--ljc-dim);
}
.ljc-gauge b { font-size: 36px; line-height: 1.05; font-weight: 660; letter-spacing: -.03em; color: var(--ljc-text); margin-bottom: 4px; font-variant-numeric: tabular-nums; }

.ljc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ljc-kpis li {
	display: flex; flex-direction: column; gap: 2px;
	padding: 18px 18px 16px;
	border-radius: 20px;
	background: var(--ljc-glass);
	border: 1px solid var(--ljc-line);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.ljc-kpis span { font-size: 12px; color: var(--ljc-dim); }
.ljc-kpis b { font-size: 28px; line-height: 1.15; font-weight: 650; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ljc-kpis small { font-size: 12px; color: var(--ljc-mut); }

.ljc-boosts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ljc-boosts-title { grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--ljc-accent-2); }
.ljc-boost {
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 12px;
	padding: 16px 18px; border-radius: 18px; text-align: left;
	background: linear-gradient(135deg, rgba(244, 121, 31, .12), rgba(244, 121, 31, .03));
	border: 1px solid rgba(244, 121, 31, .3);
	transition: transform .35s var(--ljc-ease), border-color .25s, background .25s;
}
.ljc-boost:hover { transform: translateY(-3px); border-color: var(--ljc-accent); }
.ljc-boost-plus { grid-column: 1; font-size: 22px; font-weight: 660; letter-spacing: -.02em; color: var(--ljc-accent-2); font-variant-numeric: tabular-nums; }
.ljc-boost-plus small { font-size: 12px; font-weight: 560; color: var(--ljc-mut); }
.ljc-boost-txt { grid-column: 1; display: flex; flex-direction: column; }
.ljc-boost-txt b { font-size: 14px; font-weight: 600; }
.ljc-boost-txt small { font-size: 12.5px; color: var(--ljc-dim); }
.ljc-boost-add {
	grid-column: 2; grid-row: 1 / span 2;
	padding: 8px 14px; border-radius: 999px;
	font-size: 12.5px; font-weight: 620; color: #fff; background: var(--ljc-accent);
}

.ljc-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ljc-card {
	min-width: 0;
	padding: 24px 26px;
	border-radius: 24px;
	background: var(--ljc-glass);
	border: 1px solid var(--ljc-line);
	backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
}
.ljc-card.is-span2 { grid-column: 1 / -1; }
.ljc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
.ljc-card-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; font-weight: 630; letter-spacing: -.015em; }
.ljc-card-head p { margin: 3px 0 0; font-size: 13px; color: var(--ljc-dim); }

.ljc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--ljc-mut); }
.ljc-legend li { display: flex; align-items: center; gap: 8px; }
.ljc-legend i, .ljc-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ljc-legend i.is-self, .ljc-tip i.is-self { background: var(--ljc-accent); }
.ljc-legend i.is-grid, .ljc-tip i.is-grid { background: rgba(244, 121, 31, .3); }
.ljc-legend i.is-line, .ljc-tip i.is-line { height: 2px; border-radius: 2px; background: #fff; }
.ljc-legend.is-col { flex-direction: column; gap: 12px; }
.ljc-legend.is-col li { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; }
.ljc-legend.is-col b { color: var(--ljc-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.ljc-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ljc-chart .ljc-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.ljc-chart .ljc-zero { stroke: rgba(255, 255, 255, .35); stroke-width: 1.2; stroke-dasharray: 4 4; }
.ljc-ax { fill: var(--ljc-dim); font-size: 11.5px; font-family: inherit; font-variant-numeric: tabular-nums; }
.ljc-bar-grid { fill: rgba(244, 121, 31, .24); }
.ljc-line { fill: none; stroke: #F5F5F7; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ljc-line.is-accent { stroke: var(--ljc-accent); stroke-width: 2.8; }
.ljc-line-dot { fill: #0c0c0e; stroke: #F5F5F7; stroke-width: 1.8; }
.ljc-hit { fill: transparent; }
.ljc-hit:hover { fill: rgba(255, 255, 255, .03); }
.ljc-mark { fill: var(--ljc-accent); stroke: #0c0c0e; stroke-width: 2; }
.ljc-mark-lab { fill: var(--ljc-text); font-size: 12px; font-weight: 620; font-variant-numeric: tabular-nums; }
.ljc-pay { fill: #fff; stroke: var(--ljc-accent); stroke-width: 3; }
.ljc-pay-lab { fill: #fff; font-size: 12px; font-weight: 650; }

.ljc-donut-wrap { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 24px; }
.ljc-donut { width: 100%; height: auto; }
.ljc-donut-seg { transition: stroke-dasharray .8s var(--ljc-ease), stroke-dashoffset .8s var(--ljc-ease); }
.ljc-donut-val { fill: var(--ljc-text); font-size: 30px; font-weight: 660; letter-spacing: -.03em; }
.ljc-donut-lab { fill: var(--ljc-dim); font-size: 11px; }

.ljc-bill { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }
.ljc-bill-row { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
.ljc-bill-lab { grid-column: 1; grid-row: 1; font-size: 13.5px; color: var(--ljc-mut); }
.ljc-bill-val { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 640; text-align: right; font-variant-numeric: tabular-nums; }
.ljc-bill-track { grid-column: 1 / -1; grid-row: 2; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.ljc-bill-track i { display: block; height: 100%; border-radius: 8px; transition: width 1s var(--ljc-ease); }
.ljc-bill-row.is-before i { background: rgba(255, 255, 255, .28); }
.ljc-bill-row.is-after i { background: linear-gradient(90deg, #E4600B, var(--ljc-accent-2)); box-shadow: 0 0 20px rgba(244, 121, 31, .4); }
.ljc-bill-delta { margin: 6px 0 0; font-size: 14px; color: var(--ljc-mut); }
.ljc-bill-delta b { color: var(--ljc-accent-2); }

/* Rentabilité (admin) */
.ljc-invest { border-color: rgba(244, 121, 31, .35); }
.ljc-invest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 28px; }
.ljc-invest-table { margin: 0; display: flex; flex-direction: column; }
.ljc-invest-table div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--ljc-line); font-size: 14px; }
.ljc-invest-table dt { color: var(--ljc-mut); }
.ljc-invest-table dd { margin: 0; font-variant-numeric: tabular-nums; }
.ljc-invest-table .is-sub { font-weight: 600; }
.ljc-invest-table .is-total { border-bottom: 0; padding-top: 14px; font-size: 16px; font-weight: 660; }
.ljc-invest-table .is-total dd { color: var(--ljc-accent-2); }
.ljc-invest-kpis { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ljc-invest-kpis li { display: flex; flex-direction: column; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .03); border: 1px solid var(--ljc-line); }
.ljc-invest-kpis span { font-size: 12px; color: var(--ljc-dim); }
.ljc-invest-kpis b { font-size: 21px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ljc-invest-kpis small { font-size: 11.5px; color: var(--ljc-dim); }

/* Conversion */
.ljc-lead-card {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px;
	padding: 36px;
	border-radius: 28px;
	background:
		radial-gradient(100% 120% at 100% 0%, rgba(244, 121, 31, .2), transparent 60%),
		var(--ljc-glass-2);
	border: 1px solid rgba(244, 121, 31, .3);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
	scroll-margin-top: 20px;
}
.ljc-lead-intro h3 { margin: 0 0 12px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; font-weight: 640; letter-spacing: -.03em; }
.ljc-lead-intro > p:not(.ljc-kicker) { margin: 0 0 18px; color: var(--ljc-mut); }
.ljc-checks { margin: 0 0 24px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14.5px; }
.ljc-checks li { position: relative; padding-left: 28px; }
.ljc-checks li::before {
	content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--ljc-accent-soft);
}
.ljc-checks li::after {
	content: ''; position: absolute; left: 6px; top: 6px; width: 5px; height: 9px;
	border: solid var(--ljc-accent-2); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ljc-form { display: flex; flex-direction: column; gap: 12px; }
.ljc-form-row { display: grid; gap: 12px; }
.ljc-form-row.is-2 { grid-template-columns: 1fr 1fr; }
.ljc-form label { display: flex; flex-direction: column; gap: 6px; }
.ljc-form label > span { font-size: 12.5px; font-weight: 560; color: var(--ljc-mut); }
.ljc-form input, .ljc-form textarea {
	width: 100%; padding: 13px 15px;
	border-radius: 14px; border: 1px solid var(--ljc-line-2);
	background: rgba(255, 255, 255, .04);
	font-size: 15px; color: var(--ljc-text);
	transition: border-color .25s, background .25s;
}
.ljc-form textarea { resize: vertical; min-height: 84px; }
.ljc-form input:focus, .ljc-form textarea:focus { outline: none; border-color: var(--ljc-accent); background: rgba(255, 255, 255, .06); }
.ljc-form-msg { min-height: 20px; margin: 0; font-size: 13.5px; color: var(--ljc-mut); }
.ljc-form-msg.is-ok { color: #6FD39B; }
.ljc-form-msg.is-error { color: #FF8D7A; }
.ljc-form-note { margin: 0; font-size: 12px; color: var(--ljc-dim); }
.ljc-form.is-sent { opacity: .85; }

.ljc-sources { padding: 4px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ljc-dim); }
.ljc-sources p { margin: 0 0 6px; max-width: 880px; }

/* Panneau latéral */
.ljc-res-side { position: sticky; top: 0; min-width: 0; }
.ljc-side-inner {
	display: flex; flex-direction: column; gap: 20px;
	padding: 24px;
	border-radius: 24px;
	background: var(--ljc-glass-2);
	border: 1px solid var(--ljc-line);
	backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.ljc-side-title { margin: 0; font-size: 17px; font-weight: 640; letter-spacing: -.015em; }
.ljc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ljc-chips button {
	height: 34px; padding: 0 13px; border-radius: 999px;
	font-size: 12.5px; font-weight: 620; letter-spacing: .02em;
	border: 1px solid var(--ljc-line-2); color: var(--ljc-mut);
	transition: background .25s, color .25s, border-color .25s;
}
.ljc-chips button:hover { color: var(--ljc-text); border-color: rgba(255, 255, 255, .3); }
.ljc-chips button.is-active { background: var(--ljc-accent); border-color: var(--ljc-accent); color: #fff; }
.ljc-opt.is-switches { gap: 8px; }
.ljc-opt.is-row { flex-direction: row; justify-content: space-between; align-items: center; }
.ljc-side-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 4px; border-top: 1px solid var(--ljc-line); }
.ljc-side-links button { padding: 8px 0 0; font-size: 13px; color: var(--ljc-dim); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .2); }
.ljc-side-links button:hover { color: var(--ljc-text); }

/* ---------------------------------------------------------------- info-bulle */
.ljc-tip {
	position: fixed; z-index: 60; left: 0; top: 0;
	display: flex; flex-direction: column; gap: 4px;
	min-width: 200px; padding: 12px 14px;
	border-radius: 14px;
	background: rgba(18, 18, 21, .96);
	border: 1px solid var(--ljc-line-2);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
	font-size: 12.5px; color: var(--ljc-mut);
	pointer-events: none;
	opacity: 0; transition: opacity .15s;
}
.ljc-tip.is-on { opacity: 1; }
.ljc-tip b { color: var(--ljc-text); font-size: 13.5px; margin-bottom: 2px; }
.ljc-tip span { display: flex; align-items: center; gap: 8px; }
.ljc-tip em { margin-left: auto; padding-left: 12px; font-style: normal; color: var(--ljc-text); font-variant-numeric: tabular-nums; }
.ljc-tip .is-note { margin-top: 4px; color: var(--ljc-accent-2); }

/* ---------------------------------------------------------------- cadenas / admin */
.ljc-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.ljc-modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: ljc-fade .3s ease; }
@keyframes ljc-fade { from { opacity: 0; } }
.ljc-modal-box {
	position: relative; width: min(380px, 100%);
	display: flex; flex-direction: column; gap: 12px;
	padding: 34px 30px 28px;
	border-radius: 26px;
	background: rgba(18, 18, 21, .96);
	border: 1px solid var(--ljc-line-2);
	box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
	text-align: center;
	animation: ljc-pop .35s var(--ljc-ease);
}
.ljc-modal-box h2 { margin: 4px 0 0; font-size: 24px; font-weight: 640; letter-spacing: -.02em; }
.ljc-modal-box p { margin: 0; font-size: 14px; color: var(--ljc-mut); }
.ljc-modal-box input {
	height: 52px; padding: 0 16px; margin-top: 8px;
	border-radius: 14px; border: 1px solid var(--ljc-line-2);
	background: rgba(255, 255, 255, .05);
	font-size: 16px; color: var(--ljc-text); text-align: center; letter-spacing: .08em;
}
.ljc-modal-box input:focus { outline: none; border-color: var(--ljc-accent); }
.ljc-modal-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; background: var(--ljc-accent-soft); color: var(--ljc-accent); }
.ljc-modal-ico svg { width: 24px; height: 24px; }
.ljc-modal-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--ljc-dim); }
.ljc-modal-x:hover { background: rgba(255, 255, 255, .07); color: var(--ljc-text); }

.ljc-admin {
	position: fixed; z-index: 70; top: 0; right: 0; bottom: 0;
	width: min(480px, 100%);
	display: flex; flex-direction: column;
	background: rgba(12, 12, 14, .97);
	border-left: 1px solid var(--ljc-line-2);
	box-shadow: -40px 0 120px rgba(0, 0, 0, .6);
	transform: translateX(104%);
	transition: transform .5s var(--ljc-ease);
}
.ljc.is-admin-panel .ljc-admin { transform: none; }
.ljc-admin-head { position: relative; padding: 26px 26px 18px; border-bottom: 1px solid var(--ljc-line); }
.ljc-admin-head .ljc-kicker { margin-bottom: 6px; }
.ljc-admin-head h2 { margin: 0; font-size: 22px; font-weight: 640; letter-spacing: -.02em; }
.ljc-admin-body { flex: 1; overflow-y: auto; padding: 14px 18px 20px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.ljc-admin-foot { padding: 16px 26px 22px; border-top: 1px solid var(--ljc-line); display: flex; flex-direction: column; gap: 10px; }
.ljc-admin-links { display: flex; justify-content: space-between; gap: 12px; }
.ljc-admin-links button { font-size: 12.5px; color: var(--ljc-dim); text-decoration: underline; text-underline-offset: 3px; }
.ljc-admin-links button:hover { color: var(--ljc-text); }

.ljc-adm-sec { border: 1px solid var(--ljc-line); border-radius: 16px; margin-bottom: 10px; background: rgba(255, 255, 255, .02); }
.ljc-adm-sec summary { padding: 14px 16px; font-size: 14px; font-weight: 620; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.ljc-adm-sec summary::-webkit-details-marker { display: none; }
.ljc-adm-sec summary::after { content: '+'; color: var(--ljc-dim); font-weight: 400; }
.ljc-adm-sec[open] summary::after { content: '−'; }
.ljc-adm-sec[open] summary { border-bottom: 1px solid var(--ljc-line); }
.ljc-adm-grid { display: grid; gap: 8px; padding: 12px 14px 14px; }
.ljc-adm-grid label { display: grid; grid-template-columns: 1fr 150px; align-items: center; gap: 10px; font-size: 13px; color: var(--ljc-mut); }
.ljc-adm-in { display: flex; align-items: center; gap: 6px; }
.ljc-adm-in em { flex: none; width: 52px; font-style: normal; font-size: 11px; color: var(--ljc-dim); }
.ljc-admin input[type="number"] {
	width: 100%; min-width: 0; height: 34px; padding: 0 9px;
	border-radius: 9px; border: 1px solid var(--ljc-line-2);
	background: rgba(255, 255, 255, .04);
	font-size: 13.5px; color: var(--ljc-text); text-align: right; font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
}
.ljc-admin input[type="number"]:focus { outline: none; border-color: var(--ljc-accent); }
.ljc-admin input[type="number"]::placeholder { color: rgba(245, 245, 247, .3); }
.ljc-admin input::-webkit-outer-spin-button, .ljc-admin input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ljc-adm-note { margin: 0; padding: 0 16px 14px; font-size: 11.5px; color: var(--ljc-dim); }
.ljc-adm-model { margin: 0 0 4px; font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--ljc-accent-2); }
.ljc-adm-check { display: flex !important; grid-template-columns: none !important; gap: 10px !important; align-items: center; cursor: pointer; }
.ljc-adm-check input { accent-color: var(--ljc-accent); width: 16px; height: 16px; }
.ljc-adm-computed { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.ljc-adm-computed div { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--ljc-accent-soft); }
.ljc-adm-computed span { font-size: 11px; color: var(--ljc-dim); }
.ljc-adm-computed b { font-size: 15px; font-weight: 640; font-variant-numeric: tabular-nums; }
.ljc-adm-table { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.ljc-adm-table > div { display: grid; grid-template-columns: 76px 1fr 1fr 58px 50px; gap: 6px; align-items: center; font-size: 12.5px; }
.ljc-adm-table > div > span:first-child { font-weight: 620; }
.ljc-adm-table .is-head { font-size: 10.5px; color: var(--ljc-dim); text-transform: uppercase; letter-spacing: .06em; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
	.ljc-models { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ljc-models.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ljc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ljc-res { grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; }
	.ljc-boosts { grid-template-columns: 1fr; }
	.ljc-invest-grid, .ljc-lead-card { grid-template-columns: 1fr; }
}
@media (max-width: 1080px) {
	.ljc-steps span { display: none; }
	.ljc-steps button { padding: 0 6px; }
	.ljc-charts { grid-template-columns: 1fr; }
	.ljc-res { grid-template-columns: 1fr; }
	.ljc-res-main { display: contents; }
	.ljc-hero { order: 1; }
	.ljc-kpis { order: 2; }
	.ljc-res-side { order: 3; position: static; }
	.ljc-boosts { order: 4; }
	.ljc-charts { order: 5; }
	.ljc-invest { order: 6; }
	.ljc-lead-card { order: 7; }
	.ljc-sources { order: 8; }
	.ljc-res > * { margin-bottom: 0; }
	.ljc-res { gap: 16px; }
}
@media (max-width: 820px) {
	:root { --ljc-top: 62px; --ljc-radius: 22px; }
	.ljc-top { grid-template-columns: auto 1fr auto; gap: 10px; }
	.ljc-steps { justify-self: center; padding: 3px; gap: 2px; }
	.ljc-steps button { height: 30px; padding: 0 3px; }
	.ljc-steps button i { width: 24px; height: 24px; }
	.ljc-brand img { height: 22px; }
	.ljc-lock, .ljc-admin-btn { width: 38px; height: 38px; }
	.ljc-admin-btn { padding: 0 10px; }
	.ljc-admin-btn span { display: none; }

	.ljc-veil {
		background:
			linear-gradient(180deg, rgba(5, 5, 6, .92) 0%, rgba(5, 5, 6, .6) 44%, rgba(5, 5, 6, 0) 70%),
			linear-gradient(0deg, rgba(5, 5, 6, .5), rgba(5, 5, 6, 0) 20%);
	}
	.ljc-step { align-items: flex-end; padding: 0; }
	.ljc-step[data-step="adresse"] { align-items: flex-start; padding: 18px 18px 0; }
	.ljc-panel {
		width: 100%;
		max-height: min(66dvh, calc(100dvh - var(--ljc-top) - 40px));
		padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
		border-radius: 26px 26px 0 0;
		border-bottom: 0;
	}
	.ljc-panel.is-wide { max-height: calc(100dvh - var(--ljc-top) - 12px); }
	.ljc-step.is-active .ljc-panel { transition-delay: .1s; }
	.ljc-panel.is-intro { max-height: none; padding: 0; border-radius: 0; }
	.ljc-h1 { font-size: clamp(34px, 10vw, 46px); margin-bottom: 14px; }
	.ljc-lead { font-size: 15.5px; margin-bottom: 22px; }
	.ljc-search-box { height: 60px; padding-left: 16px; border-radius: 18px; }
	.ljc-search-box input { font-size: 16px; padding: 0 10px; }
	.ljc-search-go { width: 46px; height: 46px; border-radius: 13px; }
	.ljc-ac { top: 68px; }
	.ljc-proofs { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
	.ljc-proofs li { flex-direction: row; gap: 6px; align-items: baseline; }
	.ljc-sunbox-value b { font-size: 44px; }
	.ljc-facts div { grid-template-columns: 1fr; gap: 0; }
	.ljc-presets { gap: 8px; }
	.ljc-presets button { padding: 12px 10px; }
	.ljc-models, .ljc-models.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ljc-model-body { padding: 12px; }
	.ljc-model-name { font-size: 18px; }
	.ljc-model-gain b { font-size: 17px; }
	.ljc-carport-opts { gap: 16px; }
	.ljc-actions .ljc-btn.is-accent { flex: 1; }
	/* Boutons d'action toujours visibles en bas de la feuille. */
	.ljc-panel .ljc-actions {
		position: sticky; z-index: 2;
		bottom: calc(-24px - env(safe-area-inset-bottom));
		margin: 20px -20px calc(-24px - env(safe-area-inset-bottom));
		padding: 18px 20px calc(16px + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(13, 13, 15, 0), rgba(13, 13, 15, .96) 32%);
	}

	.ljc-step.is-results { align-items: stretch; }
	.ljc-res { padding: 10px 14px 60px; }
	.ljc-hero { grid-template-columns: 1fr; padding: 26px 22px; gap: 8px; }
	.ljc-gauge { grid-column: 1; grid-row: auto; width: 150px; height: 150px; margin-top: 12px; }
	.ljc-gauge b { font-size: 28px; }
	.ljc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.ljc-kpis li { padding: 14px; }
	.ljc-kpis b { font-size: 23px; }
	.ljc-card { padding: 20px 16px; }
	.ljc-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
	.ljc-donut { max-width: 190px; }
	.ljc-legend.is-col { width: 100%; }
	.ljc-lead-card { padding: 24px 18px; gap: 24px; }
	.ljc-form-row.is-2 { grid-template-columns: 1fr; }
	.ljc-adm-grid label { grid-template-columns: 1fr 130px; }
	.ljc-adm-table > div { grid-template-columns: 64px 1fr 1fr 48px 42px; font-size: 11.5px; }
}
@media (max-width: 420px) {
	.ljc-presets { grid-template-columns: 1fr 1fr 1fr; }
	.ljc-presets b { font-size: 12.5px; }
	.ljc-presets span { font-size: 11px; }
	.ljc-seg.is-panels button { padding-right: 12px; }
	.ljc-swatch { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.ljc *, .ljc *::before, .ljc *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Récapitulatif PDF */
.ljc-btn.is-pdf:hover svg { transform: translateY(2px); }
.ljc-btn.is-pdf.is-busy { opacity: .6; pointer-events: none; }
.ljc-btn.is-pdf.is-busy svg { animation: ljc-pdf-bob .9s ease-in-out infinite; }
@keyframes ljc-pdf-bob { 50% { transform: translateY(3px); } }
.ljc-side-inner .ljc-btn.is-pdf { height: 46px; font-size: 14px; }
.ljc-lead-intro .ljc-btn.is-pdf { margin-top: 10px; }
