/* ════════════════════════════════════════════════════════════════
   ARTIS — carnet.css (v2.20.0)
   Design de la page Carnet validé par Sébastien (maquette B rev.2 :
   structure Canva 3 + colonne droite Canva 4).
   Chargé APRÈS styles.css : fait autorité sur la page carnet.
   Paramètres utilisateur (Réglages) via variables :
     --cn-bg · --cn-accent · --cn-ink · --cn-font
   Géométrie : --cn-sidebar-w (poignée de redimensionnement)
   ════════════════════════════════════════════════════════════════ */

:root {
  --cn-bg-d: #E8EDF2;
  --cn-accent-d: #0F6E56;
  --cn-shadow: 0 3px 14px rgba(30, 45, 60, 0.13);
  --cn-sidebar-w: 230px;
}
[data-theme="dark"] { --cn-bg-d: #171C22; --cn-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }

/* ── Cadre général : fond paramétrable, colonnes en cartes ── */
.carnet-app {
  background: var(--cn-bg, var(--cn-bg-d));
  gap: 12px;
  padding: 12px;
  grid-template-columns: var(--cn-sidebar-w) 1fr;
  color: var(--cn-ink, var(--ink));
  font-family: var(--cn-font, inherit);
  position: relative;
}
.carnet-app h1, .carnet-app h2, .carnet-app h3,
.carnet-app input, .carnet-app textarea, .carnet-app select, .carnet-app button {
  font-family: var(--cn-font, inherit);
}

/* ── Sidebar : carte teintée, item actif plein accent ── */
.carnet-sidebar {
  background: var(--surface-1, var(--surface, #F5F6F4));   /* v2.24.0 — suit le thème sombre */
  border: none !important;
  border-right: none !important;
  border-radius: 14px;
  box-shadow: var(--cn-shadow);
  padding: 12px 10px;
}
.carnet-nav-item {
  border-radius: 9px;
  color: var(--cn-ink, var(--ink-soft));
}
.carnet-nav-item.active {
  background: var(--cn-accent, var(--cn-accent-d));
  color: #fff !important;
  box-shadow: 0 1px 5px color-mix(in srgb, var(--cn-accent, var(--cn-accent-d)) 40%, transparent);
}
.carnet-nav-item.active .icon, .carnet-nav-item.active svg, .carnet-nav-item.active .carnet-nav-item-count { color: #fff !important; }
.carnet-nav-item-count {
  background: color-mix(in srgb, var(--cn-accent, var(--cn-accent-d)) 12%, transparent);
  color: var(--cn-accent, var(--cn-accent-d));
  border-radius: 8px;
  font-size: 10px;
  padding: 0 6px;
}
.carnet-nav-item.active .carnet-nav-item-count { background: rgba(255, 255, 255, 0.22); }

/* Épinglées en tête : notes listées directement */
.cn-pinned-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 24px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--cn-ink, var(--ink-soft));
  cursor: pointer;
  text-decoration: none;
}
.cn-pinned-note:hover { background: color-mix(in srgb, var(--cn-accent, var(--cn-accent-d)) 9%, transparent); }
.cn-pinned-note .icon { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.7; }
.cn-pinned-note.active {
  background: var(--cn-accent, var(--cn-accent-d));
  color: #fff;
}

/* Pastille de couleur par affaire dans la sidebar */
.cn-aff-dot {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Zone principale : la note est une carte flottante ── */
.carnet-main { background: transparent !important; }
.carnet-content { background: transparent; }
.carnet-editor-wrap .carnet-editor-header {
  background: var(--cn-bg, var(--cn-bg-d));
}
.carnet-editor {
  background: var(--surface, #fff);
  border: none;
  border-radius: 14px;
  box-shadow: var(--cn-shadow);
}
.carnet-editor-wrap-registre .carnet-editor-title { background: var(--surface, #fff); }
.carnet-card {
  background: var(--surface, #fff);
  border: none;
  border-radius: 14px;
  box-shadow: var(--cn-shadow);
}
.carnet-card:hover { box-shadow: 0 4px 16px rgba(30, 45, 60, 0.14); }

/* v2.21.6 — Cartes de section : contraste affermi (retour « filigrane délavé ») */
.carnet-card-section .carnet-card-title { font-weight: 600; color: var(--ink); }
.carnet-card-section .carnet-card-preview { color: var(--ink); opacity: 0.86; }

/* ── En-tête registre : italique souligné accent (choix validé) ── */
.reg-header-wrap { background: var(--surface, #fff); }
.reg-header-col {
  font-style: italic;
  color: var(--ink-soft);
  border-bottom: 1.5px solid var(--cn-accent, var(--cn-accent-d));
}

/* ── Séparateur de journée : bandeau accent arrondi ── */
.reg-sep-titre, .carnet-sep-titre {
  background: var(--cn-accent, var(--cn-accent-d));
  color: #fff !important;
  border-radius: 9px;
  padding: 3px 11px;
  border-bottom: none;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--cn-accent, var(--cn-accent-d)) 35%, transparent);
}
.reg-sep-titre::placeholder, .carnet-sep-titre::placeholder { color: rgba(255, 255, 255, 0.75); }

/* ── Chips d'affaires : colorées (teinte posée en JS par affaire) ── */
.carnet-card-affaire, .scratch-aff-chip, .agenda-task-aff, .reg-objet-chip {
  border-radius: 9px;
  font-weight: 500;
}

/* ── Dates « Pour le » : pastilles d'urgence ── */
.reg-act-date input[type="date"] { border-radius: 8px; }
.reg-act-date.cn-due-late input[type="date"] { background: #FCEBEB; color: #791F1F; font-weight: 600; }
.reg-act-date.cn-due-soon input[type="date"] { background: #FAEEDA; color: #633806; }
[data-theme="dark"] .reg-act-date.cn-due-late input[type="date"] { background: #501313; color: #F7C1C1; }
[data-theme="dark"] .reg-act-date.cn-due-soon input[type="date"] { background: #412402; color: #FAC775; }

/* ── Boutons d'ajout : accent ── */
.carnet-add-btn:hover, .reg-add-row:hover { color: var(--cn-accent, var(--cn-accent-d)); }

/* ── Poignée de redimensionnement sidebar ↔ éditeur ── */
.cn-resizer {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: calc(var(--cn-sidebar-w) + 12px);
  width: 10px;
  margin-left: -5px;
  cursor: col-resize;
  z-index: 20;
  border-radius: 5px;
}
.cn-resizer:hover, .cn-resizer.dragging { background: color-mix(in srgb, var(--cn-accent, var(--cn-accent-d)) 22%, transparent); }

/* ── Panneau droit (aperçu style B rev.2 ; refonte complète en page ②) ── */
#scratch, .scratch-panel {
  background: var(--cn-bg, transparent);
}
.scratch-section-card {
  background: var(--surface, #fff);
  border-radius: 14px;
  box-shadow: var(--cn-shadow);
  padding: 10px;
  margin-bottom: 10px;
}
.cn-due-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.cn-due-dot.late { background: #E24B4A; }
.cn-due-dot.soon { background: #EF9F27; }
.cn-due-dot.ok { background: var(--cn-accent, var(--cn-accent-d)); }

.cn-pinned-note .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Badge de version UI (diagnostic visuel : prouve que carnet.css est chargé) */
.carnet-sidebar::after {
  content: var(--artis-version, 'UI ?');
  display: block;
  margin-top: auto;
  padding: 4px 8px;
  font-size: 9px;
  color: var(--ink-dim);
  opacity: 0.6;
}

/* ── Couleur de note : liseré gauche + FOND réellement teinté ──
   v2.22.1 — fallback var(--note-c-bg, var(--note-c)) : sans lui, la
   déclaration était invalide (variable absente) → background: initial →
   carte transparente sur fond gris (cause du « contraste pas satisfaisant »).
   Teinte affermie : le fond de la note CHANGE visiblement avec la couleur. */
.carnet-card.has-note-color {
  border-left: 5px solid var(--note-c);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--note-c-bg, var(--note-c)) 26%, var(--surface, #fff));
}
.carnet-editor.has-note-color {
  border-left: 6px solid var(--note-c);
  border-radius: 0 14px 14px 0;
  background: color-mix(in srgb, var(--note-c-bg, var(--note-c)) 30%, var(--surface, #fff));
}
.carnet-editor.has-note-color .reg-header-wrap,
.carnet-editor.has-note-color .carnet-editor-title {
  background: color-mix(in srgb, var(--note-c-bg, var(--note-c)) 30%, var(--surface, #fff));
}

/* Mode édition : la carte détachée respire dans la zone centrale */
.carnet-app-editing .carnet-content { padding: 4px 22px 60px; }
.carnet-app-editing .carnet-editor-wrap { max-width: 1100px; padding: 0 0 40px; }

/* ── Réglages du carnet : modal propre et ordonné ── */
.cnr-modal { max-width: 380px; }
.cnr-body { padding: 6px 20px 16px; }
.cnr-section {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin: 14px 0 6px;
  border-bottom: 0.5px solid var(--border);
  padding-bottom: 3px;
}
.cnr-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink);
}
.cnr-color {
  width: 100%;
  height: 30px;
  border: 0.5px solid var(--border-strong);
  border-radius: 8px;
  padding: 2px;
  background: var(--surface, #fff);
  cursor: pointer;
}
.cnr-select {
  width: 100%;
  height: 30px;
  border: 0.5px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 12px;
  padding: 0 8px;
  color: var(--ink);
  font-family: inherit;
}
.cnr-range-wrap { display: flex; align-items: center; gap: 10px; }
.cnr-range-wrap input[type="range"] { flex: 1; accent-color: var(--cn-accent, #0F6E56); }
.cnr-range-wrap b { font-size: 12px; min-width: 40px; text-align: right; font-weight: 500; }
.cnr-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Taille du texte (Réglages) : zoom du contenu carnet + panneau */
.carnet-editor-wrap, .carnet-masonry, .carnet-card-list-wrap { zoom: var(--cn-scale, 1); }
#scratch .scratch-list { zoom: var(--cn-scale, 1); }

/* ── Barre éditeur : palette en popover ── */
.cn-palette-wrap { position: relative; display: inline-flex; }
.cn-palette-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  display: flex;
  gap: 6px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(30, 45, 60, 0.16);
  padding: 8px 10px;
  z-index: 60;
}
.carnet-card-pin { cursor: pointer; }
.carnet-card-pin:hover { transform: scale(1.15); }

/* ── Panneau droit : cartes maquette ── */
#scratch .scratch-list { padding: 10px; background: var(--cn-bg, var(--cn-bg-d)); }
.cnp-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 7px;
}
.cnp-card-title .icon { width: 13px; height: 13px; color: var(--cn-accent, #0F6E56); }
.cnp-eche-row {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 3px 4px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--ink);
  text-decoration: none;
}
.cnp-eche-row:hover { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 8%, transparent); }
.cnp-eche-row .cn-due-dot { align-self: center; }
.cnp-eche-date { font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 44px; }
.cnp-eche-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnp-eche-qui {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--cn-accent, #0F6E56) 11%, transparent);
  color: var(--cn-accent, #0F6E56);
  font-weight: 500;
  flex-shrink: 0;
}
.scratch-section-card .scratch-extra-input,
.scratch-section-card .scratch-textarea { width: 100%; margin-bottom: 5px; }

/* ── Barre d'ajout de blocs ──
   v2.22.1 — INTÉGRÉE À LA BARRE DU HAUT de l'éditeur (fixe, même niveau
   que retour/épingle/corbeille — demande Sébastien) */
.carnet-add-bar {
  display: flex;
  gap: 4px;
  padding: 3px 6px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--surface, #fff) 88%, var(--cn-bg, #E8EDF2));
  border: 0.5px solid var(--border);
  border-radius: 10px;
  width: fit-content;
  flex-wrap: wrap;
}
.carnet-editor-header { display: flex; align-items: center; gap: 8px; }
.carnet-editor-header .carnet-editor-header-actions { margin-left: 0; }

/* v2.22.1 — nuage de tags : suppression globale par tag */
.cn-tag-wrap { display: inline-flex; align-items: center; gap: 2px; }
.cn-tag-del {
  width: 15px;
  height: 15px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.cn-tag-del:hover { background: #FCEBEB; color: #B4231F; }
.carnet-add-btn {
  width: 30px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.carnet-add-btn:hover { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 12%, transparent); color: var(--cn-accent, #0F6E56); }
.carnet-add-btn span { display: none; }
.carnet-add-btn .icon, .carnet-add-btn svg { width: 15px; height: 15px; }

/* Popover palette : grille */
.cn-palette-pop { flex-wrap: wrap; max-width: 208px; }
.cn-palette-pop .carnet-swatch { width: 20px; height: 20px; border-radius: 6px; }
.cn-color-custom { width: 20px; height: 20px; border: 0.5px solid var(--border-strong); border-radius: 6px; padding: 0; background: none; cursor: pointer; }

/* ── v2.21.6 — Tâches étendues (notes libres) : Action / Observation / Qui / Pour le ──
   v2.22.1 — TOUJOURS AFFICHÉES (retour Sébastien : « ces colonnes partout ») */
.carnet-bloc-todo .cn-todo-ext {
  display: grid;
  grid-template-columns: minmax(90px, 1.2fr) minmax(70px, 1fr) minmax(52px, 0.5fr) auto;
  gap: 6px;
  align-items: start;
  margin: 5px 0 2px;
  padding-left: 2px;
}
.cn-todo-ext-field {
  min-height: 24px;
  padding: 3px 8px;
  border: 0.5px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface, #fff) 60%, transparent);
}
.cn-todo-ext-field:focus { outline: none; border-color: var(--cn-accent, #0F6E56); }
.cn-todo-ext-field:empty::before { content: attr(data-placeholder); color: var(--ink-dim); font-style: italic; font-size: 11px; }
.cn-todo-ext-qui {
  height: 26px;
  padding: 0 8px;
  border: 0.5px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  color: var(--ink);
  background: color-mix(in srgb, var(--surface, #fff) 60%, transparent);
  font-family: inherit;
}
.cn-todo-ext-qui:focus { outline: none; border-color: var(--cn-accent, #0F6E56); }
.cn-todo-ext-date input[type="date"] {
  height: 26px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  font-size: 11.5px;
  padding: 0 6px;
  color: var(--ink);
  background: transparent;
  font-family: inherit;
}
.carnet-bloc-todo.done .cn-todo-ext { opacity: 0.55; }
@media (max-width: 900px) {
  .carnet-bloc-todo .cn-todo-ext { grid-template-columns: 1fr 1fr; }
}

/* Ink v2 */
.ink-sep { width: 1px; height: 20px; background: var(--border); margin: 0 2px; }
.ink-btn .icon, .ink-btn svg { width: 15px; height: 15px; }
.ink-color-custom { width: 22px; height: 22px; border: 0.5px solid var(--border-strong); border-radius: 50%; padding: 0; cursor: pointer; }

/* ── Ink v3 (v2.21.6) — lasso, gomme réglable, palette élargie, icônes dédiées ── */
.ink-canvas-wrap { flex: 1; position: relative; display: flex; min-height: 0; }
.ink-canvas-wrap .ink-canvas { flex: 1; width: 100%; }
.ink-btn { display: inline-flex; align-items: center; justify-content: center; }
.ink-btn svg { width: 17px; height: 17px; display: block; }
.ink-width-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-soft); }
.ink-width-wrap input[type="range"] { width: 84px; accent-color: var(--accent, #0F6E56); }
.ink-width-label { min-width: 52px; text-align: right; }
.ink-palette-wrap { position: relative; display: inline-flex; }
.ink-color-more {
  background: conic-gradient(#DC2626, #EF9F27, #EAB308, #639922, #0F6E56, #185FA5, #7F77DD, #D4537E, #DC2626);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-strong);
}
.ink-palette-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(7, 24px);
  gap: 7px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 6px 22px rgba(20, 30, 40, 0.2);
}
.ink-palette-pop .ink-color { width: 24px; height: 24px; }
.ink-wheel-wrap { grid-column: 1 / -1; display: flex; }
.ink-wheel-wrap input { width: 100%; height: 26px; border: 0.5px solid var(--border-strong); border-radius: 8px; padding: 0; cursor: pointer; background: none; }
.ink-selbar {
  position: absolute;
  display: flex;
  gap: 4px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(20, 30, 40, 0.18);
  z-index: 30;
}
.ink-btn-danger { color: #B4231F; }
.ink-btn-danger:hover { background: #FCEBEB; border-color: #E8B5B3; }

/* ── v2.22.12 — ÉDITEUR UNIFIÉ PRO : panneau CALQUES (docké à droite) ──
   Liste z-order + vignettes, réglages complets du calque sélectionné :
   opacité, rotation, blancs transparents, contraste, multiplier, ordre. */
.ink-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  width: 252px;
  max-width: 68vw;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(20, 30, 40, 0.24);
  z-index: 34;
  overflow: hidden;
}
.ink-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 0.5px solid var(--border);
  flex-shrink: 0;
}
.ink-panel-head > span { display: inline-flex; align-items: center; gap: 7px; }
.ink-panel-head svg { width: 15px; height: 15px; }
.ink-panel-rows {
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  max-height: 34%;
}
.ink-lrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
}
.ink-lrow:hover { background: color-mix(in srgb, #185FA5 7%, transparent); }
.ink-lrow.sel { background: color-mix(in srgb, #185FA5 11%, transparent); border-color: color-mix(in srgb, #185FA5 45%, transparent); }
.ink-lrow.prim { border-color: #185FA5; }
.ink-lthumb {
  width: 34px;
  height: 26px;
  border-radius: 5px;
  overflow: hidden;
  background: repeating-conic-gradient(#e8e8e8 0 25%, #fff 0 50%) 0 0 / 10px 10px;
  border: 0.5px solid var(--border);
  flex-shrink: 0;
  display: flex;
}
.ink-lthumb img { width: 100%; height: 100%; object-fit: cover; }
.ink-lname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ink-lempty { font-size: 11.5px; color: var(--ink-dim); padding: 8px 10px; }
.ink-panel-ctrls {
  border-top: 0.5px solid var(--border);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow-y: auto;
}
.ink-pslider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.ink-pslider input[type="range"] { width: 100%; accent-color: #185FA5; margin: 0; }
.ink-pnum {
  width: 54px;
  border: 0.5px solid var(--border-strong);
  border-radius: 7px;
  padding: 2px 5px;
  font-size: 11.5px;
  background: var(--surface, #fff);
  color: var(--ink);
}
.ink-prow { display: flex; gap: 5px; flex-wrap: wrap; }
.ink-pbtn { width: auto; min-width: 34px; height: 30px; padding: 0 8px; font-size: 11.5px; border: 0.5px solid var(--border); border-radius: 8px; }
.ink-pbtn:disabled { opacity: 0.35; pointer-events: none; }
.ink-pbtn.active {
  background: color-mix(in srgb, #185FA5 14%, var(--surface, #fff));
  border-color: #185FA5;
  color: #185FA5;
}
/* ── v2.24.0 — APPARENCE GLOBALE (tous les onglets) ──
   Bouton sidebar + modale (base cnr-modal), pastilles et groupes. */
.astyle-open-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 8px;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}
.astyle-open-btn:hover { color: var(--ink); border-color: var(--border-strong); background: var(--hover-bg); }
.astyle-open-btn .icon { width: 14px; height: 14px; }
.astyle-theme-row { display: flex; gap: 6px; }
.astyle-theme-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
  color: var(--ink-soft);
  font-size: 12px;
  cursor: pointer;
}
.astyle-theme-btn .icon { width: 13px; height: 13px; }
.astyle-theme-btn.active {
  border-color: var(--active-bg, #1B4332);
  color: var(--active-bg, #1B4332);
  background: color-mix(in srgb, var(--active-bg, #1B4332) 8%, transparent);
  font-weight: 600;
}
.astyle-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.astyle-swatch {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.astyle-swatch.active { border-color: var(--ink); transform: scale(1.08); }
.astyle-none { background: var(--surface, #fff); border: 1px dashed var(--border-strong); color: var(--ink-dim); font-size: 13px; }
.astyle-wheel input {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  padding: 0;
  background: none;
  cursor: pointer;
}
.astyle-inline { display: inline-flex; align-items: center; gap: 8px; }
.cnr-section small { font-weight: 400; color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
.astyle-modal { max-width: 470px; width: min(470px, 94vw); }
.astyle-modal .cnr-body { max-height: 76vh; overflow-y: auto; }
.astyle-palettes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.astyle-palette {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 8px);
  background: var(--surface, #fff);
  cursor: pointer;
}
.astyle-palette:hover { border-color: var(--border-strong); }
.astyle-palette.active {
  border-color: var(--active-bg, #1B4332);
  box-shadow: 0 0 0 1.5px var(--active-bg, #1B4332);
}
.astyle-pal-strip { display: flex; gap: 3px; height: 14px; }
.astyle-pal-strip i { flex: 1; border-radius: 4px; }
.astyle-pal-label {
  font-size: 10.5px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.astyle-tag {
  font-size: 10px;
  background: var(--active-bg, #1B4332);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}

/* ── v2.23.0 — BULLET JOURNAL : fond pointillé façon carnet bujo ── */
.carnet-editor.cn-bujo {
  background-image: radial-gradient(color-mix(in srgb, var(--cn-accent, #0F6E56) 26%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  background-position: 11px 14px;
}
[data-theme="dark"] .carnet-editor.cn-bujo {
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1.2px);
}
.carnet-editor.cn-bujo .carnet-editor-title { font-weight: 700; letter-spacing: 0.01em; }

/* ── v2.23.0 — SESSION B : LOT IA ──
   Menu IA, chips « Transcrire »/« CCAG », modales (réutilisent la base
   carnet-tpl-*), spinner, dictée. Accent IA : violet #7F77DD (distinct
   de l'accent chantier, reconnaissable partout). */
.cn-btn-ai { color: #7F77DD; }
.cn-btn-ai:hover { color: #534AB7; }
.cn-ai-wrap { position: relative; display: inline-flex; }
.cn-ai-pop {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 230px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 26px rgba(20, 30, 40, 0.2);
}
.cn-ai-pop button {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.cn-ai-pop button:hover { background: color-mix(in srgb, #7F77DD 10%, transparent); color: #534AB7; }
.cn-ai-pop button .icon, .cn-ai-pop button svg { width: 15px; height: 15px; color: #7F77DD; }
.cn-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid color-mix(in srgb, #7F77DD 40%, transparent);
  background: color-mix(in srgb, #7F77DD 8%, transparent);
  color: #534AB7;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  cursor: pointer;
}
.cn-ai-chip:hover { background: color-mix(in srgb, #7F77DD 16%, transparent); }
.cn-ai-chip .icon, .cn-ai-chip svg { width: 12px; height: 12px; }
.cn-ai-chip-line { margin-top: 5px; align-self: flex-start; }
[data-theme="dark"] .cn-ai-chip { color: #B9B4F2; }

.cn-ai-modal { max-width: 560px; width: min(560px, 94vw); }
.cn-ai-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.cn-ai-ta {
  width: 100%;
  border: 0.5px solid var(--border-strong);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface, #fff);
  resize: vertical;
}
.cn-ai-hint { font-size: 11.5px; color: var(--ink-dim); margin: 0; }
.cn-ai-error { font-size: 12.5px; color: #B4231F; margin: 0; }
.cn-ai-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cn-ai-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.cn-ai-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 0.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  font-size: 12.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.cn-ai-row:hover { border-color: color-mix(in srgb, #7F77DD 50%, transparent); }
.cn-ai-row .icon, .cn-ai-row svg { width: 14px; height: 14px; color: #7F77DD; flex-shrink: 0; }
.cn-ai-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cn-ai-row-main small { color: var(--ink-dim); font-size: 11px; }
.cn-ai-ref { color: #534AB7 !important; font-weight: 600; }
.cn-ai-row-sugg { cursor: default; align-items: flex-start; }
.cn-ai-row-sugg .btn { flex-shrink: 0; }
.cn-ai-row-check input { width: 16px; height: 16px; accent-color: #7F77DD; flex-shrink: 0; }
.cn-ai-busy {
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
}
.cn-ai-busy small { color: var(--ink-dim); }
.cn-ai-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, #7F77DD 25%, transparent);
  border-top-color: #7F77DD;
  animation: cn-ai-spin 0.9s linear infinite;
}
@keyframes cn-ai-spin { to { transform: rotate(360deg); } }
.cn-ai-dictee-status { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--ink-soft); min-height: 20px; }
.cn-ai-recdot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #DC2626;
  flex-shrink: 0;
  animation: cn-ai-pulse 1.1s ease-in-out infinite;
}
.cn-ai-recdot.off { background: var(--ink-dim); animation: none; }
@keyframes cn-ai-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.cn-ai-modal .carnet-tpl-header h3 { display: inline-flex; align-items: center; gap: 8px; }
.cn-ai-modal .carnet-tpl-header .icon { width: 16px; height: 16px; color: #7F77DD; }

.ink-lcount {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  background: #185FA5;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
[data-ink-panel-toggle] { position: relative; }
@media (max-width: 720px) {
  .ink-panel { width: 218px; }
}
.cn-ui-badge { font-size: 9px; color: var(--ink-dim); opacity: 0.6; padding: 6px 4px 2px; }

/* ── v2.21.6 — Colonne « Qui » : registre en 6 colonnes ──
   minmax() = garde-fous : aucune colonne ne s'écrase sous le lisible,
   même éditeur étroit (3 volets ouverts / tablette portrait). */
.reg-header {
  grid-template-columns:
    var(--reg-c1, 130px)
    minmax(96px, var(--reg-c2, 1fr))
    minmax(84px, var(--reg-c3, 1.2fr))
    minmax(50px, var(--reg-c4, 0.9fr))
    minmax(40px, var(--reg-c5, 0.4fr))
    minmax(88px, var(--reg-c6, 0.55fr));
}
.reg-subrow {
  grid-template-columns:
    minmax(96px, var(--reg-c2, 1fr))
    minmax(84px, var(--reg-c3, 1.2fr))
    minmax(50px, var(--reg-c4, 0.9fr))
    minmax(40px, var(--reg-c5, 0.4fr))
    minmax(88px, var(--reg-c6, 0.55fr));
}
.reg-cell-act { grid-column: 2 / 6; }
.reg-act-line {
  grid-template-columns:
    minmax(84px, var(--reg-c3, 1.2fr))
    minmax(50px, var(--reg-c4, 0.9fr))
    minmax(40px, var(--reg-c5, 0.4fr))
    minmax(88px, var(--reg-c6, 0.55fr));
}
.reg-act-qui {
  border: none;
  background: transparent;
  font-size: 12px;
  color: var(--ink);
  padding: 3px 10px;
  outline: none;
  font-family: inherit;
  min-width: 0;
  width: 100%;
}
.reg-act-qui::placeholder { color: var(--ink-dim); font-style: italic; font-size: 11px; }
.reg-act-qui:focus { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 6%, transparent); border-radius: 6px; }

/* ── v2.22.7 — Photos : bornées, redimensionnables (poignée), cellules ── */
.carnet-img { max-width: 100%; height: auto; }
.cn-img-box { position: relative; max-width: 100%; }
.cn-img-box .carnet-img { width: 100%; max-height: none; }
/* v2.22.8 — Sélection photo : poignées AUX 4 COINS + barre Annoter/Calques */
.cn-img-box.cn-selected { outline: 2px dashed var(--cn-accent, #0F6E56); outline-offset: 3px; }
.cn-h {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid var(--cn-accent, #0F6E56);
  box-shadow: 0 1px 5px rgba(20, 30, 40, 0.3);
  touch-action: none;
  z-index: 5;
}
.cn-img-bar {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: var(--surface, #fff);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  box-shadow: 0 4px 14px rgba(20, 30, 40, 0.22);
  z-index: 6;
}
.cn-img-bar button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  font-family: inherit;
}
.cn-img-bar button:hover { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 12%, transparent); color: var(--cn-accent, #0F6E56); }
.cn-img-bar .icon, .cn-img-bar svg { width: 14px; height: 14px; }

/* ── v2.22.7 — Registre ÉTROIT : ré-empilement lisible (fini les lettres
   verticales quand les 3 volets sont ouverts / tablette portrait) ── */
.carnet-editor-wrap-registre .carnet-editor { container-type: inline-size; }
@container (max-width: 620px) {
  .reg-header { display: none; }
  .reg-row { grid-template-columns: 1fr; }
  .reg-col-objet { display: flex; align-items: center; gap: 8px; padding: 6px 10px 0; }
  .reg-col-objet .reg-objet-libre { flex: 1; }
  .reg-subrow { grid-template-columns: 1fr; }
  .reg-cell-act { grid-column: auto; }
  .reg-act-line {
    grid-template-columns: minmax(0, 1fr) minmax(64px, auto) 112px;
    row-gap: 2px;
  }
  .reg-act-main { grid-column: 1; grid-row: 1; }
  .reg-act-qui { grid-column: 2; grid-row: 1; }
  .reg-act-date { grid-column: 3; grid-row: 1; }
  .reg-act-obs { grid-column: 1 / -1; grid-row: 2; }
}

/* ── v2.22.6 — Manuscrit DANS LES CELLULES du registre ── */
.reg-act-main { min-width: 0; }
.reg-ink-thumb {
  display: block;
  max-width: calc(100% - 24px);
  max-height: 110px;
  margin: 2px 12px 6px;
  border: 0.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.reg-ink-thumb:hover { border-color: var(--cn-accent, #0F6E56); box-shadow: 0 1px 6px color-mix(in srgb, var(--cn-accent, #0F6E56) 25%, transparent); }

/* ── v2.22.4 — Citations : source (auteur/ouvrage) + recueil global ── */
.cit-grid { display: grid; grid-template-columns: 1fr 200px; gap: 8px; align-items: start; }
.cit-src { display: flex; flex-direction: column; gap: 4px; }
.cit-src input {
  height: 26px;
  border: 0.5px solid var(--border);
  border-radius: 7px;
  font-size: 11.5px;
  padding: 0 8px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--surface, #fff) 60%, transparent);
  font-family: inherit;
  font-style: italic;
  text-align: right;
}
.cit-src input:focus { outline: none; border-color: var(--cn-accent, #0F6E56); }
@media (max-width: 760px) { .cit-grid { grid-template-columns: 1fr; } .cit-src input { text-align: left; } }
.cn-cit-card { cursor: pointer; }
.cn-cit-text { font-size: 14.5px; font-style: italic; color: var(--ink); line-height: 1.5; }
.cn-cit-attrib { font-size: 12px; color: var(--ink-soft); text-align: right; margin-top: 4px; }
.cn-cit-attrib i { font-style: italic; }
.carnet-bloc-ink .cit-meta { margin-top: 6px; }

/* ── v2.22.3 — Journée de registre : date écrite à droite, 1 fois par jour ── */
.cn-sep-day {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 2px 4px 2px 0;
}
.cn-sep-day-line {
  flex: 1;
  height: 0;
  border-top: 1.5px solid color-mix(in srgb, var(--cn-accent, #0F6E56) 45%, transparent);
  border-radius: 1px;
}
.cn-sep-date-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cn-accent, #0F6E56);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.cn-sep-date-label::first-letter { text-transform: capitalize; }
.cn-sep-date-label:hover { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 10%, transparent); }
.cn-sep-date-input {
  height: 26px;
  border: 0.5px solid var(--border-strong);
  border-radius: 8px;
  font-size: 12px;
  padding: 0 6px;
  color: var(--cn-accent, #0F6E56);
  font-weight: 600;
  background: var(--surface, #fff);
  font-family: inherit;
}
/* Séparateur suivant du MÊME jour : simple filet discret */
.carnet-bloc-sep-reg.cn-sep-repeat .cn-sep-day { min-height: 18px; }
.carnet-bloc-sep-reg.cn-sep-repeat .cn-sep-day-line { border-top-style: dashed; border-top-width: 1px; opacity: 0.6; }
.carnet-bloc-sep-reg.cn-sep-repeat .cn-sep-pin,
.carnet-bloc-sep-reg.cn-sep-repeat .cn-sep-dup { width: 22px; height: 22px; opacity: 0.7; }

/* ── v2.21.6 — Épingles de section + duplication de journée ── */
.cn-sep-pin, .cn-sep-dup {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
}
.cn-sep-pin .icon, .cn-sep-pin svg, .cn-sep-dup .icon, .cn-sep-dup svg { width: 14px; height: 14px; }
.cn-sep-pin:hover, .cn-sep-dup:hover { background: color-mix(in srgb, var(--cn-accent, #0F6E56) 12%, transparent); color: var(--cn-accent, #0F6E56); }
.cn-sep-pin.active { color: var(--cn-accent, #0F6E56); }
.cn-sep-pin.active svg { fill: color-mix(in srgb, var(--cn-accent, #0F6E56) 28%, transparent); }
.carnet-bloc-sep-reg .reg-sep-row { grid-template-columns: var(--reg-c1, 150px) 1fr auto auto; gap: 4px; }
.carnet-sep-meta-row .cn-sep-pin { margin-left: auto; }
.cn-pinned-section .icon { color: var(--cn-accent, #0F6E56); opacity: 0.85; }

/* ── v2.21.6 — Corbeille 30 j ── */
.cn-trash-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 4px 0 12px;
  background: color-mix(in srgb, var(--cn-accent, #0F6E56) 8%, var(--surface, #fff));
  border: 0.5px solid color-mix(in srgb, var(--cn-accent, #0F6E56) 25%, transparent);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-soft);
}
.cn-trash-notice svg, .cn-trash-notice .icon { width: 14px; height: 14px; color: var(--cn-accent, #0F6E56); flex-shrink: 0; }
.carnet-card-trash { opacity: 0.92; }
.carnet-card-trash .carnet-card-title { display: flex; align-items: center; gap: 7px; }
.cn-trash-type { width: 14px; height: 14px; opacity: 0.6; }
.cn-trash-purge { font-size: 10.5px; color: var(--ink-soft); font-style: italic; }
.cn-trash-purge-soon { color: #B4231F; font-weight: 600; }
.cn-trash-actions { display: flex; gap: 8px; margin-top: 8px; }
.cn-trash-actions .icon, .cn-trash-actions svg { width: 13px; height: 13px; }
.cn-btn-danger {
  background: transparent;
  border: 0.5px solid #E8B5B3;
  color: #B4231F;
}
.cn-btn-danger:hover { background: #FCEBEB; }
[data-theme="dark"] .cn-btn-danger { border-color: #6b2f2d; color: #F7C1C1; }
[data-theme="dark"] .cn-btn-danger:hover { background: #501313; }

/* ── Mode focus (20) : la note seule, plein écran ── */
html.cn-focus .app-sidebar, html.cn-focus #scratch, html.cn-focus .carnet-sidebar,
html.cn-focus .cn-resizer, html.cn-focus .app-topbar { display: none !important; }
html.cn-focus .carnet-app { grid-template-columns: 1fr; padding: 8px 0; }
html.cn-focus .carnet-app-editing .carnet-editor-wrap { max-width: 860px; margin: 0 auto; }
html.cn-focus [data-cn-focus] { color: var(--cn-accent, #0F6E56); }