:root { color-scheme: light; }

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Composants de base */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: .875rem; font-weight: 600; font-size: .95rem;
  padding: .8rem 1.35rem; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
  cursor: pointer; border: 1px solid transparent; text-align: center; line-height: 1.2;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: #D8B7A3; color: #ffffff; }
.btn-primary:hover { background: #C49C84; }
.btn-secondary { background: #ffffff; color: #5C4A42; border-color: #EBDFD4; }
.btn-secondary:hover { background: #F3E7DB; }
.btn-ghost { background: transparent; color: #5C4A42; }
.btn-ghost:hover { background: #F3E7DB; }
.btn-dark { background: #5C4A42; color: #fff; }
.btn-dark:hover { background: #4a3b35; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .55rem 1rem; font-size: .85rem; border-radius: .75rem; }

.card { background: #fff; border: 1px solid #EBDFD4; border-radius: 1.25rem; }
.field {
  width: 100%; border: 1px solid #EBDFD4; background: #fff; border-radius: .875rem;
  padding: .8rem 1rem; font-size: .95rem; color: #5C4A42; outline: none;
  transition: border-color .15s ease;
}
.field:focus { border-color: #D8B7A3; }
.field::placeholder { color: #B8A79C; }
label.lbl { display: block; font-size: .82rem; font-weight: 600; color: #8A776D; margin-bottom: .4rem; }

.option {
  width: 100%; text-align: left; border: 1px solid #EBDFD4; background: #fff;
  border-radius: 1rem; padding: 1rem 1.1rem; font-size: .97rem; color: #5C4A42;
  cursor: pointer; transition: border-color .15s ease, background-color .15s ease;
  display: flex; align-items: center; gap: .85rem;
}
.option:hover { border-color: #D8B7A3; background: #FDFAF6; }
.option.selected { border-color: #D8B7A3; background: #F3E7DB; }
.option .dot {
  flex: none; width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid #D8B7A3;
  display: inline-flex; align-items: center; justify-content: center;
}
.option.selected .dot::after { content: ''; width: 9px; height: 9px; border-radius: 999px; background: #D8B7A3; }

.badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; padding: .28rem .65rem; border-radius: 999px; }
.badge-sand { background: #F3E7DB; color: #8A6A54; }
.badge-green { background: #E4EFE6; color: #3F6B4A; }
.badge-grey { background: #F1ECE7; color: #8A776D; }
.badge-amber { background: #FBEFDD; color: #8A6A32; }

.prose-ab p { margin-bottom: .75rem; line-height: 1.65; }

.fade-in { animation: fadeIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.toast { background: #fff; border: 1px solid #EBDFD4; border-radius: .9rem; padding: .8rem 1rem; font-size: .88rem; animation: fadeIn .2s ease both; }
.toast.error { border-color: #E4C0B3; background: #FDF3F0; }
.toast.success { border-color: #CBDFCF; background: #F2F8F3; }

.progress-track { height: 6px; background: #EBDFD4; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; background: #D8B7A3; border-radius: 999px; transition: width .3s ease; }

.star { cursor: pointer; transition: transform .1s ease; }
.star:hover { transform: scale(1.12); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #E3D5C8; border-radius: 999px; border: 3px solid #FAF7F2; }
::-webkit-scrollbar-track { background: transparent; }

.tbl { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tbl th { text-align: left; font-weight: 600; color: #8A776D; padding: .65rem .75rem; border-bottom: 1px solid #EBDFD4; white-space: nowrap; }
.tbl td { padding: .7rem .75rem; border-bottom: 1px solid #F3EDE7; vertical-align: middle; }
.tbl tr:last-child td { border-bottom: none; }

.check-item { display: flex; gap: .65rem; align-items: flex-start; font-size: .93rem; }
.check-box { flex: none; width: 20px; height: 20px; border-radius: .45rem; border: 1.5px solid #D8B7A3; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
.check-box.on { background: #D8B7A3; }