/* ============================================================
   Spunto — feuille de style unique.
   Charte betaOne : mauve #781E73 (actif) / azur #229BD2 (structure).
   JAMAIS de dégradé mauve->azur. Neutres à biais violet.
   Valeurs reprises de site_hugo/static/css/site.css : un seul foyer
   pour la charte, Spunto suit le site quand il évolue.
   ============================================================ */

:root{
  --ground:#FBFAFC; --surface:#FFFFFF;
  --ink:#1A141E; --ink-soft:#5C5266; --ink-faint:#8B8194;
  --rule:#E6E1EA;

  --azur:#229BD2; --azur-text:#17708F; --azur-wash:#EAF5FB;
  --mauve:#781E73; --mauve-wash:#F6EFF6;

  --night:#151019; --night-ink:#EDE8F1; --night-soft:#A79DB0;

  --t--1:.8125rem; --t-0:1.0625rem; --t-1:1.25rem;
  --t-2:1.625rem; --t-3:2.25rem;

  --f-display:'Archivo',system-ui,sans-serif;
  --f-body:'Public Sans',system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --wrap:1060px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--f-body); font-size:var(--t-0); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; font-family:var(--f-display); font-weight:700;
  line-height:1.14; letter-spacing:-.021em; text-wrap:balance; }
h1{ font-size:var(--t-3); }
p{ margin:0; }
a{ color:inherit; }
:focus-visible{ outline:2px solid var(--mauve); outline-offset:3px; border-radius:2px; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }

.eyebrow{
  font-family:var(--f-display); font-size:var(--t--1); font-weight:700;
  letter-spacing:.15em; text-transform:uppercase; color:var(--azur-text); margin:0 0 4px;
}
.lede{ color:var(--ink-soft); margin:6px 0 0; }
.empty{ color:var(--ink-faint); padding:36px 0; }
.nowrap{ white-space:nowrap; }

/* ---------- en-tête ---------- */
.masthead{ background:var(--surface); border-bottom:1px solid var(--rule);
  position:sticky; top:0; z-index:20; }
.masthead__in{ display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:64px; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; }
.brand svg{ height:22px; width:auto; display:block; }
.brand__app{ font-family:var(--f-display); font-weight:700; font-size:var(--t-1);
  letter-spacing:-.02em; padding-left:12px; border-left:1px solid var(--rule); }
.usernav{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.usernav__who{ font-size:var(--t--1); color:var(--ink-soft); }

/* ---------- fil et onglets ---------- */
.crumb{ background:var(--surface); border-bottom:1px solid var(--rule);
  font-size:var(--t--1); color:var(--ink-soft); }
.crumb .wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding-block:10px; }
.crumb .sep{ color:var(--ink-faint); }
.crumb strong{ color:var(--ink); font-weight:600; }
.tabs{ display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.tabs a{ padding:5px 11px; border-radius:999px; text-decoration:none;
  color:var(--ink-soft); }
.tabs a:hover{ background:var(--mauve-wash); color:var(--mauve); }
.tabs a.on{ background:var(--mauve); color:#fff; }

.main{ padding-block:34px 60px; }

/* ---------- boutons ---------- */
.btn{ display:inline-block; font-family:var(--f-display); font-weight:600;
  font-size:var(--t--1); padding:9px 18px; border-radius:6px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; line-height:1.3; }
.btn--solid{ background:var(--mauve); color:#fff; }
.btn--solid:hover{ background:#5F1759; }
.btn--ghost{ border-color:var(--rule); color:var(--ink-soft); background:var(--surface); }
.btn--ghost:hover{ border-color:var(--mauve); color:var(--mauve); }

/* ---------- formulaires ---------- */
input[type=text],input[type=password],textarea{
  font-family:var(--f-body); font-size:var(--t-0); color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:9px 12px; width:100%; }
input:focus,textarea:focus{ border-color:var(--azur); outline:none;
  box-shadow:0 0 0 3px var(--azur-wash); }
.stack{ display:grid; gap:14px; }
.stack label{ display:grid; gap:6px; font-size:var(--t--1); color:var(--ink-soft); }
.check{ display:flex; align-items:center; gap:8px; font-size:var(--t--1);
  color:var(--ink-soft); white-space:nowrap; }
.check input{ width:auto; }

.alert{ padding:12px 16px; border-radius:6px; margin-bottom:18px;
  font-size:var(--t--1); line-height:1.55; }
.alert--warn{ background:var(--mauve-wash); border:1px solid #E0C8DE; color:#5F1759; }
.alert a{ color:var(--mauve); }

/* ---------- connexion ---------- */
.login{ max-width:380px; margin:60px auto; background:var(--surface);
  border:1px solid var(--rule); border-radius:10px; padding:32px; }
.login h1{ font-size:var(--t-2); }
.login .stack{ margin-top:22px; }

/* ---------- liste des notes ---------- */
.pagehead{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; margin-bottom:26px; }
.newnote{ display:flex; gap:8px; flex:1 1 320px; max-width:460px; }
.notes{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.note{ border-bottom:1px solid var(--rule); }
.note__link{ display:flex; align-items:baseline; justify-content:space-between;
  gap:18px; padding:15px 4px; text-decoration:none; flex-wrap:wrap; }
.note__link:hover{ background:var(--surface); }
.note__title{ font-family:var(--f-display); font-weight:600; font-size:var(--t-1); }
.note__link:hover .note__title{ color:var(--mauve); }
.note__meta{ font-size:var(--t--1); color:var(--ink-faint);
  display:flex; align-items:center; gap:10px; }

/* Couleur stable par auteur : teinte dérivée du nom, saturation contenue
   pour rester dans la famille des neutres à biais violet. */
.chip{ font-size:var(--t--1); font-weight:600; padding:1px 9px; border-radius:999px;
  background:hsl(var(--hue) 42% 94%); color:hsl(var(--hue) 46% 32%);
  border:1px solid hsl(var(--hue) 36% 86%); white-space:nowrap; }

/* ---------- lecture d'une note ---------- */
.prose{ background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:38px 44px; max-width:74ch; }
.prose > * + *{ margin-top:1.05em; }
.prose h1{ font-size:var(--t-3); }
.prose h2{ font-size:var(--t-2); margin-top:1.7em; }
.prose h3{ font-size:var(--t-1); margin-top:1.5em; }
.prose ul,.prose ol{ padding-left:1.4em; }
.prose li + li{ margin-top:.3em; }
.prose code{ font-family:var(--f-mono); font-size:.9em; background:var(--mauve-wash);
  padding:1px 5px; border-radius:4px; }
.prose pre{ background:var(--night); color:var(--night-ink); padding:16px 20px;
  border-radius:8px; overflow-x:auto; }
.prose pre code{ background:none; color:inherit; padding:0; }
.prose blockquote{ border-left:3px solid var(--azur); padding-left:16px;
  color:var(--ink-soft); font-style:italic; }
.prose a{ color:var(--azur-text); text-decoration-thickness:1px;
  text-underline-offset:2px; }
.prose table{ border-collapse:collapse; width:100%; font-size:var(--t--1); }
.prose th,.prose td{ border:1px solid var(--rule); padding:7px 10px; text-align:left; }
.prose th{ background:var(--azur-wash); font-family:var(--f-display); }
.prose img{ max-width:100%; height:auto; }
.prose hr{ border:none; border-top:1px solid var(--rule); }
.lastedit{ margin-top:18px; font-size:var(--t--1); color:var(--ink-faint);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ---------- éditeur ---------- */
.editor textarea{ min-height:62vh; font-family:var(--f-mono); font-size:.95rem;
  line-height:1.75; resize:vertical; tab-size:2; }
.editor__bar{ display:flex; align-items:center; gap:12px; margin-top:14px;
  flex-wrap:wrap; }
.editor__bar input[type=text]{ flex:1 1 240px; }

/* ---------- historique et différences ---------- */
.tbl{ width:100%; border-collapse:collapse; font-size:var(--t--1); margin-top:20px; }
.tbl th,.tbl td{ border-bottom:1px solid var(--rule); padding:10px 8px; text-align:left;
  vertical-align:middle; }
.tbl th{ font-family:var(--f-display); color:var(--ink-soft); font-weight:600; }
.tbl a{ color:var(--azur-text); }

.diff{ background:var(--surface); border:1px solid var(--rule); border-radius:8px;
  padding:16px; overflow-x:auto; font-family:var(--f-mono); font-size:.85rem;
  line-height:1.6; margin-top:20px; }
.diff .add{ color:#1B6E3C; background:#EAF7EF; display:block; }
.diff .del{ color:#8E2020; background:#FBEDED; display:block; }
.diff .hunk{ color:var(--azur-text); display:block; }

/* ---------- attribution ligne à ligne ---------- */
.blame{ margin-top:22px; border:1px solid var(--rule); border-radius:8px;
  overflow:hidden; background:var(--surface); }
.blame__row{ display:grid; grid-template-columns:150px 82px 46px 1fr; gap:10px;
  align-items:baseline; padding:3px 12px; font-size:.85rem;
  border-bottom:1px solid #F2EEF4; }
.blame__row:last-child{ border-bottom:none; }
.blame__who{ overflow:hidden; text-overflow:ellipsis; }
.blame__when,.blame__n{ color:var(--ink-faint); font-family:var(--f-mono);
  font-size:.78rem; }
.blame__n{ text-align:right; }
.blame__text{ font-family:var(--f-mono); white-space:pre-wrap; word-break:break-word; }

/* ---------- colophon ---------- */
.colophon{ background:var(--night); color:var(--night-soft); padding-block:26px;
  font-size:var(--t--1); margin-top:60px; }
.colophon a{ color:var(--night-ink); }
.colophon__note{ margin-top:4px; color:#7F7489; }

/* ---------- dossiers ---------- */
.usernav__admin{ font-size:var(--t--1); font-weight:600; color:var(--mauve);
  text-decoration:none; font-family:var(--f-display); }
.usernav__admin:hover{ text-decoration:underline; }
.folder{ display:inline-block; font-family:var(--f-display); font-size:var(--t--1);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--azur-text); background:var(--azur-wash); border-radius:4px;
  padding:1px 7px; margin-right:9px; vertical-align:middle; }
.note__head{ display:flex; align-items:baseline; gap:0; flex-wrap:wrap; }
select{ font-family:var(--f-body); font-size:var(--t--1); color:var(--ink);
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:9px 10px; }
select:focus{ border-color:var(--azur); outline:none; box-shadow:0 0 0 3px var(--azur-wash); }

/* ---------- administration ---------- */
.alert--ok{ background:var(--azur-wash); border:1px solid #BFDFF0; color:var(--azur-text); }
h2.sub{ font-size:var(--t-1); margin-top:42px; }
.grid-form{ display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end; margin-top:16px;
  background:var(--surface); border:1px solid var(--rule); border-radius:8px; padding:18px; }
.grid-form label{ display:grid; gap:5px; font-size:var(--t--1); color:var(--ink-soft);
  flex:1 1 170px; }
.grid-form label.check{ display:flex; align-items:center; flex:0 0 auto; }
.lnk{ background:none; border:none; padding:0; font:inherit; font-size:var(--t--1);
  color:var(--azur-text); text-decoration:underline; cursor:pointer; }
.lnk:hover{ color:var(--mauve); }
.actions{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.inline-pass{ display:flex; align-items:center; gap:6px; }
.inline-pass input{ width:auto; max-width:190px; padding:5px 8px; font-size:var(--t--1); }
.off{ color:#8E2020; font-size:var(--t--1); }
.footnote{ margin-top:26px; font-size:var(--t--1); color:var(--ink-faint); max-width:70ch; }

.matrix-wrap{ overflow-x:auto; margin-top:20px; }
.matrix th.rot{ font-size:var(--t--1); vertical-align:bottom; text-align:center;
  white-space:nowrap; padding:10px 6px; }
.matrix td.cell{ text-align:center; }
.matrix td.cell input{ width:18px; height:18px; accent-color:var(--mauve); cursor:pointer; }
.matrix tbody tr:hover{ background:var(--mauve-wash); }

/* ---------- prévenir ---------- */
.notify{ background:var(--surface); border:1px solid var(--rule); border-radius:10px;
  padding:26px 28px; max-width:620px; display:grid; gap:20px; }
.people{ border:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px 18px; }
.people legend{ font-size:var(--t--1); color:var(--ink-soft); padding:0; margin-bottom:10px;
  font-family:var(--f-display); font-weight:600; }
.people .check{ white-space:nowrap; }
.stacked{ display:grid; gap:7px; font-size:var(--t--1); color:var(--ink-soft); }
.stacked textarea{ font-family:var(--f-body); font-size:var(--t-0); line-height:1.6;
  resize:vertical; }
.notify .btn{ justify-self:start; }

.matrix td.cell select{ padding:5px 8px; font-size:var(--t--1); }

/* ---------- écrans étroits ---------- */
@media (max-width:720px){
  .prose{ padding:26px 22px; }
  .pagehead{ align-items:stretch; }
  .blame__row{ grid-template-columns:1fr; gap:2px; padding:10px 12px; }
  .blame__n{ display:none; }
  .tabs{ margin-left:0; width:100%; }
  .newnote{ flex-wrap:wrap; }
  .grid-form label{ flex:1 1 100%; }
  .actions{ gap:8px; }
}