:root {
	--marine: #0B2545;
	--marine-2: #123660;
	--orange: #EA611E;
	--creme: #F5F2ED;
	--blanc: #FFFFFF;
	--encre: #1B1F24;
	--gris: #5B6570;
	--bord: #E4DDD3;
	--vert: #2F7D4F;
	--ambre: #B45309;
	--rouge: #B42318;
	--gouttiere: clamp(18px, 5vw, 72px);
	--contenu: 820px;
	--titres: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
	--texte: "Onest", "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--texte); font-size: 17px; line-height: 1.55; color: var(--encre); background: var(--creme); }
h1, h2 { font-family: var(--titres); line-height: 1.12; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; }
h2 { font-size: 22px; font-weight: 700; margin-bottom: 18px; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.86em; }
.cadre { max-width: var(--contenu); margin: 0 auto; padding-inline: var(--gouttiere); }

.entete { position: relative; overflow: hidden; color: var(--blanc); background: var(--marine); padding: clamp(40px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.entete::before { content: ""; position: absolute; right: -140px; top: -180px; width: 460px; height: 460px; border-radius: 50%; background: var(--marine-2); pointer-events: none; }
.entete .cadre { position: relative; }
.sur { font-weight: 700; color: #F7B48E; margin-bottom: 10px; font-size: 15px; }
.chapo { margin-top: 14px; color: #D9E2EE; max-width: 60ch; }

main { padding-block: clamp(24px, 4vw, 40px); display: grid; gap: 20px; }
.carte { background: var(--blanc); border: 1px solid var(--bord); border-radius: 16px; padding: clamp(18px, 3vw, 28px); }

.resultat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.mdp { font-family: var(--mono); font-size: clamp(18px, 2.6vw, 24px); word-break: break-all; padding: 14px 16px; background: var(--creme); border-radius: 10px; min-height: 58px; user-select: all; }
.actions { display: flex; gap: 10px; }

.bouton { font: 700 16px var(--texte); border: 0; border-radius: 10px; padding: 14px 20px; background: var(--orange); color: var(--blanc); cursor: pointer; transition: background .15s; }
.bouton:hover { background: #C94F14; }
.bouton.clair { background: var(--creme); color: var(--marine); border: 1px solid var(--bord); }
.bouton.clair:hover { background: #ECE3D6; }
.bouton.copie, .bouton.copie:hover { background: var(--vert); color: var(--blanc); }
.bouton.petit { padding: 8px 14px; font-size: 15px; }
.bouton:focus-visible, input:focus-visible { outline: 3px solid #F7B48E; outline-offset: 2px; }

.force { margin-top: 16px; display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--gris); }
.jauge { flex: 0 0 160px; height: 8px; background: var(--creme); border-radius: 99px; overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: 99px; transition: width .2s; }
.jauge .faible { background: var(--rouge); }
.jauge .moyen { background: var(--ambre); }
.jauge .fort { background: var(--vert); }

.ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) 76px; gap: 14px; align-items: center; margin-bottom: 18px; font-weight: 700; }
input[type=range] { width: 100%; accent-color: var(--orange); }
input[type=number] { font: 500 16px var(--mono); width: 100%; padding: 8px 10px; border: 1px solid var(--bord); border-radius: 8px; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
legend { font-weight: 700; margin-bottom: 10px; }
.case { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.case input { width: 20px; height: 20px; accent-color: var(--orange); flex: none; }
.case code { color: var(--gris); }
.note { margin-top: 16px; font-size: 15px; color: var(--gris); }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--creme); border-radius: 10px; }
.liste code { font-size: 16px; word-break: break-all; }

.pied { color: var(--gris); font-size: 14px; padding-bottom: 32px; }

@media (max-width: 600px) {
	.resultat { grid-template-columns: 1fr; }
	.actions .bouton { flex: 1; }
	.force { flex-direction: column; align-items: stretch; gap: 8px; }
	.jauge { flex: none; width: 100%; }
	.ligne { grid-template-columns: minmax(0, 1fr) 76px; }
	.ligne label { grid-column: 1 / -1; }
}