/* Carnet de Rami — pages d'assistance et de confidentialité.
   Aucune ressource externe : les polices de l'app (Caveat pour le nom au crayon, Figtree pour le texte,
   licence OFL) sont servies par le site. Même habillage que l'accueil de l'app : le carnet posé sur la
   toile cirée vichy, puis la page de papier. */

@font-face {
  font-family: "Caveat";
  src: url("/fonts/Caveat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("/fonts/Figtree-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fdfcf8;
  --raised: #ffffff;
  --text: #2f2e2b;
  --secondary: #8b8983;
  --line: #e4e1d9;
  --border: #e4e1d9;
  --blue: #3564b0;
  --cloth: #ffffff;
  --band: rgba(53, 100, 176, 0.2);
  --shadow: rgba(47, 46, 43, 0.14);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #262522;
    --raised: #33312d;
    --text: #ece9e1;
    --secondary: #9e9a90;
    --line: #36342f;
    --border: #36342f;
    --blue: #8aabe8;
    --cloth: #161b25;
    --band: rgba(90, 124, 192, 0.2);
    --shadow: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 17px/1.55 "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* La toile cirée : bandes horizontales et verticales du même bleu transparent, plus foncées là où elles
   se croisent, comme dans l'app. */
.cloth {
  background-color: var(--cloth);
  background-image:
    repeating-linear-gradient(0deg, var(--band) 0 14px, transparent 14px 28px),
    repeating-linear-gradient(90deg, var(--band) 0 14px, transparent 14px 28px);
  padding: 18px 16px 52px;
}

.top {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  font-size: 15px;
}

.top a {
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  text-decoration: none;
}

/* Le carnet posé sur la toile, un peu de travers, sa spirale en haut. */
.note {
  position: relative;
  max-width: 380px;
  margin: 26px auto 0;
  padding: 26px 20px 20px;
  text-align: center;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 8px 18px var(--shadow);
  transform: rotate(1.5deg);
}

.note::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: -12px;
  height: 22px;
  background:
    radial-gradient(circle at 50% 18px, var(--text) 0 3px, transparent 3.5px) 0 0 / 26px 22px space no-repeat,
    linear-gradient(90deg, transparent 11.5px, #bdbbb5 11.5px 14.5px, transparent 14.5px) 0 0 / 26px 17px space no-repeat;
  opacity: 0.55;
}

.note img {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 1px solid var(--border);
}

h1 {
  margin: 6px 0 2px;
  font: 700 46px/1.05 "Caveat", "Figtree", sans-serif;
}

.tagline {
  margin: 0;
  color: var(--secondary);
  font-size: 15px;
}

/* La page de l'app, qui glisse sur la toile : coins arrondis en haut. */
main {
  position: relative;
  max-width: 712px;
  margin: -24px auto 0;
  padding: 28px 16px 48px;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
}

h2 {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
}

section {
  background: var(--raised);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  margin: 12px 0;
}

section.summary { background: var(--paper); }

p { margin: 0 0 10px; }
p:last-child, ul:last-child { margin-bottom: 0; }

ul { margin: 0 0 10px; padding-left: 20px; }
li { margin: 4px 0; }

.muted { color: var(--secondary); }

a { color: var(--blue); text-underline-offset: 3px; }

.date {
  text-align: center;
  color: var(--secondary);
  font-size: 15px;
  margin: 0 0 8px;
}

details { border-top: 1px solid var(--line); padding: 12px 0; }
details:first-of-type { border-top: 0; padding-top: 4px; }
details:last-of-type { padding-bottom: 0; }
summary { cursor: pointer; font-weight: 600; }
details p { margin-top: 8px; color: var(--secondary); }

footer {
  margin-top: 28px;
  text-align: center;
  font-size: 14px;
  color: var(--secondary);
}

footer nav { margin-bottom: 10px; }
footer nav a { margin: 0 8px; }