/* ===== COULEURS : modifie ici pour changer tout le site ===== */
:root{
  --bg:#f3f3f1;      /* fond du tableau */
  --dot:#d4d4cf;     /* points de la grille */
  --pn:#ffffff;      /* panneaux, tableaux, menus */
  --tx:#1f2430;      /* texte */
  --mu:#6a7080;      /* texte secondaire */
  --bd:#e6e6e1;      /* bordures */
  --ac:#4262ff;      /* couleur d'accent (sélection, boutons) */
  --acs:#e9edff;     /* accent clair */
  --hov:#f3f3f0;     /* survol */
  --sh:0 2px 12px rgba(20,24,40,.10);
  color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#1b1c21;--dot:#33353d;--pn:#262830;--tx:#ececf1;--mu:#9a9eab;--bd:#383b45;--ac:#7f93ff;--acs:#31365a;--hov:#30323b;--sh:0 2px 12px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#1b1c21;--dot:#33353d;--pn:#262830;--tx:#ececf1;--mu:#9a9eab;--bd:#383b45;--ac:#7f93ff;--acs:#31365a;--hov:#30323b;--sh:0 2px 12px rgba(0,0,0,.4);color-scheme:dark}

/* Pas de sélection de texte « grande zone » sur le site, sauf là où on écrit */
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.ed[contenteditable="true"],.ed[contenteditable="true"] *,input,textarea{-webkit-user-select:text;user-select:text}
img{-webkit-user-drag:none}

html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{height:100%;margin:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);color:var(--tx);font:14px/1.4 "Segoe UI","Avenir Next",system-ui,sans-serif}
button{font:inherit;color:inherit;background:var(--pn);border:1px solid var(--bd);border-radius:8px;padding:6px 11px;cursor:pointer}
button:hover{background:var(--hov)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--ac);outline-offset:1px}
header{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--pn);border-bottom:1px solid var(--bd);overflow-x:auto;white-space:nowrap}
header b{font:700 17px Georgia,"Times New Roman",serif;margin-right:4px}
#title{font:inherit;font-weight:600;background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 9px;color:var(--tx);min-width:120px;width:200px}
#title:hover{border-color:var(--bd)}
.sp{flex:1}
#zl{min-width:42px;text-align:center;color:var(--mu)}

#view{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab;background-image:radial-gradient(var(--dot) 1.2px,transparent 1.4px);background-size:24px 24px}
#view.pan{cursor:grabbing}
#world{position:absolute;left:0;top:0;transform-origin:0 0}

#tools{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:stretch;gap:2px;background:var(--pn);border:1px solid var(--bd);border-radius:18px;padding:7px;z-index:5;box-shadow:var(--sh)}
#tools button{position:relative;border:0;width:56px;padding:9px 0 7px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.01em;color:var(--mu);background:transparent;transition:background .12s,color .12s,transform .12s}
#tools button svg{width:23px;height:23px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--tx);transition:color .12s,transform .12s}
#tools button:hover{background:var(--hov);color:var(--tx)}
#tools button:hover svg{transform:translateY(-1px)}
#tools button:active{transform:scale(.95)}
#tools button.on{background:var(--acs);color:var(--ac)}#tools button.on svg{color:var(--ac)}
#tools button.on::before{content:"";position:absolute;left:-7px;top:50%;width:3px;height:22px;margin-top:-11px;border-radius:0 3px 3px 0;background:var(--ac)}
#tools .tsp{display:block;height:1px;margin:4px 9px;background:var(--bd)}

.it{position:absolute}
.it:not(.table){cursor:move}
.it.editing .ed{cursor:text}
.bar{display:none;position:absolute;left:0;top:-34px;height:28px;align-items:center;gap:2px;background:var(--pn);border-radius:8px;padding:0 4px;white-space:nowrap;z-index:6;font-size:12px;box-shadow:var(--sh)}
.it:hover>.bar,.it.sel>.bar{display:flex}
.it.editing>.bar{display:none}
.bar button{border:0;padding:2px 7px;background:transparent;font-size:13px}
.grip{cursor:move;padding:2px 6px;color:var(--mu);user-select:none}
.it.sel{outline:2px solid var(--ac)}
.multi .it.sel>.bar,.multi .it>.h{display:none!important}
.it.lk>.h{display:none!important}
.it.lk{cursor:default!important}
.it.lk::after{content:"🔒";position:absolute;right:-9px;top:-9px;font-size:12px;background:var(--pn);border-radius:50%;padding:3px;box-shadow:var(--sh);z-index:6;line-height:1}
.sw{display:inline-block;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.2);vertical-align:middle;box-sizing:border-box}
.nn{background:linear-gradient(to top right,transparent calc(50% - 1px),#888 50%,transparent calc(50% + 1px)),#fff}

/* Poignées : on peut redimensionner depuis n'importe quel bord ou coin */
.h{display:none;position:absolute;z-index:4}
.it:hover>.h,.it.sel>.h{display:block}
.it.editing>.h{display:none}
.h.cn{width:calc(14px*var(--iz,1));height:calc(14px*var(--iz,1));transform:translate(-50%,-50%);z-index:5;box-sizing:border-box}
.it.sel>.h.cn{background:#fff;border:calc(2px*var(--iz,1)) solid var(--ac);border-radius:calc(4px*var(--iz,1))}
.h.nw{left:0;top:0;cursor:nwse-resize}.h.ne{left:100%;top:0;cursor:nesw-resize}
.h.se{left:100%;top:100%;cursor:nwse-resize}.h.sw{left:0;top:100%;cursor:nesw-resize}
.h.eg.n,.h.eg.s{left:0;right:0;height:calc(12px*var(--iz,1));cursor:ns-resize}
.h.eg.n{top:calc(-6px*var(--iz,1))}.h.eg.s{bottom:calc(-6px*var(--iz,1))}
.h.eg.e,.h.eg.w{top:0;bottom:0;width:calc(12px*var(--iz,1));cursor:ew-resize}
.h.eg.e{right:calc(-6px*var(--iz,1))}.h.eg.w{left:calc(-6px*var(--iz,1))}

.ed{outline:none;white-space:pre-wrap;word-break:break-word;min-height:1.3em}
.text .ed{font-size:22px;padding:6px 8px}
.text:hover:not(.sel){outline:1px dashed var(--bd)}
.sticky{box-shadow:0 4px 12px rgba(20,24,40,.16);border-radius:3px}
.sticky .ed{height:100%;padding:14px;font:17px/1.4 "Segoe UI",system-ui,sans-serif;overflow:hidden;box-sizing:border-box}
.sticky.editing .ed{overflow:auto}
.shape{border:1px solid rgba(20,24,40,.14);border-radius:14px}
.shape .ed{padding:12px 16px;font-weight:700;font-size:18px}
.image img{width:100%;height:100%;display:block;border-radius:4px;pointer-events:none;box-shadow:var(--sh)}

/* Tableau */
.tw{background:var(--pn);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.table table{border-collapse:collapse;width:100%}
.table th{font-weight:600;font-size:13px;color:var(--mu);text-align:left;padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--bd);cursor:default}
.table th:not(.rn):not(.pl):hover{background:var(--hov)}
.table th .ti{margin-right:8px;opacity:.85}
.table td{padding:0 14px;height:48px;border-bottom:1px solid var(--bd);vertical-align:middle;min-width:90px;color:var(--tx)}
.table th.rn,.table td.rn{width:34px;min-width:0;padding:0 4px 0 12px;text-align:center;color:var(--mu);font-size:13px}
.table td.rn:hover{background:var(--hov)}
.table th.pl,.table td.pl{width:44px;min-width:0;padding:0 6px;text-align:center}
.table td .ed{padding:4px 0}
.table td img{display:block;max-width:100%;max-height:120px;margin:6px 0;border-radius:6px}
.table td input[type=checkbox]{width:18px;height:18px;accent-color:var(--ac)}
.table td input[type=date],.table td input[type=number]{font:inherit;background:transparent;color:var(--tx);border:0;width:100%;padding:6px 0}
.table td.c-text{cursor:text}.table td.c-cat{cursor:pointer}.table td.c-cat:hover{background:var(--hov)}
.ph{display:inline-block;width:100%;min-height:22px}
.pill{display:inline-block;padding:3px 10px;border-radius:7px;font-size:13px;color:#222;white-space:nowrap}
.table td.ar{padding:0 10px;height:46px;border-bottom:0;text-align:left}
.pb{border:0;background:transparent;font-size:18px;line-height:1;padding:6px 10px;border-radius:8px;color:var(--tx)}
.add{border:1px dashed var(--bd);width:100%;font-size:12px;color:var(--mu);padding:6px}
.cnt{font-weight:400;color:var(--mu);font-size:11px}

/* Fichier PDF */
.file .card{background:var(--pn);border-radius:14px;box-shadow:var(--sh);padding:16px 14px 14px;text-align:center}
.ficon{width:52px;height:66px;margin:0 auto 10px;background:#6b7280;border-radius:6px;color:#fff;display:grid;place-items:center;font:800 13px "Segoe UI",sans-serif;position:relative;overflow:hidden}
.ficon::after{content:"";position:absolute;right:0;top:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent var(--pn) rgba(0,0,0,.25) transparent}
.fn[contenteditable="true"]{display:block;-webkit-line-clamp:unset}
.fn{font-weight:600;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fs{color:var(--mu);font-size:12px;margin:2px 0 10px}
.dlb{width:100%;background:var(--ac);color:#fff;border-color:var(--ac);font-weight:600}
.dlb:hover{background:var(--ac);filter:brightness(1.08)}

.ghost{position:absolute;border:2px dashed var(--ac);background:rgba(66,98,255,.08);pointer-events:none}
#toast{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:9px 15px;border-radius:10px;z-index:40;display:none}

/* Menu clic droit + fenêtres d'édition */
#ctx{position:fixed;z-index:30;background:var(--pn);border-radius:14px;box-shadow:0 8px 32px rgba(20,24,40,.22);padding:6px;min-width:230px;display:none;font-size:14px;max-height:calc(100vh - 16px);overflow:auto}
#ctx.pop{padding:16px;width:300px;box-sizing:border-box}
#ctx .mi{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;cursor:pointer}
#ctx .mi:hover{background:var(--hov)}
#ctx .mi i{width:18px;text-align:center;font-style:normal;color:var(--mu)}
#ctx .mi.dis{opacity:.4;pointer-events:none}
#ctx .mi .k{margin-left:auto;padding-left:28px;color:var(--mu);font-size:12px}
#ctx.wide{min-width:330px}
#ctx.palp{width:auto}
#ctx .pt{font-weight:600;font-size:14px;color:var(--tx)}
.pal{display:grid;grid-template-columns:repeat(5,34px);gap:12px;margin-top:12px}
.cs{width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.14);padding:0;display:grid;place-items:center;font-size:15px;cursor:pointer;box-sizing:border-box}
.cs.plus{background:var(--hov);position:relative;font-size:22px;color:var(--tx)}
.cs.plus input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;padding:0;border:0}
#ctx hr{border:0;border-top:1px solid var(--bd);margin:6px 4px}
#ctx h4{margin:0 0 6px;font-size:15px}
#ctx label{display:block;color:var(--mu);font-size:13px;margin:12px 0 6px}
#ctx .fi{width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--pn);color:var(--tx)}
#ctx .orow{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#ctx .dot{width:24px;height:24px;border-radius:50%;padding:0;border:1px solid rgba(0,0,0,.15);flex:none}
#ctx .ib{border:0;background:transparent;padding:4px 6px;color:var(--mu)}
#ctx .lnk{border:0;background:transparent;font-weight:600;padding:6px 0}
#ctx .acts{display:flex;gap:8px;margin-top:14px}
#ctx .pri{background:var(--ac);color:#fff;border-color:var(--ac)}
#ctx .opl{max-height:240px;overflow:auto;margin-top:10px}
#ctx .opi{padding:6px 8px;border-radius:9px;cursor:pointer}#ctx .opi:hover{background:var(--hov)}
#ctx .opi.none{color:var(--mu);padding:9px 8px}

dialog{background:var(--pn);color:var(--tx);border:0;border-radius:16px;width:min(560px,92vw);box-shadow:0 12px 40px rgba(20,24,40,.3)}
dialog::backdrop{background:rgba(20,24,40,.35)}
dialog textarea{width:100%;height:200px;box-sizing:border-box;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:10px;font:12px monospace;padding:8px}
@media(max-width:600px){#tools{top:auto;bottom:10px;left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;max-width:calc(100vw - 16px);overflow-x:auto;padding:5px}#tools button{width:48px;flex:none;padding:7px 0 6px}#tools button.on::before{left:50%;top:auto;bottom:-5px;margin:0 0 0 -11px;width:22px;height:3px;border-radius:3px 3px 0 0}#tools .tsp{width:1px;height:30px;margin:0 3px;flex:none}}

/* Guides d'alignement (pointillés) */
.gd{position:absolute;pointer-events:none;z-index:99999;--gc:#f24822}
.gd.v{width:0;border-left:calc(1.5px*var(--iz,1)) dashed var(--gc);transform:translateX(-50%)}
.gd.h{height:0;border-top:calc(1.5px*var(--iz,1)) dashed var(--gc);transform:translateY(-50%)}