:root { --navy: #1b3a4b; --accent: #2e8bc0; --bg: #f4f6f8; --border: #dde3e8; --ok: #2e7d32; --warn: #c0392b; } * { box-sizing: border-box; } body { margin:0; font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color:#1c2b33; } header { background: var(--navy); color:#fff; padding: 12px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } header h1 { font-size:17px; margin:0; font-weight:600; } header .userbox { display:flex; align-items:center; gap:8px; font-size:13px; } header select { padding:5px 8px; border-radius:6px; border:none; font-size:13px; } nav { display:flex; gap:2px; background:#fff; border-bottom:1px solid var(--border); padding: 0 20px; flex-wrap:wrap; } nav button { background:none; border:none; padding:11px 14px; font-size:13.5px; cursor:pointer; color:#4a5a63; border-bottom:2px solid transparent; white-space:nowrap; } nav button.active { color: var(--navy); border-bottom:2px solid var(--accent); font-weight:600; } main { padding: 20px; max-width: 1150px; margin: 0 auto; } .card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:14px; } .card h3 { margin:0 0 10px; font-size:15px; } .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; } input, select, textarea { padding:7px 9px; border:1px solid var(--border); border-radius:6px; font-size:13px; font-family:inherit; } textarea { width:100%; resize:vertical; } button.primary { background: var(--accent); color:#fff; border:none; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:13px; } button.primary:hover { background:#26749e; } button.ghost { background:#fff; border:1px solid var(--border); padding:7px 12px; border-radius:6px; cursor:pointer; font-size:12.5px; } table { width:100%; border-collapse: collapse; font-size:13px; } th, td { text-align:left; padding:7px 8px; border-bottom:1px solid var(--border); } th { color:#5a6b73; font-weight:600; font-size:11.5px; text-transform:uppercase; } .badge { padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; display:inline-block; } .b-prospection,.b-recue,.b-a_echeance,.b-envoye,.b-en_attente { background:#fff3cd; color:#8a6d00; } .b-encours { background:#d4edff; color:#0b5c8a; } .b-reception { background:#e6d9ff; color:#5a2d9e; } .b-cloture,.b-paye,.b-retenue,.b-acceptee { background:#dcf5e0; color:#1e7a34; } .b-retard,.b-rejetee,.b-refuse { background:#fde0de; color:#a12b20; } .b-brouillon { background:#fff3cd; color:#8a6d00; } .b-valide { background:#dcf5e0; color:#1e7a34; } .empty { color:#8a99a1; font-size:13px; padding: 10px 0; } .note { background:#fff8e1; border:1px solid #ffe6a3; padding:10px 12px; border-radius:6px; font-size:12.5px; color:#7a5c00; margin-bottom:16px; } .small { font-size:12px; color:#7a8a92; } .kpi-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; } .kpi { background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px 16px; min-width:150px; } .kpi .label { font-size:11.5px; color:#7a8a92; text-transform:uppercase; } .kpi .value { font-size:20px; font-weight:700; color:var(--navy); } tr.total td { font-weight:600; background:#f7fafc; } .perm-grid { border-collapse: collapse; } .perm-grid th, .perm-grid td { text-align:center; padding:6px 10px; } .perm-grid td:first-child, .perm-grid th:first-child { text-align:left; } .error-box { background:#fde0de; border:1px solid #f4b3ac; color:#a12b20; padding:10px 12px; border-radius:6px; font-size:13px; margin-bottom:14px; } .locked { text-align:center; padding: 60px 20px; color:#7a8a92; } /* Rapports de chantier — miniatures volontairement grandes (défaut corrigé le 31/07/2026 : les photos étaient trop petites une fois imprimées). Même taille à l'écran et à l'impression, pas de réduction supplémentaire en @media print. */ .rc-photos { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .rc-thumb { position:relative; width:170px; height:128px; border-radius:6px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; } .rc-thumb img { width:100%; height:100%; object-fit:cover; display:block; } .rc-thumb .rm { position:absolute; top:3px; right:3px; background:rgba(255,255,255,.92); border:none; border-radius:3px; font-size:12px; line-height:14px; padding:1px 5px; cursor:pointer; color:var(--warn); font-weight:700; } .rc-addphoto { width:170px; height:128px; border:2px dashed var(--border); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:26px; color:#7a8a92; cursor:pointer; background:#f7fafc; flex-shrink:0; } .rc-lot { border:1px solid var(--border); border-radius:8px; margin-bottom:12px; overflow:hidden; } .rc-lot-head { background:#eef3f7; padding:8px 12px; font-weight:600; display:flex; justify-content:space-between; align-items:center; } .rc-point { border-top:1px solid var(--border); padding:10px 12px; background:#fff; } .rc-point.rappel { background:#fde0de; border-left:3px solid var(--warn); } .rc-point .meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:6px; } .rc-crossref { padding:6px 12px; font-size:12px; color:#7a8a92; background:var(--bg); border-top:1px dashed var(--border); } /* Points épinglés sur plan (Rapports de chantier + Réception) — voir core.js planPickerHtml() / planPointThumbHtml(). Repère en forme de goutte, cohérent avec la taille des miniatures photo (.rc-thumb) pour rester lisible à l'impression. */ .plan-pin { position:absolute; width:16px; height:16px; margin:-16px 0 0 -8px; background:var(--warn); border:2px solid #fff; border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 1px 3px rgba(0,0,0,.4); pointer-events:none; } .plan-picker-img { max-width:100%; max-height:420px; display:block; border:1px solid var(--border); border-radius:6px; cursor:crosshair; } /* Réception — statuts de réserve */ .b-ouverte { background:#fde0de; color:#a12b20; } .b-levee { background:#dcf5e0; color:#1e7a34; } /* Module Plans — bibliothèque */ .plan-card { border:1px solid var(--border); border-radius:8px; overflow:hidden; background:#fff; } .plan-card img { width:100%; height:160px; object-fit:contain; background:#f7fafc; display:block; border-bottom:1px solid var(--border); } .plan-card .body { padding:10px 12px; } @media print { .rc-thumb, .rc-addphoto { width:170px; height:128px; } header, nav, .no-print { display:none !important; } body { background:#fff; } main { max-width:none; padding:0; } .card { border:none; box-shadow:none; } /* Sans ceci, les navigateurs (Chrome/Edge/Firefox) suppriment par défaut les couleurs de fond à l'impression : les barres du Gantt (vert/rouge/bleu) devenaient invisibles. */ * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } } /* ============================================================================= Planning / Gantt (module Chantiers, V8) — portage fidèle de la maquette validée par Enrick (fichier de référence : gantt_mockup.html). Tout est scopé sous .planning-v8 pour ne jamais interférer avec le reste de l'application (palette, polices, .btn/.cell/.chip propres à cet écran). Voir public/modules/chantiers.js pour le rendu (renderPlanningV8 / renderGanttAll) et la logique (dérivation avancement/retard, édition en ligne, panneau "Nouveau lot", impression). ============================================================================= */ .planning-v8 { --bg: #F3F5F8; --paper: #FFFFFF; --paper-alt: #F4F7FB; --ink: #16233A; --ink-soft: #52627A; --ink-faint: #8695AC; --line: #E0E6EF; --line-strong: #C7D1E0; --accent: #2B5FA6; --accent-ink: #16407A; --accent-deep: #0E2F5C; --accent-track: #DCE7F6; --accent-pale: #EEF3FB; --delay: #C7562D; --delay-track: #F5DED2; --today-line: #16407A; --shadow: 0 1px 2px rgba(22,35,58,0.05), 0 8px 24px -12px rgba(22,35,58,0.14); font-family: 'Public Sans', ui-sans-serif, system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; padding-bottom: 24px; } .planning-v8 *, .planning-v8 *::before, .planning-v8 *::after { box-sizing: border-box; } .planning-v8 ::selection { background: var(--accent-track); } /* ---------- Bandeau titre ---------- */ .planning-v8 .titleblock { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 22px 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 16px; } .planning-v8 .titleblock-left { min-width: 260px; display: flex; align-items: center; gap: 16px; } .planning-v8 .titleblock-logo { height: 44px; width: auto; flex: 0 0 auto; } .planning-v8 .eyebrow { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; margin: 0 0 6px; } .planning-v8 h1 { font-family: 'Big Shoulders Display', ui-sans-serif, sans-serif; font-weight: 700; font-size: clamp(24px, 3vw, 36px); margin: 0; line-height: 1.02; } .planning-v8 .titleblock-meta { display: grid; grid-template-columns: repeat(5, auto); gap: 2px 28px; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; } .planning-v8 .titleblock-meta dt { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; grid-row: 1; margin:0; } .planning-v8 .titleblock-meta dd { margin: 2px 0 0; color: var(--ink); font-weight: 500; grid-row: 2; } /* ---------- Barre d'outils ---------- */ .planning-v8 .toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .planning-v8 .toolbar-group { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .planning-v8 button.btn { font-family: 'Public Sans', sans-serif; font-size: 13px; font-weight: 600; border-radius: 7px; padding: 8px 14px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease; } .planning-v8 button.btn:hover { background: var(--paper-alt); border-color: var(--ink-faint); } .planning-v8 button.btn:active { transform: translateY(1px); } .planning-v8 button.btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: white; } .planning-v8 button.btn.primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); } .planning-v8 button.btn.ghost { background: var(--accent-pale); border-color: var(--accent-track); color: var(--accent-deep); } .planning-v8 button.btn.ghost:hover { background: var(--accent-track); } .planning-v8 button.btn.small { padding: 5px 10px; font-size: 12px; border-radius: 6px; } .planning-v8 button.btn.danger-ghost { background: transparent; border-color: var(--line); color: var(--ink-faint); } .planning-v8 button.btn.danger-ghost:hover { border-color: var(--delay); color: var(--delay); } .planning-v8 button.btn.edit-toggle.is-active { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } /* ---------- Légende ---------- */ .planning-v8 .legend { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 12px 18px; margin-bottom: 16px; font-size: 12.5px; color: var(--ink-soft); } .planning-v8 .legend-item { display: flex; align-items: center; gap: 7px; white-space: nowrap; } .planning-v8 .legend-swatch { width: 22px; height: 10px; border-radius: 3px; flex: none; } .planning-v8 .legend-swatch.track { background: var(--paper-alt); border: 1.5px solid var(--line-strong); } .planning-v8 .legend-swatch.fill { background: var(--accent); } .planning-v8 .legend-swatch.gap { background: var(--delay); } .planning-v8 .legend-line { width: 2px; height: 16px; background: var(--today-line); flex: none; } .planning-v8 .legend-sep { width: 1px; height: 16px; background: var(--line); align-self: center; } .planning-v8 .legend-chip-wrap { display: flex; align-items: center; } .planning-v8 .legend-liaisons { row-gap: 8px; } .planning-v8 .legend-liaisons-title { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; } .planning-v8 .liaison-example { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: var(--accent-ink); background: var(--accent-pale); border: 1px solid var(--accent-track); border-radius: 4px; padding: 1px 6px; margin-right: 4px; white-space: nowrap; } /* ---------- Bandeau mode édition ---------- */ .planning-v8 .edit-banner { display: flex; align-items: center; gap: 8px; background: var(--accent-pale); border: 1px solid var(--accent-track); color: var(--accent-deep); border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; font-size: 12.5px; font-weight: 600; } .planning-v8 .edit-banner[hidden] { display: none; } .planning-v8 .edit-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-deep); flex: none; animation: v8pulse 1.6s ease-in-out infinite; } @keyframes v8pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---------- Fenêtre "Colonnes à imprimer" ---------- */ .planning-v8 .modal-backdrop { position: fixed; inset: 0; background: rgba(14, 20, 32, 0.45); backdrop-filter: blur(1px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; } .planning-v8 .modal-backdrop[hidden] { display: none; } .planning-v8 .modal-card { background: var(--paper); border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 20px 60px -20px rgba(14,20,32,0.35); padding: 24px 26px; max-width: 440px; width: 100%; } .planning-v8 .modal-card h2 { font-family: 'Big Shoulders Display', sans-serif; font-size: 19px; font-weight: 700; margin: 0 0 4px; color: var(--accent-deep); } .planning-v8 .modal-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 16px; } .planning-v8 .print-col-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 18px; } .planning-v8 .print-col-options label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; } .planning-v8 .print-col-options input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-deep); cursor: pointer; } .planning-v8 .modal-actions { display: flex; justify-content: flex-end; gap: 10px; } /* ---------- Panneau "Nouveau lot" ---------- */ .planning-v8 .lot-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 16px; } .planning-v8 .lot-panel[hidden] { display: none; } .planning-v8 .lot-panel h2 { font-family: 'Big Shoulders Display', sans-serif; font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--accent-deep); } .planning-v8 .lot-panel .panel-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 18px; max-width: 66ch; } .planning-v8 .form-grid { display: grid; grid-template-columns: 0.55fr 1.3fr 1fr 0.85fr 0.85fr; gap: 14px 16px; margin-bottom: 8px; } .planning-v8 .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .planning-v8 .field label { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; } .planning-v8 .field input, .planning-v8 .field select { font-family: 'Public Sans', sans-serif; font-size: 13.5px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 7px; padding: 8px 10px; background: var(--paper); outline: none; width:100%; } .planning-v8 .field input:focus, .planning-v8 .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-track); } .planning-v8 .field input[readonly] { background: var(--paper-alt); color: var(--ink-soft); } .planning-v8 .field-error { font-size: 11px; color: var(--delay); min-height: 14px; } .planning-v8 .auto-note { font-size: 11.5px; color: var(--accent-ink); display: flex; align-items: center; gap: 5px; min-height: 16px; } .planning-v8 .auto-note.is-empty { color: var(--ink-faint); } .planning-v8 .auto-note .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .planning-v8 .sublots-block { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 14px; } .planning-v8 .sublots-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 10px; } .planning-v8 .sublot-row { display: grid; grid-template-columns: 1.5fr 1fr 0.7fr 0.6fr auto; gap: 10px; align-items: end; margin-bottom: 10px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; } .planning-v8 .sublot-row .field input { background: var(--paper); } .planning-v8 .sublot-remove { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-faint); cursor: pointer; font-size: 15px; line-height: 1; } .planning-v8 .sublot-remove:hover { border-color: var(--delay); color: var(--delay); } .planning-v8 .panel-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; flex-wrap: wrap; gap: 10px; } .planning-v8 .annuaire-block { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; } .planning-v8 .annuaire-title { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 4px; } .planning-v8 .annuaire-sub { font-size: 11.5px; color: var(--ink-faint); margin: 0 0 12px; } .planning-v8 table.annuaire { width: 100%; border-collapse: collapse; font-size: 13px; } .planning-v8 table.annuaire th { text-align: left; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); } .planning-v8 table.annuaire td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); } .planning-v8 table.annuaire tr:hover td { background: var(--accent-pale); } .planning-v8 table.annuaire td.entreprise-empty { color: var(--ink-faint); font-style: italic; } /* ---------- Châssis du graphique : deux volets synchronisés ---------- */ .planning-v8 .chart-shell { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: flex; align-items: flex-start; overflow: hidden; } .planning-v8 .chart-shell.is-editing { border-color: var(--accent); } .planning-v8 .info-pane { flex: 0 0 auto; display: flex; flex-direction: column; border-right: 1px solid var(--line-strong); } .planning-v8 .timeline-pane-outer { flex: 1 1 auto; overflow-x: auto; min-width: 0; } .planning-v8 .timeline-pane { position: relative; display: flex; flex-direction: column; } .planning-v8 .info-row, .planning-v8 .tl-row { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); height: var(--row-h, 36px); } .planning-v8 .info-row.is-lot, .planning-v8 .tl-row.is-lot { height: var(--row-h-lot, 42px); background: var(--paper-alt); } .planning-v8 .info-row.is-task .cell, .planning-v8 .tl-row.is-task { background: var(--paper); } .planning-v8 .info-row.is-new, .planning-v8 .tl-row.is-new { animation: v8flashnew 1.6s ease-out; } @keyframes v8flashnew { 0% { background: var(--accent-track); } 100% { background: transparent; } } .planning-v8 .info-row[data-hidden="true"], .planning-v8 .tl-row[data-hidden="true"] { display: none; } .planning-v8 .info-row.is-add-row { background: var(--paper); border-bottom: 1px dashed var(--line-strong); align-items: center; } .planning-v8 .add-cell { padding: 0 8px; } .planning-v8 button.add-sublot-btn { width: 100%; text-align: left; border-style: dashed; } .planning-v8 .tl-row.is-add-row { background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 10px); background-position: 0 50%; background-size: 10px 1px; background-repeat: repeat-x; } .planning-v8 .info-row.is-head, .planning-v8 .tl-row.is-head { background: var(--paper-alt); border-bottom: 1px solid var(--line-strong); height: var(--row-h-head, 34px); } .planning-v8 .cell { display: flex; align-items: center; padding: 0 8px; font-size: 12.5px; min-width: 0; flex: none; } .planning-v8 .cell.head-label { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 600; } .planning-v8 .cell.mono, .planning-v8 .cell.num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .planning-v8 .cell.num { justify-content: flex-end; } .planning-v8 .w-toggle { width: 32px; justify-content: center; padding: 0; } .planning-v8 .w-order { width: 52px; justify-content: flex-end; } .planning-v8 .w-name { width: 230px; flex: 1 1 auto; } .planning-v8 .w-resp { width: 122px; } .planning-v8 .w-dur { width: 76px; } .planning-v8 .w-date { width: 92px; } .planning-v8 .w-pct { width: 60px; } .planning-v8 .w-retard { width: 76px; } .planning-v8 .w-intemp { width: 76px; } .planning-v8 .w-liaison{ width: 84px; } .planning-v8 .w-status { width: 108px; } .planning-v8 .w-del { width: 26px; justify-content: center; padding: 0; } .planning-v8 .toggle-btn { width: 20px; height: 20px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink-soft); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .planning-v8 .toggle-btn:hover { background: var(--accent-pale); border-color: var(--accent); } .planning-v8 .task-cell { gap: 8px; } .planning-v8 .task-name { line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .planning-v8 .is-lot .task-name { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; font-size: 15px; font-weight: 700; } .planning-v8 .is-task .task-name { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; font-weight: 400; } .planning-v8 .indent { width: 14px; flex: none; } .planning-v8 .lot-code { font-family: 'IBM Plex Mono', monospace; color: var(--accent-ink); font-size: 11px; flex: none; font-weight: 600; } .planning-v8 .chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; } .planning-v8 .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; } .planning-v8 .chip.done { background: var(--accent-deep); color: #fff; } .planning-v8 .chip.done::before { background: #fff; } .planning-v8 .chip.progress { background: var(--accent-track); color: var(--accent-deep); } .planning-v8 .chip.progress::before { background: var(--accent); } .planning-v8 .chip.late { background: var(--delay-track); color: var(--delay); } .planning-v8 .chip.late::before { background: var(--delay); } .planning-v8 .chip.upcoming { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); } .planning-v8 .chip.upcoming::before { background: var(--ink-faint); } .planning-v8 .chip.signe { background: var(--accent-deep); color: #fff; } .planning-v8 .chip.signe::before { background: #fff; } .planning-v8 .chip.attente { background: var(--accent-track); color: var(--accent-deep); } .planning-v8 .chip.attente::before { background: var(--accent); } .planning-v8 .chip.aucun { background: transparent; color: var(--ink-soft); border: 1px solid var(--line-strong); } .planning-v8 .chip.aucun::before { background: var(--ink-faint); } .planning-v8 .liaison { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink-soft); } .planning-v8 .liaison.none { color: var(--ink-faint); } .planning-v8 .cell-edit { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--ink); border: 1px solid var(--accent-track); border-radius: 5px; padding: 3px 5px; background: var(--paper); outline: none; } .planning-v8 .cell-edit:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-track); } .planning-v8 .cell-edit.pct-edit { width: 46px; text-align: right; } .planning-v8 .cell-edit.intemp-edit { width: 38px; text-align: right; } .planning-v8 .name-edit { font-family: 'Times New Roman', Times, 'Liberation Serif', serif; font-size: 13px; } .planning-v8 .tl-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; } .planning-v8 .month-line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); } .planning-v8 .month-line.year-start { background: var(--line-strong); } .planning-v8 .today-line { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--today-line); z-index: 2; } .planning-v8 .today-label { position: absolute; top: -22px; transform: translateX(-50%); font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 700; color: var(--today-line); background: var(--paper); padding: 1px 6px; border-radius: 4px; border: 1px solid var(--today-line); white-space: nowrap; } .planning-v8 .month-header-item { flex: none; width: var(--month-w, 100px); display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); border-right: 1px solid var(--line); } .planning-v8 .tl-row { position: relative; } .planning-v8 .bar-wrap { position: absolute; top: 50%; transform: translateY(-50%); height: 16px; z-index: 1; } .planning-v8 .tl-row.is-lot .bar-wrap { height: 12px; } .planning-v8 .bar-track { position: absolute; inset: 0; border-radius: 5px; background: var(--paper); border: 1.5px solid var(--line-strong); } .planning-v8 .bar-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px 0 0 5px; background: var(--accent); } .planning-v8 .bar-fill.complete { border-radius: 5px; } .planning-v8 .bar-gap { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--delay) 0 4px, var(--delay-track) 4px 8px); opacity: 0.92; } .planning-v8 .bar-gap.at-edge-right { border-radius: 0 5px 5px 0; } .planning-v8 .bar-intemp { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--accent-ink) 0 4px, var(--accent-track) 4px 8px); opacity: 0.5; border-radius: 0 5px 5px 0; } .planning-v8 .bar-pct { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); margin-left: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .planning-v8 .bar-jalon { position:absolute; top:50%; width:12px; height:12px; transform:translate(-50%,-50%) rotate(45deg); background:var(--accent); z-index:1; } .planning-v8 .bar-jalon.done { background: var(--accent-deep); } .planning-v8 footer.note { margin-top: 18px; font-size: 12px; color: var(--ink-faint); max-width: 74ch; } .planning-v8 footer.note b { color: var(--ink-soft); } .planning-v8 .print-footer { display: none; flex-direction: column; gap: 5px; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: #444; border-top: 1px solid #333; padding-top: 8px; } .planning-v8 .print-footer-row { display: flex; justify-content: space-between; gap: 16px; } .planning-v8 .print-footer-company { line-height: 1.5; color: #666; font-size: 9.5px; } /* Format d'impression du planning : forcé en A3 paysage via une balise