/* Théorie en tableau d'enquête : un canevas zoomable en verre dépoli, des cartes épinglées, des fils roses.
   Trois niveaux de lecture selon le zoom : ensemble (« far »), sections (« mid »), détail (« near »). Couleurs : tokens.css seulement. */
.page--tableau { padding: 10px clamp(10px, 2.2vw, 36px) 20px; }
.tb-vp {
  --k: 0.5; --cx: 0px; --cy: 0px;
  position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  height: clamp(540px, calc(100dvh - 112px), 1100px);
  border-radius: 28px; border: 1px solid var(--verre-bord);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--encre) 16%, transparent) 1.2px, transparent 1.8px) var(--cx) var(--cy) / calc(44px * var(--k)) calc(44px * var(--k)),
    var(--verre);
  box-shadow: var(--verre-ombre);
  backdrop-filter: blur(var(--flou)); -webkit-backdrop-filter: blur(var(--flou));
  cursor: grab; outline-offset: 3px;
}
.tb-vp.en-geste { cursor: grabbing; }
.tb-vp.m-lier { cursor: crosshair; }
.tb-monde { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }

/* Grands ensembles. */
.tb-grp { position: absolute; border-radius: 56px; border: 1.5px dashed color-mix(in srgb, var(--ciel) 45%, transparent); background: color-mix(in srgb, var(--ciel) 6%, transparent); pointer-events: none; }
.tb-grp:nth-child(2) { border-color: color-mix(in srgb, var(--rose) 50%, transparent); background: color-mix(in srgb, var(--rose) 5%, transparent); }
.tb-grp-t { position: absolute; left: 36px; top: 28px; transform-origin: 0 0; transform: scale(calc(1 / var(--k))); white-space: nowrap; font: 560 21px / 1 var(--sans); letter-spacing: -0.02em; color: var(--ardoise); }
.s-far .tb-grp-t { font-size: 22px; color: var(--encre); }

/* Fils. */
.tb-fils { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fil-trait { fill: none; stroke: var(--rose); stroke-width: 2.4px; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.85; transition: opacity var(--rapide), stroke-width var(--rapide); }
.fil-hit { fill: none; stroke: transparent; stroke-width: 16px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.fil-fleche { fill: var(--rose); --ifl: calc(1 / var(--k)); opacity: 0.9; }
.fil.lie .fil-trait, .fil.on .fil-trait { stroke-width: 3.6px; opacity: 1; }
.a-focus .fil:not(.lie) .fil-trait, .a-focus .fil:not(.lie) .fil-fleche { opacity: 0.2; }
.fil.on .fil-trait { stroke: var(--accent); }
.fil.on .fil-fleche { fill: var(--accent); }
.fil-fantome { fill: none; stroke: var(--accent); stroke-width: 2.4px; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
:root[data-theme="nb"] .fil-trait, :root[data-theme="nb"] .fil-fleche { stroke: #BDBDBD; fill: #BDBDBD; }
:root[data-theme="nb"] .fil-fleche { stroke: none; }
:root[data-theme="nbc"] .fil-trait { stroke: #4A4A4A; } :root[data-theme="nbc"] .fil-fleche { fill: #4A4A4A; }

/* Cartes. */
.nd { position: absolute; cursor: pointer; transition: opacity 200ms; }
.nd:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 24px; }
.nd-carte {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); border-radius: 22px; box-shadow: var(--verre-ombre);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms, opacity 200ms; min-height: 150px;
}
.nd:hover .nd-carte { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, var(--verre-bord)); }
.nd.sel .nd-carte { border-color: var(--accent); box-shadow: var(--verre-ombre), 0 0 0 2px var(--accent); }
.nd.cible .nd-carte { border-color: var(--rose); box-shadow: var(--verre-ombre), 0 0 0 3px var(--rose); }
.a-focus .nd:not(.on):not(.vois):not(.sel) { opacity: 0.42; }
.nd-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nd-num { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; font: 600 14px / 1 var(--sans); color: var(--sur-accent); background-color: var(--accent); background-image: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--rose-txt))); font-variant-numeric: tabular-nums; }
.nd-num--perso { background-color: var(--rose-txt); background-image: linear-gradient(135deg, var(--rose-txt), var(--accent)); }
.nd-etat { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); }
.nd-etat--perso { border-color: var(--rose-txt); color: var(--rose-txt); }
.nd-titre { font: 580 20px / 1.15 var(--sans); letter-spacing: -0.03em; }
.nd-intro { font-size: 13.5px; line-height: 1.4; color: var(--ardoise); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nd-plan { display: none; margin: 4px 0 0; padding: 0; list-style: none; gap: 4px; font-size: 13px; color: var(--encre); }
.nd-plan li { padding-left: 16px; position: relative; line-height: 1.3; }
.nd-plan li::before { content: ""; position: absolute; left: 2px; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.nd-pied { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; font-size: 12px; color: var(--ardoise); }
.nd-nb { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--encre) 7%, transparent); }
.s-near .nd-plan { display: grid; }
.s-near .nd-intro { -webkit-line-clamp: 6; }

/* Punaise : glossy, c'est la poignée pour tirer un fil. Sa zone de toucher (::after, invisible) fait 40 px. */
.nd-pin::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; }
.nd-pin {
  position: absolute; left: 50%; top: 2px; z-index: 3; width: 22px; height: 22px; margin: 0 0 0 -11px; padding: 0; border: 0; border-radius: 50%; cursor: crosshair;
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--ciel) 38%, color-mix(in srgb, var(--ciel) 55%, #000) 100%);
  box-shadow: 0 3px 6px rgba(0, 20, 40, 0.35), 0 0 0 3px color-mix(in srgb, var(--blanc) 55%, transparent);
  transform-origin: 50% 50%; transform: scale(max(1, calc(0.9 / var(--k))));
}
.nd--note .nd-pin, .nd--perso .nd-pin { background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--rose) 38%, color-mix(in srgb, var(--rose) 55%, #000) 100%); }
.nd-pin:hover, .nd-pin:focus-visible { box-shadow: 0 3px 8px rgba(0, 20, 40, 0.45), 0 0 0 5px color-mix(in srgb, var(--accent) 45%, transparent); }
:root[data-theme="nb"] .nd-pin, :root[data-theme="nb"] .nd--note .nd-pin, :root[data-theme="nb"] .nd--perso .nd-pin { background: radial-gradient(circle at 34% 30%, #fff 0 14%, #bbb 45%, #555 100%); }
:root[data-theme="nbc"] .nd-pin, :root[data-theme="nbc"] .nd--note .nd-pin, :root[data-theme="nbc"] .nd--perso .nd-pin { background: radial-gradient(circle at 34% 30%, #888 0 12%, #222 45%, #000 100%); }

/* Étiquette d'ensemble : remplace la carte quand on dézoome, garde une taille lisible à l'écran. */
.nd-far {
  position: absolute; left: 50%; top: 20px; display: none; align-items: center; gap: 10px; max-width: 250px; padding: 9px 16px 9px 10px; border-radius: 999px;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); box-shadow: var(--verre-ombre);
  transform: translate(-50%, 0) scale(calc(1 / var(--k))); transform-origin: 50% 0; white-space: normal; text-align: left;
}
.nd-farTitre { font: 560 15px / 1.15 var(--sans); letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-far .nd-carte { visibility: hidden; opacity: 0; }
.s-far .nd-far { display: inline-flex; }
.s-far .nd { min-height: 120px; }
.s-far .nd.sel .nd-far { box-shadow: var(--verre-ombre), 0 0 0 3px var(--accent); }
.s-far .nd--note .nd-far { padding-left: 16px; }

/* Notes collantes : papier opaque, encre sombre (lisible dans tous les thèmes), un coin plié. */
.nd--note .nd-carte { --papier-note: #D9F0FA; background: var(--papier-note); color: #0A2236; border: 0; border-radius: 6px 6px 6px 22px; padding: 26px 16px 14px; min-height: 150px; transform: rotate(var(--rot, 0deg)); box-shadow: 0 14px 26px -12px rgba(0, 30, 60, 0.45); backdrop-filter: none; -webkit-backdrop-filter: none; }
.nd--note:hover .nd-carte { transform: rotate(var(--rot, 0deg)) translateY(-3px); }
.nd--note.c-rose .nd-carte { --papier-note: #FBDDEE; }
.nd--note.c-blanc .nd-carte { --papier-note: #FCFFFF; }
:root[data-theme="nb"] .nd--note .nd-carte { --papier-note: #E6E6E6; } :root[data-theme="nb"] .nd--note.c-rose .nd-carte { --papier-note: #BDBDBD; } :root[data-theme="nb"] .nd--note.c-blanc .nd-carte { --papier-note: #FFFFFF; }
:root[data-theme="nbc"] .nd--note .nd-carte { --papier-note: #DCDCDC; } :root[data-theme="nbc"] .nd--note.c-rose .nd-carte { --papier-note: #BDBDBD; } :root[data-theme="nbc"] .nd--note.c-blanc .nd-carte { --papier-note: #FFFFFF; }
.nd--note .nd-carte::after { content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; border-radius: 0 0 0 0; background: linear-gradient(135deg, transparent 50%, rgba(0, 30, 60, 0.16) 50%); }
.nt-txt, .pr-txt, .pr-titre { width: 100%; border: 0; background: transparent; color: inherit; font: 450 15px / 1.4 var(--sans); resize: none; padding: 0; cursor: text; }
.nt-txt { min-height: 6.4em; }
.nt-txt::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); }
.nt-txt:focus-visible, .pr-txt:focus-visible, .pr-titre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.nd--note .nt-txt:focus-visible { outline-color: #046C95; }
:root[data-theme="nbc"] .nd--note .nt-txt:focus-visible, :root[data-theme="nb"] .nd--note .nt-txt:focus-visible { outline-color: #000; }
.pr-titre { font: 580 19px / 1.2 var(--sans); letter-spacing: -0.03em; }
.pr-txt { color: var(--ardoise); font-size: 14px; min-height: 4.5em; }
.pr-titre::placeholder, .pr-txt::placeholder { color: var(--ardoise); opacity: 0.8; }
.nd--perso .nd-carte { border-style: dashed; border-color: color-mix(in srgb, var(--rose-txt) 60%, var(--verre-bord)); }
/* Aux vues d'ensemble et de sections, les champs de saisie des notes restent visibles mais ne volent pas le glisser. */
.s-far .nt-txt, .s-far .pr-txt, .s-far .pr-titre { pointer-events: none; }

/* Barre du haut. */
.tb-ui { position: absolute; z-index: 20; cursor: default; user-select: text; -webkit-user-select: text; }
.tb-haut { left: 14px; right: 14px; top: 14px; pointer-events: none; }
.tb-barre { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; }
.tb-barre > * { pointer-events: auto; }
.tb-scope, .tb-zoom, .tb-ajout { display: flex; gap: 6px; align-items: center; }
.tb-ajout { flex-wrap: wrap; }
.tb-btn { min-height: 40px; padding: 0 16px; gap: 8px; font-size: 14px; }
.tb-btn svg { width: 17px; height: 17px; }
.tb-ico { width: 40px; padding: 0; font-size: 22px; line-height: 1; }
.tb-ico span { transform: translateY(-1px); }
.tb-lier[aria-pressed="true"] { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); }
.tb-scope { padding: 3px; }
.tb-scope .seg__b { min-height: 40px; padding: 0 14px; border: 0; background: none; border-radius: 999px; font-size: 14px; }
.tb-vp .seg { background: var(--verre-fort); backdrop-filter: blur(var(--flou)); -webkit-backdrop-filter: blur(var(--flou)); }
.tb-aide { position: absolute; left: 18px; bottom: 12px; right: 18px; margin: 0; font-size: 12.5px; color: var(--ardoise); pointer-events: none; text-shadow: 0 0 8px var(--papier); }
.tb-dock:not([hidden]) ~ .tb-aide { opacity: 0; }

/* Volet de la sélection. */
.tb-dock {
  left: 14px; bottom: 14px; width: min(360px, calc(100% - 28px)); max-height: min(62%, 520px); overflow: auto; padding: 20px 20px 16px;
  background: var(--verre-fort); border: 1px solid var(--verre-bord); border-radius: 22px; box-shadow: var(--verre-ombre);
  backdrop-filter: blur(var(--flou)) saturate(1.4); -webkit-backdrop-filter: blur(var(--flou)) saturate(1.4);
}
.dk-fermer { position: absolute; right: 10px; top: 10px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%; color: var(--ardoise); }
.dk-fermer:hover { background: color-mix(in srgb, var(--encre) 8%, transparent); color: var(--encre); }
.dk-fermer svg, .dk-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.dk-kicker { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-txt); margin-right: 34px; }
.dk-titre { font: 580 21px / 1.15 var(--sans); letter-spacing: -0.03em; margin: 6px 34px 8px 0; }
.dk-intro { font-size: 14px; color: var(--ardoise); line-height: 1.45; }
.dk-plan { margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; }
.dk-plan li { padding-left: 16px; position: relative; } .dk-plan li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.dk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dk-lib { margin-top: 16px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ardoise); }
.dk-liens { display: grid; gap: 4px; margin: 6px 0 0; padding: 0; }
.dk-liens li { display: flex; align-items: center; gap: 4px; }
.dk-aller { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; }
.dk-aller:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dk-sens { color: var(--rose-txt); font-weight: 600; }
.dk-x { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--ardoise); }
.dk-x:hover { background: color-mix(in srgb, var(--alerte) 14%, transparent); color: var(--alerte); }
.dk-relier { display: flex; gap: 8px; margin-top: 14px; }
.dk-sel { flex: 1; min-width: 0; min-height: 40px; padding: 0 10px; font-size: 14px; }
.dk-couleurs { display: flex; gap: 10px; margin-top: 10px; }
.dk-sw { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--contour); }
.dk-sw.c-ciel { background: #D9F0FA; } .dk-sw.c-rose { background: #FBDDEE; } .dk-sw.c-blanc { background: #FCFFFF; }
.dk-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.dk-sup { margin-top: 10px; color: var(--alerte); }

@media (max-width: 760px) {
  .tb-vp { height: calc(100dvh - 150px); min-height: 480px; border-radius: 22px; }
  .tb-haut { left: 10px; right: 10px; top: 10px; }
  .tb-btn span { font-size: 13px; }
  .tb-dock { left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 52%; }
  .tb-aide { display: none; }
}
@media (prefers-reduced-motion: reduce) { .nd-carte, .nd { transition: none; } }

/* ---------- Lecture : bouton Tableau et pied de section « Pour continuer » ---------- */
.wd .tl--tableau { display: inline-flex; align-items: center; text-decoration: none; }
.wd .suite { margin: 26px 0 8px; padding: 18px 20px; border-radius: var(--r-carte); background: var(--verre); border: 1px solid var(--verre-bord); }
.wd .suite-t { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rose-txt); margin: 0 0 10px; }
.wd .suite-t--ent { margin-top: 16px; color: var(--ardoise); }
.wd .suite-l { display: flex; flex-wrap: wrap; gap: 8px; }
.wd .suite-lien { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; font-weight: 500; background: var(--verre-fort); border: 1px solid var(--verre-bord); color: var(--encre); }
.wd .suite-lien:hover { border-color: var(--accent); }
.wd .suite-lien:not(.suite-lien--ent) { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 72%, var(--rose-txt))); color: var(--sur-accent); border-color: transparent; }
.wd .suite-sens { font-weight: 700; }
.wd .suite-tab { margin-top: 14px; font-size: 13.5px; color: var(--ardoise); }
.wd .suite-tab a { text-underline-offset: 0.2em; }
.tb-ouvrir { gap: 10px; }

/* Petit écran : à l'échelle « ensemble », les étiquettes se réduisent à leur numéro pour ne pas se chevaucher. */
@media (max-width: 600px) {
  .nd-far { gap: 0; padding: 5px; transform: translate(-50%, 0) scale(calc(0.75 / var(--k))); }
  .nd-far:has(.nd-num) .nd-farTitre { display: none; }
  .nd--note .nd-far { max-width: 62px; padding: 5px 9px; }
  .nd--note .nd-farTitre { -webkit-line-clamp: 1; font-size: 12px; }
}
@media (max-width: 600px) { .s-far .tb-grp-t { transform: scale(calc(0.5 / var(--k))); } }

/* Fusion en dézoomant : les cartes et les fils s'effacent, chaque ensemble devient une bulle (nombre et titre). */
.tb-grp-bulle {
  position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 280px; text-align: center;
  transform: translate(-50%, -50%) scale(calc(1 / var(--k))); opacity: 0; pointer-events: none; transition: opacity 280ms ease; cursor: pointer;
}
.gb-n { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: var(--accent); color: var(--sur-accent); font: 500 36px / 1 var(--editorial, var(--sans)); }
.gb-t { font: 560 19px / 1.15 var(--sans); letter-spacing: -0.02em; color: var(--encre); }
.s-merge .tb-grp-bulle { opacity: 1; pointer-events: auto; }
.s-merge .tb-grp-t { opacity: 0; }
.tb-vp .nd, .tb-vp .tb-fils { transition: opacity 280ms ease; }
.s-merge .nd, .s-merge .tb-fils { opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) { .tb-grp-bulle, .tb-vp .nd, .tb-vp .tb-fils { transition: none; } }

/* Très loin : une seule bulle « Théorie ». */
.tb-grp-bulle--tout .gb-n { width: 112px; height: 112px; font-size: 46px; }
.tb-grp-bulle--tout .gb-t { font-size: 26px; }
.tb-grp { transition: border-color 280ms ease, background-color 280ms ease; }
.s-merge2 .tb-grp { border-color: transparent; background: transparent; }
.s-merge2 .tb-grp-bulle:not(.tb-grp-bulle--tout) { opacity: 0; pointer-events: none; }
.s-merge2 .tb-grp-bulle--tout { opacity: 1; pointer-events: auto; }
.s-merge:not(.s-merge2) .tb-grp-bulle--tout { opacity: 0; pointer-events: none; }

/* Volet déplaçable et fermable. */
.dk-poignee { width: 44px; height: 4px; margin: -8px auto 12px; border-radius: 2px; background: var(--contour); opacity: 0.55; cursor: grab; touch-action: none; box-sizing: content-box; border-top: 8px solid transparent; border-bottom: 8px solid transparent; background-clip: content-box; }
.dk-kicker, .dk-titre { cursor: grab; touch-action: none; }
.tb-dock.deplace { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.tb-dock.deplace .dk-poignee, .tb-dock.deplace .dk-kicker, .tb-dock.deplace .dk-titre { cursor: grabbing; }
.dk-fermer { z-index: 2; background: color-mix(in srgb, var(--encre) 6%, transparent); }