/* =========================================================================
   LE CARPORT BY LJ METAL — expérience immersive
   Noir profond, lumières orange, scrollytelling. Chargé uniquement sur /carports/.
   ========================================================================= */

.ljcp {
	background: #000;
	color: #F5F5F7;
	overflow: clip;
}

.ljcp-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Primitives ---------- */
.ljcp-kicker {
	font-size: 13.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent); margin: 0 0 18px;
	display: inline-flex; align-items: center; gap: 12px;
}
.ljcp-kicker::before { content: ''; width: 28px; height: 2px; background: var(--accent); }
.ljcp-title {
	font-size: clamp(34px, 4.6vw, 68px);
	font-weight: 700; letter-spacing: -.032em; line-height: 1.04;
	margin: 0;
	text-wrap: balance;
}
.ljcp-title span { color: var(--accent); }
.ljcp-dot { color: var(--accent); }
.ljcp-text { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; color: rgba(245, 245, 247, .68); margin: 18px 0 0; max-width: 560px; }

.ljcp-btn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	padding: 16px 34px;
	border: 1px solid var(--accent); border-radius: var(--radius);
	background: none; color: var(--accent);
	font-size: 16px; font-weight: 650; letter-spacing: -.01em; line-height: 1.2;
	cursor: pointer;
	transition: background .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
.ljcp-btn:hover { background: var(--accent); color: #fff; box-shadow: 0 14px 44px rgba(244, 121, 31, .35); transform: translateY(-2px); }
.ljcp-btn.is-solid { background: var(--accent); color: #fff; box-shadow: 0 12px 38px rgba(244, 121, 31, .3); }
.ljcp-btn.is-solid:hover { background: var(--accent-deep); }
.ljcp-btn small { font-size: 12px; font-weight: 500; opacity: .85; }

/* Chaque section de l'expérience respire largement */
.ljcp-section { position: relative; padding-block: clamp(56px, 8vw, 120px); }
.ljcp-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.ljcp-sticky canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* =========================================================================
   LOADER IMMERSIF — panneaux + compteur géant
   ========================================================================= */
.ljcp-loader {
	position: fixed; inset: 0; z-index: 3200;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.ljcp-loader-panel {
	position: absolute; left: 0; right: 0; height: 50.5%;
	background:
		radial-gradient(ellipse 60% 80% at 50% 100%, rgba(244, 121, 31, .07), transparent 70%),
		#050506;
}
.ljcp-loader-panel.is-top { top: 0; }
.ljcp-loader-panel.is-bottom {
	bottom: 0;
	background:
		radial-gradient(ellipse 60% 80% at 50% 0%, rgba(244, 121, 31, .07), transparent 70%),
		#050506;
}
.ljcp-loader-inner { position: relative; z-index: 2; text-align: center; }
.ljcp-loader-word {
	margin: 0 0 26px;
	font-size: clamp(15px, 1.8vw, 20px);
	font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
	color: #F5F5F7;
	opacity: 0; transform: translateY(18px);
}
.ljcp-loader-word span { color: var(--accent); }
.ljcp-loader-num {
	font-size: clamp(96px, 20vw, 220px);
	font-weight: 700; letter-spacing: -.05em; line-height: 1;
	color: #F5F5F7;
	font-variant-numeric: tabular-nums;
	opacity: 0;
}
.ljcp-loader-num em { font-style: normal; font-size: .32em; color: var(--accent); vertical-align: .12em; margin-left: .06em; }
.ljcp-loader-bar {
	width: min(360px, 64vw); height: 2px; margin: 30px auto 0;
	background: rgba(245, 245, 247, .12); border-radius: 2px; overflow: hidden;
}
.ljcp-loader-bar i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.ljcp-loader-label {
	margin: 18px 0 0;
	font-size: 12px; font-weight: 650; letter-spacing: .22em; text-transform: uppercase;
	color: rgba(245, 245, 247, .45);
}

/* =========================================================================
   SCÈNE HERO — entrée orchestrée + rotation rapide + titre en pixels
   ========================================================================= */
.ljcp-hero { position: relative; height: 165svh; background: #000; }
.ljcp-hero-particles {
	position: absolute; inset: 0; z-index: 4;
	pointer-events: none;
}
.ljcp-hero-bg { position: absolute; inset: 0; will-change: transform, opacity; }
.ljcp-glow {
	position: absolute; inset: 0; pointer-events: none;
	background:
		radial-gradient(ellipse 46% 34% at 50% 62%, rgba(244, 121, 31, .16), transparent 70%),
		radial-gradient(ellipse 70% 55% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.ljcp-hero-word {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	pointer-events: none;
}
.ljcp-hero-word h1 {
	position: relative;
	font-size: clamp(56px, 11vw, 168px);
	font-weight: 700; letter-spacing: -.045em; line-height: 1;
	color: #fff; margin: 0;
	text-shadow: 0 4px 60px rgba(0, 0, 0, .6);
}
.ljcp-hero-main { display: inline-block; white-space: nowrap; }
.ljcp-hero-main .hch { display: inline-block; will-change: transform, opacity, filter; }
.ljcp-by {
	position: absolute; right: -0.4em; bottom: -0.52em;
	font-size: clamp(15px, 1.8vw, 26px);
	font-weight: 650; letter-spacing: .1em;
	color: var(--accent);
	white-space: nowrap;
}
.ljcp-by .bch { display: inline-block; }
.ljcp-scrollcue {
	position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 4;
	display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ljcp-scrollcue span { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 245, 247, .55); }
.ljcp-scrollcue i { width: 1.5px; height: 44px; background: var(--accent); animation: ljm-cue 2s cubic-bezier(.6, 0, .4, 1) infinite; }

/* =========================================================================
   SCÈNE MANIFESTO
   ========================================================================= */
.ljcp-manifesto { position: relative; height: 380svh; background: #000; margin-top: -30svh; }
/* Les lueurs débordent du cadre : pas de bord net contre la scène du dessus. */
.ljcp-manifesto .ljcp-sticky { overflow: visible; }
/* 1re ligne fixée au viewport : parfaitement immobile et centrée pendant
   l'arrivée de la scène (fondu piloté au scroll, aucun lag possible). */
.ljcp-manifesto .ljcp-line[data-cp-line="1"] { position: fixed; }
.ljcp-light {
	position: absolute; z-index: 1;
	width: 46vw; height: 46vw; max-width: 760px; max-height: 760px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 121, 31, .22), rgba(244, 121, 31, .05) 45%, transparent 70%);
	filter: blur(60px);
	pointer-events: none;
	will-change: transform;
}
.ljcp-light.is-1 { top: -8%; left: -12%; }
.ljcp-light.is-2 { bottom: -10%; right: -14%; }

.ljcp-line {
	position: absolute; inset: 0; z-index: 3;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px;
	text-align: center; padding-inline: var(--gutter);
	font-size: clamp(34px, 5.6vw, 88px);
	font-weight: 700; letter-spacing: -.035em; line-height: 1.08;
	opacity: 0; pointer-events: none;
	text-wrap: balance;
}
.ljcp-line p { margin: 0; max-width: 1100px; }
.ljcp-line em { font-style: normal; color: var(--accent); }
.ljcp-line[data-cp-line="3"] .ljcp-btn { pointer-events: auto; flex-direction: row; font-size: 17px; padding: 17px 42px; }

/* =========================================================================
   ÉCOSYSTÈME — image + flux précis sur le câble
   ========================================================================= */
.ljcp-eco {
	background: #000; z-index: 10;
	/* Respiration : la scène énergie ne colle plus à la citation du
	   storytelling ni aux sections voisines. */
	padding-block: clamp(72px, 10vw, 150px) clamp(48px, 6vw, 100px);
}
.ljcp-eco-visual {
	position: relative;
	max-width: 1600px; margin: clamp(40px, 6vw, 0px) auto 0;
	padding-inline: var(--gutter);
}
.ljcp-eco-visual img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.ljcp-eco-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
	margin-top: clamp(40px, 6vw, 72px);
}
.ljcp-eco-card {
	background: #0B0B0C;
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--radius);
	padding: clamp(28px, 3.4vw, 44px);
	transition: border-color .4s;
}
.ljcp-eco-card:hover { border-color: rgba(244, 121, 31, .4); }
.ljcp-eco-card h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 14px; }
.ljcp-eco-card p { font-size: 16px; line-height: 1.65; color: rgba(245, 245, 247, .65); margin: 0; }
.ljcp-eco-list { list-style: none; margin: 24px 0 0; padding: 0; }
.ljcp-eco-list li {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 0; font-size: 15.5px; font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.ljcp-eco-list li:last-child { border-bottom: none; }
.ljcp-eco-list li::before { content: ''; width: 7px; height: 7px; background: var(--accent); border-radius: 2px; flex: 0 0 7px; }

/* Carte app : téléphone incliné + badges alignés dessous */
.ljcp-eco-card.is-app { display: flex; align-items: center; gap: clamp(20px, 2.5vw, 44px); }
.ljcp-eco-card-txt { flex: 1 1 auto; }
.ljcp-eco-devicecol {
	flex: 0 0 auto;
	display: flex; flex-direction: column; align-items: center; gap: 16px;
	margin-top: -18px; /* la capture remonte légèrement */
}
.ljcp-eco-device {
	position: relative;
	width: clamp(150px, 14vw, 200px);
	transform: rotate(6deg);
}
.ljcp-eco-device-halo {
	position: absolute; inset: -30%;
	background: radial-gradient(circle, rgba(244, 121, 31, .22), transparent 65%);
	filter: blur(24px);
	pointer-events: none;
}
.ljcp-eco-device-frame {
	position: relative;
	border: 1.5px solid rgba(255, 255, 255, .18);
	border-radius: 22px;
	padding: 8px;
	background: #101013;
	box-shadow: 0 30px 60px rgba(0, 0, 0, .55);
	animation: ljcp-float 6s ease-in-out infinite;
}
.ljcp-eco-device-frame::before {
	content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
	width: 34%; height: 5px; border-radius: 4px;
	background: rgba(255, 255, 255, .12);
	z-index: 2;
}
.ljcp-eco-device-frame img { width: 100%; height: auto; display: block; border-radius: 14px; }
@keyframes ljcp-float { 50% { transform: translateY(-9px); } }

/* Badges Production / Autonomie : droits, alignés côte à côte */
.ljcp-eco-stats { display: flex; gap: 10px; }
.ljcp-eco-chip {
	display: flex; flex-direction: column; gap: 1px; align-items: center;
	padding: 10px 18px;
	background: rgba(13, 13, 15, .88);
	border: 1px solid rgba(244, 121, 31, .4);
	border-radius: 8px;
	font-size: 10px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase;
	color: rgba(245, 245, 247, .55);
	white-space: nowrap;
}
.ljcp-eco-chip b { font-size: 16px; letter-spacing: -.01em; color: #F5F5F7; }

/* =========================================================================
   EXPLOSION — copy gauche, animation encapsulée à droite
   ========================================================================= */
.ljcp-explode { position: relative; height: 520svh; background: #000;  }
/* Au-dessus de la scène lumière qui remonte : les cartes ne sont jamais
   coupées par le chevauchement, elles sortent naturellement au dépin. */
.ljcp-explode .ljcp-sticky { z-index: 5; }
.ljcp-explode-media {
	position: absolute; z-index: 1;
	top: 0; bottom: 0; right: 0;
	width: 62%;
	opacity: 0; /* apparaît en fondu au scroll (JS) */
}
.ljcp-explode-media canvas {
	position: absolute; inset: 0; width: 100%; height: 100%;
	filter: brightness(.88); /* le fond grisé des frames se fond dans le noir */
}
.ljcp-explode-vignette {
	position: absolute; inset: 0; pointer-events: none;
	background:
		linear-gradient(90deg, #000 0%, transparent 22%),
		linear-gradient(270deg, #000 0%, transparent 18%),
		linear-gradient(180deg, #000 0%, transparent 16%),
		linear-gradient(0deg, #000 0%, transparent 16%),
		radial-gradient(ellipse 70% 62% at 50% 50%, transparent 58%, rgba(0, 0, 0, .92) 96%);
}
.ljcp-explode-copy {
	position: absolute; z-index: 3;
	left: clamp(20px, 6vw, 120px); top: 50%; transform: translateY(-50%);
	max-width: 480px;
	opacity: 0;
}
.ljcp-explode-copy .ljcp-title { font-size: clamp(30px, 3.4vw, 52px); }
.ljcp-explode-copy .ljcp-text { font-size: 15.5px; }
.ljcp-pillars {
	position: absolute; z-index: 4;
	left: 50%; top: 50%; transform: translate(-50%, -50%); /* final au centre de l'écran */
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	width: min(1200px, calc(100% - 2 * var(--gutter)));
	perspective: 900px;
}
.ljcp-pillar {
	--mx: 50%; --my: 0%;
	position: relative; overflow: hidden;
	background: linear-gradient(165deg, rgba(22, 22, 24, .92), rgba(9, 9, 10, .86));
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-radius: var(--radius);
	padding: clamp(26px, 2.6vw, 40px) clamp(20px, 2vw, 28px) clamp(24px, 2.2vw, 34px);
	text-align: center;
	opacity: 0;
	will-change: transform, opacity, filter;
	transition: box-shadow .45s var(--ease-out);
}
.ljcp-pillar:hover {
	box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 12px 44px rgba(244, 121, 31, .14);
}
/* Hairline dégradée : lumineuse en haut, fondue vers le bas. */
.ljcp-pillar::before {
	content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
	background: linear-gradient(180deg, rgba(244, 121, 31, .6), rgba(244, 121, 31, .16) 46%, rgba(245, 245, 247, .07));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
}
/* Projecteur orange qui suit la souris (pilote --mx / --my en JS). */
.ljcp-pillar::after {
	content: ''; position: absolute; inset: -1px; border-radius: inherit;
	background: radial-gradient(240px circle at var(--mx) var(--my), rgba(244, 121, 31, .16), transparent 65%);
	opacity: 0; transition: opacity .45s var(--ease-out);
	pointer-events: none;
}
.ljcp-pillar:hover::after { opacity: 1; }
.ljcp-pillar-num {
	position: absolute; top: 12px; right: 16px; z-index: 1;
	font-style: normal; font-weight: 700; font-size: 28px; letter-spacing: -.04em; line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(245, 245, 247, .16);
	transition: -webkit-text-stroke-color .45s var(--ease-out);
}
.ljcp-pillar:hover .ljcp-pillar-num { -webkit-text-stroke-color: rgba(244, 121, 31, .55); }
.ljcp-pillar-ico {
	position: relative; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center;
	width: 76px; height: 76px; margin-bottom: 18px;
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(244, 121, 31, .18), rgba(244, 121, 31, .04));
	border: 1px solid rgba(244, 121, 31, .32);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 34px rgba(244, 121, 31, .12);
	transition: box-shadow .45s var(--ease-out), background .45s var(--ease-out);
}
.ljcp-pillar:hover .ljcp-pillar-ico {
	background: linear-gradient(180deg, rgba(244, 121, 31, .26), rgba(244, 121, 31, .07));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 44px rgba(244, 121, 31, .22);
}
.ljcp-pillar svg { width: 34px; height: 34px; color: var(--accent); }
.ljcp-pillar-body { position: relative; z-index: 1; }
.ljcp-pillar strong {
	display: block;
	font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent);
}
.ljcp-pillar strong::after { content: ''; display: block; width: 26px; height: 1.5px; background: var(--accent); margin: 10px auto; opacity: .7; }
.ljcp-pillar-txt { display: block; font-size: 13.5px; color: rgba(245, 245, 247, .72); line-height: 1.5; }

/* =========================================================================
   TEXTE QUI S'ILLUMINE
   ========================================================================= */
/* Remonte sur la fin (noire) de la scène des piliers : moins de vide. */
/* Hauteur calée sur la fin de la vague : sitôt le texte illuminé, le pin
   se termine et le texte remonte naturellement avec le scroll. */
.ljcp-lighttext { position: relative; height: 240svh; background: #000; margin-top: -42svh; }
.ljcp-lighttext .ljcp-sticky { display: flex; align-items: center; justify-content: center; }
.ljcp-lighttext-line {
	position: relative; z-index: 2;
	max-width: 1100px; margin: 0; padding-inline: var(--gutter);
	font-size: clamp(38px, 6.4vw, 104px);
	font-weight: 700; letter-spacing: -.04em; line-height: 1.1;
	text-align: center; text-wrap: balance;
}
.ljcp-lighttext-line .ch { color: rgba(245, 245, 247, .07); }
/* Le faisceau visuel est retiré : seule la vague sur le texte subsiste. */
.ljcp-beam { display: none; }
/* Le mot « soleil » scintille une fois embrasé (filter : indépendant de
   la couleur/ombre pilotées au scroll ; invisible tant que le texte est
   éteint car l'ombre portée hérite de l'alpha du glyphe). */
.ljcp-lighttext-line .ch.is-sun { will-change: filter; animation: ljcp-sun 2.2s ease-in-out infinite; }
@keyframes ljcp-sun {
	0%, 100% { filter: brightness(1) drop-shadow(0 0 0 rgba(244, 121, 31, 0)); }
	50% { filter: brightness(1.5) drop-shadow(0 0 14px rgba(244, 121, 31, .6)); }
}

/* =========================================================================
   ARCHITECTURE 3D — scène encapsulée + HUD + DRAWER fixe
   ========================================================================= */
/* Le modèle 3D vit directement sur le fond de la page ; les commandes
   sont regroupées en petits panneaux flottants autour de lui. */
/* Fond opaque : la section masque toujours la scène précédente, même si
   les mesures de scroll bougent au chargement du 3D.
   La pause au centre est un sticky CSS natif (comme toutes les autres
   scènes) : 100svh collés + 85svh de défilement — aucun pin JS, donc
   aucun claquement possible à l'engagement. */
.ljcp-archiwrap { position: relative; height: 185svh; background: #000; }
.ljcp-stage-wrap {
	position: sticky; top: 0;
	height: 100svh; background: #000;
	display: flex; flex-direction: column; justify-content: center;
	padding-top: 4svh; /* stage légèrement sous le centre */
}
.ljcp-stage {
	position: relative;
	height: min(88svh, 920px); min-height: 540px;
	background: radial-gradient(ellipse 55% 32% at 50% 82%, rgba(244, 121, 31, .12), transparent 70%);
}
.ljcp-stage-floor {
	position: absolute; left: 50%; bottom: 8%;
	width: min(900px, 70vw); height: 90px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(244, 121, 31, .18), transparent 70%);
	filter: blur(24px);
	pointer-events: none;
}
.ljcp-stage-pane {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden;
	transition: opacity .5s var(--ease-out), visibility .5s;
}
.ljcp-stage-pane.is-active { opacity: 1; visibility: visible; }
.ljcp-stage-pane model-viewer { width: 100%; height: 100%; --poster-color: transparent; }
.ljcp-stage-poster {
	max-width: min(78%, 1000px); max-height: 66%;
	object-fit: contain;
	filter: drop-shadow(0 60px 80px rgba(0, 0, 0, .7));
}

/* HUD : panneau identité flottant */
.ljcp-stage-head {
	position: absolute; z-index: 5;
	top: clamp(10px, 2vw, 24px); left: clamp(20px, 4vw, 56px);
	padding: 20px 24px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
}
.ljcp-stage-head .ljcp-kicker { margin-bottom: 12px; }
.ljcp-stage-id { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ljcp-stage-id h2 {
	font-size: clamp(36px, 4.6vw, 68px);
	font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 0;
}
.ljcp-badge {
	font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 999px;
	background: rgba(244, 121, 31, .14); color: #FFB076;
	border: 1px solid rgba(244, 121, 31, .35);
	white-space: nowrap;
}
.ljcp-stage-sheet {
	pointer-events: auto;
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 22px;
	background: rgba(13, 13, 15, .7);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius);
	color: #F5F5F7; font-size: 14px; font-weight: 650;
	cursor: pointer;
	transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}
.ljcp-stage-sheet i {
	font-style: normal;
	flex: 0 0 22px; /* jamais compressé ni étiré quand le texte passe à la ligne */
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--accent); color: #fff;
	display: grid; place-items: center;
	font-size: 15px; font-weight: 700; line-height: 1;
	transition: transform .3s var(--ease-out);
}
.ljcp-stage-sheet:hover { border-color: var(--accent); background: rgba(244, 121, 31, .12); transform: translateY(-2px); }
.ljcp-stage-sheet:hover i { transform: rotate(90deg); }

/* Bas-gauche : panneau des 4 modèles */
.ljcp-stage-models {
	position: absolute; z-index: 5;
	left: clamp(20px, 4vw, 56px); bottom: clamp(14px, 2.4vw, 26px);
	display: flex; flex-direction: column; gap: 12px;
	padding: 16px 18px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
}

/* Panneau de contrôle unifié, centré en bas : zoom | couleurs | fiche */
.ljcp-stage-dock {
	position: absolute; z-index: 5;
	left: 50%; bottom: clamp(14px, 2.4vw, 26px);
	transform: translateX(-50%);
	display: flex; align-items: stretch; gap: clamp(16px, 1.8vw, 26px);
	padding: 16px clamp(18px, 2vw, 28px);
	background: rgba(12, 12, 14, .68);
	-webkit-backdrop-filter: blur(20px) saturate(1.3);
	backdrop-filter: blur(20px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
	max-width: calc(100% - 2 * var(--gutter));
	flex-wrap: nowrap; justify-content: center; /* tout sur une seule ligne */
}
.ljcp-dock-seg {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px;
}
.ljcp-dock-sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .12); }
.ljcp-dock-label {
	font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(245, 245, 247, .5);
}
/* Modèles en poster : seuls les éléments 3D disparaissent */
.ljcp-stage-dock.is-poster .is-zoom,
.ljcp-stage-dock.is-poster .is-colors,
.ljcp-stage-dock.is-poster .ljcp-dock-sep { display: none; }

.ljcp-zoom-toggle {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 16px;
	background: rgba(13, 13, 15, .7);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	color: rgba(245, 245, 247, .8); font-size: 12.5px; font-weight: 650;
	cursor: pointer;
	transition: border-color .3s, background .3s, color .3s;
}
.ljcp-zoom-toggle svg { width: 15px; height: 15px; }
.ljcp-zoom-toggle:hover { border-color: var(--accent); color: #fff; }
.ljcp-zoom-toggle.is-on {
	border-color: var(--accent);
	background: rgba(244, 121, 31, .16);
	color: #FFB076;
}
.ljcp-zoom-toggle.is-hidden { display: none; }

/* Bouton mode allégé : même famille que le zoom */
.ljcp-mode-btn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 16px;
	background: rgba(13, 13, 15, .7);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius);
	color: #F5F5F7; font-size: 13px; font-weight: 650;
	cursor: pointer;
	transition: border-color .3s, background .3s, color .3s;
}
.ljcp-mode-btn svg { width: 15px; height: 15px; }
.ljcp-mode-btn:hover { border-color: var(--accent); color: #fff; }
.ljcp-mode-btn.is-on {
	border-color: var(--accent);
	background: rgba(244, 121, 31, .16);
	color: #FFB076;
}

/* Barre de progression du pin : horizontale, centrée sous le dock */
.ljcp-stage-progress {
	position: absolute; z-index: 5;
	left: 50%; bottom: clamp(2px, .6vw, 8px);
	transform: translateX(-50%);
	width: min(320px, 40vw); height: 3px;
	background: rgba(245, 245, 247, .14); border-radius: 2px;
	opacity: 0; transition: opacity .4s var(--ease-out);
	pointer-events: none;
}
.ljcp-stage-progress.is-active { opacity: 1; }
.ljcp-stage-progress i {
	position: absolute; inset: 0;
	background: var(--accent); border-radius: inherit;
	transform: scaleX(0); transform-origin: left;
}

/* Mode allégé : seuls le carport 3D et le dock subsistent ; le scroll
   de la page est verrouillé tant que le mode est actif. */
/* Les éléments concernés fondent doucement à l'entrée et à la sortie. */
.ljm-header, .ljm-rail, .ljcp-stage-head, .ljcp-stage-models, .ljcp-stage-progress {
	transition: opacity .55s var(--ease-out), visibility .55s;
}
html.ljcp-lite, html.ljcp-lite body { overflow: hidden; }
/* Le bloc 3D se fixe au viewport : carport centré et dock en bas, quel
   que soit l'endroit exact où le scroll a été verrouillé. */
html.ljcp-lite .ljcp-stage-wrap {
	position: fixed; inset: 0;
	height: 100vh; z-index: 1500;
}
html.ljcp-lite .ljm-header,
html.ljcp-lite .ljm-rail,
html.ljcp-lite .ljcp-stage-head,
html.ljcp-lite .ljcp-stage-models,
html.ljcp-lite .ljcp-stage-progress { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

.ljcp-colors-row { display: flex; gap: 8px; }
.ljcp-colors-row button {
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--c);
	border: 2px solid rgba(255, 255, 255, .25);
	cursor: pointer; padding: 0;
	transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.ljcp-colors-row button:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .6); }
.ljcp-colors-row button.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 121, 31, .3); }

/* Onglets modèles : colonne sous le titre, dans le panneau identité */
.ljcp-tabs {
	display: flex; flex-direction: column; gap: 8px;
	margin-top: 18px;
	min-width: 230px;
}
.ljcp-tab {
	position: relative;
	display: flex; flex-direction: row; align-items: center; gap: 14px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 6px;
	cursor: pointer;
	transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}
.ljcp-tab:hover { transform: translateX(3px); border-color: rgba(255, 255, 255, .25); }
.ljcp-tab img { height: 22px; width: auto; opacity: .45; filter: grayscale(1) brightness(2); transition: opacity .3s, filter .3s; }
.ljcp-tab span { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: rgba(245, 245, 247, .5); transition: color .3s; }
.ljcp-tab.is-active {
	border-color: var(--accent);
	background: rgba(244, 121, 31, .12);
}
.ljcp-tab:hover img, .ljcp-tab.is-active img { opacity: 1; filter: none; }
.ljcp-tab:hover span, .ljcp-tab.is-active span { color: var(--accent); }

/* Drawer « Fiche du modèle » : FIXE, par-dessus toute la page
   (au-dessus du rail d'ancres z900 et du header z1000) */
.ljcp-drawer-backdrop {
	position: fixed; inset: 0; z-index: 2390;
	background: rgba(0, 0, 0, .55);
	opacity: 0; visibility: hidden;
	transition: opacity .4s, visibility .4s;
}
.ljcp-drawer {
	position: fixed; z-index: 2400;
	top: 0; right: 0; bottom: 0;
	width: min(480px, 92vw);
	background: rgba(10, 10, 12, .94);
	-webkit-backdrop-filter: blur(26px) saturate(1.4);
	backdrop-filter: blur(26px) saturate(1.4);
	border-left: 1px solid rgba(255, 255, 255, .12);
	transform: translateX(102%);
	transition: transform .55s var(--ease-out);
	display: flex; flex-direction: column;
}
.ljcp-archiwrap.drawer-open .ljcp-drawer { transform: translateX(0); }
.ljcp-archiwrap.drawer-open .ljcp-drawer-backdrop { opacity: 1; visibility: visible; }
.ljcp-drawer-head {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 22px 26px;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent);
}
.ljcp-drawer-close {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2); background: transparent;
	color: #F5F5F7; font-size: 19px; line-height: 1; cursor: pointer;
	transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}
.ljcp-drawer-close:hover { background: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.ljcp-drawer-body {
	flex: 1 1 auto; overflow-y: auto;
	padding: 26px;
	scrollbar-width: thin; scrollbar-color: rgba(244, 121, 31, .5) transparent;
}
.ljcp-drawer-pane { display: none; }
.ljcp-drawer-pane.is-active { display: block; }
.ljcp-panel-title { font-size: clamp(22px, 2.3vw, 28px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 10px; }
.ljcp-panel-desc { font-size: 14.5px; line-height: 1.6; color: rgba(245, 245, 247, .62); margin: 0 0 22px; }

.ljcp-acc { border-top: 1px solid rgba(255, 255, 255, .09); }
.ljcp-acc-item { border-bottom: 1px solid rgba(255, 255, 255, .09); }
.ljcp-acc-item summary {
	list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 15px 2px;
	font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	cursor: pointer;
	transition: color .25s;
}
.ljcp-acc-item summary::-webkit-details-marker { display: none; }
.ljcp-acc-item summary:hover { color: var(--accent); }
.ljcp-acc-item summary i { position: relative; width: 12px; height: 12px; flex: 0 0 12px; }
.ljcp-acc-item summary i::before, .ljcp-acc-item summary i::after { content: ''; position: absolute; background: var(--accent); }
.ljcp-acc-item summary i::before { left: 0; right: 0; top: 5px; height: 2px; }
.ljcp-acc-item summary i::after { top: 0; bottom: 0; left: 5px; width: 2px; transition: transform .3s var(--ease-out); }
.ljcp-acc-item[open] summary i::after { transform: scaleY(0); }
.ljcp-acc-item ul { list-style: none; margin: 0; padding: 0 2px 16px; }
.ljcp-acc-item li {
	position: relative;
	padding: 5px 0 5px 18px;
	font-size: 13.5px; line-height: 1.55; color: rgba(245, 245, 247, .68);
}
.ljcp-acc-item li::before { content: ''; position: absolute; left: 0; top: 12px; width: 8px; height: 1.5px; background: var(--accent); }

.ljcp-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; margin: 22px 0; }
.ljcp-specs div { text-align: center; padding: 12px 6px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; }
.ljcp-specs strong { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.ljcp-specs span { display: block; margin-top: 4px; font-size: 10px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: rgba(245, 245, 247, .45); }

.ljcp-drawer .ljcp-btn { width: 100%; flex-direction: row; gap: 10px; font-size: 14px; padding: 15px 20px; }

/* =========================================================================
   LA NUIT — textes séquencés puis 3D qui monte, pivote et s'efface
   ========================================================================= */
.ljcp-night { position: relative; height: 320svh; background: #000; }
.ljcp-night-line {
	position: absolute; inset: 0; z-index: 3;
	display: flex; align-items: center; justify-content: center;
	text-align: center; padding-inline: var(--gutter);
	opacity: 0; pointer-events: none;
}
.ljcp-night-line .ljcp-title { font-size: clamp(30px, 4.6vw, 72px); }
/* 1re ligne fixée au viewport : elle fond au centre dès l'arrivée de la
   scène, sans attendre le pin (même recette que le manifeste). */
.ljcp-night .ljcp-night-line[data-cp-night-line="1"] { position: fixed; }
.ljcp-night-line[data-cp-night-line="2"] .ljcp-title { font-size: clamp(24px, 3.4vw, 52px); }
.ljcp-night-stage {
	/* Cantonné à la moitié basse : le carport vit sous les textes. */
	position: absolute; inset: 46% 0 0 0; z-index: 2;
	will-change: transform, opacity;
	opacity: 0;
}
.ljcp-night-mv {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	--poster-color: transparent;
	pointer-events: none; /* caméra pilotée par le scroll uniquement */
}
.ljcp-night-glow { position: absolute; pointer-events: none; }
.ljcp-night-glow.is-floor {
	left: 50%; bottom: 14%;
	width: min(860px, 72vw); height: 110px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(244, 121, 31, .22), transparent 70%);
	filter: blur(28px);
}
.ljcp-night-glow.is-rim {
	inset: 0;
	background:
		radial-gradient(ellipse 60% 40% at 50% 30%, rgba(244, 121, 31, .07), transparent 65%),
		radial-gradient(ellipse 90% 70% at 50% 50%, transparent 60%, rgba(0, 0, 0, .75) 100%);
}

/* =========================================================================
   CTA FINAL
   ========================================================================= */
.ljcp-final {
	background:
		radial-gradient(ellipse 50% 40% at 50% 0%, rgba(244, 121, 31, .1), transparent 70%),
		#050506;
	border-top: 1px solid rgba(244, 121, 31, .35);
	padding-block: clamp(72px, 10vw, 150px);
}
.ljcp-final-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.ljcp-rule { display: block; width: 56px; height: 3px; background: var(--accent); margin: 26px 0; }
.ljcp-final-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.ljcp-final-btns .ljcp-btn { align-items: flex-start; text-align: left; }
.ljcp-final-media img[data-cp-final-img] {
	width: 100%; height: clamp(300px, 30vw, 460px); object-fit: cover;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, .12);
}
.ljcp-final-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.ljcp-thumb {
	padding: 0; background: none; border: 1.5px solid rgba(255, 255, 255, .12);
	border-radius: 6px; overflow: hidden; cursor: pointer;
	transition: border-color .3s, transform .3s var(--ease-out);
}
.ljcp-thumb img { width: 100%; height: 100px; object-fit: cover; display: block; opacity: .7; transition: opacity .3s; }
.ljcp-thumb:hover { transform: translateY(-2px); }
.ljcp-thumb:hover img { opacity: 1; }
.ljcp-thumb.is-active { border-color: var(--accent); }
.ljcp-thumb.is-active img { opacity: 1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
	.ljcp-hero { height: 150svh; }
	.ljcp-manifesto { height: 320svh; }
	.ljcp-lighttext { height: 195svh; }
	.ljcp-explode { height: 420svh; }
	.ljcp-night { height: 280svh; }
	.ljcp-explode-media { width: 100%; }
	.ljcp-explode-copy {
		left: 50%; top: clamp(48px, 9vh, 90px); transform: translateX(-50%);
		max-width: min(560px, calc(100% - 2 * var(--gutter)));
		text-align: center;
	}
	.ljcp-explode-copy .ljcp-text { margin-inline: auto; }
	.ljcp-pillars { grid-template-columns: 1fr 1fr; }
	.ljcp-eco-grid { grid-template-columns: 1fr; }
	.ljcp-eco-card.is-app { flex-direction: column; align-items: flex-start; }
	.ljcp-eco-devicecol { align-self: center; margin-top: 12px; }
	.ljcp-final-grid { grid-template-columns: 1fr; }
	.ljcp-stage { height: min(76svh, 720px); }
}

@media (max-width: 640px) {
	.ljcp-hero { height: 140svh; }
	.ljcp-manifesto { height: 280svh; }
	.ljcp-lighttext { height: 165svh; }
	.ljcp-explode { height: 340svh; }
	.ljcp-night { height: 240svh; }
	.ljcp-night-line .ljcp-title { font-size: clamp(26px, 8vw, 36px); }
	.ljcp-line { font-size: clamp(27px, 8.4vw, 38px); }
	.ljcp-lighttext-line { font-size: clamp(30px, 9.5vw, 44px); }
	.ljcp-loader-num { font-size: clamp(80px, 26vw, 120px); }
	.ljcp-hero-word h1 { font-size: clamp(46px, 15vw, 72px); }
	.ljcp-pillars { grid-template-columns: 1fr; gap: 10px; }
	.ljcp-pillar { padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-align: left; }
	.ljcp-pillar-ico { width: 46px; height: 46px; margin-bottom: 0; flex: 0 0 46px; border-radius: 13px; }
	.ljcp-pillar svg { width: 22px; height: 22px; }
	.ljcp-pillar strong::after { display: none; }
	.ljcp-pillar strong { margin-bottom: 2px; }
	.ljcp-pillar-txt { font-size: 12px; }
	.ljcp-pillar-num { font-size: 20px; top: 10px; right: 12px; }
	.cpe-label { font-size: 24px; }
	.ljcp-specs { grid-template-columns: 1fr 1fr; }
	.ljcp-stage { min-height: 620px; height: min(88svh, 760px); }
	.ljcp-stage-head { left: clamp(14px, 3vw, 24px); right: clamp(14px, 3vw, 24px); padding: 16px 18px; }
	.ljcp-stage-dock { flex-wrap: wrap; }
	.ljcp-stage-id h2 { font-size: clamp(30px, 9vw, 42px); }
	.ljcp-stage-sheet { padding: 10px 14px; font-size: 12.5px; }
	.ljcp-tabs { min-width: 0; flex-direction: row; flex-wrap: wrap; gap: 6px; }
	.ljcp-tab { flex: 1 1 45%; padding: 9px 10px; gap: 8px; }
	.ljcp-tab img { height: 18px; }
	.ljcp-tab span { font-size: 10px; letter-spacing: .08em; }
	.ljcp-stage-models {
		left: 12px; right: 12px; bottom: 158px;
		padding: 12px 14px;
	}
	.ljcp-stage-dock {
		left: 12px; right: 12px; bottom: 12px;
		transform: none;
		gap: 12px; padding: 12px 16px;
	}
	.ljcp-dock-sep { display: none; }
	.ljcp-drawer { width: 100vw; border-left: none; }
	.ljcp-final-btns .ljcp-btn { width: 100%; align-items: center; text-align: center; }
	.ljcp-thumb img { height: 72px; }
}

/* ---------- Accessibilité mouvement ---------- */
@media (prefers-reduced-motion: reduce) {
	.ljcp-hero, .ljcp-manifesto, .ljcp-lighttext, .ljcp-explode, .ljcp-night, .ljcp-archiwrap { height: auto; }
	.ljcp-stage-wrap { position: relative; height: auto; padding-top: 0; }
	.ljcp-manifesto, .ljcp-lighttext { margin-top: 0; }
	.ljcp-light { opacity: 1 !important; }
	.ljcp-sticky { position: relative; height: auto; min-height: 100svh; }
	.ljcp-manifesto .ljcp-sticky { display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-block: 80px; }
	.ljcp-line, .ljcp-manifesto .ljcp-line[data-cp-line="1"] { position: static; opacity: 1 !important; transform: none !important; }
	.ljcp-hero-bg { opacity: 1 !important; }
	.ljcp-explode-copy, .ljcp-pillar { opacity: 1 !important; transform: none !important; }
	.ljcp-explode-media { opacity: 1 !important; }
	.ljcp-night-line, .ljcp-night .ljcp-night-line[data-cp-night-line="1"] { position: static; opacity: 1 !important; padding-block: 40px; }
	.ljcp-night-stage { position: relative; inset: auto; height: 70svh; opacity: 1 !important; transform: none !important; }
	.ljcp-lighttext-line .ch { color: #F5F5F7 !important; }
	.ljcp-lighttext-line .ch.is-sun { animation: none; }
	.ljcp-loader { display: none; }
	.ljcp-beam { display: none; }
	.ljcp-eco-device-frame { animation: none; }
}

/* =========================================================================
   OUTIL /configurateur/ — plein écran fixe.
   Vue 3D à gauche, panneau latéral permanent à droite, ambiance en bas.
   ========================================================================= */
body.ljm-config-tool { overflow: hidden; }
body.ljm-config-tool .ljm-rail { display: none; }

.ljcfg { position: fixed; inset: 0; z-index: 10; background: #000; --panel-w: min(400px, 34vw); }
.ljcfg .ljcp-archiwrap { position: absolute; inset: 0; height: 100%; background: #000; }
.ljcfg .ljcp-stage-wrap {
	position: absolute; inset: 0; right: var(--panel-w);
	height: 100%; padding-top: 0;
	display: flex; flex-direction: column; justify-content: center;
}
.ljcfg .ljcp-stage { height: 100%; min-height: 0; max-height: none; }
.ljcfg .ljcp-stage-head { top: calc(clamp(16px, 2vw, 28px) + 66px); }

/* Sortie unique : bouton retour, en haut à gauche */
.ljcfg-back {
	position: absolute; z-index: 8;
	top: clamp(16px, 2vw, 28px); left: clamp(20px, 4vw, 56px);
	display: inline-flex; align-items: center; gap: 10px;
	padding: 12px 18px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: #F5F5F7; font-size: 13.5px; font-weight: 650;
	transition: border-color .3s, background .3s, transform .3s var(--ease-out);
}
.ljcfg-back svg { width: 16px; height: 16px; color: var(--accent); transition: transform .3s var(--ease-out); }
.ljcfg-back:hover { border-color: var(--accent); background: rgba(244, 121, 31, .1); transform: translateX(-2px); }
.ljcfg-back:hover svg { transform: translateX(-3px); }

.ljcfg-explink {
	display: inline-block; margin-top: 4px;
	font-size: 12.5px; font-weight: 650; letter-spacing: .04em;
	color: rgba(245, 245, 247, .55);
	transition: color .3s;
}
.ljcfg-explink:hover { color: var(--accent); }

/* Badge puissance dans le HUD */
.ljcp-badge.is-power { background: rgba(255, 255, 255, .08); color: #F5F5F7; border-color: rgba(255, 255, 255, .22); }

/* ---------- Barre du bas : ambiance ---------- */
.ljcfg .ljcp-stage-dock { flex-wrap: nowrap; }
/* Étiquettes fines au-dessus des groupes de configuration */
.ljcfg .ljcp-stage-dock .ljcp-dock-seg { align-items: center; gap: 8px; }
.ljcfg-dock-tag {
	font-size: 10px; font-weight: 700;
	letter-spacing: .2em; text-transform: uppercase;
	color: rgba(245, 245, 247, .46);
	white-space: nowrap;
}
.ljcfg-env-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ljcfg-env {
	appearance: none; -webkit-appearance: none;
	padding: 11px 38px 11px 16px;
	background: rgba(13, 13, 15, .7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F4791F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius);
	color: #F5F5F7; font-size: 13.5px; font-weight: 650;
	cursor: pointer;
	transition: border-color .3s;
}
.ljcfg-env:hover, .ljcfg-env:focus { border-color: var(--accent); outline: none; }
.ljcfg-env optgroup, .ljcfg-env option { background: #101012; color: #F5F5F7; }
.ljcfg-envtoggle {
	padding: 10px 14px;
	background: rgba(13, 13, 15, .7);
	border: 1px solid rgba(244, 121, 31, .45);
	border-radius: var(--radius);
	color: #FFB076; font-size: 12.5px; font-weight: 650;
	cursor: pointer;
	transition: border-color .3s, background .3s, color .3s;
}
.ljcfg-envtoggle:hover { background: rgba(244, 121, 31, .14); color: #fff; }
.ljcfg-envtoggle.is-hiddenstate { border-color: rgba(120, 200, 120, .5); color: #9FE49F; }
.ljcfg-envtoggle:disabled { opacity: .5; cursor: wait; }
.ljcfg-ground {
	display: inline-flex; align-items: center; gap: 7px;
	margin-top: 8px;
	font-size: 12px; font-weight: 650; color: rgba(245, 245, 247, .6);
	cursor: pointer; user-select: none;
}
.ljcfg-ground input { accent-color: var(--accent); cursor: pointer; }
.ljcfg-height-row { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; }
.ljcfg-height { width: 110px; accent-color: var(--accent); cursor: pointer; }
.ljcfg-height-row b { font-size: 11.5px; font-weight: 700; color: rgba(245, 245, 247, .7); min-width: 38px; }

/* ---------- Panneau latéral permanent ---------- */
.ljcfg-panel {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 7;
	width: var(--panel-w);
	display: flex; flex-direction: column;
	background: rgba(12, 12, 14, .88);
	-webkit-backdrop-filter: blur(22px) saturate(1.3);
	backdrop-filter: blur(22px) saturate(1.3);
	border-left: 1px solid rgba(255, 255, 255, .1);
}
.ljcfg-panel-body { flex: 1 1 auto; overflow-y: auto; padding: clamp(18px, 2vw, 28px); }
.ljcfg-panel-body::-webkit-scrollbar { width: 8px; }
.ljcfg-panel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }
.ljcfg-panel-label {
	font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--accent); margin: 0 0 14px;
}
.ljcfg-fiche { margin-top: 0; }

/* Le panneau réutilise les panes de fiche du drawer */
.ljcfg-panel .ljcp-drawer-pane { display: none; }
.ljcfg-panel .ljcp-drawer-pane.is-active { display: block; }

/* Modules : mini-toggle segmenté discret */
.ljcfg-modules { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ljcfg-modules-label { font-size: 13px; font-weight: 650; color: rgba(245, 245, 247, .8); }
.ljcfg-seg {
	display: inline-flex; padding: 3px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
}
.ljcfg-seg button {
	padding: 7px 13px; border: none; border-radius: 999px;
	background: none; color: rgba(245, 245, 247, .6);
	font-size: 12px; font-weight: 650;
	cursor: pointer;
	transition: background .25s, color .25s;
}
.ljcfg-seg button.is-active { background: var(--accent); color: #fff; }

/* Zones : une ligne par zone, pastille de couleur à droite */
.ljcfg-zones { display: flex; flex-direction: column; gap: 8px; }
.ljcfg-zrow {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 10px;
	color: #F5F5F7; font-size: 13.5px; font-weight: 650;
	cursor: pointer; text-align: left;
	transition: border-color .25s, background .25s;
}
.ljcfg-zrow:hover, .ljcfg-zrow.is-open { border-color: var(--accent); background: rgba(244, 121, 31, .07); }
.ljcfg-zrow > span:first-child { flex: 1 1 auto; }
.ljcfg-zval { font-size: 11.5px; font-weight: 650; color: rgba(245, 245, 247, .45); }
.ljcfg-chip {
	flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
	background: var(--c, #1a1a1c);
	border: 2px solid rgba(255, 255, 255, .25);
}
.ljcfg-chip.is-origin {
	background:
		linear-gradient(135deg, transparent 44%, rgba(244, 121, 31, .9) 46%, rgba(244, 121, 31, .9) 54%, transparent 56%),
		#1a1a1c;
}

/* Pied du panneau : reset + offre */
.ljcfg-panel-foot {
	flex: 0 0 auto;
	display: flex; align-items: stretch; gap: 8px;
	padding: 14px clamp(18px, 2vw, 28px);
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: rgba(10, 10, 12, .8);
}
.ljcfg-offer { flex: 1 1 auto; flex-direction: row; gap: 8px; padding: 13px 18px; font-size: 14px; }
.ljcfg-reset {
	display: inline-flex; align-items: center; justify-content: center;
	width: 46px;
	background: rgba(13, 13, 15, .7);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: var(--radius);
	color: rgba(245, 245, 247, .75);
	cursor: pointer;
	transition: border-color .3s, color .3s;
}
.ljcfg-reset svg { width: 17px; height: 17px; }
.ljcfg-reset:hover { border-color: var(--accent); color: var(--accent); }
.ljcfg-reset:hover svg { transform: rotate(-70deg); transition: transform .4s var(--ease-out); }

/* Panneau en mode poster : la personnalisation 3D n'a pas d'objet */
.ljcfg-panel.is-poster .ljcfg-custom { display: none; }
.ljcfg-panel.is-poster .ljcfg-fiche { margin-top: 0; padding-top: 0; border-top: none; }
.ljcp-stage-dock.is-poster .is-env,
.ljcp-stage-dock.is-poster .is-cover { display: none; }

/* ---------- Palette de couleurs : panneau FIXE au-dessus de tout ---------- */
.ljcfg-palette {
	position: fixed; z-index: 40;
	bottom: 128px; left: calc((100vw - var(--panel-w)) / 2);
	transform: translateX(-50%);
	width: min(620px, calc(100vw - var(--panel-w) - 48px));
	max-height: min(64vh, 560px);
	display: flex; flex-direction: column;
	background: rgba(12, 12, 14, .94);
	-webkit-backdrop-filter: blur(22px) saturate(1.3);
	backdrop-filter: blur(22px) saturate(1.3);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--radius);
	box-shadow: 0 30px 90px rgba(0, 0, 0, .7);
}
.ljcfg-palette[hidden] { display: none; }
.ljcfg-palette-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 20px 10px;
	font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: rgba(245, 245, 247, .6);
}
.ljcfg-palette-head [data-cp-palette-title] { color: var(--accent); }
.ljcfg-palette-close {
	background: none; border: none; color: rgba(245, 245, 247, .6);
	font-size: 22px; line-height: 1; cursor: pointer;
}
.ljcfg-palette-close:hover { color: var(--accent); }
.ljcfg-palette-quick {
	display: flex; flex-wrap: wrap; gap: 8px;
	padding: 4px 20px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ljcfg-chip-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 7px 12px 7px 8px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	color: rgba(245, 245, 247, .85); font-size: 11.5px; font-weight: 650;
	cursor: pointer;
	transition: border-color .25s, background .25s;
}
.ljcfg-chip-btn::before {
	content: ''; width: 16px; height: 16px; border-radius: 50%;
	background: var(--c, #1a1a1c);
	border: 1px solid rgba(255, 255, 255, .3);
}
.ljcfg-chip-btn.is-origin::before {
	background:
		linear-gradient(135deg, transparent 42%, rgba(244, 121, 31, .9) 46%, rgba(244, 121, 31, .9) 54%, transparent 58%),
		#1a1a1c;
}
.ljcfg-chip-btn:hover, .ljcfg-chip-btn.is-active { border-color: var(--accent); background: rgba(244, 121, 31, .1); }
.ljcfg-palette-grid {
	overflow-y: auto;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: 8px; padding: 14px 20px 20px;
}
.ljcfg-palette-grid::-webkit-scrollbar { width: 8px; }
.ljcfg-palette-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }
.ljcfg-palette-grid button {
	position: relative; aspect-ratio: 1;
	background: var(--c);
	border: 2px solid rgba(255, 255, 255, .16); border-radius: 8px;
	cursor: pointer;
	transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s;
}
.ljcfg-palette-grid button:hover { transform: scale(1.06); border-color: rgba(255, 255, 255, .5); }
.ljcfg-palette-grid button.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 121, 31, .35); }
.ljcfg-palette-grid button span {
	position: absolute; left: 3px; right: 3px; bottom: 3px;
	font-size: 8.5px; font-weight: 700;
	color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
	text-align: center; pointer-events: none;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
	body.ljm-config-tool { overflow: auto; }
	.ljcfg { position: static; }
	.ljcfg .ljcp-archiwrap { position: static; height: auto; }
	.ljcfg .ljcp-stage-wrap { position: relative; inset: auto; right: 0; height: 58svh; }
	.ljcfg .ljcp-stage { height: 100%; }
	.ljcfg .ljcp-stage-head { top: calc(clamp(16px, 2vw, 28px) + 58px); left: 14px; padding: 12px 14px; }
	.ljcfg .ljcp-stage-head .ljcp-kicker { display: none; }
	.ljcfg .ljcp-stage-models { left: 14px; bottom: 14px; padding: 12px 14px; }
	.ljcfg .ljcp-stage-dock {
		left: auto; right: 14px; bottom: 14px; transform: none;
		padding: 12px 16px; max-width: 56vw;
	}
	.ljcfg-height-row { display: none; } /* calibration : desktop uniquement */
	.ljcfg-panel { position: static; width: auto; border-left: none; border-top: 1px solid rgba(255, 255, 255, .1); }
	.ljcfg-panel-body { overflow: visible; }
	.ljcfg-palette {
		right: 12px; left: 12px; top: auto; bottom: 12px; transform: none;
		width: auto; max-height: 70vh;
	}
}
@media (max-width: 640px) {
	.ljcfg .ljcp-stage-wrap { height: 52svh; }
	.ljcfg .ljcp-stage-models { max-width: 46vw; }
	.ljcfg .ljcp-stage-dock { max-width: 48vw; }
	.ljcfg-back { left: 14px; top: 14px; padding: 10px 14px; font-size: 12.5px; }
}

/* Zones compactes dans la barre du bas */
.ljcp-stage-dock .ljcfg-zones { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; }
.ljcp-stage-dock .ljcfg-zrow { padding: 7px 11px; gap: 7px; font-size: 12px; border-radius: 999px; white-space: nowrap; }
.ljcp-stage-dock .ljcfg-chip { flex: 0 0 17px; width: 17px; height: 17px; }

/* Dock (modules + personnalisation) : barre FINE sur une seule ligne,
   centrée dans l espace libre entre la colonne de gauche et le panneau */
.ljcfg .ljcp-stage-dock {
	left: calc(50% + 173px); right: auto; transform: translateX(-50%);
	bottom: clamp(12px, 2vw, 20px);
	width: max-content; max-width: calc(100% - 330px);
	padding: 10px 18px 12px;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 16px;
}
/* Segments à plat : libellé et commandes sur la même ligne */
/* Étiquette fine au-dessus, contenu en dessous */
.ljcfg .ljcp-dock-seg { flex-direction: column; align-items: center; gap: 8px; }
.ljcfg .ljcp-stage-dock .ljcp-dock-label { white-space: nowrap; }
.ljcfg .ljcfg-seg button { padding: 6px 11px; font-size: 11.5px; white-space: nowrap; }

/* Colonne bas-gauche : ambiance au-dessus des architectures, même largeur */
.ljcfg-left {
	position: absolute; z-index: 5;
	left: clamp(20px, 4vw, 56px); bottom: clamp(14px, 2.4vw, 26px);
	display: flex; flex-direction: column; gap: 10px;
	width: 290px;
}
.ljcfg-left .ljcp-stage-models {
	position: static; left: auto; bottom: auto;
	width: 100%;
}
.ljcfg-envbox {
	display: flex; flex-direction: column; gap: 10px;
	padding: 14px 16px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--radius);
}
.ljcfg-envbox .ljcfg-env { width: 100%; }
.ljcfg-envbox .ljcfg-env-row { width: 100%; }

/* Le sujet 3D légèrement décalé vers la droite dans la zone de scène
   (la colonne ambiance/architecture occupe la gauche) */
.ljcfg .ljcp-stage-pane { left: 4%; right: -4%; }

/* Voile de chargement du modèle 3D (les GLB pèsent 30 à 80 Mo) */
.ljcfg-loading {
	position: absolute; inset: 0; z-index: 6;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
	background: rgba(5, 5, 6, .72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	font-size: 13px; font-weight: 650; letter-spacing: .04em;
	color: rgba(245, 245, 247, .8);
	pointer-events: none;
}
.ljcfg-loading[hidden] { display: none; }
.ljcfg-spin {
	width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .16);
	border-top-color: var(--accent);
	animation: ljcfg-spin .9s linear infinite;
}
@keyframes ljcfg-spin { to { transform: rotate(360deg); } }

/* [hidden] doit gagner sur le display: flex des lignes de zone */
.ljcfg-zrow[hidden] { display: none !important; }

/* Barre du bas : reste fine à 4 zones, passe sur deux lignes pour les
   architectures qui en comptent 6 (WING, SIGNATURE) */
.ljcfg .ljcp-stage-dock { flex-wrap: wrap; }
.ljcp-stage-dock .ljcfg-zones { flex-wrap: wrap; justify-content: center; }

/* ---------- Pictogrammes d'architecture (filigrane blanc au trait) ---------- */
.ljcp-tab .ljcp-tab-icon {
	flex: 0 0 34px; width: 34px; height: 23px;
	color: rgba(245, 245, 247, .5);
	transition: color .3s, opacity .3s;
}
.ljcp-tab:hover .ljcp-tab-icon, .ljcp-tab.is-active .ljcp-tab-icon { color: var(--accent); }

/* ---------- Outils de la vue 3D : mesures | plein écran | reset ---------- */
.ljcfg-tools {
	position: absolute; z-index: 6;
	right: clamp(16px, 2vw, 26px); top: 50%;
	transform: translateY(-50%);
	display: flex; flex-direction: column; gap: 8px;
	padding: 8px;
	background: rgba(12, 12, 14, .62);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 999px;
}
.ljcfg-tool {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	background: none; border: none; border-radius: 50%;
	color: rgba(245, 245, 247, .78);
	cursor: pointer;
	transition: background .25s, color .25s;
}
.ljcfg-tool svg { width: 19px; height: 19px; }
.ljcfg-tool:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.ljcfg-tool.is-on { background: var(--accent); color: #fff; }

/* ---------- Cotes du modèle ---------- */
.ljcfg-dims {
	position: absolute; inset: 0; z-index: 5;
	width: 100%; height: 100%;
	pointer-events: none;
}
.ljcfg-dims[hidden] { display: none; }
.ljcfg-dimline {
	stroke: var(--accent); stroke-width: 1.5;
	stroke-dasharray: 5 4;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .8));
}
.ljcfg-dimlabels { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.ljcfg-dimlabels[hidden] { display: none; }
.ljcfg-dimlabels span {
	position: absolute; top: 0; left: 0;
	padding: 4px 9px;
	background: rgba(12, 12, 14, .86);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(244, 121, 31, .45);
	border-radius: 999px;
	font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
	color: #FFB076; white-space: nowrap;
}
/* Repères 3D des cotes : invisibles, ils ne servent qu'à la projection */
.ljcfg-dimpt { width: 0; height: 0; pointer-events: none; }

@media (max-width: 1080px) {
	.ljcfg-tools { top: auto; bottom: 14px; right: 14px; transform: none; flex-direction: row; }
	.ljcfg-tool { width: 36px; height: 36px; }
}

/* =========================================================================
   SECTION STORYTELLING — « Plus qu'un carport » : copy + 3D manipulable,
   piliers puis citation du fondateur.
   ========================================================================= */
.ljcp-story { padding-block: clamp(64px, 9vw, 130px) clamp(72px, 10vw, 150px); }
/* Tête centrée : petit libellé puis titre */
.ljcp-story-head { text-align: center; }
.ljcp-story-head .ljcp-title { font-size: clamp(32px, 3.8vw, 60px); }
/* Texte sur toute la largeur du container : le bloc respire, moins haut */
.ljcp-story-copy { margin-top: clamp(26px, 3.5vw, 44px); }
.ljcp-story-copy .ljcp-text { max-width: none; }
/* 3D centrée, en grand, sous le texte */
.ljcp-story-stage {
	position: relative;
	width: min(1150px, 100%);
	margin: clamp(36px, 5vw, 64px) auto 0;
	height: clamp(440px, 62vh, 700px);
}
.ljcp-story-stage model-viewer {
	width: 100%; height: 100%;
	--poster-color: transparent;
	cursor: grab;
}
.ljcp-story-stage model-viewer:active { cursor: grabbing; }
/* Pills des modèles + « Faites-le pivoter » centrés sous la 3D */
.ljcp-story-bar {
	position: absolute; left: 0; right: 0; bottom: -6px;
	display: flex; align-items: center; justify-content: center;
	gap: 18px; flex-wrap: wrap;
}
.ljcp-story-stage .ljm-h3d-id { top: 0; left: 12px; }
.ljcp-story-stage .ljm-h3d-loading { bottom: 54px; }
/* Bouton configurateur centré sous la 3D */
.ljcp-story-btns { margin-top: clamp(30px, 4vw, 48px); }
.ljcp-story-btns.is-center { text-align: center; }
.ljcp-story-btns .ljcp-btn { flex-direction: row; gap: 10px; white-space: nowrap; }

.ljcp-pillars.is-static {
	position: static; transform: none;
	width: 100%;
	margin-top: clamp(44px, 6vw, 76px);
}
.ljcp-pillars.is-static .ljcp-pillar { opacity: 1; }

.ljcp-story-quote {
	margin: clamp(90px, 12vw, 190px) auto 0;
	max-width: 900px;
	text-align: center;
}
/* Ton légèrement calligraphique : italique serif, sans excès */
.ljcp-story-quote p {
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-size: clamp(20px, 2.3vw, 28px);
	font-weight: 500; letter-spacing: .002em; line-height: 1.58;
	color: rgba(245, 245, 247, .92);
	margin: 0;
}
.ljcp-story-quote footer {
	margin-top: 18px;
	font-size: 14px; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--accent);
}
.ljcp-story-quote footer::before {
	content: ''; display: block; width: 34px; height: 2px;
	background: var(--accent); margin: 0 auto 12px; opacity: .8;
}

/* =========================================================================
   SCÈNE ÉNERGIE — titre illuminé + carport 3D + produits + flux orange
   ========================================================================= */
.ljcp-eco-title {
	text-align: center;
	font-size: clamp(30px, 4.6vw, 72px) !important;
	letter-spacing: -.035em;
	line-height: 1.16;
	text-wrap: balance;
	max-width: 1100px; margin-inline: auto;
}
.ljcp-eco .ljcp-container { text-align: center; }
.ljcp-eco-title .ch { color: rgba(245, 245, 247, .09); }
.ljcp-eco-title .ch.is-sun { will-change: filter; animation: ljcp-sun 2.2s ease-in-out infinite; }

.ljcp-eco-scene {
	position: relative;
	width: min(1280px, calc(100% - 2 * var(--gutter)));
	margin: clamp(56px, 7.5vw, 110px) auto 0;
	height: clamp(430px, 54vw, 640px);
}
.ljcp-eco-stage3d { position: absolute; left: -3%; top: 0; width: 56%; height: 100%; }
.ljcp-eco-stage3d model-viewer {
	width: 100%; height: 100%;
	--poster-color: transparent;
	pointer-events: none;
}
.ljcp-eco-floorglow {
	position: absolute; left: 50%; bottom: 6%;
	width: 74%; height: 14%;
	transform: translateX(-50%);
	background: radial-gradient(50% 100% at 50% 100%, rgba(244, 121, 31, .32), transparent 70%);
	filter: blur(10px);
	pointer-events: none;
}
.ljcp-eco-flux { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ljcp-eco-flux path {
	fill: none;
	stroke: rgba(244, 121, 31, .68);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 6px rgba(244, 121, 31, .5));
}
.ljcp-eco-flux .ljcp-flux-pulse {
	stroke: #FFB076;
	stroke-width: 3.2;
	stroke-dasharray: 16 140;
	stroke-dashoffset: 0;
	opacity: 0;
	transition: opacity .5s;
}
.ljcp-eco-scene.is-live .ljcp-flux-pulse {
	opacity: 1;
	animation: ljcp-fluxflow 1.5s linear infinite;
}
@keyframes ljcp-fluxflow { to { stroke-dashoffset: -156; } }

.ljcp-eco-devices {
	position: absolute; right: 0; top: 0;
	height: 100%; width: 27%;
	display: flex; flex-direction: column;
	justify-content: space-between;
	padding-block: 1%;
}
.ljcp-eco-dev {
	margin: 0;
	flex: 0 1 31%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 10px;
	padding: 14px 12px;
	background: linear-gradient(165deg, rgba(22, 22, 24, .9), rgba(9, 9, 10, .82));
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
.ljcp-eco-dev-media {
	display: flex; align-items: center; justify-content: center;
	height: clamp(64px, 9vw, 118px);
}
.ljcp-eco-dev-media img { max-height: 100%; width: auto; max-width: 100%; }
.ljcp-eco-dev figcaption {
	font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
	text-transform: uppercase; color: rgba(245, 245, 247, .78);
	text-align: center;
}

/* =========================================================================
   SUBVENTIONS — un investissement soutenu
   ========================================================================= */
.ljcp-subv { padding-block: clamp(72px, 10vw, 150px); }
.ljcp-subv-card {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 4.5vw, 64px);
	background: linear-gradient(160deg, rgba(20, 20, 22, .94), rgba(8, 8, 9, .9));
	border: 1px solid rgba(255, 255, 255, .09);
	border-radius: var(--radius-lg);
}
.ljcp-subv-copy .ljcp-title { font-size: clamp(28px, 3.2vw, 48px); margin-bottom: 16px; }
.ljcp-subv-copy .ljcp-text { max-width: 62ch; }
.ljcp-subv-list {
	list-style: none; margin: 26px 0 0; padding: 0;
	display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px;
}
.ljcp-subv-list li {
	position: relative;
	padding: 13px 0 13px 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: 15px; font-weight: 600; color: rgba(245, 245, 247, .88);
}
.ljcp-subv-list li::before {
	content: ''; position: absolute; left: 0; top: 50%;
	width: 8px; height: 8px; transform: translateY(-50%);
	background: var(--accent); border-radius: 2px;
}
.ljcp-subv-note {
	margin: 26px 0 0;
	padding: 18px 22px;
	background: rgba(244, 121, 31, .07);
	border: 1px solid rgba(244, 121, 31, .3);
	border-radius: var(--radius);
	font-size: 15.5px; line-height: 1.6; color: rgba(245, 245, 247, .85);
}
.ljcp-subv-note strong { color: var(--accent); font-weight: 700; }
.ljcp-subv-visual {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 240px;
}
.ljcp-subv-visual svg {
	width: clamp(120px, 14vw, 190px); height: auto;
	color: rgba(244, 121, 31, .85);
	filter: drop-shadow(0 0 26px rgba(244, 121, 31, .25));
}
.ljcp-subv-halo {
	position: absolute; inset: 0; margin: auto;
	width: clamp(230px, 24vw, 330px); height: clamp(230px, 24vw, 330px);
	border: 1.5px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(#0B0B0C, #0B0B0C) padding-box,
		conic-gradient(from 210deg, transparent 0 40%, rgba(244, 121, 31, .85) 58%, transparent 74%) border-box;
	opacity: .9;
}

/* =========================================================================
   CTA FINAL — bouton négatif + texte traversé d'énergie
   ========================================================================= */
.ljcp-btn.is-negative {
	background: rgba(12, 12, 14, .55);
	border: 1px solid rgba(244, 121, 31, .6);
	color: #fff;
}
.ljcp-btn.is-negative:hover {
	background: rgba(244, 121, 31, .12);
	border-color: var(--accent);
}

/* « produisait aussi son énergie ? » : lueur qui transite en boucle */
.ljcp-energy-text {
	background: linear-gradient(100deg,
		var(--accent) 0%, var(--accent) 34%,
		#FFD9B8 46%, #FFF3E6 50%, #FFD9B8 54%,
		var(--accent) 66%, var(--accent) 100%);
	background-size: 240% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--accent); /* repli sans background-clip */
	animation: ljcp-energytext 3.2s linear infinite;
}
@keyframes ljcp-energytext { to { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) {
	.ljcp-energy-text { animation: none; }
	.ljcp-flux-pulse { animation: none !important; }
}

/* ---------- Responsive des nouvelles sections ---------- */
@media (max-width: 1080px) {
	.ljcp-story-stage { height: clamp(340px, 52vw, 480px); }
}
@media (max-width: 820px) {
	.ljcp-eco-scene { height: auto; }
	.ljcp-eco-stage3d { position: relative; left: 0; width: 100%; height: clamp(260px, 52vw, 360px); }
	.ljcp-eco-flux { display: none; }
	.ljcp-eco-devices {
		position: static; width: 100%; height: auto;
		flex-direction: row; gap: 10px;
		margin-top: 14px;
	}
	.ljcp-eco-dev { flex: 1 1 0; }
	.ljcp-subv-card { grid-template-columns: 1fr; }
	.ljcp-subv-visual { min-height: 200px; order: -1; }
	.ljcp-subv-list { grid-template-columns: 1fr; }
}

/* =========================================================================
   CONFIGURATEUR SUR MOBILE (≤ 820px) — fini les panneaux flottants qui se
   recouvrent : la page devient un flux vertical. Ordre : identité du
   modèle → vue 3D → outils → ambiance + architectures → modules/couleurs
   → fiche (statique, règles 1080px) → palette en tiroir bas.
   ========================================================================= */
@media (max-width: 820px) {
	.ljcfg .ljcp-stage-wrap { height: auto; }
	.ljcfg .ljcp-stage {
		height: auto; min-height: 0;
		display: flex; flex-direction: column;
		gap: 12px;
		padding: 64px 12px 12px; /* dégagement sous « Retour au site » */
	}
	.ljcfg .ljcp-stage-floor { display: none; }

	/* 1. Identité du modèle */
	.ljcfg .ljcp-stage-head {
		position: static; order: 1;
		width: 100%; margin: 0; padding: 12px 14px;
	}
	.ljcfg .ljcp-stage-head .ljcp-kicker { display: none; }
	.ljcfg-explink { display: none; }

	/* 2. Architectures puis ambiance, tout de suite sous l'identité :
	   changer de modèle se fait d'un pouce, avant même la 3D */
	.ljcfg-left {
		position: static; order: 2;
		width: 100%; left: auto; bottom: auto;
	}
	.ljcfg-left .ljcp-stage-models { order: -1; }

	/* 3. Vue 3D : seul le pane actif existe, en flux */
	.ljcfg .ljcp-stage-pane { display: none; }
	.ljcfg .ljcp-stage-pane.is-active {
		display: block; position: relative;
		inset: auto; left: 0; right: 0;
		width: 100%; height: 46svh; min-height: 300px;
		order: 3;
	}

	/* 4. Outils (mesures / plein écran / reset) sous la vue */
	.ljcfg-tools {
		position: static; order: 4; transform: none;
		flex-direction: row; align-self: center;
	}
	.ljcfg-tool { width: 38px; height: 38px; }
	.ljcfg .ljcp-stage-models { max-width: none; padding: 12px 14px; }
	.ljcfg-left .ljcp-tabs { flex-direction: row; flex-wrap: wrap; gap: 6px; }
	.ljcfg-left .ljcp-tab { flex: 1 1 46%; min-width: 130px; }

	/* 5. Modules + couleurs : bloc pleine largeur qui replie */
	.ljcfg .ljcp-stage-dock {
		position: static; order: 5; transform: none;
		left: auto; right: auto; bottom: auto;
		width: 100%; max-width: none;
		flex-wrap: wrap; justify-content: center;
		padding: 14px;
	}
	.ljcfg .ljcp-stage-dock .ljcp-dock-sep { display: none; }
	.ljcp-stage-dock .ljcfg-zones { flex-wrap: wrap; justify-content: center; }

	/* Voile de chargement centré sur la vue 3D plutôt que sur la colonne */
	.ljcfg-loading { position: fixed; inset: 0; }

	/* Les cotes suivent la vue : le SVG couvre le stage entier, inchangé */
	.ljcfg-palette { z-index: 60; }
}

/* =========================================================================
   PERFORMANCE MOBILE — la page expérience doit scroller comme du beurre :
   plus de verre dépoli ni de flous géants recomposités à chaque frame,
   et la 3D du storytelling laisse un vrai espace avant les modèles.
   ========================================================================= */
@media (max-width: 820px) {
	.ljcp .ljcp-pillar,
	.ljcp .ljcp-eco-dev,
	.ljcp .ljcp-stage-dock,
	.ljcp .ljcp-stage-models,
	.ljcp .ljcp-stage-head {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	.ljcp .ljcp-pillar { background: linear-gradient(165deg, rgba(23, 23, 25, .97), rgba(10, 10, 11, .95)); }
	.ljcp .ljcp-eco-dev { background: linear-gradient(165deg, rgba(23, 23, 25, .96), rgba(10, 10, 11, .94)); }

	/* Halos : le dégradé radial suffit, le blur GPU coûte trop cher */
	.ljcp .ljcp-light { filter: none; opacity: .8; }
	.ljcp .ljcp-eco-floorglow,
	.ljcp .ljcp-stage-floor { filter: none; }
	.ljcp .ljcp-eco-flux path { filter: none; }

	/* Storytelling : le modèle garde sa scène, les pills passent en flux
	   nettement en dessous — plus de filtres collés au carport */
	.ljcp-story-stage { height: auto; }
	.ljcp-story-stage model-viewer { height: clamp(300px, 78vw, 420px); }
	.ljcp-story-bar { position: static; margin-top: 28px; justify-content: center; }
	.ljcp-story-stage .ljm-h3d-loading { bottom: auto; top: 40%; }
}