:root { --corail: #f78f6a; --corail-fonce: #c0532d; --creme: #fffaf3; --ligne: #f0e8dc; --texte: #141414; --gris: #7a6756; --rouge: #d4573f }
* { box-sizing: border-box }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--creme); color: var(--texte); font: 15px/1.5 Cabin, -apple-system, 'Segoe UI', sans-serif; padding: 16px }
.boite { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--ligne); border-radius: 20px; padding: 32px 28px; box-shadow: 0 14px 34px -10px rgba(70, 45, 20, .18) }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 800 }
.pastille { width: 22px; height: 22px; border-radius: 50%; background: var(--corail) }
h1 { font-size: 24px; margin: 22px 0 4px }
.aide { color: var(--gris); margin: 0 0 18px }
.erreur { background: #fbe4dd; color: var(--rouge); border-radius: 10px; padding: 8px 12px }
label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; margin-bottom: 14px }
input { font: inherit; padding: 10px 12px; border: 1px solid #e3d6c3; border-radius: 10px }
input:focus { outline: none; border-color: var(--corail); box-shadow: 0 0 0 3px rgba(247, 143, 106, .28) }
button { width: 100%; font: inherit; font-weight: 800; background: var(--corail); border: 0; border-radius: 15px; padding: 12px; cursor: pointer; margin-top: 6px }
button:hover { background: #f47f56 }
.liste { margin: 0 0 14px; padding-left: 18px }
.liste li { margin-bottom: 6px }
.petit { font-size: 13px }
button.secondaire { background: #fff; border: 1px solid #e3d6c3 }
button.secondaire:hover { background: var(--creme) }