@charset "UTF-8";
/* Caveat (SIL OFL 1.1, voir fonts/caveat-OFL.txt), hébergée localement pour respecter la CSP. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-700-latin.woff2) format("woff2");
}

:root {
  --paper: #f6f3ec;
  --ink: #353b32;
  --olive: #4e6043;
  --muted: #5a5e53;
  --soft: #686c60;
  --line: #dcded2;
  --line-soft: #e6e5dc;
  --gold: #c29238;
  --sun: #ffc400;
  --leaf: #3f8a2e;
  --tangerine: #ff8c00;
  --serif: Georgia, "Times New Roman", serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Couleur du carnet courant (redéfinie par les classes .theme-*). */
  --c: var(--olive);
  --c-title: var(--ink);
  --c-dark: var(--olive);
  --c-on: #fbfaf5;
  --c-pale: #ebeede;
  --c-pale-edge: #d2d6c7;

  /* Cartes de l'accueil : texte clair sur fond coloré par défaut. */
  --card-edge: var(--c-dark);
  --card-ink: #f6f3ec;
  --card-kind: #f1f4ea;
  --card-desc: #f7f8f2;
  --card-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --l0: #ffc400;
  --l1: #ffffff;
  --l2: #ffe08a;
  --l3: #ffc2b8;
  --l4: #c6eef7;
}

.theme-rose { --c: #c93d78; --c-title: #c93d78; --c-dark: #a52d5e; --c-on: #fbfaf5; --c-pale: #fbe9f0; --c-pale-edge: #f0c6d7; --card-edge: #a52d5e; }
.theme-vert { --c: #3f8a2e; --c-title: #3f8a2e; --c-dark: #2f6b22; --c-on: #fbfaf5; --c-pale: #e8f3e3; --c-pale-edge: #c6e0bc; --card-edge: #2f6b22; --card-kind: #eaf5df; }
.theme-mauve { --c: #7d4fa3; --c-title: #7d4fa3; --c-dark: #62398a; --c-on: #fbfaf5; --c-pale: #f1e9f7; --c-pale-edge: #d9c6ea; --card-edge: #62398a; }
.theme-bleu { --c: #2f6fc2; --c-title: #2f6fc2; --c-dark: #24569a; --c-on: #fbfaf5; --c-pale: #e6eef9; --c-pale-edge: #c3d5ef; --card-edge: #24569a; }
.theme-orange {
  --c: #ff8c00; --c-title: #c46a00; --c-dark: #9a5200; --c-on: #2b1a00; --c-pale: #fff0dc; --c-pale-edge: #f5d3a6;
  --card-edge: #d97400; --card-ink: #2b1a00; --card-kind: #4a2a00; --card-desc: #3a2200; --card-text-shadow: none;
  --l0: #2b1a00; --l1: #2f6b22; --l2: #8c1f1f; --l3: #1d4f86; --l4: #6b3a00;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

q{
  font-style: italic;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--olive); }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.15; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sun { display: block; flex: none; }

/* Mise en page */
.shell { position: relative; max-width: 1400px; margin: 0 auto; padding: 0 24px; }

/* En-tête */
.bee {
  position: absolute; top: 14px; right: 80px; z-index: 0;
  width: 190px; height: auto; transform: rotate(24deg); pointer-events: none;
}
.header {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand {
  display: flex; align-items: center; gap: 16px;
  font: 700 74px/1.1 var(--serif); letter-spacing: -2.8px;
}
.brand .sun { width: 64px; height: 64px; color: var(--sun); stroke-width: 1.6; }
.brand-sol { color: var(--sun); }
.brand-ida { color: var(--leaf); }
.brand:hover { color: inherit; }
.tagline { font: 700 52px/1.1 var(--hand); letter-spacing: 0.5px; color: var(--tangerine); }
.header form { margin: 0; }
.quiet {
  display: inline-block; padding: 8px 15px;
  font-size: 12px; color: var(--soft); background: var(--paper);
  border: 1px solid var(--line); border-radius: 5px;
}

/* Onglets des carnets */
.navigation {
  display: flex; gap: 28px; overflow-x: auto; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.navigation a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 20px 0 14px; font-size: 14px; color: var(--muted);
  border-bottom: 3px solid transparent;
}
.navigation a:hover { color: var(--ink); }
.navigation a.active { font-weight: 600; color: var(--ink); border-bottom-color: var(--c); }
.navigation .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }

/* Textes communs */
.eyebrow {
  margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: var(--c-dark);
}
.lede { margin: 22px 0 48px; font-size: 15px; color: var(--muted); }
.button {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 20px;
  background: var(--c); color: var(--c-on); border: 0; border-radius: 3px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
}
.button:hover { color: var(--c-on); box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.08); }
.notice {
  margin: 24px 0 0; padding: 14px 20px; font-size: 14px;
  background: var(--c-pale); border: 1px solid var(--c-pale-edge); border-radius: 3px;
}
.notice p { margin: 4px 0; }

/* Accueil */
.home-main { padding: 64px 0 40px; }
.hero {
  display: block; width: 100%; max-width: 600px; height: auto; margin: 0 0 36px; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(53, 59, 50, 0.08), 0 10px 28px rgba(53, 59, 50, 0.14);
}
.home-title { margin: 0; font-size: 52px; line-height: 1.12; letter-spacing: -1px; }
.notebooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.notebook {
  display: flex; flex-direction: column; min-height: 196px;
  padding: 22px 24px 24px 26px; border-radius: 3px;
}
.notebook {
  position: relative;
  background: var(--c); color: var(--card-ink);
  border: 1px solid var(--card-edge); border-left-width: 5px;
  transition: transform 0.15s ease;
}
.notebook:hover { color: var(--card-ink); transform: translateY(-2px); }
.notebook .kind {
  margin-top: 6px; font-size: 10px; font-weight: 600; letter-spacing: 2.4px;
  text-transform: uppercase; color: var(--card-kind);
}
.notebook-title { margin: 10px 0 0; font-size: 30px; text-shadow: var(--card-text-shadow); }
.l0 { color: var(--l0); } .l1 { color: var(--l1); } .l2 { color: var(--l2); } .l3 { color: var(--l3); } .l4 { color: var(--l4); }
.notebook .description { margin-top: 14px; font-size: 13px; color: var(--card-desc); }
.notebook .description a { position: relative; z-index: 1; color: inherit; text-decoration: underline; }
.open-book { margin-top: auto; padding-top: 22px; font-size: 13px; }
.notebook .open-book:hover { color: inherit; }
/* Lien étendu : toute la carte ouvre le carnet, sauf les liens de la description placés au-dessus. */
article.notebook .open-book::after { content: ""; position: absolute; inset: 0; }
article.notebook:focus-within { outline: 3px solid var(--gold); outline-offset: 4px; }
article.notebook .open-book:focus-visible { outline: none; }

/* Descriptions HTML des carnets : plusieurs paragraphes possibles. */
.description > :first-child { margin-top: 0; }
.description > :last-child { margin-bottom: 0; }
.description p, .description ul, .description ol { margin: 0 0 0.7em; }
.description ul, .description ol { padding-left: 1.3em; }
.dashboard-intro .description a, .lede.description a { text-decoration: underline; text-underline-offset: 3px; }
/* Carte « Merci à : » : sous la grille des carnets, sur toute la largeur. */
.thanks {
  margin-top: 40px; padding: 32px 36px 36px; border-radius: 3px;
  background: var(--sun); border: 1px solid var(--sun); color: var(--ink);
  box-shadow: 0 6px 18px rgba(194, 146, 56, 0.28);
}
.thanks-title { margin: 0; font: 30px/1.2 var(--serif); color: #3a3210; }
.thanks ul {
  display: flex; flex-direction: column; gap: 5px;
  margin: 18px 0 0; padding-left: 20px; font-size: 15px; color: #4a4224;
}

/* Carnet */
.page { padding: 44px 0 40px; }
.dashboard-intro {
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line-soft);
}
.dashboard-intro .eyebrow { margin-bottom: 12px; }
.dashboard-title { margin: 0; font-size: 52px; letter-spacing: -1px; color: var(--c-title); }
.dashboard-intro .lede { margin: 14px 0 0; }
.section-label {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 18px 0 28px; font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--soft);
}
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 28px 24px;
  align-items: start;
}
.polaroid {
  padding: 10px 10px 18px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(53, 59, 50, 0.08), 0 6px 18px rgba(53, 59, 50, 0.08);
  transform: rotate(-1deg);
}
.polaroid:nth-child(3n+2) { transform: rotate(0.8deg); }
.polaroid:nth-child(3n) { transform: rotate(-0.4deg); }
/* Photo entière, à ses propres proportions : la largeur s'adapte, la hauteur suit. */
.polaroid img { display: block; width: 100%; height: auto; background: #e3e4da; }
.polaroid-blank {
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 0.88;
  background: #f3efe4; color: var(--gold);
}
.polaroid-blank .sun { width: 34px; height: 34px; stroke-width: 1.4; }
.post-text {
  margin: 16px 6px 0; font-size: 13px; line-height: 1.5; color: var(--muted);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.post-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 18px 6px 0; font-size: 11px; overflow-wrap: anywhere;
}
.post-meta > span { font-weight: 600; color: var(--c-dark); }
.post-meta time { color: var(--soft); white-space: nowrap; }
.empty {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 16px 64px; text-align: center;
}
.empty .sun { width: 34px; height: 34px; color: var(--gold); stroke-width: 1.4; }
.empty h2 { margin: 22px 0 0; font-size: 24px; }
.empty p { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.empty a {
  margin-top: 18px; padding: 10px 4px; font-size: 13px;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--gold);
}
.pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin: 45px 0 0; }
.pagination:empty { display: none; }

/* Galerie : une seule colonne */
.gallery { display: flex; flex-direction: column; gap: 32px; max-width: 720px; margin: 40px auto 0; }
.gallery-photo {
  margin: 0; padding: 12px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(53, 59, 50, 0.08), 0 6px 18px rgba(53, 59, 50, 0.08);
}
.gallery-photo img { display: block; width: 100%; height: auto; background: #e3e4da; }
.gallery-card {
  --c: #fffdf7; --card-edge: var(--gold); --card-ink: var(--ink); --card-kind: var(--olive);
  --card-desc: var(--muted); --card-text-shadow: none;
}
.gallery-card .notebook-title { color: var(--ink); }

/* Ajouter un souvenir */
.compose { max-width: 600px; margin: 0 auto; padding: 32px 0 48px; }
.back { display: inline-block; padding: 8px 0; font-size: 12px; color: var(--muted); }
.compose .eyebrow { margin: 18px 0 8px; }
.compose h1 { margin: 0; font-size: 40px; letter-spacing: -0.8px; }
.accent-dot { color: var(--c); }
.compose .lede { margin: 14px 0 32px; font-size: 14px; }
.compose-form { display: flex; flex-direction: column; gap: 26px; }
.compose-form .notice { margin: 0; }
label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
label span { font-weight: 400; color: var(--muted); }
input, textarea {
  display: block; width: 100%; padding: 12px 14px;
  font-size: 15px; color: var(--ink); background: #fffefa;
  border: 1px solid #d2d6c7; border-radius: 4px;
}
input::placeholder, textarea::placeholder { color: #8a8d80; }
textarea { resize: vertical; }
small { display: block; margin-top: 8px; font-size: 11px; color: var(--muted); }
.upload { padding: 20px 22px; background: var(--c-pale); border: 1px solid var(--c-pale-edge); border-radius: 3px; }
.upload label { margin: 0; }
.upload p { margin: 6px 0 14px; font-size: 13px; color: var(--muted); }
.upload input { padding: 10px 12px; font-size: 13px; background: #fbfaf5; }
.upload small { margin-top: 10px; }
input::file-selector-button {
  margin-right: 12px; padding: 6px 12px; border: 0; border-radius: 3px; cursor: pointer;
  background: var(--c-pale-edge); color: var(--ink);
}
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.form-actions {
  display: flex; justify-content: flex-end; align-items: center; gap: 20px;
  padding-top: 22px; border-top: 1px solid var(--line-soft);
}
.form-actions > a { padding: 12px 6px; font-size: 13px; color: var(--muted); }

/* Pied de page */
footer {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  margin-top: 40px; padding: 36px 0 48px; border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--soft);
}
footer .sun { width: 12px; height: 12px; color: var(--gold); stroke-width: 2.4; }
.home footer { margin-top: 0; border-top: 0; }

/* Connexion et erreurs */
.login-page {
  display: grid; place-items: center; min-height: 100vh; padding: 30px;
  background: radial-gradient(ellipse at 10% 0%, #fff3c4, transparent 60%), var(--paper);
}
.login-card {
  width: min(460px, 100%); margin: 55px auto; padding: 40px;
  background: #fffdf7; border: 1px solid var(--line); box-shadow: 0 12px 50px rgba(59, 61, 41, 0.06);
}
.login-card .brand { margin-bottom: 40px; gap: 12px; font-size: 44px; letter-spacing: -1.6px; }
.login-card .brand .sun { width: 40px; height: 40px; }
.login-card > .sun { width: 44px; height: 44px; color: var(--sun); stroke-width: 1.6; }
.login-card h1 { margin: 14px 0 20px; font-size: 43px; letter-spacing: -1.4px; }
.login-card .lede { margin: 0 0 24px; }
.login-card .notice { margin: 0 0 16px; }
.login-card form { margin-top: 30px; }
.full { width: 100%; margin-top: 20px; }
.login-note { margin: 28px 0 0; text-align: center; font-size: 11px; color: var(--muted); }

/* Téléphones et petites tablettes */
@media (max-width: 760px) {
  .bee { top: 10px; right: 0; width: 120px; }
  .brand { gap: 10px; font-size: 48px; letter-spacing: -1.8px; }
  .brand .sun { width: 42px; height: 42px; }
  .tagline { font-size: 34px; }
  .home-main { padding-top: 40px; }
  .home-title, .dashboard-title { font-size: 38px; }
  .section-label span:last-child { display: none; }
}
@media (max-width: 480px) {
  .shell { padding: 0 16px; }
  .bee { width: 90px; }
  .brand { font-size: 40px; }
  .brand .sun { width: 34px; height: 34px; }
  .tagline { font-size: 28px; }
  .navigation { gap: 22px; }
  .home-title, .dashboard-title { font-size: 32px; }
  .compose h1 { font-size: 34px; }
  .lede { margin-bottom: 32px; }
  .upload { padding: 18px; }
  .thanks { padding: 24px 22px 26px; }
  .login-card { padding: 28px; }
  .login-card h1 { font-size: 36px; }
  .pagination { flex-direction: column; }
}