/* ============================================================
   css.nsi.xyz — styles de l'ATELIER (l'interface de la démo).
   Les styles de la page d'exemple, eux, sont générés par script.js
   et affichés dans le panneau « code CSS ».
   ============================================================ */

:root {
	--fond: #0f1117;
	--panneau: #171a23;
	--panneau2: #1e222d;
	--ligne: #2b303d;
	--texte: #e6e9f2;
	--doux: #a2aabd;
	--accent: #7c9cff;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.entete h1 { margin: 0 0 4px; font-size: clamp(1.5rem, 4vw, 2.1rem); }
.entete p { margin: 0; color: var(--doux); max-width: 70ch; }

h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .05em; color: var(--doux); margin: 0 0 10px; }

/* --- Barre de commandes --- */
.barre {
	display: grid;
	grid-template-columns: 2fr 1.4fr 1fr;
	gap: 16px;
	background: var(--panneau);
	border: 1px solid var(--ligne);
	border-radius: 14px;
	padding: 16px;
}
@media (max-width: 900px) { .barre { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	padding: 7px 14px; border-radius: 999px; border: 1px solid var(--ligne);
	background: var(--panneau2); color: var(--texte); cursor: pointer; font: inherit; font-size: .9rem;
}
.chip:hover { border-color: var(--accent); }
.chip[aria-checked="true"] { background: var(--accent); border-color: var(--accent); color: #0a1020; font-weight: 600; }

.cases { display: flex; flex-direction: column; gap: 8px; }
.case { display: flex; align-items: center; gap: 9px; font-size: .92rem; cursor: pointer; }
.case input { width: 18px; height: 18px; accent-color: var(--accent); }

.reglages { display: flex; flex-direction: column; gap: 12px; }
.reglage { font-size: .9rem; color: var(--doux); display: flex; flex-direction: column; gap: 6px; }
.reglage output { color: var(--texte); font-weight: 700; }
input[type="range"] { accent-color: var(--accent); width: 100%; }
input[type="color"] { width: 48px; height: 34px; border: 1px solid var(--ligne); border-radius: 8px; background: var(--panneau2); cursor: pointer; }
.bouton { justify-self: start; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ligne); background: var(--panneau2); color: var(--texte); cursor: pointer; font: inherit; }
.bouton:hover { border-color: var(--accent); }

/* --- Atelier : aperçu | explications + code --- */
.atelier { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1000px) { .atelier { grid-template-columns: 1fr; } }

.volet { min-width: 0; }

.cadre {
	border: 1px dashed var(--ligne);
	border-radius: 12px;
	overflow: hidden;
	background: repeating-conic-gradient(#00000010 0 25%, transparent 0 50%) 50% / 24px 24px;
	padding: 0;
}

/* L'aperçu : c'est ici que le CSS généré s'applique. */
.apercu {
	min-height: 360px;
	padding: 20px;
	transition: background .2s, color .2s;
}

.explications { margin: 0; padding-left: 18px; color: var(--doux); font-size: .9rem; line-height: 1.6; }
.explications strong { color: var(--texte); }
.explications code { color: var(--accent); }

pre {
	background: #0b0d13; border: 1px solid var(--ligne); border-radius: 12px;
	padding: 14px; overflow: auto; margin: 0; max-height: 460px;
}
#code { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; color: #cbeeff; white-space: pre; }

.pied { color: var(--doux); font-size: .85rem; }
.pied a { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .apercu { transition: none; } }