.ss-grid { --fixed-w: 0px; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; }
.ss-grid__scroller { overflow: auto; max-height: calc(100vh - 250px); }
.ss-grid__table { border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 100%; }
.ss-grid th, .ss-grid td { height: var(--row-h); padding: 0 8px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); white-space: nowrap; vertical-align: middle; background: var(--surface); }
.ss-grid--compact th, .ss-grid--compact td { height: var(--row-h-compact); font-size: var(--fs-sm); padding: 0 6px; }
.ss-grid thead th { position: sticky; z-index: 5; font-size: var(--fs-xs); font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); }
.ss-grid thead tr:first-child th { top: 0; height: 30px; }
.ss-grid thead tr:last-child th { top: 30px; }
.ss-grid tfoot td { position: sticky; bottom: 0; z-index: 5; background: var(--surface-2); font-weight: 700; }
.ss-grid .ss-fixed { position: sticky; left: var(--left, 0); z-index: 3; }
.ss-grid thead .ss-fixed, .ss-grid tfoot .ss-fixed { z-index: 7; }
.ss-grid .ss-fixed--last { border-right: 2px solid var(--border-2); box-shadow: 4px 0 8px -4px rgba(28, 33, 64, 0.08); }
.ss-grid .ss-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Bandeau phases */
.ss-phase { text-align: center; padding: 0 !important; background: var(--cc-1) !important; color: var(--cc-text) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: var(--fs-sm) !important; position: relative; cursor: pointer; user-select: none; }
.ss-phase__in { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; padding: 0 8px; overflow: hidden; }
.ss-phase__in b { white-space: nowrap; }
.ss-phase__in small { font-weight: 500; opacity: 0.85; }
.ss-phase__poignee { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 6; }
.ss-phase__poignee:hover, .ss-phase__poignee--actif { background: var(--cc-3); }

/* En-têtes de colonnes */
.ss-col__in { display: flex; align-items: center; gap: 4px; }
.ss-col__in span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ss-eye { color: var(--text-3); opacity: 0; transition: opacity var(--t-fast); border-radius: var(--r-1); width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; }
th:hover .ss-eye, .ss-eye--off { opacity: 1; }
.ss-eye--off { color: var(--danger); }
.ss-col--masquee .ss-col__in span { text-decoration: line-through; color: var(--text-3); }
.ss-col__resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 8; }
.ss-grid thead th { position: sticky; }
.ss-grid thead th.ss-fixed { position: sticky; }
.ss-mois--courant { background: var(--primary-3) !important; color: var(--primary-4) !important; }

/* Lignes */
.ss-groupe td { background: var(--surface-2); font-weight: 700; height: 36px; }
.ss-groupe__in { display: flex; align-items: center; gap: 8px; }
.ss-groupe__dot { width: 10px; height: 10px; border-radius: 3px; background: var(--cc); flex-shrink: 0; }
.ss-groupe__lib { cursor: text; }
.ss-groupe__meta { font-weight: 500; color: var(--text-3); font-size: var(--fs-xs); }
.ss-groupe__actions { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast); }
.ss-groupe:hover .ss-groupe__actions { opacity: 1; }
.ss-groupe--replie + .ss-ligne, .ss-ligne--cachee { display: none; }
.ss-ligne--selection td { background: var(--primary-3); }
.ss-ligne:hover td.ss-fixed { background: var(--bg); }
.ss-grip { color: var(--text-3); cursor: grab; display: inline-flex; padding: 4px; }
.ss-grip:active { cursor: grabbing; }
.ss-ligne__field { display: block; width: 100%; height: 100%; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: text; border-radius: var(--r-1); }
.ss-ligne__field:hover { background: var(--bg); }
.ss-ligne__field--vide { color: var(--text-3); font-style: italic; }
.ss-ligne__dest { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.ss-ligne__dest small { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }
.ss-pu--perso::after { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warning); margin-left: 5px; vertical-align: middle; }
.ss-ajout td { color: var(--text-3); font-weight: 500; height: 32px; }
.ss-ajout button { color: var(--primary); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.ss-section td { background: var(--surface-3); font-weight: 700; color: var(--text-2); height: 32px; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.04em; }

/* Cellules */
.ss-cell { padding: 0 !important; text-align: center; cursor: cell; position: relative; }
.ss-cell[data-niveau="1"] { background: var(--cc-1); }
.ss-cell[data-niveau="2"] { background: var(--cc-2); }
.ss-cell[data-niveau="3"] { background: var(--cc-3); }
.ss-cell[data-niveau="4"] { background: var(--cc-4); }
.ss-cell:focus { outline: none; box-shadow: inset 0 0 0 2px var(--primary); z-index: 2; }
.ss-cell__in { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; line-height: 1.1; }
.ss-cell__q { font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-cell__b { font-size: 10px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ss-grid[data-affichage="quantite"] .ss-cell__b { display: none; }
.ss-grid[data-affichage="budget"] .ss-cell__q { display: none; }
.ss-grid[data-affichage="budget"] .ss-cell__b { font-size: var(--fs-sm); color: var(--text); font-weight: 600; }
.ss-cell[data-niveau="0"] .ss-cell__q, .ss-cell[data-niveau="0"] .ss-cell__b { visibility: hidden; }
.ss-cell__input { width: 100%; height: 100%; border: 0; text-align: center; font: inherit; font-weight: 700; background: var(--surface); outline: none; box-shadow: inset 0 0 0 2px var(--primary); -moz-appearance: textfield; }
.ss-cell__input::-webkit-outer-spin-button, .ss-cell__input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ss-cell--drag { opacity: 0.4; }
.ss-cell--cible { box-shadow: inset 0 0 0 2px var(--success); }
.ss-cell--suivi { cursor: pointer; }
.ss-cell__suivi { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.ss-cell[data-statut="ok"] { background: var(--success-bg); color: var(--success); }
.ss-cell[data-statut="partiel"] { background: var(--warning-bg); color: #b45309; }
.ss-cell[data-statut="manquant"] { background: var(--danger-bg); color: var(--danger); }
.ss-cell[data-statut="en-cours"] { background: var(--info-bg); color: var(--info); }
.ss-cell[data-statut="a-venir"] { color: var(--text-3); }
.ss-cell[data-statut="bonus"] { background: var(--primary-3); color: var(--primary-4); }

/* Totaux */
.ss-totaux td { font-variant-numeric: tabular-nums; }
.ss-totaux__b { display: block; font-weight: 700; }
.ss-totaux__l { display: block; font-size: 10px; color: var(--text-3); font-weight: 500; }

/* Drag & drop */
.ss-drag-ghost { position: fixed; z-index: 500; pointer-events: none; background: var(--surface); border: 1px solid var(--primary); border-radius: var(--r-2); box-shadow: var(--shadow-3); padding: 6px 10px; font-size: var(--fs-sm); font-weight: 600; opacity: 0.95; }
.ss-drop-ligne { position: relative; }
.ss-drop-ligne::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 4; }
.ss-drop-ligne--avant::after { top: -1px; }
.ss-drop-ligne--apres::after { bottom: -1px; }

/* Bulle de commentaire (vue client) */
.ss-bulle { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 6px; border-radius: var(--r-full); font-size: 10px; font-weight: 700; color: var(--primary-4); background: var(--primary-3); opacity: 0.85; flex-shrink: 0; }
.ss-bulle:hover { opacity: 1; }

/* Crayon des phases, pastille des objectifs des silos */
.ss-phase__edit { opacity: 0; display: inline-flex; transition: opacity var(--t-fast); }
.ss-phase:hover .ss-phase__edit { opacity: 0.85; }
.ss-groupe__obj { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 600; color: var(--primary-4); background: var(--primary-3); }
.ss-groupe__obj:hover { background: var(--surface-3); }