/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:     #F8FAFC;
  --surf:   #FFFFFF;
  --text:   #0F172A;
  --text2:  #64748B;
  --border: #E2E8F0;
  --accent: #2563EB;
  --dw: 36px;
  --info-w: 280px;
}
/* Status colors */
:root {
  --s-cours:   #2D5FA8;
  --s-termine: #2D7A6E;
  --s-annule:  #C4654A;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; }
body {
  font-family: 'Geist Sans', 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ── Header ────────────────────────────────────────────────────────────── */
.hdr {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.hdr-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  font-weight: 800;
  color: #0F172A;
  letter-spacing: -.02em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}
.hdr-logo img { display: block; flex-shrink: 0; height: 24px; width: auto; }
.hdr-logo__name { display: inline-block; line-height: 1; }
.hdr-gap { flex: 1; }
.hdr-right { display: flex; align-items: center; gap: 12px; }
.trial-tag {
  font-size: .72rem;
  font-weight: 700;
  color: #1D4ED8;
  background: #EFF6FF;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid #BFDBFE;
}
.user-label { font-size: .8rem; color: var(--text2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Header menu */
.hmenu { position: relative; }
.btn-hmenu {
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  color: #64748B;
  font-size: .82rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.btn-hmenu:hover { background: #F1F5F9; color: #0F172A; }
.hdrop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid #F1F5F9;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  min-width: 210px;
  z-index: 999;
  overflow: hidden;
  display: none;
}
.hdrop.open { display: block; }
.hdrop-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 10px 16px;
  font-size: .85rem;
  font-family: inherit;
  font-weight: 600;
  color: #0F172A;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease-out;
}
.hdrop-item:hover { background: #F8FAFC; }
.hdrop-item.danger { color: #DC2626; }
.hdrop-item.danger:hover { background: #FEF2F2; }
.hdrop-sep { height: 1px; background: #F1F5F9; margin: 4px 0; }
.hdrop-dim { font-size: .75rem; color: var(--text2); padding: 6px 16px 10px; }

/* ── Toolbar ───────────────────────────────────────────────────────────── */
.tbar {
  background: #fff;
  border-bottom: 1px solid #E2E8F0;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.btn-new {
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  border: none;
  background: #0F172A;
  color: #fff;
  font-size: .85rem;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 150ms ease-out;
  white-space: nowrap;
}
.btn-new:hover { background: #1E293B; }
.tsep { width: 1px; height: 22px; background: var(--border); }
.mnav {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  overflow: hidden;
  background: #F8FAFC;
}
.mnav-btn {
  height: 34px;
  width: 32px;
  border: none;
  background: transparent;
  color: var(--text2);
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms;
  min-width: 44px;
}
.mnav-btn:hover { background: var(--surf); }
.mnav-lbl {
  font-size: .85rem;
  font-weight: 700;
  color: #0F172A;
  padding: 0 8px;
  min-width: 128px;
  text-align: center;
  letter-spacing: -.01em;
  text-transform: capitalize;
}
.btn-today {
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #BFDBFE;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: .8rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
}
.btn-today:hover { background: #DBEAFE; }


.fsel, .fsearch {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  background: #F8FAFC;
  color: #0F172A;
  font-size: .83rem;
  font-family: inherit;
  outline: none;
  transition: border-color 150ms, box-shadow 150ms;
}
.fsel:focus, .fsearch:focus { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.fsearch { width: 152px; }
.spin {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spinning .55s linear infinite;
  display: none;
  margin-left: 4px;
}
.spin.on { display: block; }
@keyframes spinning { to { transform: rotate(360deg); } }

/* Mobile switcher hidden on desktop */
.mob-switcher { display: none; }

/* ── Gantt outer ───────────────────────────────────────────────────────── */
.gantt-outer {
  display: block;
  overflow: auto;
  height: calc(100svh - 175px);
  scroll-behavior: auto;
  cursor: grab;
  position: relative;
}
.gantt-outer:active { cursor: grabbing; }
.gantt-canvas { width: calc(var(--info-w) + var(--timeline-w)); min-width: 100%; }

/* Single global background layer: weekends + month separators (behind bars) */
.gbody-wrap { position: relative; }
#gantt-grid-overlay {
  position: absolute; top: 0; left: var(--info-w);
  width: var(--timeline-w); height: 100%;
  z-index: 2; pointer-events: none;
}

/* ── Unified header (sticky top) ─────────────────────────────────────────── */
.ghead { position: sticky; top: 0; z-index: 35; background: #FFFFFF; isolation: isolate; }
/* Outer flex row: corner (full height) + scrolling right column */
.ghead-unified { display: flex; }
.ghead-right { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ghead-r1-inner { display: flex; height: 42px; }
.ghead-r2-inner { display: flex; height: 40px; border-top: 1px solid #E2E8F0; }
/* Corner: single solid block spanning full header height (42+40=82px) */
.ghead-corner {
  position: sticky; left: 0; z-index: 5;
  width: var(--info-w); min-width: var(--info-w); flex-shrink: 0;
  height: 82px;
  background: #F8FAFC; border-right: 1.5px solid #E2E8F0;
  box-sizing: border-box; transform: translateZ(0);
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  padding: 0 12px 0 14px !important;
  overflow: hidden;
  cursor: pointer !important; user-select: none;
  transition: background 120ms;
}
.ghead-corner:hover { background: #EFF6FF; }

/* ── Col-resize handle: 4px right-edge strip in expanded state ── */
.col-resize-handle {
  position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  cursor: col-resize;
  background: transparent;
  transition: background 120ms;
  z-index: 2;
}
.col-resize-handle:hover { background: #BFDBFE; }
body.names-hidden .col-resize-handle { display: none; }

/* g-cell-info needs relative positioning for the handle */
.g-cell-info { position: relative; }
.ghead-months { display: flex; background: #FFFFFF; border-bottom: 2px solid #E2E8F0; }
.ghead-days   { display: flex; background: #FAFBFC; border-bottom: 1px solid #E2E8F0; }
.ghead-month .month-label {
  position: sticky;
  left: calc(var(--info-w) + 16px);
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
}
body.names-hidden .ghead-month .month-label {
  left: calc(20px + 16px) !important;
}
.ghead-month {
  font-size: .7rem; font-weight: 700; text-align: left; padding: 0 10px;
  box-shadow: inset -1px 0 0 #E2E8F0;
  color: #475569; letter-spacing: .06em;
  text-transform: uppercase; flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; white-space: nowrap; overflow: visible;
}
.gd-day {
  width: var(--dw); min-width: var(--dw); flex-shrink: 0;
  border-right: 1px solid #EDF0F5; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gd-day.month-start { border-left: 2px solid #C7D2FE; }
.gd-day.is-t { position: relative; background: transparent !important; }
.gd-day.is-t .dn {
  width: 22px !important; height: 22px !important;
  background: #2563EB !important; color: #fff !important;
  border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 800 !important; font-size: .7rem !important;
  margin: 0 auto !important;
  line-height: 1 !important;
}
.gd-day.is-t .dw { color: #93C5FD !important; font-weight: 600; }
.gd-day.is-we .dn { color: #CBD5E1; }

/* Smooth collapse/expand transition */
.g-cell-info, .ghead-corner {
  transition: width 200ms ease-out, min-width 200ms ease-out;
}

/* names-hidden: unified 20px vertical handle — single continuous strip */
body.names-hidden .ghead-corner,
body.names-hidden .g-cell-info {
  width: 20px !important; min-width: 20px !important;
  background: #E2E8F0 !important;
  border-right: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  z-index: 100 !important;
}
/* Impenetrable block: pseudo-element covers full cell, intercepts all pointer events */
body.names-hidden .g-cell-info::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 101;
  cursor: pointer;
}
/* Uniform strip — no color shift on hover */
body.names-hidden .ghead-corner:hover,
body.names-hidden .g-cell-info:hover { background: #E2E8F0 !important; }
body.names-hidden .td-info-card { display: none; }
/* Corner ::after suppressed — physical #global-sidebar-toggle-chevron handles this */
body.names-hidden .ghead-corner::after { display: none; }
body.names-hidden::after { content: none !important; display: none !important; }

/* Physical chevron tab — appended directly to body, free of all Gantt stacking contexts */
#global-sidebar-toggle-chevron {
  display: none;
  position: fixed !important;
  left: 0 !important;
  top: calc(50vh + 60px) !important;
  transform: translateY(-50%) !important;
  width: 32px !important; height: 38px !important;
  background: #0F172A !important;
  border-radius: 0 8px 8px 0 !important;
  box-shadow: 2px 4px 12px rgba(15,23,42,.18) !important;
  z-index: 99999 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important; font-weight: 900 !important;
  color: #FFFFFF !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  transition: background 150ms, width 150ms !important;
}
#global-sidebar-toggle-chevron:hover { background: #1E293B !important; }
body.names-hidden #global-sidebar-toggle-chevron { display: flex !important; }

/* Corner inner layout */
.th-info-inner {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 6px; height: 100%; width: 100%; padding: 0 8px 0 12px; overflow: hidden;
}
/* Corner title — editorial, blindé */
.corner-title {
  display: inline-block !important; visibility: visible !important; opacity: 1 !important;
  font-size: 1rem !important; font-weight: 700 !important; color: #0F172A !important;
  letter-spacing: .05em !important; flex: 1 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Toggle sidebar button — blindé */
#toggle-sidebar-btn {
  display: flex !important; align-items: center !important; justify-content: center !important;
  visibility: visible !important; opacity: 1 !important;
  width: 24px !important; height: 24px !important; flex-shrink: 0 !important;
  background: #FFFFFF !important; border: none !important;
  border-radius: 50% !important; color: #475569 !important;
  cursor: pointer !important; font-size: .85rem !important; padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04) !important;
  transition: box-shadow 120ms, background 120ms;
}
#toggle-sidebar-btn:hover { background: #F8FAFC !important; box-shadow: 0 2px 8px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06) !important; }
body.names-hidden .corner-title,
body.names-hidden #toggle-sidebar-btn { display: none !important; }
.dn { font-size: .72rem; font-weight: 600; color: #94A3B8; display: block; }
.dw { font-size: .58rem; color: #C1CBD8; display: block; font-weight: 500; letter-spacing: .03em; }

/* ── Rows ───────────────────────────────────────────────────────────────── */
.g-row { display: flex; min-height: 76px; cursor: pointer; transition: background 80ms; }
.g-row-ghost { cursor: default; pointer-events: none; }
.g-row:nth-child(odd)  .g-cell-info  { background: #F9FAFB; }
.g-row:nth-child(even) .g-cell-info  { background: #F4F6FA; }
.g-row:nth-child(odd)  .g-cell-track { background: #FFFFFF; }
.g-row:nth-child(even) .g-cell-track { background: #FAFBFF; }
.g-row:hover .g-cell-info  { background: #EFF6FF; }
.g-row:hover .g-cell-track { background: #F0F4FF; }
.g-row:hover .td-info-card {
  box-shadow: 0 3px 12px rgba(37,99,235,.13);
  border-color: #BFDBFE;
  transform: translateY(-1px);
}

/* ── Info cell (sticky left) ────────────────────────────────────────────── */
.g-cell-info {
  position: sticky;
  left: 0;
  z-index: 15;                 /* above bars (10) → hides what scrolls behind it */
  width: var(--info-w);
  min-width: var(--info-w);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  border-right: 1px solid #E2E8F0;
  box-shadow: 3px 0 10px rgba(15,23,42,.06);
  transform: translateZ(0);
  display: flex;
  align-items: center;
}
.g-cell-track {
  position: relative;
  width: var(--timeline-w);
  flex-shrink: 0;
  background: transparent;     /* global overlay shows through; bars sit above */
}

/* ── Card inside info cell ──────────────────────────────────────────────── */
.td-info-card {
  height: 64px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: #FFFFFF;
  border-radius: 0 !important;
  border: none !important;
  border-left: 4px solid var(--card-color, #CBD5E1) !important;
  border-bottom: 1px solid #F1F5F9 !important;
  padding: 8px 10px 8px 14px;
  box-shadow: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  transition: background 120ms;
  cursor: pointer;
}
.g-row:hover .td-info-card {
  background: #F8FAFC;
  box-shadow: none !important;
  transform: none !important;
}

/* ── Card typography ────────────────────────────────────────────────────── */
.iname {
  font-size: .8rem;
  font-weight: 600;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: .01em;
  line-height: 1.2;
}
.g-row:hover .iname { color: #0F172A; }

.irow-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.irow-bottom .imeta {
  font-size: .68rem;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.idate {
  font-size: .65rem;
  color: #94A3B8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  margin-top: 1px;
}


.spill {
  font-size: .66rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 9999px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.sp-en_attente { background: #F1F5F9; color: #64748B; }
.sp-en_cours   { background: #DBEAFE; color: #1D4ED8; }
.sp-termine    { background: #DCFCE7; color: #15803D; }
.sp-annule     { background: #FEE2E2; color: #DC2626; }


/* ── Global background overlay items (inside #gantt-grid-overlay) ───────── */
.hl { position: absolute; top: 0; bottom: 0; width: var(--dw); pointer-events: none; }
.hl.we { background: rgba(241,245,249,.7); }
.month-sep { position: absolute; top: 0; bottom: 0; width: 2px; background: #C7D2FE; pointer-events: none; }




/* Bars */
.bar {
  position: absolute;
  height: 24px;
  top: 26px;
  border-radius: 6px;
  z-index: 10;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;
  overflow: visible;
}
/* Industrial échafaudage badge inside Gantt bars */
.kpi-badge-ech {
  font-size: 8px; font-weight: 800; letter-spacing: .05em;
  background: rgba(255,255,255,.25); color: #fff;
  padding: 2px 5px; border-radius: 4px;
  margin-right: 6px; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.bar-label {
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 8px;
  pointer-events: none;
  letter-spacing: .01em;
}
.bar-label-sticky {
  position: sticky;
  left: calc(var(--info-w, 280px) + 10px);
  font-size: .7rem;
  font-weight: 700;
  color: rgba(255,255,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  pointer-events: none;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.2);
  flex-shrink: 0;
  padding: 0 8px;
}
/* .bar.ech geometry and background are set via inline style in buildBars()
   to ensure they are never overridden by media-query !important rules */
.bar.ech { opacity: 1; }
.bar.annule-bar {
  opacity: 1;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 4px,
    rgba(0,0,0,0.15) 4px,
    rgba(0,0,0,0.15) 8px
  ) !important;
}
/* phase-bar visual styles (height, color, radius) applied via inline style in buildBars() */
.bar.phase-bar { opacity: 0.9; box-shadow: none; }

/* ── KPI bar ─────────────────────────────────────────────────────────────── */
.kpi-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-bottom: 1px solid #E2E8F0;
  padding: 10px 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.kpi-bar::-webkit-scrollbar { display: none; }
.kpi-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 8px 16px;
  min-width: 130px;
  flex-shrink: 0;
}
.kpi-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kpi-icon.blue   { background: #EFF6FF; color: #2563EB; }
.kpi-icon.green  { background: #F0FDF4; color: #059669; }
.kpi-icon.orange { background: #FFF7ED; color: #EA580C; }
.kpi-icon.purple { background: #F5F3FF; color: #7C3AED; }
.kpi-icon.indigo { background: #EEF2FF; color: #4F46E5; }
.kpi-dispo-v { font-size: 14px !important; letter-spacing: 0 !important; }
@media (max-width: 767px) { .kpi-card-dispo { display: none; } }
.kpi-info { display: flex; flex-direction: column; }
.kpi-value { font-size: 1.25rem; font-weight: 800; line-height: 1.1; color: #0F172A; letter-spacing: -.02em; }
.kpi-label { font-size: .7rem; color: #64748B; margin-top: 1px; font-weight: 500; }
/* Mobile portrait : KPIs condensés en tira de chips scrolleable — même DOM
   (buildKPIs), aucun recalcul, seulement un layout compact. Les chiffres sont
   donc identiques au desktop par construction. Le paysage mobile reste masqué
   (optimisation d'espace vertical, voir la media query landscape plus bas). */
@media (max-width: 767px) {
  .kpi-bar { padding: 6px 12px; gap: 6px; }
  .kpi-card { padding: 5px 11px; min-width: 0; gap: 7px; border-radius: 999px; }
  .kpi-icon { width: 22px; height: 22px; border-radius: 6px; }
  .kpi-icon svg { width: 12px; height: 12px; }
  .kpi-info { flex-direction: row; align-items: baseline; gap: 5px; }
  .kpi-value { font-size: .95rem; }
  .kpi-label { margin-top: 0; font-size: .68rem; white-space: nowrap; }
}
.kpi-card { cursor: pointer; transition: box-shadow 120ms, background 120ms; }
.kpi-card:hover { background: #F1F5F9; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
/* KPI overlay — backdrop blur behind modal */
#kpi-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 198;
}
#kpi-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(420px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #E2E8F0 transparent;
  background: #fff;
  border: 1px solid #E8EDF4;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
  padding: 0 0 8px;
  z-index: 199;
  font-size: .85rem;
  animation: kpi-drop-in 200ms cubic-bezier(0.16,1,0.3,1) both;
}
/* Dropdown variant: anchored below the clicked button */
#kpi-popup.kpi-dropdown {
  top: auto; left: auto;
  transform: none;
  width: 240px;
  max-height: 320px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(15,23,42,.14), 0 2px 8px rgba(15,23,42,.08);
  animation: kpi-dd-in 160ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes kpi-dd-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes kpi-drop-in {
  from { opacity: 0; transform: translate(-50%, -52%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ── KPI popup internals ── */
.kpi-popup-list { padding: 0 4px; }

/* "Jours planifiés" editorial hero */
.kpi-jours-hero {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 16px 14px; border-bottom: 1px solid #F1F5F9;
  margin-bottom: 4px;
}
.kpi-jours-num {
  font-size: 2.4rem; font-weight: 900; color: #0F172A; letter-spacing: -.04em; line-height: 1;
}
.kpi-jours-unit {
  font-size: .7rem; font-weight: 700; color: #94A3B8; letter-spacing: .08em; text-transform: uppercase;
}

/* Item with optional date sub-line */
.kpi-popup-item {
  display: flex; flex-direction: column; gap: 1px;
}
.kpi-item-name { font-weight: 600; color: #0F172A; }
.kpi-item-dates { font-size: .72rem; color: #94A3B8; font-weight: 500; }
.kpi-popup-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748B;
  padding: 14px 16px 10px;
  border-bottom: 1px solid #F1F5F9;
  margin-bottom: 4px;
}
.kpi-popup-item {
  padding: 6px 14px;
  color: #0F172A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: 6px;
  margin: 0 4px;
}
.kpi-popup-item:hover { background: #F8FAFC; }
.kpi-popup-empty { padding: 6px 14px; color: #94A3B8; font-style: italic; }
.kpi-popup-close {
  display: block;
  width: calc(100% - 8px);
  margin: 6px 4px 0;
  padding: 5px;
  border: none;
  background: none;
  color: #94A3B8;
  font-size: .75rem;
  cursor: pointer;
  text-align: center;
  border-radius: 6px;
}
.kpi-popup-close:hover { background: #F8FAFC; color: #64748B; }

/* KPI jours badge */
.kpi-badge-jours {
  margin-left: auto; flex-shrink: 0;
  font-size: .7rem; font-weight: 700;
  background: #EFF6FF; color: #1D4ED8;
  padding: 2px 7px; border-radius: 9999px;
}
.kpi-popup-item { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.kpi-popup-item .kpi-item-name { line-height: 1.3; }
.kpi-badge-jours { margin-top: 0; align-self: center; }

/* KPI all hero */
.kpi-all-hero {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 16px 14px; border-bottom: 1px solid #E2E8F0; margin-bottom: 0;
}

/* KPI audit list — rapport exécutif */
.kpi-audit-list { padding: 0 0 4px; }
.kpi-audit-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px; cursor: pointer;
  transition: background 100ms;
}
.kpi-audit-row:hover { background: #F8FAFC; }
.kpi-audit-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.kpi-audit-label {
  flex: 1; font-size: .85rem; font-weight: 500; color: #475569;
}
.kpi-audit-num {
  font-size: .95rem; font-weight: 700; color: #0F172A;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}


/* ── Phases section in modal ─────────────────────────────────────────────── */
.phases-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.phase-row { display: grid; grid-template-columns: 1fr auto auto 24px; gap: 6px; align-items: center; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; padding: 6px 8px; }
.phase-row input[type="text"] { flex: 1; min-width: 0; border: none; background: transparent; font-size: .82rem; font-family: inherit; color: #0F172A; outline: none; }
.phase-row input[type="date"] { width: 100%; min-width: 0; height: 32px; padding: 0 4px; border: 1px solid #E2E8F0; border-radius: 6px; background: #fff; font-size: .75rem; font-family: inherit; color: #475569; outline: none; }
.phase-del { flex-shrink: 0; width: 22px; height: 22px; border: none; background: none; color: #94A3B8; font-size: 1rem; cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.phase-del:hover { background: #FEE2E2; color: #DC2626; }
.btn-add-phase { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1.5px dashed #CBD5E1; border-radius: 8px; background: none; color: #64748B; font-size: .8rem; font-family: inherit; cursor: pointer; transition: border-color 120ms, color 120ms; }
.btn-add-phase:hover { border-color: #2563EB; color: #2563EB; }
@media (max-width: 600px) {
  .phase-row { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
  .phase-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%; }
  .phase-row input[type="date"] { width: 100%; }
  .phase-row-top { display: flex; align-items: center; gap: 6px; width: 100%; }
  .phase-row-top input[type="text"] { flex: 1; min-width: 0; }
}

/* ── Phases in row-popup ─────────────────────────────────────────────────── */
.rp-phases { margin-top: 10px; }
.rp-phases-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94A3B8; margin-bottom: 6px; }
.rp-phase-item { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; color: #334155; padding: 4px 0; border-bottom: 1px solid #F1F5F9; }
.rp-phase-item:last-child { border-bottom: none; }
.rp-phase-nom { font-weight: 600; }
.rp-phase-dates { color: #94A3B8; font-size: .75rem; }

/* ── Empty state — body.is-empty hides all chrome with !important ──────────── */
body.is-empty #kpi-bar,
body.is-empty #gantt-outer,
body.is-empty .mob-switcher,
body.is-empty .mob-view,
body.is-empty .filter-pills,
body.is-empty .tbar .tsep,
body.is-empty #fab,
body.is-empty #col-restore-btn { display: none !important; }


/* ── Empty state — Stripe-style onboarding ───────────────────────────────── */
#empty-g { margin: 0; padding: 0; }
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; min-height: 60vh; padding: 32px 24px;
  max-width: 420px; margin: 0 auto;
}
.empty-state__icon {
  width: 48px; height: 48px; color: #2563EB; margin-bottom: 24px;
}
.empty-state__title {
  font-size: 24px; font-weight: 600; color: #0F172A;
  margin: 0 0 8px; line-height: 1.3;
}
.empty-state__subtitle {
  font-size: 15px; color: #64748B; margin: 0 0 32px; line-height: 1.5;
}
.empty-state__cta {
  background: #0F172A; color: #FFFFFF; border: none; border-radius: 8px;
  padding: 12px 24px; font-size: 15px; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: opacity 0.15s ease;
}
.empty-state__cta:hover { opacity: 0.85; }
@media (max-width: 640px) {
  body.is-empty #empty-g {
    width: 100%;
    min-height: calc(100svh - 64px - 65px - env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 64px = header, 65px = botnav, extra 16px breathing room above botnav */
    padding: 16px 20px calc(80px + env(safe-area-inset-bottom, 0px)) 20px;
    margin: 0;
  }
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: unset;
    width: 100%;
    max-width: 340px;
    padding: 0;
    margin: 0 auto;
  }
  .empty-state__title { font-size: 20px; }
}

/* ── Mobile cards ────────────────────────────────────────────────────────── */
.mob-view {
  display: none;
  background: #F8FAFC;
  min-height: 100%;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}
.mob-section-lbl {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94a3b8;
  padding: 4px 4px 8px;
}
.mob-cards { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.mnav-wrap { display: flex; align-items: center; gap: 8px; }
/* Empty state when a filter returns 0 results */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 50vh; width: 100%; text-align: center;
  color: #94A3B8; gap: 10px;
}
.empty-t { font-size: .9rem; font-weight: 500; color: #94A3B8; }
#empty-m {
  flex: 1; min-height: 50vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.mcard {
  background: #fff;
  border-radius: 12px;
  padding: 18px 16px 18px 14px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #EEF2F8;
  border-left-width: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  transition: box-shadow 150ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.mcard:active { box-shadow: 0 4px 16px rgba(0,0,0,.1); }

.mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mc-name { font-size: 17px; font-weight: 800; color: #0F172A; letter-spacing: -.02em; line-height: 1.2; }
.mc-addr { font-size: 13px; color: #64748B; margin-top: 4px; line-height: 1.3; }
.mc-dates { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; margin-top: 8px; font-weight: 500; }
.mc-dates-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-duree { flex-shrink: 0; font-size: 11px; font-weight: 700; color: #475569; background: #F1F5F9; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.mc-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.mc-phases { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.mc-phase-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #475569; }
.mc-phase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; opacity: .6; }
.mc-phase-nom { font-weight: 600; flex: 1; }
.mc-phase-dates { color: #94A3B8; font-size: 11px; }
.mc-chip { font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.chip-blue   { background: #EFF6FF; color: #1D4ED8; }
.chip-orange { background: #FFF7ED; color: #C2410C; }
.chip-purple { background: #F5F3FF; color: #6D28D9; }
.chip-gray   { background: #F1F5F9; color: #475569; }

/* Status badges on cards */
.mc-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mc-badge.st-en_cours  { background: #DBEAFE; color: #1D4ED8; }
.mc-badge.st-en_attente { background: #F1F5F9; color: #64748B; }
.mc-badge.st-termine   { background: #DCFCE7; color: #15803D; }
.mc-badge.st-annule    { background: #FEE2E2; color: #DC2626; }

/* Chantier annulé: 3 señales independientes del color (textura + borde 4px + badge),
   texto a contraste pleno para legibilidad bajo el sol y daltonismo */
.mcard.mc-annule {
  background-color: #FEFCFC;
  background-image: repeating-linear-gradient(135deg, rgba(220,38,38,.05) 0, rgba(220,38,38,.05) 1px, transparent 1px, transparent 7px);
}
.mcard.mc-annule .mc-name { color: #334155; }

@media (max-width: 767px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; width: 100%; }

  /* Default: cards visible, Gantt hidden */
  .gantt-outer { display: none !important; }
  .mob-view { display: block !important; }

  /* Planning mode: swap */
  body.mob-planning .gantt-outer {
    display: block !important;
    height: calc(100svh - 202px);
    overflow-x: scroll !important;
    overflow-y: auto !important;
  }
  body.mob-planning .mob-view { display: none !important; }
  body.mob-planning .g-row { min-height: 72px; display: flex !important; align-items: stretch !important; }
  body.mob-planning .g-cell-info { min-height: 72px; padding: 0 6px; overflow: hidden; }
  body.mob-planning .g-cell-track { min-height: 72px; }
  body.mob-planning .td-info-card { min-height: 60px; height: 100%; padding: 7px 8px 7px 10px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  body.mob-planning .iname { font-size: .76rem; }
  body.mob-planning .imeta { display: none; }
  body.mob-planning .spill { font-size: .58rem; padding: 2px 5px; }
  body.mob-planning .ebtn { display: none; }
  body.mob-planning .bar { top: 24px; height: 22px; }
  body.mob-planning .bar.ech { top: 6px; height: 5px; }
  body.mob-planning .bar.phase-bar { top: 58px; }
  body.mob-planning .bar-label-sticky { left: calc(var(--info-w, 150px) + 6px); font-size: .62rem; max-width: 120px; }

  /* View switcher bar */
  .mob-switcher {
    display: flex;
    background: var(--surf);
    border-bottom: 1px solid var(--border);
    padding: 0 12px;
  }
  .mob-sw-btn {
    flex: 1;
    height: 40px;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: color 150ms, border-color 150ms;
  }
  .mob-sw-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }

  /* Toolbar: two rows on mobile */
  .tbar {
    padding: 8px 12px;
    gap: 6px;
    flex-wrap: wrap;
  }
  .tsep { display: none; }

  /* Header */
  .hdr { padding: 0 12px; }
  .hdr-logo { font-size: 1rem; gap: 8px; }
  .hdr-logo img { height: 26px; } /* legibilidad mobile; header 64px sin cambio de altura */
  .hdr-right { gap: 8px; }
  .user-label { display: none; }

  /* Filters row */
  .fsel { flex: 1; min-width: 120px; }
  .fsearch { flex: 1; min-width: 100px; width: auto; }

  /* Cards */
  .mcard { width: 100%; box-sizing: border-box; }
}

.btn-view-toggle { display: none; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: oklch(0% 0 0 / .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
@supports not (color: oklch(0% 0 0)) {
  .modal-bg { background: rgba(0,0,0,.5); }
}
.modal-bg.hidden { display: none; }

.modal {
  background: var(--surf);
  border-radius: 20px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 32px 80px rgba(0,0,0,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 48px);
  animation: modal-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Mobile: bottom sheet */
@media (max-width: 600px) {
  .modal-bg { align-items: center !important; padding: 16px !important; }
  .modal {
    border-radius: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box;
    max-height: calc(100svh - 80px - env(safe-area-inset-bottom, 0px));
  }
  .modal-hdr { flex-direction: column; align-items: stretch; padding: 12px 16px 14px; }
  .modal-hdr-row { display: flex; align-items: center; justify-content: space-between; }
  .modal-body {
    padding: 0 16px calc(100px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    gap: 0;
  }
  .frow { grid-template-columns: 1fr !important; }
  .frow.dates-row { grid-template-columns: 1fr 1fr !important; }
  .modal-ftr { padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; }
  .modal-ftr .btn-del { order: 3; width: 100%; margin-top: 4px; }
  .modal-ftr .mfr { width: 100%; justify-content: flex-end; }
}

/* Landscape mobile */
@media (max-width: 900px) and (orientation: landscape) {
  .modal-bg { align-items: center; padding: 8px 16px; }
  .modal { max-height: calc(100svh - 16px); border-radius: 14px; max-width: 600px; }
}

.modal-hdr {
  padding: 24px 24px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-hdr-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.modal-title { font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
.modal-close {
  background: var(--bg); border: none; cursor: pointer;
  color: var(--text2); padding: 0; border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms; flex-shrink: 0;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-body {
  padding: 20px 24px 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Form sections ── */
.fsec {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text2);
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}
.fsec:first-child { padding-top: 4px; }

/* ── Form rows ── */
.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.frow.one { grid-template-columns: 1fr; }
.frow:last-child { margin-bottom: 0; }

/* ── Field ── */
.ff { display: flex; flex-direction: column; gap: 5px; }
.ff.full { grid-column: 1/-1; }
.ff label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #94A3B8;
}
.ff input, .ff select, .ff textarea {
  height: 44px;
  padding: 0 12px;
  border: 1.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: .9rem;
  font-family: inherit;
  background: #F8FAFC;
  color: var(--text);
  outline: none;
  width: 100%;
  transition: border-color 150ms, box-shadow 150ms, background 150ms;
  -webkit-appearance: none;
  appearance: none;
}
.ff select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
.ff input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect x='1' y='2' width='12' height='11' rx='2' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3Cpath d='M1 5.5h12M4 1v2M10 1v2' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.ff input:focus, .ff select:focus, .ff textarea:focus {
  border-color: #2563EB;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.ff textarea { height: auto; padding: 10px 12px; min-height: 80px; resize: vertical; }

/* ── Color picker ── */
.color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surf);
  transition: border-color 150ms;
}
.color-row:focus-within { border-color: var(--accent); }
.color-row input[type=color] {
  width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; cursor: pointer;
  background: none; flex-shrink: 0;
  outline: none; box-shadow: none !important;
}
.cps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cp { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 120ms, outline-color 120ms; flex-shrink: 0; }
.cp:hover { transform: scale(1.2); }
.cp.sel { transform: scale(1.2); outline: 2.5px solid var(--accent); outline-offset: 2px; }

.modal-ftr {
  padding: 12px 24px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mfr { margin-left: auto; display: flex; gap: 8px; }

.btn-del {
  height: 36px; padding: 0 14px; border-radius: 7px;
  border: 1px solid rgba(239,68,68,.3);
  background: none; color: var(--s-annule);
  font-size: .82rem; font-family: inherit; font-weight: 600;
  cursor: pointer; transition: background 120ms;
}
.btn-del:hover { background: rgba(239,68,68,.06); }
.btn-can {
  height: 36px; padding: 0 14px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg);
  color: var(--text2); font-size: .82rem; font-family: inherit; font-weight: 500;
  cursor: pointer; transition: background 120ms;
}
.btn-can:hover { background: var(--border); }
.btn-sav {
  height: 40px; padding: 0 18px; border-radius: 10px;
  border: none; background: #0F172A;
  color: #fff; font-size: .83rem; font-family: inherit; font-weight: 700;
  cursor: pointer; transition: filter 150ms;
}
.btn-sav:hover { background: #1E293B; filter: none; }
.btn-sav:disabled { opacity: .55; cursor: not-allowed; filter: none; }

/* ── Modal error container ── */
.modal-error-container {
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modal-error-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 500;
  color: #DC2626;
  line-height: 1.4;
}
.modal-error-item svg { flex-shrink: 0; color: #DC2626; }

/* ── Required star ── */
.req-star { color: #EF4444; font-size: .85em; }

/* ── Modal details toggle ── */
.modal-toggle-details {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 38px;
  margin: 6px 0 4px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px dashed #CBD5E1;
  background: #F8FAFC;
  color: #64748B;
  font-size: .82rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms, background 150ms, color 150ms;
}
.modal-toggle-details:hover,
.modal-toggle-details.open {
  border-color: #94A3B8;
  background: #F1F5F9;
  color: #334155;
}

/* Optional fields animate in */
#optional-fields { padding-top: 4px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
/* Bandeau hors ligne persistant — sous le header (64px sticky), au-dessus du contenu.
   Créé/contrôlé par showOfflineBanner()/hideOfflineBanner() dans app.js. */
#offline-banner {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(92vw, 480px);
  padding: 8px 14px;
  border-radius: 999px;
  background: #FEF3C7;
  border: 1px solid #FDE68A;
  color: #92400E;
  font-size: .8rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.35;
  box-shadow: 0 4px 14px rgba(0,0,0,.10);
  z-index: 950; /* au-dessus du Gantt/cartes, sous les modales (1e7) et les toasts */
  pointer-events: none;
}

#toasts {
  position: fixed;
  bottom: 90px; /* flotante por encima de la barra de navegación inferior móvil */
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 2147483647; /* por encima de modal-bg (1e7), bottom nav, FAB, drawer, popups */
  pointer-events: none;
}
#toasts .toast { pointer-events: auto; }

.toast {
  background: oklch(20% 0.01 250);
  color: oklch(95% 0.005 250);
  padding: 9px 14px; border-radius: 9px;
  font-size: .82rem; font-weight: 500;
  box-shadow: 0 4px 16px oklch(0% 0 0 / .18);
  animation: toast-in 180ms ease-out both;
  max-width: 260px;
}
@supports not (color: oklch(0% 0 0)) {
  .toast { background: #1e2025; color: #f4f5f8; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
}
.toast.ok  { background: #15803d; color: #fff; }
.toast.err { background: #b91c1c; color: #fff; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* ── Avatar ── */
.avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: #0F172A; color: #fff;
  font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Filter pills (mobile only — visible in both Fiches and Planning) ── */
.filter-pills {
  display: none; /* hidden on desktop; shown on mobile via media query */
  gap: 6px; overflow-x: auto;
  padding: 8px 12px 6px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  background: var(--surf);
  border-bottom: 1px solid var(--border);
}
.filter-pills::-webkit-scrollbar { display: none; }
@media (max-width: 767px) {
  .filter-pills { display: flex; }
}
.pill {
  height: 34px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid #E2E8F0;
  background: #fff; color: #64748B;
  font-size: .8rem; font-weight: 700; font-family: inherit;
  white-space: nowrap; cursor: pointer;
  transition: all 150ms ease-out; flex-shrink: 0;
}
.pill.active[data-filter=""]           { background: #0F172A; color: #fff; border-color: #0F172A; }
.pill.active[data-filter="en_cours"]   { background: #2D5FA8; color: #fff; border-color: #2D5FA8; }
.pill.active[data-filter="en_attente"] { background: #8B9BB4; color: #fff; border-color: #8B9BB4; }
.pill.active[data-filter="annule"]     { background: #C4654A; color: #fff; border-color: #C4654A; }
.pill.active[data-filter="termine"]    { background: #2D7A6E; color: #fff; border-color: #2D7A6E; }
.pill.active[data-filter="cette_semaine"] { background: #2563EB; color: #fff; border-color: #2563EB; }
.pill.active[data-filter="en_retard"]     { background: #92400E; color: #fff; border-color: #92400E; }

/* ── FAB ── */
#fab { display: none; }


/* Floating restore button suppressed — 20px strip handles expand via global click listener */
#col-restore-btn { display: none !important; }
/* Only show restore btn when in planning view */
@media (max-width: 767px) {
  body:not(.mob-planning) #col-restore-btn { display: none !important; }
}

@media (max-width: 767px) {
  :root { --info-w: 170px; }
}

@media (max-width: 767px) {
  .g-cell-info { position: sticky !important; left: 0 !important; z-index: 15 !important; }
}

@media (max-width: 767px) {
  .btn-new { display: none; }
  .fsel { display: none !important; }
  #fab {
    display: flex; align-items: center; justify-content: center;
    position: fixed; bottom: 24px; right: 20px;
    width: 56px; height: 56px;
    border-radius: 16px; border: none;
    background: #0F172A; color: #fff;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
    cursor: pointer; z-index: 90;
    transition: transform 150ms ease-out;
  }
  #fab:active { transform: scale(.93); }
}

/* ── Row info drawer (desktop side-panel) ── */
#row-popup {
  position: fixed !important;
  top: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 360px !important;
  background: #fff !important;
  box-shadow: -4px 0 24px rgba(15,23,42,.06) !important;
  z-index: 1000000 !important;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1) !important;
  display: flex !important; flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  border: none !important;
  pointer-events: none !important;
}
#row-popup.open { transform: translateX(0) !important; pointer-events: auto !important; }
/* Drawer internals */
.rp-accent-bar { height: 4px; width: 100%; flex-shrink: 0; }
.rp-content { padding: 24px 24px 16px; flex: 1; overflow-y: auto; }

/* Header */
.rp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.rp-head-text { flex: 1; min-width: 0; }
.rp-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-name { font-size: 1.15rem; font-weight: 700; color: #0F172A; line-height: 1.25; letter-spacing: -.01em; }
.rp-dur-badge { font-size: .72rem; font-weight: 700; color: #2563EB; background: #EFF6FF; border-radius: 5px; padding: 2px 7px; flex-shrink: 0; }
.rp-addr { font-size: .8rem; color: #64748B; margin-top: 4px; line-height: 1.4; }
.rp-divider { height: 1px; background: #F1F5F9; margin-bottom: 20px; }

/* Info rows */
.rp-fields { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.rp-field { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.rp-icon-box { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rp-field-body { display: flex; flex-direction: column; min-width: 0; }
.rp-label { font-size: 10px; font-weight: 700; color: #94A3B8; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.rp-value { font-size: 13px; font-weight: 500; color: #1E293B; line-height: 1.4; }

/* Échafaudage sub-dates in drawer */
.ech-subdates { margin-top: 4px; font-size: 11px; color: #64748B; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ech-subdates b { color: #334155; font-weight: 600; }
.ech-separator { color: #CBD5E1; font-size: 10px; }

/* Notes */
.rp-notes { background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 8px; padding: 12px 14px; font-size: .8rem; color: #475569; line-height: 1.5; margin-bottom: 16px; }

/* Phases */
.rp-phases-details { margin-bottom: 16px; }
.rp-phases-summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; font-size: .75rem; font-weight: 700; color: #475569; padding: 8px 12px; border-radius: 8px; background: #F8FAFC; border: 1px solid #E2E8F0; margin-bottom: 0; user-select: none; }
.rp-phases-summary::-webkit-details-marker { display: none; }
details[open] .rp-phases-summary { border-radius: 8px 8px 0 0; }
details[open] .rp-phases-summary svg { transform: rotate(180deg); }
.rp-phases-details .rp-phase-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-bottom: 1px solid #F1F5F9; background: #FAFAFA; border-left: 1px solid #E2E8F0; border-right: 1px solid #E2E8F0; }
.rp-phases-details .rp-phase-row:last-child { border-bottom: 1px solid #E2E8F0; border-radius: 0 0 8px 8px; }
.rp-phase-dot { width: 6px; height: 6px; border-radius: 50%; background: #CBD5E1; flex-shrink: 0; }
.rp-phase-nm { font-size: .8rem; font-weight: 600; color: #334155; flex: 1; }
.rp-phase-dt { font-size: .72rem; color: #94A3B8; white-space: nowrap; }

/* Footer buttons */
.rp-btns { display: flex; gap: 8px; padding: 16px 24px; border-top: 1px solid #F1F5F9; flex-shrink: 0; flex-wrap: wrap; }
.rp-close { flex: 1; height: 40px; border-radius: 6px; border: none; background: #F1F5F9; color: #475569; font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.rp-phases-toggle { flex: 1; height: 40px; border-radius: 6px; border: 1.5px solid #E2E8F0; background: #fff; color: #0F172A; font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer; white-space: nowrap; }
.rp-phases-toggle:hover { background: #F8FAFC; }
.rp-edit { flex: 1; height: 40px; border-radius: 6px; border: none; background: #0F172A; color: #fff; font-size: .85rem; font-weight: 600; font-family: inherit; cursor: pointer; }
.rp-phases-view { flex: 1; overflow-y: auto; padding: 16px 24px; }
.rp-phases-view .rp-phase-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
.rp-phases-view .rp-phase-row:last-child { border-bottom: none; }
.rp-phases-view .rp-phase-dot { width: 8px; height: 8px; border-radius: 50%; background: #0F172A; flex-shrink: 0; margin-top: 5px; }
.rp-phases-view .rp-phase-info { display: flex; flex-direction: column; gap: 2px; }
.rp-phases-view .rp-phase-nm { font-size: .9rem; font-weight: 600; color: #0F172A; }
.rp-phases-view .rp-phase-dt { font-size: .78rem; color: #64748B; }
.rp-phases-empty { font-size: .85rem; color: #94A3B8; text-align: center; padding: 32px 0; }

/* Mobile: revert to centered popup sheet */
@media (max-width: 767px) {
  #row-popup {
    top: auto !important;
    bottom: 80px !important;
    left: 16px !important; right: 16px !important;
    width: auto !important;
    transform: translateY(20px) !important;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.18) !important;
    max-height: 80vh !important;
    pointer-events: none !important;
  }
  #row-popup.open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .rp-content { padding: 16px 18px; }
  .rp-btns { padding: 12px 18px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE PLANNING REDESIGN (premium iOS look)
   Appended last on purpose — overrides earlier mobile rules.
   100% scoped to mobile / body.mob-planning. Desktop is untouched.
   New elements (.bar-dates, .botnav) ship hidden on desktop.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bar date label & bottom nav are mobile-only — hidden everywhere by default */
.bar-dates { display: none; }
.botnav { display: none; }

@media (max-width: 767px) {

  /* ── Replace the top Fiches/Planning switcher with a bottom tab bar ── */
  .mob-switcher { display: none !important; }

  .botnav {
    display: flex;
    position: fixed; left: 0 !important; right: 0; bottom: 0 !important;
    width: 100% !important;
    background: #FFFFFF !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid #E8EDF3;
    box-shadow: 0 -1px 12px rgba(15,23,42,.05);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 9999999 !important;
  }
  .botnav-btn {
    flex: 1; height: 54px;
    background: none; border: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: -.01em;
    color: #94A3B8;
    transition: color 150ms ease-out;
    -webkit-tap-highlight-color: transparent;
  }
  .botnav-btn svg { width: 23px; height: 23px; }
  .botnav-btn.active { color: #2563EB; }

  /* Keep content clear of the fixed bottom bar */
  .mob-view { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
  #fab { bottom: calc(66px + env(safe-area-inset-bottom, 0px)) !important; }

  /* ── Planning Gantt: taller rows so the card breathes ── */
  body.mob-planning .gantt-outer {
    height: calc(100svh - 218px - env(safe-area-inset-bottom, 0px)) !important;
  }
  body.mob-planning .g-row        { min-height: 96px; display: flex !important; align-items: stretch !important; }
  body.mob-planning .g-cell-info  { min-height: 96px; padding: 0 6px; overflow: hidden; }
  body.mob-planning .g-cell-track { min-height: 96px; }
  body.mob-planning .td-info-card { min-height: 80px; height: 100%; padding: 8px 8px 8px 12px; border-radius: 0 !important; gap: 3px; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
  /* Holgura inferior: evita que una media-fila quede recortada contra la botnav */
  body.mob-planning .gbody { padding-bottom: 32px; }

  /* Editorial card typography (consolidated — overrides the .76rem rule above) */
  body.mob-planning .iname { font-size: 15px; font-weight: 600; color: #0F172A; letter-spacing: .01em; }
  body.mob-planning .irow-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 5px;
  }
  body.mob-planning .imeta {
    display: -webkit-box !important;
    -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    white-space: normal; overflow: hidden;
    font-size: 11px; line-height: 1.3; color: #64748B;
    flex: none; width: 100%; max-width: 100%;
  }
  body.mob-planning .idate { display: none; }   /* dates live inside the bar instead */

  /* Status badge with leading dot, title-case (matches the mockup) */
  body.mob-planning .spill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 9px;
    text-transform: none; letter-spacing: 0;
  }
  body.mob-planning .spill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
  }

  /* Today circle: .th-day.is-t was old table arch — removed. .gd-day.is-t inherits desktop !important rules */

  /* ── Gantt bars: rounded, gradient, date range inside ── */
  body.mob-planning .bar {
    height: 30px; top: 33px;            /* centered in the 96px row */
    padding: 0 10px;
    border-radius: 11px !important;
    box-shadow: 0 2px 7px rgba(37,99,235,.16);
    background: var(--bar-c, #2563EB) !important;   /* solid fallback (old Safari) */
  }
  @supports (background: color-mix(in srgb, red, blue)) {
    body.mob-planning .bar:not(.ech):not(.phase-bar) {
      background: linear-gradient(135deg, var(--bar-c, #2563EB), color-mix(in srgb, var(--bar-c, #2563EB) 74%, #fff)) !important;
    }
  }
  /* Status-specific gradients from the brief (only when no custom colour is set) */
  body.mob-planning .bar.st-en_cours   { background: linear-gradient(135deg, #2563FF, #3B82F6) !important; }
  body.mob-planning .bar.st-en_attente { background: linear-gradient(135deg, #94A3B8, #B4C0D0) !important; }
  body.mob-planning .bar.st-termine    { background: linear-gradient(135deg, #22C55E, #4ADE80) !important; }
  /* Annulé: textura rayada sobre el color base (custom o #C4654A). Especificidad
     (0,5,1) con :not() para ganar a la regla @supports y aplicar a toda barra annulé,
     tenga o no la clase st-annule */
  body.mob-planning .bar.annule-bar:not(.ech):not(.phase-bar) {
    opacity: 1;
    background:
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 4px,
        rgba(0,0,0,0.12) 4px,
        rgba(0,0,0,0.12) 8px
      ),
      linear-gradient(135deg, var(--bar-c, #C4654A), color-mix(in srgb, var(--bar-c, #C4654A) 74%, #fff)) !important;
  }

  /* Clip-aware corners → multi-month bars stay visually continuous */
  body.mob-planning .bar.clip-l { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
  body.mob-planning .bar.clip-r { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }

  /* Date range inside the bar (sticky so it stays visible when scrolled) */
  body.mob-planning .bar-label-sticky { display: inline; }  /* names always visible in bars */
  body.mob-planning .bar-dates {
    display: inline-block;
    position: sticky; left: calc(var(--info-w, 170px) + 8px);
    color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .01em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 150px; padding-right: 6px;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
  }
  body.mob-planning .bar.ech       { top: 12px; }
  body.mob-planning .bar.phase-bar { top: 72px; }
  /* Taller phase bars on mobile so the label fits vertically */
  body.mob-planning .bar.phase-bar {
    height: 18px !important;
    align-items: center !important;
  }
  /* Phase label ellipsis on mobile */
  body.mob-planning .bar.phase-bar span {
    font-size: 11px !important;
    line-height: 18px !important;
    padding: 0 6px !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* 32px ergonomic touch target when names are collapsed */
body.names-hidden .gantt-outer::before {
  content: '';
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 32px;
  background: transparent;
  z-index: 200;
  cursor: pointer;
}

/* Corner title truncation fix on small screens */
@media (max-width: 768px) {
  .corner-title { font-size: 0.85rem !important; letter-spacing: 0.02em !important; }
  .ghead-corner { padding: 0 8px !important; }
  /* Anti-overlap: mobile bars show name only, no date */
  body.mob-planning .bar-dates { display: none !important; }
  /* Collapsed sidebar ergonomic width on mobile */
  body.names-hidden .ghead-corner,
  body.names-hidden .g-cell-info { width: 16px !important; min-width: 16px !important; }
  /* Collapsed sidebar visual strip — llega hasta la botnav (que la cubre por z-index),
     sin dejar hueco donde asome contenido del Gantt por la esquina inferior izquierda */
  body.names-hidden .gantt-outer::before {
    position: fixed !important;
    top: 212px !important;
    bottom: 0 !important;
    height: auto !important;
    width: 16px !important;
    background: #E2E8F0 !important;
    z-index: 150 !important;
  }
  /* Chevron tab: compact on mobile, dark corporate color */
  body.names-hidden #global-sidebar-toggle-chevron {
    width: 28px !important;
    height: 34px !important;
    top: calc(50vh + 65px) !important;
    font-size: 15px !important;
    background: #0F172A !important;
    color: #FFFFFF !important;
  }
}

/* Échafaudage logistics lines — pure terracotta strokes, no texture */
/* ech-montage / ech-demontage visual styles are applied via inline style in buildBars()
   to guarantee they beat all media-query overrides regardless of specificity */
.bar.ech-montage,
.bar.ech-demontage { cursor: pointer; }

/* Échafaudage popup */
#ech-popup {
  display: none;
  position: fixed;
  z-index: 999999 !important;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  padding: 14px 18px;
  min-width: 220px;
  font-size: 13px;
  color: #0F172A;
}
.ech-popup-header {
  font-weight: 700; font-size: 13px; color: #334155;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
}
.ech-popup-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; gap: 16px;
}
.ech-popup-row span { color: #64748B; font-size: 12px; }
.ech-popup-row strong { font-weight: 600; font-size: 12px; color: #1E293B; }

/* ── Landscape mobile optimisation ─────────────────────────────────────── */
@media (max-width: 900px) and (orientation: landscape) {
  /* Slim the header to free vertical space */
  .hdr { height: 44px !important; padding: 0 16px !important; }
  .hdr-logo img { height: 18px !important; width: auto !important; }

  /* Botnav stays fixed but slimmer */
  .botnav-btn { height: 40px !important; font-size: 10px !important; gap: 1px !important; }
  .botnav-btn svg { width: 18px !important; height: 18px !important; }

  /* Gantt fills all remaining vertical space */
  #gantt-outer {
    height: calc(100svh - 44px - 40px - env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: auto !important; overflow-y: auto !important;
  }

  /* Mob-switcher tabs also slimmer */
  .mob-switcher { height: 34px !important; }
  .mob-sw-btn { font-size: 11px !important; }

  /* KPI bar hidden to save space */
  #kpi-bar { display: none !important; }

  /* Filter pills row tighter */
  .filter-pills { padding: 4px 12px !important; gap: 4px !important; }
}

/* ── Desktop row height sync + phase bar gap correction ─────────────────── */
@media (min-width: 901px) {
  .g-cell-info { align-items: stretch; padding-top: 0; padding-bottom: 0; }
  /* #2 — align card content to the top so the client name lines up with its
     main bar (top:26px) instead of floating in the middle of tall phase rows */
  .td-info-card { height: 100%; min-height: 64px; justify-content: flex-start; padding-top: 22px; gap: 3px; }
  /* Close the 19px gap: JS BASE_TOP=69 is safe for mobile-large (bar bottom 63px).
     On desktop bar bottom is 50px, so translateY(-15px) brings phases to 54px. */
  .g-cell-track .bar.phase-bar {
    transform: translateY(-15px);
    height: 14px !important;
  }
  /* Larger, more legible phase labels on desktop */
  .g-cell-track .bar.phase-bar span {
    font-size: 11px !important;
    line-height: 14px !important;
  }
  /* #1 — échafaudage bars read as deliberate elements (thicker + subtle elevation) */
  .g-cell-track .bar.ech {
    height: 6px !important;
    box-shadow: 0 1px 2px rgba(249,115,22,.25);
  }
  /* #4 — annulé bars distinguidas por textura rayada (sin opacidad reducida) */
  .g-cell-track .bar.annule-bar {
    opacity: 1 !important;
    background-image: repeating-linear-gradient(
      45deg,
      transparent,
      transparent 4px,
      rgba(0,0,0,0.15) 4px,
      rgba(0,0,0,0.15) 8px
    ) !important;
  }
  /* #3 — more visible "today" line with soft glow + label */
  #today-col {
    box-shadow: 0 0 6px rgba(37,99,235,.45);
    opacity: 1 !important;
  }
  #today-col::before {
    content: "Aujourd'hui";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    background: #2563EB;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 3px 9px;
    border-radius: 0 0 7px 7px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(37,99,235,.35);
  }
  /* #6 — declutter header: email collapses into the avatar */
  .user-label { display: none; }
  /* #7 — weekend shading slightly more defined for visual rhythm */
  #gantt-grid-overlay .hl.we { background: rgba(233,238,246,.85); }
}



/* ── Disponibilités backdrop ─────────────────────────────────────────────── */
.dispo-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 90000;
}
.dispo-backdrop.hidden { display: none; }

/* ── Disponibilités modal card ───────────────────────────────────────────── */
.dispo-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, 92vw);
  max-height: 80vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 4px 16px rgba(15,23,42,.08);
  z-index: 90001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dispo-modal.hidden { display: none; }

.dispo-hdr {
  padding: 20px 22px 16px;
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.dispo-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .95rem;
  font-weight: 700;
  color: #1E293B;
}
.dispo-mnav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dispo-mnav-btn {
  width: 28px; height: 28px;
  border: 1.5px solid #E2E8F0;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 100ms;
}
.dispo-mnav-btn:hover { background: #F1F5F9; }
.dispo-mnav-lbl {
  min-width: 110px;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: #334155;
  text-transform: capitalize;
}

.dispo-body {
  padding: 16px 22px;
  overflow-y: auto;
  flex: 1;
}

/* Week rows */
.dispo-week {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #F1F5F9;
  gap: 12px;
}
.dispo-week:last-child { border-bottom: none; }
.dispo-week-label {
  font-size: .78rem;
  font-weight: 600;
  color: #475569;
  min-width: 140px;
}
.dispo-week-label span {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: #94A3B8;
  margin-top: 2px;
}
.dispo-week-stats {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}
.dispo-stat {
  text-align: center;
}
.dispo-stat-num {
  display: block;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1E293B;
  line-height: 1;
}
.dispo-stat-lbl {
  display: block;
  font-size: .68rem;
  color: #94A3B8;
  margin-top: 3px;
  white-space: nowrap;
}
.dispo-sep { width: 1px; background: #E2E8F0; align-self: stretch; }

.dispo-ftr {
  padding: 14px 22px;
  border-top: 1px solid #E2E8F0;
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}
.dispo-close-btn {
  padding: 8px 22px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 100ms;
}
.dispo-close-btn:hover { background: #F8FAFC; }

/* ── Menú: sección labels ── */
.hdrop-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 8px 16px 4px;
}

.hdrop-account {
  padding: 4px 16px 8px;
}

.hdrop-account-email {
  font-size: 13px;
  color: #475569;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.hdrop-icon {
  margin-right: 6px;
}

/* ── Modal Abonnement ── */
.abo-modal {
  padding: 8px 0;
}

.abo-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px;
}

.abo-status {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.abo-status.active  { color: #16a34a; }
.abo-status.trial   { color: #2563eb; }
.abo-status.expired { color: #dc2626; }

.abo-detail {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 20px;
}

.abo-cta {
  margin-bottom: 16px;
}

/* .btn-abo-primary: definición única — ver abajo */

.btn-abo-secondary {
  display: block;
  background: transparent;
  color: #2563eb;
  text-align: center;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  transition: background 0.15s;
}

.btn-abo-secondary:hover { background: #f8fafc; }

.abo-note {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}

/* ── Modal Configuration ── */
.config-modal { padding: 8px 0; }

.config-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px;
}

.config-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}

.config-label {
  font-size: 13px;
  color: #64748b;
  flex-shrink: 0;
}

.config-value {
  font-size: 13px;
  color: #0f172a;
  font-weight: 500;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Menú: profile trigger ── */
.profile-trigger {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
}
.hdrop-profile-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.hdrop-section-label-alt {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.hdrop-gear-icon {
  font-size: 16px;
  opacity: 0.7;
}

/* ── Modal Abonnement rediseñado ── */
.abo-modal-redesign { padding: 4px 8px; }
.abo-main-title {
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.abo-card {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}
.abo-card.active  { border-color: #bbf7d0; background: #f0fdf4; }
.abo-card.trial   { border-color: #bfdbfe; background: #eff6ff; }
.abo-card.expired { border-color: #fca5a5; background: #fef2f2; }

.abo-badge-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  background: #22c55e;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.abo-badge-status.warning { background: #2563eb; }
.abo-badge-status.danger  { background: #dc2626; }

.abo-description {
  font-size: 14px;
  line-height: 1.5;
  color: #334155;
  margin: 0 0 16px;
}
.abo-price-box { margin-bottom: 20px; }
.abo-price-amount {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
}
.abo-price-period {
  font-size: 14px;
  color: #64748b;
}
.abo-note-footer {
  font-size: 11px;
  color: #64748b;
  text-align: center;
  margin: 12px 0 0;
}

/* ── NAVEGACIÓN SUPERIOR INTERACTIVA ── */
.top-bar-trial-button, [onclick="showAbonnement()"], [onclick="toggleMenu()"] {
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none;
}
[onclick="showAbonnement()"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15) !important;
  border-color: #93c5fd !important;
}
[onclick="toggleMenu()"]:hover {
  filter: brightness(1.1);
  transform: scale(1.02);
}

/* ── MENÚ DROPDOWN ULTRA-REFINADO ── */
#hmenu-dd {
  border-radius: 20px !important;
  padding: 8px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.12),
              0 8px 16px -8px rgba(15, 23, 42, 0.04),
              0 0 0 1px rgba(15, 23, 42, 0.04) !important;
  border: none !important;
}

.profile-trigger {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-radius: 14px !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 8px;
}
.hdrop-section-label-alt {
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.hdrop-account-email {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}
.hdrop-gear-icon {
  font-size: 14px;
  color: #64748b;
  background: #ffffff;
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.hdrop-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #94a3b8;
  padding: 12px 14px 6px;
  text-transform: uppercase;
}

.hdrop-item {
  display: flex !important;
  align-items: center;
  width: 100%;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  transition: background 120ms ease-out !important;
}
.hdrop-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

.hdrop-icon {
  font-size: 15px;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.hdrop-item:hover .hdrop-icon {
  background: #ffffff;
  border-color: #e2e8f0;
}

.hdrop-sep {
  height: 1px;
  background: #f1f5f9;
  margin: 6px 10px;
}

.hdrop-item.danger {
  color: #e11d48 !important;
  margin-top: 4px;
}
.hdrop-item.danger .hdrop-icon { background: #fff1f2; border-color: #ffe4e6; }
.hdrop-item.danger:hover { background: #fff1f2 !important; color: #be123c !important; }

/* ── MODALES PROFESIONALES DE NEGOCIO ── */
.config-modal { padding: 4px 0; }

/* Contenedor plat abonnement — sans tarjeta interna ni overflow */
.abo-flat { display: flex; flex-direction: column; gap: 0; }

.abo-badge-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.abo-badge-status.warning {
  background: #f1f5f9;
  color: #1e293b;
  border: 1px solid #cbd5e1;
}

.abo-description {
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
  margin: 0 0 12px;
}

.btn-abo-primary {
  display: block;
  background: #0f172a;
  color: #ffffff !important;
  text-align: center;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transition: background 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 20px;
}
.btn-abo-primary:hover {
  background: #1e293b;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2);
}

.abo-note-footer {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin-top: 16px;
  font-weight: 500;
}

/* ── DISEÑO DE FILAS CONFIG ── */
.config-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid #f1f5f9;
}
.config-row:last-child { border-bottom: none; }
.config-label { font-size: 13px; font-weight: 500; color: #64748b; }
.config-value {
  font-size: 13px;
  color: #334155;
  font-weight: 600;
  text-align: right;
}

/* ── DROPDOWN: SVG icons + min-width ── */
#hmenu-dd { min-width: 270px !important; }

.hdrop-svg-icon {
  flex-shrink: 0;
  margin-right: 11px;
  color: #64748b;
  display: block;
}
.hdrop-item:hover .hdrop-svg-icon { color: #0f172a; }
.hdrop-item.danger .hdrop-svg-icon { color: #e11d48; }

.hdrop-gear-svg {
  flex-shrink: 0;
  color: #64748b;
  background: #fff;
  padding: 5px;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  width: 28px;
  height: 28px;
}

.hdrop-account-email-text {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 210px;
}

/* ── MODAL ABONNEMENT: bullets métier (règle unique) ── */
.abo-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.abo-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.45;
}
.abo-bullets li::before { content: none; }
.abo-bullets li span { flex: 1; }
.abo-chk { flex-shrink: 0; margin-top: 1px; color: #1e3a5f; }

/* Badge état — règle unique consolidée */
.abo-badge-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  background: #d1fae5;
  color: #065f46;
}
.abo-badge-status.warning { background: #FEF3C7; color: #B45309; border: 1px solid #FCD34D; }
.abo-badge-status.danger  { background: #fee2e2; color: #991b1b; border: none; }

/* ── FIX SCROLL MODAL MOBILE: cfg-panel debe scrollear, no el overlay ── */
#cfg-panel {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
  min-height: 0;
}
/* El overlay no debe scrollear — el modal interno sí */
.modal-bg { overflow-y: auto; padding: 20px 10px; }
@media (max-width: 600px) {
  .modal-bg { padding: 12px 8px !important; align-items: flex-start !important; }
}

/* ── SEPARADOR SOPORTE HUMANO ── */
.abo-support-sep {
  border-top: 1px solid #e2e8f0;
  margin-top: 12px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.abo-note-footer {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
}

/* ── Ligne prix sous le CTA ── */
.abo-price-line {
  text-align: center;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
  margin: -12px 0 16px;
  line-height: 1.4;
}

/* ── Dropdown: cabecera compacta ── */
.hdrop-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.hdrop-header-brand {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0f172a;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.hdrop-header-email {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Dropdown: accordéon Mes données ── */
.hdrop-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.18s ease;
}
.hdrop-sub {
  margin: 0 6px 4px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}
.hdrop-subitem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}
.hdrop-subitem:last-child { border-bottom: none; }
.hdrop-subitem:hover { background: #f1f5f9; color: #0f172a; }
.hdrop-subitem svg { flex-shrink: 0; color: #94a3b8; }
.hdrop-subitem.disabled {
  cursor: default;
  color: #cbd5e1;
  opacity: .7;
}
.hdrop-subitem.disabled:hover { background: none; color: #cbd5e1; }
.hdrop-subitem.disabled svg { color: #cbd5e1; }
.hdrop-soon {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #94a3b8;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 999px;
}
.hdrop-sub-sep { height: 1px; background: #e2e8f0; margin: 2px 0; }

/* ── Config: zone danger ── */
.config-danger-zone {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #fee2e2;
}
.config-delete-btn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #dc2626;
  cursor: pointer;
  padding: 0;
}
.config-delete-btn:hover { color: #991b1b; text-decoration: underline; }