/* fonctions/tableau/tableau.css — tableau kanban : listes et cartes
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* ==================== TABLEAU KANBAN ==================== */
 .board-wrap{flex:1; overflow:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch;}
 .board-wrap.hidden{display:none;}
 /* Déplacement du tableau au clic droit glissé : main fermée partout, pas de sélection de texte. */
 html.board-panning,html.board-panning *{cursor:grabbing !important;user-select:none !important;}
 .board{position:relative; min-width:100%; min-height:100%; box-sizing:border-box; padding:calc(10.5px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor));}
 .list{
 position:absolute; left:0; top:0;
 background:var(--surface); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:var(--list-radius);
 width:var(--list-width); flex-shrink:0; max-height:100%; display:flex; flex-direction:column;
 overflow:hidden;
 cursor:grab;
 box-shadow:0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,var(--list-shadow-opacity));
 /* Les listes restent toujours au-dessus des liaisons qui les croisent. */
 z-index:30;
 }
 .list.link-source{outline:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);outline-offset:calc(1.5px * var(--ui-scale-factor));}
 .list.group-selected{outline:calc(1.5px * var(--ui-scale-factor)) solid rgba(255,255,255,.88);outline-offset:0;box-shadow:0 calc(7.5px * var(--ui-scale-factor)) calc(22.5px * var(--ui-scale-factor)) rgba(0,0,0,var(--list-shadow-opacity));}
 .group-selection-box{position:fixed;z-index:10000;border:calc(1.125px * var(--ui-scale-factor)) solid rgba(255,255,255,.92);background:rgba(255,255,255,.10);box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) rgba(255,255,255,.08) inset,0 0 calc(10.5px * var(--ui-scale-factor)) rgba(255,255,255,.08);pointer-events:none;border-radius:calc(3.75px * var(--ui-scale-factor));}
 .board-workspaces{display:flex;align-items:center;gap:calc(3.75px * var(--ui-scale-factor));margin-left:calc(1.5px * var(--ui-scale-factor));padding:calc(2.25px * var(--ui-scale-factor)) calc(3.75px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-radius:calc(749.25px * var(--ui-scale-factor));background:rgba(0,0,0,.12);}
 .board-workspace-btn{width:calc(18px * var(--ui-scale-factor));height:calc(18px * var(--ui-scale-factor));border:0;border-radius:50%;background:transparent;color:var(--text-faint);font:600 calc(8px * var(--ui-scale-factor))/calc(18px * var(--ui-scale-factor)) system-ui;cursor:pointer;padding:0;transition:background .16s ease,color .16s ease,transform .16s ease;}
 .board-workspace-btn:hover{background:rgba(255,255,255,.08);color:var(--text);transform:scale(1.06);}
 .board-workspace-btn.active{background:var(--accent);color:#fff;box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) color-mix(in srgb,var(--accent) 22%,transparent);}
 .overview-toggle-btn{height:calc(18px * var(--ui-scale-factor));border:0;border-left:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.12);margin-left:calc(1.5px * var(--ui-scale-factor));padding:0 calc(4.5px * var(--ui-scale-factor)) 0 calc(6px * var(--ui-scale-factor));background:transparent;color:var(--text-faint);display:flex;align-items:center;gap:calc(4.5px * var(--ui-scale-factor));font:600 calc(8px * var(--ui-scale-factor))/1 system-ui;cursor:pointer;transition:color .16s ease,opacity .16s ease;}
 .overview-toggle-btn:hover{color:var(--text);}
 .overview-toggle-icon{width:calc(10.5px * var(--ui-scale-factor));height:calc(10.5px * var(--ui-scale-factor));display:grid;grid-template-columns:repeat(2,calc(3.75px * var(--ui-scale-factor)));grid-template-rows:repeat(2,calc(3.75px * var(--ui-scale-factor)));gap:calc(1.5px * var(--ui-scale-factor));}
 .overview-toggle-icon i{display:block;border:calc(1px * var(--ui-scale-factor)) solid currentColor;border-radius:calc(1.125px * var(--ui-scale-factor));}
 @media (max-width:1180px){.overview-toggle-btn .overview-toggle-label{display:none}.overview-toggle-btn{padding-right:calc(4px * var(--ui-scale-factor));}}
 /* Changement de tableau façon bureau virtuel : aucun fondu ni flou,
 le tableau entier traverse réellement l'écran horizontalement. */
 /* Changement de tableau : seul le contenu (listes + flèches) glisse.
 Le fond reste attaché à #boardView et demeure parfaitement fixe. */
 #boardView{overflow:auto;}
 #boardRow.workspace-switching{pointer-events:none;will-change:transform;}
 .workspace-switching.workspace-out-left{animation:workspaceOutLeft .17s cubic-bezier(.4,0,.6,1) both;}
 .workspace-switching.workspace-out-right{animation:workspaceOutRight .17s cubic-bezier(.4,0,.6,1) both;}
 .workspace-switching.workspace-in-left{animation:workspaceInLeft .21s cubic-bezier(.22,1,.36,1) both;}
 .workspace-switching.workspace-in-right{animation:workspaceInRight .21s cubic-bezier(.22,1,.36,1) both;}
 @keyframes workspaceOutLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
 @keyframes workspaceOutRight{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}
 @keyframes workspaceInLeft{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(0,0,0)}}
 @keyframes workspaceInRight{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}
 @media (prefers-reduced-motion:reduce){#boardRow.workspace-switching{animation-duration:.01ms!important}}
 .connections-layer{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none;overflow:visible;}
 /* Wobbly : aucune couche technique supplémentaire ; seule la surface déplacée est composée. */
 .wobble-source-hidden{opacity:0!important;}

 .connection-path{fill:none;stroke:var(--connection-color,#ffffff);opacity:.62;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;pointer-events:none;}
 .connection-hit{fill:none;stroke:transparent;stroke-width:11;stroke-linejoin:round;stroke-linecap:round;pointer-events:stroke;cursor:pointer;}
 .connection-path:hover{opacity:.9;stroke-width:2.5;}
 /* Les points d'ancrage restent déplaçables mais sont volontairement invisibles. */
 .connection-anchor{fill:transparent;stroke:transparent;stroke-width:12;pointer-events:all;cursor:move;}
 .connection-anchor:hover{stroke:rgba(255,255,255,.08);}
 .list-color-strip{height:calc(3px * var(--ui-scale-factor)); width:100%; flex-shrink:0; cursor:grab;}
 /* Poignée pleine largeur : le survol reprend la couleur propre à la liste.
 Les points ne capturent pas le pointeur : toute la bande reste saisissable. */
 /* Voile noir latéral léger, conservé au repos, au survol et pendant le déplacement. */
 /* Poignée visuelle retirée : la zone de déplacement reste active mais discrète. */
 .list-drag-handle{height:0;min-height:0;width:100%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;color:transparent;cursor:grab;user-select:none;touch-action:none;}
 .list-drag-handle:hover{background:transparent;color:transparent;}
 .list-drag-handle:active,.drag-floating .list-drag-handle{cursor:grabbing;background:transparent;color:transparent;}
 .list-drag-grip{display:none;}
 .list-head{
 display:flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); flex-shrink:0; cursor:grab;
 justify-content:center;
 padding:calc(2.25px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor));
 background:linear-gradient(180deg,color-mix(in srgb,var(--list-handle-color,#7d8494) calc(var(--list-title-fx) * 16%),transparent) 0%,color-mix(in srgb,var(--list-handle-color,#7d8494) calc(var(--list-title-fx) * 4%),transparent) 70%,transparent 100%);
 position:relative;
 }
 .list-title-input{
 flex:1; background:transparent; border:none; font-weight:700; font-size:var(--list-title-size); color:var(--text); min-width:0; width:100%;
 white-space:pre-wrap; overflow-wrap:anywhere;
 resize:none; overflow:hidden; font-family:inherit; display:block;
 text-align:center;
 letter-spacing:.015em;
 padding:0 calc(6px * var(--ui-scale-factor));
 line-height:1.06;
 transition:background-color .15s ease,box-shadow .15s ease;
 border-radius:calc(4.5px * var(--ui-scale-factor));
 }
 .list-title-input:focus{outline:none;background:color-mix(in srgb,var(--list-handle-color,#7d8494) calc(var(--list-title-fx) * 14%),var(--surface-2));box-shadow:0 0 0 calc(1px * var(--ui-scale-factor)) color-mix(in srgb,var(--list-handle-color,#7d8494) calc(var(--list-title-fx) * 60%),transparent);}
 .list-menu-btn{background:none;border:none;color:var(--text-faint); font-size:calc(12px * var(--ui-scale-factor)); padding:calc(3px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)); border-radius:calc(3.75px * var(--ui-scale-factor)); line-height:1;}
 .list-menu-btn:hover{background:var(--surface-2); color:var(--text);}
 .list-cards{
 flex:1; overflow-y:auto; overflow-x:hidden; padding:calc(1.5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)); touch-action:pan-y;
 display:flex; flex-direction:column; gap:var(--card-gap); min-height:calc(9px * var(--ui-scale-factor)); cursor:grab;
 }
 .card{
 background:var(--surface-2); border:var(--card-border-width) solid var(--card-border-color); border-radius:var(--card-radius);
 padding:calc(6.75px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)) calc(7.5px * var(--ui-scale-factor)); cursor:grab; position:relative; user-select:none;
 -webkit-user-select:none; touch-action:pan-y;
 transition:border-color .12s ease, box-shadow .16s ease;
 }
 /* Carte avec description : un peu de place en bas pour la petite flèche qui l'annonce. */
 .card.has-desc{padding-bottom:calc(12px * var(--ui-scale-factor));}
 /* Flèche « description » : SEUL moyen de déplier / replier la description (un clic ailleurs sur
    la carte ne fait rien). Bouton centré en bas, zone de clic plus large que le dessin ; la
    flèche (deux bords d'un carré tourné, en ::before) pointe vers le haut une fois dépliée.
    Dessin discret (4,5 px, trait de 1,6 px), teinte --text-dim au repos, --text au survol ;
    la zone de clic reste de 30 × 12 px. */
 .card-desc-toggle{
 position:absolute; left:50%; bottom:0; transform:translateX(-50%);
 width:calc(30px * var(--ui-scale-factor)); height:calc(12px * var(--ui-scale-factor)); padding:0; margin:0;
 border:0; border-radius:calc(4px * var(--ui-scale-factor)) calc(4px * var(--ui-scale-factor)) 0 0; background:transparent; cursor:pointer;
 transition:background-color .12s ease;
 }
 .card-desc-toggle::before{
 content:''; position:absolute; left:50%; top:calc(2.5px * var(--ui-scale-factor));
 width:calc(4.5px * var(--ui-scale-factor)); height:calc(4.5px * var(--ui-scale-factor));
 border-right:calc(1.6px * var(--ui-scale-factor)) solid var(--text-dim); border-bottom:calc(1.6px * var(--ui-scale-factor)) solid var(--text-dim);
 transform:translateX(-50%) rotate(45deg); transition:border-color .12s ease;
 }
 .card-desc-toggle:hover,.card-desc-toggle:focus-visible{background:rgba(255,255,255,.07); outline:none;}
 .card-desc-toggle:hover::before,.card-desc-toggle:focus-visible::before{border-color:var(--text);}
 .card.desc-open .card-desc-toggle::before{top:calc(4.5px * var(--ui-scale-factor)); transform:translateX(-50%) rotate(225deg);}
 .card:hover{border-color:var(--card-border-color); box-shadow:0 calc(3.75px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor)) rgba(0,0,0,var(--card-shadow-opacity)); z-index:4;}
 /* Mode focus de la recherche : les cartes non correspondantes restent visibles
 pour conserver le contexte, mais s'assombrissent nettement. */
 .card.search-dim{filter:brightness(.42);opacity:.46;}
 .card.search-dim:hover{filter:brightness(.52);opacity:.58;}
 /* Recherche : liseré fixe autour de la carte trouvée, dans sa couleur (blanc si elle n'en a
    pas), sans animation ni halo ; posé à l'extérieur pour ne pas décaler le contenu. */
 .card.search-match::before{
 content:''; position:absolute; inset:calc(-2.25px * var(--ui-scale-factor));
 border-radius:calc(var(--card-radius) + calc(2.25px * var(--ui-scale-factor)));
 border:calc(1.5px * var(--ui-scale-factor)) solid var(--card-ring-color,#fff);
 pointer-events:none; z-index:5;
 }
 .card.dragging{opacity:0; }
 /* Menu « Déplacer vers » (voir flyCardTo) : la carte reste masquée pendant le vol de son
    clone ; .card-flight-slot est l'espace qui se referme à sa place d'origine. */
 .card.is-in-flight{visibility:hidden;}
 .card-flight-slot{flex:0 0 auto; pointer-events:none;}
 .drag-floating.card-flight{will-change:transform,opacity;}
 /* L'inclinaison décorative concerne seulement les cartes déplacées.
 Les listes et leurs flèches reviennent parfaitement droites au repos. */
 /* border-radius : le fantôme garde l'arrondi réglé des cartes (--card-radius), sinon le
    border-radius générique de .drag-floating (4,5 px), écrit plus bas, le remplaçait. */
 .drag-floating.card{border-radius:var(--card-radius);box-shadow:0 calc(9px * var(--ui-scale-factor)) calc(21px * var(--ui-scale-factor)) rgba(0,0,0,var(--card-shadow-opacity)),0 calc(1.5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) rgba(0,0,0,var(--card-shadow-opacity));transform:rotate(1.5deg);}
 /* Suppressions animées (Paper Crumple / Hyper Jump Warp) : pilotées en JavaScript (Web Animations). */
 .card.removing, .list.removing{pointer-events:none;}
 .list.removing{z-index:60;}
 /* Pendant le bond d'une liste supprimée, l'agrandissement ne doit pas étendre la zone
    de défilement du tableau (aucune barre qui apparaît puis disparaît). */
 #boardRow.list-warping{overflow:clip;}
 /* Barre de couleur de la carte : volontairement plus courte et centrée
 pour bien la différencier visuellement du bandeau d'une liste. */
 /* Couleur de la carte : bande verticale le long du bord gauche, sur toute la hauteur. C'est la
    bordure gauche d'une boîte qui couvre tout l'intérieur de la carte avec le même arrondi
    (rayon intérieur = arrondi − liseré) : elle suit exactement la courbe des coins, quel que soit
    le réglage « Arrondi des cartes » (droite à 0, effilée dans les coins s'ils sont arrondis).
    Couleur : --card-bar-color, posée par buildCardEl. Aucune hauteur prise ; la marge intérieure
    gauche s'élargit de sa largeur pour que le contenu ne la touche pas. */
 .card-color-bar{position:absolute; inset:0; pointer-events:none; box-sizing:border-box;
 border-left:calc(4px * var(--ui-scale-factor)) solid var(--card-bar-color,transparent);
 border-radius:max(0px, calc(var(--card-radius) - var(--card-border-width)));}
 .card.has-color{padding-left:calc(11px * var(--ui-scale-factor));}
 .card-labels{display:flex; flex-wrap:wrap; gap:calc(3px * var(--ui-scale-factor)); margin-bottom:calc(4.5px * var(--ui-scale-factor));}
 .card-label-pill{
 font-size:calc(8px * var(--ui-scale-factor)); font-weight:700; padding:calc(1.5px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor)); border-radius:calc(3px * var(--ui-scale-factor)); color:#12141a;
 letter-spacing:.01em;
 }
 .card-title{font-size:var(--card-font-size); line-height:1.4; color:var(--text); word-break:break-word; overflow-wrap:anywhere;}
 /* Carte sans titre (titre facultatif) : aucune ligne réservée, une carte peut n'être faite que
    d'étiquettes ; la rangée d'étiquettes perd alors sa marge basse (padding haut = padding bas). */
 .card-title:empty{display:none;}
 .card-labels:has(+ .card-title:empty){margin-bottom:0;}
 .card-due{
 display:inline-flex; align-items:center; gap:calc(3px * var(--ui-scale-factor)); font-size:calc(8px * var(--ui-scale-factor)); font-weight:600;
 color:var(--text-dim); background:var(--surface-3); padding:calc(2.25px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor)); border-radius:calc(3.75px * var(--ui-scale-factor));
 }
 .card-due.overdue{color:#ffb4ac; background:rgba(217,88,79,.16);}
 .card-due.today{color:#ffd792; background:rgba(217,182,78,.16);}
 .card-description-inline{
 margin-top:calc(5.25px * var(--ui-scale-factor)); padding:calc(6px * var(--ui-scale-factor)) calc(6.75px * var(--ui-scale-factor)); border-top:calc(1px * var(--ui-scale-factor)) solid var(--border); color:var(--text-dim);
 font-size:calc(9px * var(--ui-scale-factor)); line-height:1.45; overflow-wrap:anywhere; user-select:text;
 white-space:normal;
 }
 .card-description-editor{
 display:block;width:100%;min-height:calc(31.5px * var(--ui-scale-factor));margin:0;padding:0;border:0;outline:0;resize:none;
 background:transparent;color:var(--text-dim);font:inherit;line-height:1.45;overflow:hidden;
 }
 .card-description-editor:focus{color:var(--text);}
 .list .description-rich-editor,.list .description-rich-editor *{cursor:text;}
 .description-rich-editor{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.5;}
 .description-editor-field{min-height:calc(90px * var(--ui-scale-factor));max-height:45vh;overflow:auto;padding:calc(7.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(4.5px * var(--ui-scale-factor));background:var(--surface);color:var(--text);outline:none;}
 .description-editor-field:focus{border-color:var(--accent);}
 .description-editor-field:empty::before{content:attr(data-placeholder);color:var(--text-faint);pointer-events:none;}
 .description-rich-editor b,.description-rich-editor strong{font-weight:700;}
 .description-rich-editor i,.description-rich-editor em{font-style:italic;}
 .description-rich-editor u{text-decoration:underline;}
 .description-rich-editor ul,.description-rich-editor ol{padding-left:calc(18px * var(--ui-scale-factor));margin:calc(3px * var(--ui-scale-factor)) 0;}
 .desc-format-btn[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);}
 .required-title-wrap{position:relative;min-width:0;width:100%;}
 .required-title-wrap textarea,.required-title-wrap input[type=text]{display:block;width:100%;box-sizing:border-box;}
 .desc-format-toolbar{display:flex;gap:calc(3.75px * var(--ui-scale-factor));margin-top:calc(4.5px * var(--ui-scale-factor));}
 .desc-format-btn{min-width:calc(22.5px * var(--ui-scale-factor));height:calc(21px * var(--ui-scale-factor));padding:0 calc(5.25px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(3.75px * var(--ui-scale-factor));background:var(--surface-3);color:var(--text);cursor:pointer;font-size:calc(9px * var(--ui-scale-factor));}
 .desc-format-btn:hover{border-color:var(--accent);background:var(--surface-2);}
 /* Pied de carte : seule l'échéance y reste (plus aucun bouton ; actions au clic droit). */
 .card-meta{display:flex; align-items:center; margin-top:calc(4.5px * var(--ui-scale-factor));}
 /* Emplacement visuel conservé pendant le déplacement d'une carte. */
 /* border-radius : même arrondi que la carte soulevée (réglage « Arrondi des cartes »). */
 .placeholder-card{
 border:calc(1.5px * var(--ui-scale-factor)) dashed var(--accent); border-radius:var(--card-radius); background:rgba(95,179,163,.08);
 box-sizing:border-box; flex:0 0 auto; width:100%; min-height:calc(18px * var(--ui-scale-factor));
 pointer-events:none; opacity:1; visibility:visible;
 }
 .drag-floating{
 position:fixed; z-index:500; pointer-events:none;
 transform:none; border-radius:calc(4.5px * var(--ui-scale-factor)); opacity:.98;
 filter:var(--drag-ghost-filter,none);
 }
 /* Le fantôme garde l’arrondi réglé pour les listes ; les 6 px génériques
    provoquaient un changement de forme pendant le geste, annulé au dépôt. */
 .drag-floating.list{border-radius:var(--list-radius);opacity:1;}
 .list-add-card-wrap{ flex-shrink:0;padding:calc(4.5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));display:flex;align-items:center;gap:calc(4.5px * var(--ui-scale-factor));}
 .list-add-card-btn{ text-align:left; background:none; border:none; color:var(--text-dim);
 font-size:calc(10px * var(--ui-scale-factor)); font-weight:600; padding:calc(5.25px * var(--ui-scale-factor)) calc(4.5px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor));
 flex:1;
 width:auto;
 }
 .list-add-card-btn:hover{background:var(--surface-2); color:var(--text);}
 .empty-board-hint{
 color:#fff; font-size:calc(10px * var(--ui-scale-factor)); padding:calc(30px * var(--ui-scale-factor)) calc(15px * var(--ui-scale-factor)); text-align:center; width:100%;
 }