/* ========================= TABLEAUX : CELLULES FUSIONNÉES Posé par MergeTable.js par-dessus le greffon Table d'Editor.js. La feuille sert dans les deux pages : l'éditeur (fond clair) et le panneau de détails (fond sombre). ========================= */ /* EN LARGEUR Une ligne du greffon est une grille dont le nombre de colonnes suit le nombre de cases affichées. Une case absorbée doit donc sortir de la grille — `display: none` et pas `visibility`, sinon elle garderait sa piste et la ligne aurait une colonne de trop. Son contenu, lui, reste dans le DOM : séparer la fusion le fait réapparaître tel quel. */ .tc-cell--merged-away { display: none; } /* La case fusionnée porte le trait de droite pour tout ce qu'elle recouvre : sans cela, la ligne semblait s'arrêter à la largeur d'une seule colonne. Sélecteur doublé ici et plus bas : le greffon injecte sa feuille dans au chargement de son script, donc après ce fichier. À spécificité égale, c'est lui qui l'emporterait. */ .tc-cell.tc-cell--merged { border-right: 1px solid var(--color-border, #e8e8eb); } /* EN HAUTEUR Il n'existe pas de grille commune aux lignes : une case ne peut pas descendre dans la suivante. Un bloc haut est donc dessiné à l'envers — les cases du dessous gardent leur place (sinon leur ligne perdrait une colonne) mais s'effacent, et les traits horizontaux que le bloc franchit sont retirés. */ .tc-cell--merged-under { visibility: hidden; position: relative; } /* `visibility` emporte aussi les traits de la case. Celui de droite doit pourtant descendre le long du bloc : il est redessiné ici, et rendu visible à nouveau — la propriété s'hérite, donc elle se rétablit. */ .tc-cell--merged-under::after, .tc-row--merged-split > .tc-cell--merged-under::after { content: ""; visibility: visible; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; background: var(--color-border, #e8e8eb); } /* Le trait du bas appartient à la ligne entière : il traverserait le bloc de part en part. La ligne cesse donc de le peindre — `transparent` et non `none`, pour ne pas décaler la hauteur — et ses cases le peignent chacune pour soi. En `::after` posé hors flux, pas en `border-bottom` : une bordure de plus rallongerait chaque case d'un pixel, et tout le tableau sauterait à la première fusion. */ .tc-row.tc-row--merged-split { border-bottom-color: transparent; } .tc-row--merged-split > .tc-cell { position: relative; } .tc-row--merged-split > .tc-cell::after { content: ""; position: absolute; left: 0; right: -1px; bottom: -1px; height: 1px; background: var(--color-border, #e8e8eb); } /* la case du bloc, elle, laisse le passage ouvert */ .tc-row--merged-split > .tc-cell--merged::after { display: none; } /* ========================= BARRE DE FUSION (édition seulement) ========================= */ .table-merge-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .table-merge-btn { padding: 6px 12px; border: 1px solid var(--border-strong, rgba(148, 163, 184, 0.5)); border-radius: 999px; background: transparent; color: inherit; font-family: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .table-merge-btn:hover:not(:disabled) { background: rgba(37, 99, 235, 0.12); border-color: #2563eb; } /* Désactivé plutôt que masqué : le bouton garde sa place, et son état dit pourquoi il ne se passe rien — dernière colonne à droite, ou case qui n'est pas une fusion. */ .table-merge-btn:disabled { opacity: 0.45; cursor: not-allowed; } .table-merge-hint { font-size: 12px; line-height: 1.45; opacity: 0.7; }