/* ============ CARNET DE LIAISON (Gabriel) — style.css ============ */
/* Direction retenue le 07/11/2026 : « carnet à spirale », papier crème pointé,
   bandeau de couverture pastel, fiches collées. Toutes les couleurs viennent de
   la palette ci-dessous — jamais d'une règle. */

/* Police manuscrite : aucun appareil (Linux, Android, iPad) n'en garantit une.
   Fichier servi localement (PUBLIC_FILES) et autorisé par `font-src 'self'` dans
   la CSP. 24 Ko, une seule graisse, usage limité aux titres. */
@font-face {
  font-family: "Patrick Hand";
  src: url("patrick-hand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ PALETTE ============ */
:root {
  color-scheme: light;
  --hand: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* le bureau (derrière le cahier) */
  --desk-a: #eef4ee;
  --desk-b: #d5e0d8;
  /* la page */
  --paper: #fffdf8;
  --paper-dot: rgba(120, 140, 160, .22);
  --paper-edge: rgba(90, 110, 100, .35);
  /* la couverture (bandeau) */
  --cover-a: #fdf6ec;
  --cover-b: #f4e6d4;
  --cover-line: #e8c9a8;
  --tape-a: rgba(255, 240, 190, .9);
  --tape-b: rgba(214, 230, 255, .85);
  /* la reliure */
  --ring: #b6beba;
  --ring-light: #e4e8e6;
  --ring-dark: #8f9a95;

  --surface: #ffffff;          /* les fiches */
  --surface-2: #f6f8f9;
  --surface-3: #eef2f4;
  --reply-bg: #f5f8f9;
  --reply-ctx-bg: #eef4fb;
  --border: #dbe3e7;
  --border-2: #e6ecef;
  --border-3: #e2e8ea;
  --ink: #333a41;
  --ink-2: #37424b;
  --ink-3: #4d5a63;
  --ink-4: #5f6c75;
  --ink-5: #6f7c85;
  --chip-ink: #5b6a72;
  --ctl-ink: #42505a;
  --ctl-bg: #e7ecee;
  --ctl-bg-hover: #d8e0e4;

  --accent: #2f6b57;           /* vert profond : segments actifs, liens */
  --accent-hover: #275a49;
  --accent-ink: #2a5a49;
  --accent-bg: #e8f3ec;
  --accent-bg-hover: #d9ebdf;
  --accent-border: #a9cdb8;
  --choice-bg: #2f6b57;
  --choice-border: #235243;
  /* contrôles pleins : fond vert profond + texte blanc, dans les deux thèmes */
  --fill-bg: #2f6b57;
  --fill-bg-hover: #275a49;
  --fill-ink: #ffffff;

  /* bouton principal (Ajouter) : menthe */
  --add-a: #d7ecdf;
  --add-b: #bde0ca;
  --add-border: #a3ceb4;
  --add-ink: #1d3d2c;
  --add-shadow: #9cc4ac;

  --import-bg: #efe8fb;
  --import-border: #b39ddb;
  --warn-bg: #fff3dc;
  --warn-border: #eccf9a;
  --warn-ink: #6a5410;
  --unread-bg: #fff8ec;
  --unread-mark: #d97706;
  --unread-ink: #8f5308;
  --danger: #9c4636;
  --danger-strong: #c2453a;
  --danger-bg: #fdf3f0;
  --danger-border: #f1d8d1;
  --danger-ink: #8a3b2a;
  --ok: #2e6b48;
  --sync-ok: #2e9e5b;
  --sync-saving: #d9921a;
  --login-grad-a: #eef4ee;
  --login-grad-b: #d5e0d8;
  --shadow: 0 10px 26px -12px rgba(60, 80, 70, .45);
  --shadow-soft: 0 6px 14px -8px rgba(70, 95, 110, .35);
  --slider-off: #cfd9d4;
  --slider-knob: #fff;
}

/* Thème sombre : `@media screen` exprès — une impression reste sur papier
   blanc, même en thème sombre. Le papier devient une feuille bleu-nuit :
   garder du papier clair sur fond noir serait illisible. */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --desk-a: #12171a;
    --desk-b: #090c0e;
    --paper: #171d21;
    --paper-dot: rgba(150, 175, 190, .16);
    --paper-edge: rgba(0, 0, 0, .55);
    --cover-a: #1e262b;
    --cover-b: #232c31;
    --cover-line: #3a474d;
    --tape-a: rgba(150, 135, 90, .55);
    --tape-b: rgba(90, 115, 145, .55);
    --ring: #4a545a;
    --ring-light: #6c777d;
    --ring-dark: #333b40;

    --surface: #1f272c;
    --surface-2: #263037;
    --surface-3: #2b353b;
    --reply-bg: #1d262c;
    --reply-ctx-bg: #1f2e36;
    --border: #3a464d;
    --border-2: #2f3a40;
    --border-3: #37434a;
    --ink: #e8eef1;
    --ink-2: #d2dade;
    --ink-3: #b3bec4;
    --ink-4: #a7b3ba;
    --ink-5: #94a1a8;
    --chip-ink: #cfd9dd;
    --ctl-ink: #c3ced4;
    --ctl-bg: #333e45;
    --ctl-bg-hover: #3f4b53;

    --accent: #7fd3ab;
    --accent-hover: #93dfb9;
    --accent-ink: #9fe0bd;
    --accent-bg: #1e3229;
    --accent-bg-hover: #264036;
    --accent-border: #3f6d5a;
    --choice-bg: #2c7a5c;
    --choice-border: #246449;
    --fill-bg: #2c7a5c;
    --fill-bg-hover: #246449;
    --fill-ink: #ffffff;

    --add-a: #2c6b51;
    --add-b: #245841;
    --add-border: #35785c;
    --add-ink: #eaf7ef;
    --add-shadow: #1a4030;

    --import-bg: #2b2437;
    --import-border: #6a5a86;
    --warn-bg: #2f2617;
    --warn-border: #6d5527;
    --warn-ink: #f0cd92;
    --unread-bg: #232013;
    --unread-mark: #e0a23c;
    --unread-ink: #f3c479;
    --danger: #f0a99c;
    --danger-strong: #e2685c;
    --danger-bg: #3a2222;
    --danger-border: #6b3a3a;
    --danger-ink: #f6bdb3;
    --ok: #6fcca0;
    --sync-ok: #45b877;
    --sync-saving: #e8b04a;
    --login-grad-a: #12171a;
    --login-grad-b: #0d1113;
    --shadow: 0 12px 30px -14px rgba(0, 0, 0, .8);
    --shadow-soft: 0 6px 16px -10px rgba(0, 0, 0, .7);
    --slider-off: #3a434a;
    --slider-knob: #e8eef1;
  }
}

/* ---- interrupteur de thème (slider) ---- */
.theme-switch {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  flex: none; min-width: 0;                 /* la règle `label` ci-dessous met
                                               flex:1 + colonne : un
                                               interrupteur n'est pas un champ */
  font-size: .8rem; color: var(--ink-4); cursor: pointer; user-select: none;
}
.theme-switch input {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.theme-switch .knob {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px;
  background: var(--slider-off); border: 1px solid var(--border);
  transition: background .15s ease;
}
.theme-switch .knob::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--slider-knob);
  transition: transform .15s ease;
}
.theme-switch input:checked + .knob { background: var(--accent); border-color: var(--accent); }
.theme-switch input:checked + .knob::after { transform: translateX(16px); }
.theme-switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-theme { position: fixed; top: 14px; right: 16px; z-index: 5; }

* { box-sizing: border-box; }
/* `hidden` doit gagner sur les `display` posés plus bas, sinon les blocs
   masqués restent visibles et vides (bannière serveur, barre de réponse). */
[hidden] { display: none !important; }

/* ============ LE CAHIER ============ */
html {
  background:
    radial-gradient(90% 60% at 20% 0%, var(--desk-a) 0%, var(--desk-b) 100%);
  min-height: 100%;
}
body {
  position: relative;
  max-width: 920px;
  margin: 30px auto 44px;
  padding: 0 0 34px;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  border-radius: 4px 14px 14px 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), var(--shadow), inset 14px 0 20px -16px var(--paper-edge);
}
/* papier pointé */
body::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: radial-gradient(circle, var(--paper-dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
/* reliure à anneaux sur la tranche */
body::after {
  content: ""; position: absolute; left: -20px; top: 18px; bottom: 18px; width: 40px;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom,
      var(--ring-light) 0 4px, var(--ring) 4px 13px, var(--ring-dark) 13px 17px, transparent 17px 40px);
  filter: drop-shadow(0 1px 1px rgba(40, 60, 55, .25));
}
main, header, .meta-bar, .card, .filters, .journal-panel, .empty-state, .server-banner {
  max-width: 860px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 0; }
.hint { color: var(--ink-3); font-size: .95rem; margin: 0 0 10px; }
.hint.small { font-size: .85rem; }

input, select, textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
}
textarea { width: 100%; resize: vertical; }
/* anneau de focus dans la palette : le bleu par défaut jure sur le papier */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

button {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
button:hover { background: var(--surface-2); }

/* ---- en-tête : le bandeau de couverture ---- */
header {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 26px 26px 22px 50px;
  background: linear-gradient(120deg, var(--cover-a) 0%, var(--cover-b) 100%);
  border-bottom: 2px solid var(--cover-line);
  border-radius: 4px 14px 0 0;
}
header::before {                 /* bout de scotch qui colle la couverture */
  content: ""; position: absolute; left: -30px; top: 22px;
  width: 92px; height: 26px; background: var(--tape-a);
  transform: rotate(-7deg); border-left: 1px solid var(--cover-line);
  border-right: 1px solid var(--cover-line);
  box-shadow: 0 1px 2px rgba(120, 100, 60, .15);
}
header h1 { font-family: var(--hand); font-weight: 400; font-size: 2.1rem; line-height: 1.1; color: var(--ink); }
header .hint { font-size: .85rem; color: var(--ink-4); max-width: 60ch; margin-bottom: 2px; }
.header-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 12px; }
/* Barre d'outils : actions secondaires, elles ne doivent pas peser autant que
   le formulaire ni le carnet. (Sans `font-size` propre, un <button> hérite du
   16 px du body — d'où des boutons de 42 px de haut.) */
.header-controls > button,
.header-controls > .file-btn,
.header-controls > .logout-form > button {
  font-size: .76rem; padding: 3px 7px; border-radius: 999px; line-height: 1.3;
  background: var(--surface); border: 1px solid var(--border); color: var(--ctl-ink);
}
.header-controls > button:hover,
.header-controls > .file-btn:hover { background: var(--surface-2); }
.header-controls > .role-badge { font-size: .74rem; padding: 3px 8px; line-height: 1.25; }
.header-controls > .sync-ind { font-size: .74rem; padding: 3px 8px; line-height: 1.25; }
/* Sur écran tactile, des cibles plus généreuses : un doigt n'est pas un
   curseur. Le compact ne vaut que pour la souris. */
@media (pointer: coarse) {
  .header-controls > button,
  .header-controls > .file-btn,
  .header-controls > .logout-form > button { padding: 7px 13px; line-height: 1.35; }
  .header-controls { gap: 8px; }
}
.sync-ind {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; padding: 6px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-4);
}
.sync-ind::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sync-saving); flex: none; }
.sync-ind[data-state="synced"]::before { background: var(--sync-ok); }
.sync-ind[data-state="offline"]::before { background: var(--danger-strong); }
.sync-ind[data-state="saving"]::before { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.file-btn {
  display: inline-block; font-size: .9rem; padding: 8px 12px;
  flex: none; min-width: 0;                 /* <label> aussi : sinon flex:1 */
  border-radius: 999px; cursor: pointer;
}
.logout-form { margin: 0 0 0 auto; }
.header-controls > .logout-form > button { color: var(--danger); border-color: var(--danger-border); background: var(--danger-bg); }
.header-controls > .logout-form > button:hover { background: var(--danger-bg); filter: brightness(.97); }

/* ---- bannière serveur injoignable ---- */
.server-banner {
  margin-top: 14px; padding: 10px 14px;
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: 12px;
  font-size: .88rem; color: var(--danger-ink); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.server-banner button { padding: 4px 10px; font-size: .82rem; }

/* ---- méta (école / classe) ---- */
.meta-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.meta-label { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.meta-bar .txt { max-width: 220px; }

/* ---- formulaire d'entrée : une fiche à remplir ---- */
.card {
  position: relative;
  background: var(--surface); border: 1px dashed var(--border-3); border-radius: 14px;
  padding: 16px 18px 14px; margin-top: 16px;
  box-shadow: var(--shadow-soft);
}
.card h2 { font-family: var(--hand); font-weight: 400; font-size: 1.5rem; color: var(--ink-2); }
.card form { display: flex; flex-direction: column; gap: 10px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--ink-2); flex: 1; min-width: 140px; }
/* « De » n'est pas un champ saisissable, et un <select> ne se dimensionne pas
   comme un <input> : on impose la même boîte à tout ce qui ressemble à un champ
   de la ligne. La hauteur se déduit de la formule des champs
   (line-height 1.5 + 8 px de marge haute/basse + 1 px de bordure). */
#entry-form .row .txt,
#entry-form .row .author-badge {
  min-height: calc(1.5em + 18px);
}
#entry-form .row label .author-badge {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 10px; border-radius: 999px; line-height: 1.5;
}
#entry-form .row .txt {
  background: var(--surface-2); border-color: var(--border-3); border-radius: 999px; padding: 8px 14px;
}
#entry-form textarea.txt {
  border-radius: 10px; padding: 10px 12px; line-height: 26px;
  background-image: repeating-linear-gradient(to bottom,
      transparent 0 25px, var(--border-2) 25px 26px);
  background-position: 0 10px;
}
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row.actions { justify-content: flex-end; align-items: center; }
#btn-add {
  background: linear-gradient(180deg, var(--add-a), var(--add-b));
  border: 1px solid var(--add-border); color: var(--add-ink);
  font-weight: 600; padding: 8px 24px; box-shadow: 0 2px 0 var(--add-shadow);
}
#btn-add:hover { filter: brightness(1.03); }

/* ---- filtres ---- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.seg { display: flex; gap: 8px; }
.seg button {
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--ink-3); padding: 6px 14px; font-size: .88rem;
}
.seg button.on { background: var(--fill-bg); border-color: var(--fill-bg); color: var(--fill-ink); font-weight: 600; }
.seg .badge {
  background: var(--danger-strong); color: #fff; border-radius: 999px;
  padding: 0 6px; font-size: .72rem; margin-left: 4px;
}
.seg button.on .badge { background: var(--fill-ink); color: var(--fill-bg); }

/* ---- timeline : les fiches collées ---- */
.timeline { padding-top: 10px; padding-bottom: 30px; }
.day-head {
  font-family: var(--hand); font-size: 1.15rem; font-weight: 400; color: var(--ink-3);
  margin: 22px 0 10px; padding-bottom: 4px; border-bottom: 1px dotted var(--border);
}
.entry-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: 14px; padding: 16px 18px 14px; margin: 14px 0;
  box-shadow: var(--shadow-soft);
}
/* bout de scotch : la fiche a l'air collée sur la page */
.entry-card:not(.reply):nth-of-type(odd)::before,
.entry-card:not(.reply):nth-of-type(even)::before {
  content: ""; position: absolute; top: -8px; width: 74px; height: 18px;
  border-left: 1px solid var(--border-2); border-right: 1px solid var(--border-2);
  opacity: .85;
}
.entry-card:not(.reply):nth-of-type(odd)::before { left: 26px; background: var(--tape-b); transform: rotate(-2deg); }
.entry-card:not(.reply):nth-of-type(even)::before { right: 30px; background: var(--tape-a); transform: rotate(2.4deg); }
.entry-card.unread { border-left: 4px solid var(--unread-mark); background: var(--unread-bg); }
.entry-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.author-badge { font-size: .85rem; padding: 3px 12px; border-radius: 999px; border: 1px solid; font-weight: 600; }
.author-badge.ecole { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-ink); }
.author-badge.famille { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }
.cat-chip {
  font-size: .8rem; background: var(--surface-3); border: 1px solid var(--border-3);
  color: var(--chip-ink); padding: 2px 10px; border-radius: 8px;
}
.entry-state { margin-left: auto; font-size: .85rem; color: var(--ink-3); }
.entry-state.unread-dot { color: var(--unread-ink); font-weight: 600; }
.entry-msg { margin: 8px 0 10px; white-space: pre-wrap; font-size: 1rem; line-height: 1.6; color: var(--ink); }
.entry-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--border-2); }
.entry-actions button {
  font-size: .85rem; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--surface-2); border-color: var(--border-2); color: var(--ctl-ink);
}
.entry-actions .danger { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }

/* ---- état vide ---- */
.empty-state {
  text-align: center; padding: 30px 16px; color: var(--ink-4);
  background: var(--surface); border: 1px dashed var(--border); border-radius: 14px; margin-top: 14px;
}

/* ---- journal ---- */
.journal-panel {
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px;
  padding: 16px 18px; margin-top: 18px; box-shadow: var(--shadow-soft);
}
.journal-panel h3 { display: flex; justify-content: space-between; align-items: center; font-family: var(--hand); font-weight: 400; font-size: 1.35rem; }
.jp-close { padding: 2px 10px; font-size: .9rem; }
.journal-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.journal-filters .txt { flex: 1; min-width: 120px; border-radius: 999px; }
.journal-item {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px dotted var(--border-2); font-size: .9rem;
}
.journal-ts { color: var(--ink-3); min-width: 118px; }
.journal-badge { font-size: .7rem; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border-3); }
.jb-auth { background: var(--accent-bg); border-color: var(--accent-border); }
.jb-entries { background: var(--warn-bg); border-color: var(--warn-border); }
.jb-import { background: var(--import-bg); border-color: var(--import-border); }
.journal-msg { flex: 1; min-width: 180px; }
.journal-ip { color: var(--ink-5); font-size: .8rem; }

/* ---- badge de rôle (header) ---- */
.role-badge {
  font-size: .8rem; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  border: 1px solid; background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-ink);
}
.role-badge.famille { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }

/* ---- panneau réglages (coordonnées / mdp) ---- */
.side-panel {
  max-width: 620px; margin: 14px auto 0;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 14px 18px;
  box-shadow: var(--shadow-soft);
}
.side-panel h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--hand); font-weight: 400; font-size: 1.3rem; }
.side-panel h3 .sum-sub { margin-right: auto; }
.sum-sub { font-weight: 400; color: var(--ink-4); font-size: .85rem; font-family: var(--sans); }
.side-body { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.side-block { border: 1px solid var(--border-2); border-radius: 12px; padding: 10px 12px; }
.side-block legend { font-size: .85rem; color: var(--ink-2); padding: 0 4px; }
.side-desc { font-size: .85rem; color: var(--ink-3); margin: 2px 0 10px; }
.contact-group { display: flex; flex-direction: column; gap: 12px; }
.contact-item { display: flex; flex-direction: column; }
.contact-label { font-size: .85rem; font-weight: 600; color: var(--ink-2); }
.side-block .row { margin-top: 8px; }
.side-block .row .txt { flex: 1; min-width: 120px; }
.pw-form { display: flex; flex-direction: column; gap: 8px; }
.pw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.pw-row .txt { flex: 1; min-width: 140px; }
.pw-row button { flex: 0 0 auto; }
.pw-secondary { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border-3); }
.side-sub { font-size: .85rem; color: var(--ink-3); margin: 0 0 4px; }
.btn-primary { background: var(--fill-bg); border-color: var(--fill-bg); color: var(--fill-ink); font-weight: 600; }
.btn-primary:hover { background: var(--fill-bg-hover); }
.side-msg { font-size: .85rem; margin: 6px 0 0; }
.side-msg.ok { color: var(--ok); }
.side-msg.err { color: var(--danger); }
.meta-val { font-size: .9rem; color: var(--ink-2); }

/* ---- page de connexion : un petit cahier posé sur le bureau ---- */
.login-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(90% 60% at 20% 0%, var(--login-grad-a) 0%, var(--login-grad-b) 100%);
  max-width: none; margin: 0; border-radius: 0; box-shadow: none;
  padding: 24px 0;
}
/* sur la page de connexion, le cahier c'est la boîte elle-même */
.login-page::before { content: ""; position: absolute; inset: 0; background: none; }
.login-page::after { display: none; }
.login-box {
  position: relative;
  background: var(--paper); border: 1px solid var(--border-2); border-radius: 4px 14px 14px 4px;
  padding: 30px 30px 26px 36px; max-width: 430px; width: 100%; margin: 16px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), var(--shadow);
  background-image: radial-gradient(circle, var(--paper-dot) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.login-box::before {              /* la reliure */
  content: ""; position: absolute; left: -16px; top: 26px; bottom: 34px; width: 32px;
  background-image: repeating-linear-gradient(to bottom,
      var(--ring-light) 0 4px, var(--ring) 4px 13px, var(--ring-dark) 13px 17px, transparent 17px 34px);
  filter: drop-shadow(0 1px 1px rgba(40, 60, 55, .25));
}
.login-box h1 { font-family: var(--hand); font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin-bottom: 8px; }
.login-box .hint { font-size: .88rem; }
.login-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.login-box input { width: 100%; border-radius: 999px; padding: 10px 14px; }
.login-box form button {
  margin-top: 4px; border-radius: 999px; font-weight: 600;
  background: linear-gradient(180deg, var(--add-a), var(--add-b));
  border-color: var(--add-border); color: var(--add-ink); box-shadow: 0 2px 0 var(--add-shadow);
}
.login-box form button:hover { filter: brightness(1.03); }
.last-login { color: var(--ink-3); font-size: .85rem; }
.login-error { color: var(--danger); font-size: .92rem; }
.role-picker { display: flex; gap: 8px; margin-top: 6px; }
.role-btn {
  flex: 1; font: inherit; font-size: .9rem; cursor: pointer;
  padding: 10px; border: 2px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--ink); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 58px; position: relative;
}
.role-btn:hover { background: var(--surface-2); border-color: var(--accent-border); }
.role-btn:active { transform: translateY(1px); }
.role-btn.on {
  background: var(--fill-bg); border-color: var(--fill-bg); color: var(--fill-ink);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .3); font-weight: 600;
}
.role-btn.on::before {
  content: "✓"; position: absolute; top: 5px; right: 8px; font-size: .85rem;
}
.role-sub { display: block; font-size: .78rem; opacity: .9; }

/* ---- Réponses (fil / main courante) ---- */
.entry-card.reply {
  margin-left: 22px;
  padding: 10px 14px;
  border-left: 3px solid var(--accent-border);
  background: var(--reply-bg);
  border-radius: 4px 14px 14px 4px;
}
.reply-ref {
  font-size: .85rem;
  color: var(--ink-4);
  font-style: italic;
  margin: 0 0 4px;
}
.reply-context {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  background: var(--reply-ctx-bg);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .9rem;
  color: var(--accent-ink);
  margin-bottom: 10px;
}
.reply-context .link {
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-ink);
  padding: 4px 10px;
  white-space: nowrap;
}

/* ---- pièces jointes (bouton trombone 📎) ---- */
.attach-row { display: flex; align-items: center; gap: 8px; }
.btn-attach { font-size: .85rem; padding: 7px 14px; border-radius: 999px; background: var(--surface-2); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.attach-preview { display: flex; flex-wrap: wrap; gap: 6px; }
.attach-preview:empty { display: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px 5px 3px 10px; color: var(--ink-2);
}
.attach-chip-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-chip-x {
  flex: 0 0 auto; width: 20px; height: 20px; line-height: 1;
  border: none; border-radius: 50%; padding: 0; margin: 0;
  background: var(--ctl-bg); color: var(--ctl-ink); font-size: .7rem;
}
.attach-chip-x:hover { background: var(--ctl-bg-hover); }
.entry-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.attach-link {
  font-size: .85rem; color: var(--accent-ink); text-decoration: none;
  background: var(--accent-bg); border: 1px solid var(--accent-border); border-radius: 999px;
  padding: 4px 12px; max-width: 100%;
}
.attach-link:hover { background: var(--accent-bg-hover); text-decoration: none; }
.attach-link.missing {
  color: var(--danger-ink); background: var(--danger-bg); border-color: var(--danger-border); cursor: default;
}

/* ---- impression : du papier blanc, sans le décor ---- */
.print-only { display: none; }
#print-header h1 { font-size: 1.4rem; border-bottom: 2px solid #000; padding-bottom: 6px; margin: 0 0 8px; font-family: var(--sans); }
#print-header p { margin: 2px 0; font-size: .9rem; }

@media print {
  @page { size: A4 portrait; margin: 14mm; }
  html { background: #fff !important; }
  body {
    background: #fff !important; color: #000 !important;
    max-width: none !important; margin: 0 !important; padding: 0 !important;
    box-shadow: none !important; border-radius: 0 !important;
  }
  body::before, body::after { display: none !important; }   /* papier pointé + reliure */
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  main, header { max-width: none; padding: 0; }
  .day-head { break-after: avoid; border-bottom: 1px solid #000; margin-top: 14px; font-family: var(--sans); font-size: .95rem; }
  .entry-card {
    border: 1px solid #000 !important; border-left: 4px solid #000 !important;
    background: #fff !important; break-inside: avoid; box-shadow: none !important;
  }
  .entry-card::before { display: none !important; }         /* pas de scotch à l'impression */
  .author-badge, .cat-chip { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .author-badge.famille { border-style: dashed; }
  .entry-state { color: #000 !important; }
  .entry-state.unread-dot { font-weight: bold; }
  .entry-msg { margin: 4px 0; }
}


/* ---- mobile ---- */
@media (max-width: 640px) {
  body { margin: 10px 8px 24px; padding-bottom: 20px; border-radius: 2px 10px 10px 2px; }
  body::after { left: -12px; width: 26px; }
  header { padding: 20px 16px 16px 26px; }
  header::before { display: none; }
  header h1 { font-size: 1.5rem; }
  .card, .journal-panel, .side-panel { margin-left: 8px; margin-right: 8px; }
  .row { flex-direction: column; }
  .row label { min-width: 0; }
  .entry-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .entry-actions button { flex: none; padding: 7px 6px; }
  .meta-bar .txt { max-width: none; flex: 1; }
  .role-picker { flex-direction: column; }
  .role-btn { min-height: 52px; }
  .header-controls > button,
  .header-controls > .file-btn,
  .header-controls > .logout-form > button { padding: 8px 13px; }
  .journal-ts { min-width: 0; }
}