/* Style « carnet de voyage », comme l'application. Polices embarquées (pas de Google Fonts). */
@font-face { font-family: 'Caveat'; src: url('fonts/Caveat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/Nunito-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/Nunito-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --ink: #1b2a47;
  --muted: #55607a;
  --coral: #f0695a;
  --coral-deep: #b23c2e;
  --paper: #f6efe2;
  --paper-light: #fffaf0;
  --line: #dccfb9;
  --error: #a8261b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url('paper_grain.png'), repeating-linear-gradient(to bottom, transparent 0 31px, var(--line) 31px 32px);
  font: 16px/1.5 'Nunito', system-ui, sans-serif;
}

.page { max-width: 560px; margin: 0 auto; padding: 32px 16px 48px; }

.brand { font-family: 'Caveat', cursive; font-size: 28px; color: var(--coral-deep); margin: 0; transform: rotate(-2deg); display: inline-block; }
h1 { font-family: 'Caveat', cursive; font-size: 46px; line-height: 1.1; margin: 4px 0 20px; }
h2 { font-family: 'Caveat', cursive; font-size: 30px; line-height: 1.1; margin: 0 0 8px; }

.note, .card {
  background: var(--paper-light);
  border: 1.6px solid var(--ink);
  border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px;
  padding: 20px;
  margin: 0 0 20px;
  box-shadow: 2px 3px 0 rgba(27, 42, 71, .12);
}
.note { transform: rotate(-.4deg); }
.note ul { padding-left: 20px; margin: 8px 0; }

label { display: block; font-weight: 700; margin: 12px 0 4px; }
input {
  width: 100%;
  font: inherit;
  font-size: 18px;
  padding: 10px 4px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.6px solid var(--ink);
  outline: none;
}
input:focus { border-bottom-width: 2.4px; }

button {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--coral);
  border: 1.6px solid var(--ink);
  border-radius: 24px 20px 26px 22px / 22px 26px 20px 24px;
  cursor: pointer;
}
button:disabled { background: #f3e8da; color: var(--muted); cursor: default; }
button.danger:not(:disabled) { background: var(--error); color: #fff; }
button.link { background: none; border: 0; min-height: 44px; color: var(--coral-deep); text-decoration: underline; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--coral-deep); outline-offset: 2px; }

.message { color: var(--error); font-weight: 700; }
.small { font-size: 14px; color: var(--muted); }
.done h2 { color: var(--coral-deep); }
a { color: var(--coral-deep); }