/* Carnets de Rome : complète style.css */

.carnet .sheet { min-height: 100svh; padding-bottom: calc(env(safe-area-inset-bottom) + 40px); }

.c-head {
  position: relative;
  padding: calc(env(safe-area-inset-top) + 16px) 22px 10px;
  min-height: 210px;
}
.back {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.75;
}
.c-head h1 {
  font-family: var(--hw);
  font-weight: 700;
  font-size: 58px;
  line-height: 0.85;
  margin-top: 26px;
  transform: rotate(-3deg);
  transform-origin: left;
}
.c-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  margin-top: 12px;
  color: var(--red);
}
.c-doodle { position: absolute; right: 10px; top: calc(env(safe-area-inset-top) + 34px); width: 150px; height: 160px; }

/* --- cadenas --- */
.lock { padding: 10px 26px 60px; text-align: center; }
.lock-doodle { width: 120px; height: 120px; margin: 0 auto 6px; }
.lock .hw { margin-bottom: 6px; }
.lock-sub { font-family: var(--serif); font-size: 14px; line-height: 1.4; opacity: 0.85; margin-bottom: 24px; }
.code {
  font-family: var(--serif);
  font-size: 46px;
  font-weight: 600;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  width: 248px;
  padding: 6px 0 4px;
  text-align: center;
  color: var(--ink);
  border: 0;
  border-radius: 0;
  outline: none;
  background:
    linear-gradient(var(--ink), var(--ink)) 6px 100% / 46px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 68px 100% / 46px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 130px 100% / 46px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) 192px 100% / 46px 2px no-repeat;
  caret-color: var(--red);
}
.err { min-height: 28px; margin-top: 14px; font-size: 22px; color: var(--red); }
.link {
  border: 0;
  background: none;
  font-family: var(--hw);
  font-size: 22px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
  padding: 8px;
}

/* --- carnet --- */
.book { padding: 4px 14px 20px; }

.hint {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0 8px 18px;
  padding: 12px 14px;
  border: 1.5px dashed var(--ink-soft);
  border-radius: 4px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.45;
  transform: rotate(-0.6deg);
}
.hint[hidden] { display: none; }
.hint button {
  flex: none;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--hw);
  font-size: 20px;
  padding: 4px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.garde {
  margin: 0 8px 24px;
  padding: 18px 18px 6px;
  background: var(--paper-2);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 18px rgba(60, 40, 10, 0.08);
  transform: rotate(0.8deg);
}
.garde .rubrique { margin-bottom: 14px; }
.garde .hw { font-size: 26px; margin-bottom: 0.5em; }
.garde .sig { text-align: right; font-size: 32px; transform: rotate(-4deg); }

.new-page {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px auto 18px;
  border: 0;
  background: none;
  font-family: var(--hw);
  font-size: 30px;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.new-page canvas { width: 40px; height: 40px; }
.new-page:active { transform: scale(0.97); }

/* Une page : papier ligné avec une marge rouge. */
.pg {
  --line: 34px;
  position: relative;
  margin: 0 0 26px;
  padding: 14px 14px 10px 46px;
  background-color: #fbf8f1;
  background-image:
    linear-gradient(90deg, transparent 34px, rgba(179, 38, 46, 0.45) 34px, rgba(179, 38, 46, 0.45) 35.5px, transparent 35.5px),
    var(--grain);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 8px 22px rgba(60, 40, 10, 0.1);
  transition: transform 0.6s, opacity 0.6s;
}
.pg:nth-child(odd) { transform: rotate(-0.5deg); }
.pg:nth-child(even) { transform: rotate(0.4deg); }
.pg.torn { transform: translateY(40px) rotate(-8deg); opacity: 0; }
.pg.fresh { animation: drop 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.2); }
@keyframes drop { from { transform: translateY(-16px) rotate(-3deg); opacity: 0; } }

.pg header { display: flex; justify-content: space-between; align-items: flex-start; min-height: 52px; }
.pg .day { font-family: var(--hw); font-size: 30px; line-height: 1; color: var(--red); }
.pg .date { font-family: var(--serif); font-style: italic; font-size: 13px; margin-top: 4px; }
.pg-stamps { width: 116px; height: 52px; flex: none; }

.pg-text {
  display: block;
  width: 100%;
  min-height: calc(var(--line) * 6);
  margin-top: 4px;
  border: 0;
  outline: none;
  resize: none;
  overflow: hidden;
  background: transparent repeating-linear-gradient(transparent 0, transparent calc(var(--line) - 1px), rgba(31, 46, 134, 0.18) calc(var(--line) - 1px), rgba(31, 46, 134, 0.18) var(--line));
  background-attachment: local;
  font-family: var(--hw);
  font-size: 25px;
  line-height: var(--line);
  color: var(--ink);
  padding: 0;
}
.pg-text::placeholder { color: rgba(31, 46, 134, 0.38); }
.pg[data-ink='rouge'] .pg-text { color: var(--red); }
.pg[data-ink='vert'] .pg-text { color: var(--green); }

.prompts { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 4px; }
.prompts button {
  border: 1px solid var(--ink-soft);
  background: none;
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--hw);
  font-size: 19px;
  color: var(--ink);
  cursor: pointer;
}
.prompts button:active { background: rgba(31, 46, 134, 0.08); }

.tray {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 10px 0 6px;
  padding: 8px 4px;
  border-top: 1px dashed var(--ink-soft);
  border-bottom: 1px dashed var(--ink-soft);
}
.tray[hidden] { display: none; }
.tray button {
  border: 0;
  background: none;
  font-family: var(--hw);
  font-size: 15px;
  color: var(--ink);
  padding: 2px 0;
  border-radius: 8px;
  cursor: pointer;
}
.tray button canvas { width: 46px; height: 46px; margin: 0 auto; }
.tray button.on { background: rgba(179, 38, 46, 0.1); }

.pg footer { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.pens { display: flex; gap: 8px; margin-right: auto; }
.pen {
  width: 24px;
  height: 24px;
  border-radius: 50% 46% 52% 48%;
  border: 0;
  cursor: pointer;
  box-shadow: 0 0 0 2px #fbf8f1, 0 0 0 0 transparent;
}
.pen[data-ink='bleu'] { background: var(--ink); }
.pen[data-ink='rouge'] { background: var(--red); }
.pen[data-ink='vert'] { background: var(--green); }
.pen.on { box-shadow: 0 0 0 2px #fbf8f1, 0 0 0 3.5px currentColor; }
.pen[data-ink='bleu'].on { color: var(--ink); }
.pen[data-ink='rouge'].on { color: var(--red); }
.pen[data-ink='vert'].on { color: var(--green); }
.act {
  border: 0;
  background: none;
  font-family: var(--hw);
  font-size: 20px;
  color: var(--ink);
  padding: 6px 6px;
  cursor: pointer;
}
.act.tear { color: var(--red); opacity: 0.8; }

.book-foot { text-align: center; padding: 10px 0 30px; }
.sync { font-family: var(--serif); font-size: 12px; letter-spacing: 0.04em; opacity: 0.7; min-height: 18px; }

.empty { text-align: center; font-size: 26px; opacity: 0.7; padding: 10px 0 30px; }