/* NS Silhouette sur mesure — reprend la charte du site (orange #CC611D, Inter / DM Serif Display / Roboto). */
.ns-ssm {
	--ns-accent: #cc611d;
	--ns-accent-dark: #a94e15;
	--ns-ink: #1b1b1c;
	--ns-muted: #6b6b70;
	--ns-line: #e3dfd8;
	--ns-bg: #faf8f5;
	--ns-ok: #1a7f37;
	--ns-warn: #a86400;
	--ns-bad: #b32d2e;
	font-family: Roboto, system-ui, sans-serif;
	color: var(--ns-ink);
	max-width: 1320px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px) clamp(32px, 5vw, 64px);
	box-sizing: border-box;
}
.ns-ssm *, .ns-ssm *::before, .ns-ssm *::after { box-sizing: inherit; }
.ns-ssm [hidden] { display: none !important; }
.ns-ssm__test {
	background: #fff4e5;
	border: 1px solid #f0c48f;
	color: #7a4a10;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 14px;
	margin: 0 0 24px;
}
.ns-ssm__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
	gap: clamp(24px, 3vw, 40px);
	align-items: start;
}
.ns-ssm__stage { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 901px) and (min-height: 940px) { .ns-ssm__stage { position: sticky; top: 24px; } }
.ns-ssm__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ns-ssm__tabsrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Pastille « Boule de Noël » avec chapeau */
.ns-ssm__pill-noel {
	position: relative; display: inline-flex; align-items: center; gap: 6px;
	font: 700 14px/1.2 Inter, system-ui, sans-serif; color: #fff;
	background: linear-gradient(135deg, #c8202c, #8f1018); border: 0; border-radius: 999px;
	padding: 10px 18px 10px 22px; cursor: pointer; box-shadow: 0 2px 8px rgba(143,16,24,.35);
	transition: transform .15s, box-shadow .15s;
}
.ns-ssm__pill-noel:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(143,16,24,.45); color: #fff; background: linear-gradient(135deg, #d42a35, #9b141d); }
.ns-ssm__pill-noel:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
.ns-ssm__pill-noel.is-active { background: linear-gradient(135deg, #1f5c35, #123d22); box-shadow: 0 2px 8px rgba(18,61,34,.4); }
.ns-ssm__hat { position: absolute; top: -15px; left: -9px; width: 30px; height: 26px; transform: rotate(-22deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); pointer-events: none; }
/* Pastilles de diamètre */
.ns-ssm__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ns-ssm__chip { font: 600 14px/1.2 Inter, system-ui, sans-serif; background: #fff; color: var(--ns-ink); border: 1px solid #cfc9bf; border-radius: 999px; padding: 9px 16px; cursor: pointer; }
.ns-ssm__chip:hover { border-color: var(--ns-ink); background: #fff; color: var(--ns-ink); }
.ns-ssm__chip[aria-checked="true"] { background: var(--ns-ink); border-color: var(--ns-ink); color: #fff; }
.ns-ssm__chip:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
.ns-ssm__tab, .ns-ssm__mode {
	font: 600 14px/1.2 Inter, system-ui, sans-serif;
	border: 1px solid var(--ns-line);
	background: #fff;
	color: var(--ns-ink);
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
}
.ns-ssm__tab.is-active, .ns-ssm__mode.is-active { background: var(--ns-ink); border-color: var(--ns-ink); color: #fff; }
.ns-ssm__tab:focus-visible, .ns-ssm__mode:focus-visible, .ns-ssm__btn:focus-visible, .ns-ssm__drop:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
.ns-ssm__canvaswrap { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--ns-line); background: #f4f2ee; }
.ns-ssm__canvas { display: block; width: 100%; touch-action: none; }
.ns-ssm__scenebar { padding-top: 2px; }
.ns-ssm__scenebar .ns-ssm__row { gap: 12px 16px; }
.ns-ssm__help { margin: 0; font-size: 14px; line-height: 1.45; color: #4a4a4f; }
/* Commandes en tête de l'encart Faisabilité */
.ns-ssm__toolbar {
	grid-column: 1 / -1;
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
	padding: 0 0 14px; border-bottom: 1px solid var(--ns-line);
}
.ns-ssm__switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: 600 15px/1.2 Inter, system-ui, sans-serif; color: var(--ns-ink); }
.ns-ssm__switch-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ns-ssm__switch-track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: #c9c3b9; transition: background .2s; }
.ns-ssm__switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.ns-ssm__switch-input:checked + .ns-ssm__switch-track { background: var(--ns-bad); }
.ns-ssm__switch-input:checked + .ns-ssm__switch-track::after { transform: translateX(20px); }
.ns-ssm__switch-input:focus-visible + .ns-ssm__switch-track { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
.ns-ssm__badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 13px/1.2 Inter, system-ui, sans-serif; }
.ns-ssm__badge.is-bad { background: #fdecec; color: var(--ns-bad); }
.ns-ssm__badge.is-bad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ns-bad); }
.ns-ssm__badge.is-ok { background: #e8f5ec; color: var(--ns-ok); }
.ns-ssm__badge.is-ok::before { content: "✓"; }
.ns-ssm__toolbar-select { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font: 500 13px/1.2 Inter, system-ui, sans-serif; color: var(--ns-muted); }
.ns-ssm .ns-ssm__toolbar-select select { width: auto; min-height: 36px; padding: 6px 10px; font-size: 14px; }
/* Faisabilité et estimation, sous l'aperçu */
.ns-ssm__feasibility {
	display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(200px, 1fr); gap: 16px 24px;
	background: #fff; border: 1px solid var(--ns-line); border-radius: 12px; padding: 16px 18px;
}
.ns-ssm__feas-h { margin: 0 0 10px; font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ns-accent-dark); }
/* Dans l'étape 3 (colonne de droite) : une seule colonne, séparée de la matière par un filet. */
.ns-ssm__section .ns-ssm__feasibility {
	grid-template-columns: 1fr; gap: 16px;
	border: 0; border-top: 1px solid var(--ns-line); border-radius: 0;
	padding: 18px 0 4px; margin-top: 4px; background: none;
}
.ns-ssm__feasibility .ns-ssm__checks { margin: 0; }
/* Accordéon Faisabilité */
.ns-ssm__acc-head {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; width: 100%;
	background: none; border: 0; padding: 0 0 2px; margin: 0; cursor: pointer; text-align: left; color: inherit; font: inherit;
}
.ns-ssm__acc-head .ns-ssm__feas-h { margin: 0; }
.ns-ssm__acc-head:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 3px; border-radius: 4px; }
.ns-ssm__chevron { margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--ns-muted); border-bottom: 2px solid var(--ns-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .3s ease; }
.ns-ssm__acc-head[aria-expanded="true"] .ns-ssm__chevron { transform: rotate(-135deg) translate(-2px, -2px); }
.ns-ssm__acc-body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease, margin .35s ease; margin-top: 0; }
.ns-ssm__acc-body.is-open { grid-template-rows: 1fr; opacity: 1; margin-top: 10px; }
.ns-ssm__acc-inner { overflow: hidden; min-height: 0; }
@media (prefers-reduced-motion: reduce) { .ns-ssm__acc-body, .ns-ssm__chevron { transition: none; } }
.ns-ssm__feasibility .ns-ssm__estimate { border-top: 0; padding-top: 0; }
.ns-ssm__view3d { position: relative; min-height: 240px; }
.ns-ssm__loading { margin: 0; padding: 100px 16px; text-align: center; color: var(--ns-muted); font-size: 14px; }
.ns-ssm__panel { display: flex; flex-direction: column; gap: 16px; }
.ns-ssm__section { background: #fff; border: 1px solid var(--ns-line); border-radius: 12px; padding: 22px 22px 10px; }
.ns-ssm__section > :last-child { margin-bottom: 12px; }
.ns-ssm__h {
	display: flex; align-items: center; gap: 10px;
	font: 400 22px/1.2 "DM Serif Display", Georgia, serif;
	margin: 0 0 18px; color: var(--ns-ink);
}
.ns-ssm__num {
	display: inline-grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: var(--ns-accent); color: #fff;
	font: 600 13px/1 Inter, system-ui, sans-serif;
}
.ns-ssm__modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ns-ssm__mode { padding: 8px 12px; font-size: 13px; }
.ns-ssm__drop {
	display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
	border: 2px dashed #d4cdc2; border-radius: 10px; padding: 26px 16px;
	background: var(--ns-bg); cursor: pointer; transition: border-color .15s, background .15s;
}
.ns-ssm__drop strong { font: 600 15px/1.3 Inter, system-ui, sans-serif; }
.ns-ssm__drop span { font-size: 13px; color: var(--ns-muted); }
.ns-ssm__drop:hover, .ns-ssm__drop.is-over { border-color: var(--ns-accent); background: #fff7f1; }
.ns-ssm__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ns-ssm__pad { width: 100%; max-width: 420px; aspect-ratio: 1; display: block; border: 1px solid var(--ns-line); border-radius: 8px; touch-action: none; cursor: crosshair; background: #fff; }
.ns-ssm__row { display: flex; flex-wrap: wrap; gap: 0 16px; align-items: flex-end; }
.ns-ssm__row > .ns-ssm__field { flex: 1 1 140px; }
.ns-ssm__field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 16px; }
.ns-ssm__label { font: 500 13px/1.3 Inter, system-ui, sans-serif; color: var(--ns-ink); }
.ns-ssm__hint { color: var(--ns-muted); font-size: 12px; }
.ns-ssm input[type=text], .ns-ssm input[type=email], .ns-ssm input[type=tel], .ns-ssm input[type=number], .ns-ssm select, .ns-ssm textarea {
	width: 100%; font: 15px/1.4 Roboto, system-ui, sans-serif; color: var(--ns-ink);
	border: 1px solid #cfc9bf; border-radius: 6px; padding: 9px 10px; background: #fff; min-height: 42px;
}
.ns-ssm input:focus, .ns-ssm select:focus, .ns-ssm textarea:focus { outline: 2px solid var(--ns-accent); outline-offset: 0; border-color: var(--ns-accent); }
.ns-ssm input[type=range] { width: 100%; accent-color: var(--ns-accent); }
.ns-ssm__out { display: block; font: 600 15px/42px Inter, system-ui, sans-serif; min-height: 42px; }
.ns-ssm__swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ns-ssm__swatch {
	display: flex; align-items: center; gap: 10px; text-align: left;
	background: #fff; border: 1px solid var(--ns-line); border-radius: 8px; padding: 6px 10px 6px 6px;
	cursor: pointer; color: var(--ns-ink); font: inherit; min-height: 58px;
}
.ns-ssm__swatch canvas { border-radius: 5px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.2); }
.ns-ssm__swatch span { display: flex; flex-direction: column; line-height: 1.25; }
.ns-ssm__swatch strong { font: 600 14px/1.25 Inter, system-ui, sans-serif; }
.ns-ssm__swatch small { color: var(--ns-muted); font-size: 12px; }
.ns-ssm__swatch:hover { border-color: var(--ns-ink); }
.ns-ssm__swatch[aria-checked="true"] { border-color: var(--ns-accent); box-shadow: 0 0 0 2px var(--ns-accent); }
.ns-ssm__swatch:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
.ns-ssm__check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; margin: 0 0 10px; cursor: pointer; }
.ns-ssm__check input { accent-color: var(--ns-accent); margin-top: 3px; }
.ns-ssm__checks { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ns-ssm__checks li { position: relative; padding: 8px 10px 8px 32px; border-radius: 6px; font-size: 14px; line-height: 1.4; background: var(--ns-bg); }
.ns-ssm__checks li::before { position: absolute; left: 10px; top: 8px; font-weight: 700; }
.ns-ssm__checks .is-ok::before { content: "✓"; color: var(--ns-ok); }
.ns-ssm__checks .is-warn { background: #fff6e8; }
.ns-ssm__checks .is-warn::before { content: "!"; color: var(--ns-warn); }
.ns-ssm__checks .is-bad { background: #fdecec; }
.ns-ssm__checks .is-bad::before { content: "✕"; color: var(--ns-bad); }
.ns-ssm__checks .is-info::before { content: "i"; color: var(--ns-muted); }
.ns-ssm__estimate { border-top: 1px solid var(--ns-line); padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.ns-ssm__estimate div { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.ns-ssm__estimate strong { font: 600 20px/1.2 Inter, system-ui, sans-serif; color: var(--ns-accent-dark); }
.ns-ssm__estimate small { color: var(--ns-muted); font-size: 12px; }
.ns-ssm__lead { margin: 0 0 12px; color: var(--ns-muted); font-size: 14px; }
.ns-ssm__btn {
	display: inline-flex; justify-content: center; align-items: center;
	font: 600 15px/1.2 Inter, system-ui, sans-serif;
	background: var(--ns-accent); color: #fff; border: 1px solid var(--ns-accent);
	border-radius: 6px; padding: 12px 18px; min-height: 44px; cursor: pointer;
	transition: background .15s;
}
.ns-ssm__btn:hover { background: var(--ns-accent-dark); border-color: var(--ns-accent-dark); color: #fff; }
.ns-ssm__btn[disabled] { opacity: .5; cursor: not-allowed; }
.ns-ssm__btn--ghost { background: #fff; color: var(--ns-ink); border-color: #cfc9bf; margin-bottom: 12px; }
.ns-ssm__btn--ghost:hover { background: var(--ns-bg); color: var(--ns-ink); border-color: var(--ns-ink); }
.ns-ssm__form .ns-ssm__btn[type=submit] { width: 100%; margin-top: 6px; }
.ns-ssm__consent a { color: var(--ns-accent-dark); }
.ns-ssm__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }
.ns-ssm__status { margin: 10px 0 0; font-size: 14px; min-height: 1.4em; }
.ns-ssm__status.is-error { color: var(--ns-bad); }
@media (max-width: 1080px) {
	.ns-ssm__grid { grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); }
}
@media (max-width: 900px) {
	.ns-ssm__grid { grid-template-columns: 1fr; gap: 24px; }
	.ns-ssm__stage { position: static; gap: 12px; }
	.ns-ssm__section { padding: 18px 16px 6px; border-radius: 10px; }
	.ns-ssm__h { font-size: 20px; margin-bottom: 14px; }
}
@media (max-width: 560px) {
	.ns-ssm { padding: 16px 16px 40px; }
	.ns-ssm__tab { flex: 1 1 auto; text-align: center; padding: 10px 10px; font-size: 13px; }
	.ns-ssm__switch { font-size: 14px; }
	.ns-ssm__toolbar-select { margin-left: 0; width: 100%; }
	.ns-ssm .ns-ssm__toolbar-select select { flex: 1; }
	.ns-ssm__feasibility { grid-template-columns: 1fr; padding: 14px; }
	.ns-ssm__swatches { grid-template-columns: 1fr 1fr; }
}

/* Alerte « problème détecté » sur l'aperçu */
.ns-ssm__alert {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 36px; height: 36px; padding: 0; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--ns-bad); color: #fff; border: 2px solid #fff;
	font: 800 20px/1 Inter, system-ui, sans-serif; cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.3);
	animation: ns-ssm-pulse 2s ease-out infinite;
}
.ns-ssm__alert:hover, .ns-ssm__alert:focus { background: #8f1f20; color: #fff; }
.ns-ssm__alert:focus-visible { outline: 3px solid var(--ns-accent); outline-offset: 2px; }
@keyframes ns-ssm-pulse {
	0% { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 0 rgba(179,45,46,.6); }
	70% { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 12px rgba(179,45,46,0); }
	100% { box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 0 rgba(179,45,46,0); }
}
/* Clignotement du compteur après un clic sur l'alerte */
.ns-ssm__badge.is-blink { animation: ns-ssm-blink .5s ease-in-out 4; }
@keyframes ns-ssm-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .25; transform: scale(1.08); background: var(--ns-bad); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
	.ns-ssm__alert { animation: none; }
	.ns-ssm__badge.is-blink { animation: none; outline: 3px solid var(--ns-bad); outline-offset: 2px; }
}