/* ============================================================
   password.nsi.xyz — Material Design 3 (inspiré), clair/sombre
   Sans framework : variables + composants simples.
   ============================================================ */

:root {
	/* Rôles Material 3 — thème clair */
	--primaire: #4a5cc4;
	--sur-primaire: #ffffff;
	--conteneur: #ffffff;
	--surface: #f4f5fb;
	--surface-variante: #e6e8f5;
	--texte: #1a1c22;
	--texte-doux: #4b4f5c;
	--contour: #c4c8da;
	--ombre: 0 1px 2px rgba(0,0,0,.14), 0 1px 3px rgba(0,0,0,.10);
	--ombre-haute: 0 2px 6px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.12);
	--rayon: 16px;
	--faible: #d33b3b;
	--moyen: #e08a1e;
	--bon: #3f9e4d;
	--excellent: #1f8a4c;
}

:root[data-theme="dark"] {
	--primaire: #b8c2ff;
	--sur-primaire: #1c2352;
	--conteneur: #1e2130;
	--surface: #12141c;
	--surface-variante: #2a2e3d;
	--texte: #e5e7f0;
	--texte-doux: #c2c6d6;
	--contour: #444a5e;
	--ombre: 0 1px 2px rgba(0,0,0,.5);
	--ombre-haute: 0 2px 8px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--surface);
	color: var(--texte);
	font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 16px;
	gap: 16px;
}

/* --- En-tête --- */
.entete {
	width: 100%;
	max-width: 560px;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 4px 8px;
}
.entete h1 { margin: 0; font-size: clamp(1.25rem, 4vw, 1.6rem); font-weight: 600; }
.intro { grid-column: 1 / -1; margin: 0; color: var(--texte-doux); font-size: .95rem; }
#theme { grid-row: 1; grid-column: 2; }

/* --- Carte principale --- */
.carte {
	width: 100%;
	max-width: 560px;
	background: var(--conteneur);
	border-radius: var(--rayon);
	box-shadow: var(--ombre-haute);
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* --- Sélecteur de format (segmented buttons Material) --- */
.formats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	border: 1px solid var(--contour);
	border-radius: 999px;
	padding: 4px;
	margin: 0;
	background: var(--surface-variante);
}
.format { position: relative; cursor: pointer; }
.format input { position: absolute; opacity: 0; inset: 0; }
.format span {
	display: block;
	text-align: center;
	padding: 9px 6px;
	border-radius: 999px;
	font-size: .9rem;
	font-weight: 500;
	transition: background .15s, color .15s;
}
.format input:checked + span { background: var(--primaire); color: var(--sur-primaire); }
.format input:focus-visible + span { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* --- Options --- */
.options { display: flex; flex-direction: column; gap: 12px; }
.ligne { font-size: .92rem; color: var(--texte-doux); }
.ligne output { font-weight: 700; color: var(--texte); }

input[type="range"] {
	width: 100%;
	accent-color: var(--primaire);
	height: 28px;
}
select {
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--contour);
	background: var(--conteneur);
	color: var(--texte);
	font: inherit;
}
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.cases label, .case { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--primaire); }

/* --- Boutons --- */
.bouton-principal {
	border: none;
	background: var(--primaire);
	color: var(--sur-primaire);
	font: inherit;
	font-weight: 600;
	font-size: 1rem;
	padding: 14px;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-shadow: var(--ombre);
}
.bouton-principal:hover { box-shadow: var(--ombre-haute); }
.bouton-principal svg { fill: currentColor; }

.bouton-icone {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--texte-doux);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.bouton-icone:hover { background: var(--surface-variante); color: var(--texte); }
.bouton-icone svg { fill: currentColor; }

/* --- Résultat --- */
.resultat {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--surface-variante);
	border: 1px solid var(--contour);
	border-radius: 12px;
	padding: 6px 6px 6px 14px;
}
.valeur {
	flex: 1;
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	font-size: clamp(.95rem, 3.4vw, 1.15rem);
	word-break: break-all;
	user-select: all;
	min-height: 1.4em;
}

/* --- Force --- */
.force { display: flex; flex-direction: column; gap: 8px; }
.jauge {
	height: 10px;
	border-radius: 999px;
	background: var(--surface-variante);
	overflow: hidden;
}
#jauge-barre {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: var(--faible);
	transition: width .25s, background .25s;
}
.niveau { margin: 0; font-size: .92rem; color: var(--texte-doux); }
.niveau strong { color: var(--texte); }
details { font-size: .9rem; color: var(--texte-doux); }
summary { cursor: pointer; }
details ul { margin: 8px 0 0; padding-left: 20px; }
details strong { color: var(--texte); }

/* --- Pied --- */
.pied { color: var(--texte-doux); font-size: .82rem; text-align: center; max-width: 560px; }
.pied a { color: var(--primaire); }

/* --- Accessibilité --- */
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--primaire); outline-offset: 2px; }

/* --- Très petits écrans --- */
@media (max-width: 380px) {
	.formats { grid-template-columns: 1fr 1fr; }
	.cases { grid-template-columns: 1fr; }
}

/* --- Moins d'animations --- */
@media (prefers-reduced-motion: reduce) {
	#jauge-barre, .format span { transition: none; }
}