/* Vue publique — intégrée en iframe dans Zoho Projects. Image de marque L'effet futé : bleu #2C2C6B (dominant), saumon #F77562, vert #23A97D, noir de marque #161615 ; titres Lexend, texte Montserrat. Modes clair et sombre via light-dark() : suit la préférence du système (comme le mode « auto » de Zoho), forçable avec ?theme=dark ou ?theme=light dans l'URL d'intégration (posé sur par dashboard.js). Le fond est opaque dans les deux modes : un fond transparent rendait le texte illisible sur le thème sombre de Zoho. */ @font-face { font-family: 'Lexend'; src: url('fonts/Lexend-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } :root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 13px; color: light-dark(#161615, #e9e9f1); background: light-dark(#f6f6f9, #16161d); padding: 12px; } .message { display: flex; align-items: center; justify-content: center; min-height: 160px; color: light-dark(#5a6072, #9a9fb4); text-align: center; padding: 16px; } .message-error p, .message-info p { background: light-dark(#f4f4f7, #23232f); border: 1px solid light-dark(#d9d9e3, #3a3a4d); border-radius: 8px; padding: 14px 22px; margin: 0; } .notes { background: light-dark(#fef4e2, #33290f); border: 1px solid #f6bb3f; border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; } .notes p { margin: 4px 0; } /* --- Barre d'outils (fraîcheur + bouton Actualiser) --- */ .toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 8px; } .freshness { font-size: 11px; color: light-dark(#8a8fa3, #82879c); } .refresh-btn { font-family: 'Montserrat', Arial, sans-serif; font-weight: 500; font-size: 12px; color: light-dark(#2c2c6b, #c3c6f2); background: light-dark(#ffffff, #26262f); border: 1px solid light-dark(#c9cbd8, #45455c); border-radius: 6px; padding: 5px 12px; cursor: pointer; } .refresh-btn:hover { background: light-dark(#f0f0f7, #30303f); border-color: light-dark(#2c2c6b, #8b8bdf); } .refresh-btn:disabled { opacity: 0.55; cursor: wait; } /* --- Bandeau de KPI en trois groupes : Budgets / Coûts / Budget restant --- */ .indicators { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 12px; margin-bottom: 16px; align-items: stretch; } @media (max-width: 980px) { .indicators { grid-template-columns: 1fr; } } .indicator-group { background: light-dark(#ffffff, #1f1f2b); border: 1px solid light-dark(#e3e3ec, #34344a); border-top: 4px solid #2c2c6b; border-radius: 10px; padding: 10px 12px 12px; } .group-budgets { border-top-color: light-dark(#2c2c6b, #8b8bdf); } .group-couts { border-top-color: #f77562; } .group-restant { border-top-color: light-dark(#23a97d, #2fc492); } .group-title { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; } .group-budgets .group-title { color: light-dark(#2c2c6b, #a9a9ea); } .group-couts .group-title { color: light-dark(#d4553f, #ff9d8b); } .group-restant .group-title { color: light-dark(#1c7f5e, #4fd3a5); } .group-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .indicator { background: light-dark(#fbfbfd, #262633); border: 1px solid light-dark(#ececf3, #3a3a4d); border-radius: 8px; padding: 8px 10px; min-width: 0; } .indicator-label { font-weight: 500; font-size: 11px; color: light-dark(#5a6072, #a2a7bd); text-transform: uppercase; letter-spacing: 0.02em; } /* Rangée label + bouton « + » sur la carte Coût planifié */ .indicator-label-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .details-toggle { flex: none; display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid light-dark(#c9cbd8, #45455c); background: light-dark(#ffffff, #30303f); color: light-dark(#2c2c6b, #c3c6f2); font: 700 13px/1 'Montserrat', Arial, sans-serif; cursor: pointer; } .details-toggle:hover { border-color: light-dark(#2c2c6b, #8b8bdf); background: light-dark(#f0f0f7, #3a3a4c); } /* Cartes de détail (à ce jour / futur) : présentées comme des sous-éléments */ .indicator-detail { border-style: dashed; } .indicator-detail .indicator-value { font-size: 17px; } .indicator-value { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 19px; margin-top: 4px; color: light-dark(#161615, #f0f0f7); white-space: nowrap; } .indicator-hint { font-size: 10px; color: light-dark(#8a8fa3, #8d92a8); margin-top: 2px; } /* Carte « Coût total » : mise en évidence, dans la rangée à droite des éléments à l'heure */ .indicator-total { background: light-dark(#fdeae7, #3b2521); border-color: #f77562; } .indicator-total .indicator-label { color: light-dark(#a53c2b, #ffb3a5); } .negative { color: light-dark(#c0392b, #ff7663); } /* --- Sections et tableaux communs aux types de tableaux de bord --- */ .type-table-wrap { overflow-x: auto; } .summary { margin-bottom: 16px; } .section-title { font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: light-dark(#2c2c6b, #a9a9ea); margin: 18px 0 8px; } /* Section Rentabilité : 50 % de largeur sous le tableau des phases */ .rentabilite { width: 50%; min-width: 460px; } @media (max-width: 720px) { .rentabilite { width: 100%; min-width: 0; } } .rent-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 10px; } .mini-table { width: 100%; border-collapse: collapse; background: light-dark(#ffffff, #1f1f2b); border: 1px solid light-dark(#e3e3ec, #34344a); border-radius: 8px; } .mini-table th, .mini-table td { padding: 7px 10px; border-bottom: 1px solid light-dark(#ececf3, #323245); text-align: left; white-space: nowrap; vertical-align: top; } .mini-table th { background: #2c2c6b; color: #ffffff; font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; } .mini-table tbody tr:nth-child(even) { background: light-dark(#f7f7fa, #24242f); } .mini-table td.num, .mini-table th.num { text-align: right; } .mini-table td.empty { text-align: center; color: light-dark(#8a8fa3, #8d92a8); white-space: normal; } .mini-table .cell-wrap { white-space: normal; } .mini-table .zero-row td { color: light-dark(#8a8fa3, #8d92a8); } .muted-value { color: light-dark(#8a8fa3, #8d92a8); } .status-badge { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 8px; border-radius: 10px; } .status-ouvert { background: light-dark(#e8f6ee, #1d3327); color: light-dark(#1e6b40, #6fd39c); border: 1px solid light-dark(#b7e0c8, #2f7a51); } .status-ferme { background: light-dark(#ececf3, #2c2c3a); color: light-dark(#4c5165, #9a9fb4); border: 1px solid light-dark(#d4d4e0, #45455c); } .tag-chip { display: inline-block; font-size: 10px; padding: 1px 8px; margin: 1px 4px 1px 0; border-radius: 10px; background: light-dark(#eceffa, #26263a); color: light-dark(#2c2c6b, #a9a9ea); border: 1px solid light-dark(#c3c9e8, #4a4a6b); } /* Balise « Demande à facturer » : vert (marque) */ .tag-chip.tag-a-facturer { background: light-dark(#e5f6ef, #1d3a2e); color: light-dark(#1c7f5e, #4fd3a5); border-color: light-dark(#23a97d, #2f7a51); } /* Balise « Facturation faite » : bleu poudre */ .tag-chip.tag-facture { background: light-dark(#e3f0fa, #24344a); color: light-dark(#2b5f8e, #9ec9ef); border-color: light-dark(#a9cdea, #3f5f80); } .facturation-table .cell-desc { min-width: 220px; max-width: 420px; } .desc-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; color: light-dark(#5a6072, #9a9fb4); } /* --- Tableau par phase --- */ .phases-wrap { overflow-x: auto; } .phases { width: 100%; border-collapse: collapse; background: light-dark(#ffffff, #1f1f2b); border: 1px solid light-dark(#e3e3ec, #34344a); border-radius: 8px; } .phases th, .phases td { padding: 8px 12px; border-bottom: 1px solid light-dark(#ececf3, #323245); text-align: left; white-space: nowrap; } .phases th { background: #2c2c6b; color: #ffffff; font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.02em; } /* Rangées de phase : cliquables, déplient la liste de leurs tâches. La zébrure passe par une classe (les rangées de détail fausseraient nth-child). */ .phases tbody tr.phase-row { cursor: pointer; } .phases tbody tr.phase-row.zebra { background: light-dark(#f7f7fa, #24242f); } .phases tbody tr.phase-row:hover { background: light-dark(#eef0f7, #2a2a38); } .phases tbody tr.phase-row:focus-visible { outline: 2px solid light-dark(#2c2c6b, #8b8bdf); outline-offset: -2px; } .row-chevron { display: inline-block; width: 12px; font-size: 10px; color: light-dark(#8a8fa3, #8d92a8); } .phases td.num, .phases th.num { text-align: right; } /* Colonne « Coût total » : léger rappel visuel de la carte */ .phases td.col-total { background: light-dark(#fdf1ef, #33231f); font-weight: 500; } .phases th.col-total { background: #3d3d7a; } .phases td.empty { text-align: center; color: light-dark(#8a8fa3, #8d92a8); white-space: normal; } .row-hors-phase td { color: light-dark(#5a6072, #9a9fb4); font-style: italic; } /* Rangée de détail : liste des tâches comptabilisées dans la phase */ .task-row td { padding: 0 12px 10px; background: light-dark(#fafafc, #1b1b26); white-space: normal; } .task-list { padding: 4px 0 0 22px; } /* En-tête de groupe (liste de tâches Zoho) dans le dropdown d'une phase */ .task-group-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 3px 0; font-family: 'Lexend', Arial, sans-serif; font-weight: 700; font-size: 11px; color: light-dark(#2c2c6b, #a9a9ea); border-bottom: 1px solid light-dark(#dcdce8, #3a3a4f); } .task-group-title:first-child { margin-top: 0; } .task-item { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; border-bottom: 1px dashed light-dark(#ececf3, #32324a); font-size: 12px; font-style: normal; } .task-item:last-child { border-bottom: none; } .task-name { flex: 1 1 auto; min-width: 0; color: light-dark(#161615, #e9e9f1); } .task-type { flex: none; font-size: 10px; padding: 1px 8px; border-radius: 10px; } /* Taux d'efficacité d'une tâche (temps planifié ÷ temps réel) */ .task-eff { flex: none; font-size: 10px; padding: 1px 8px; border-radius: 10px; border: 1px solid transparent; } .eff-bonne { background: light-dark(#e5f6ef, #1d3a2e); color: light-dark(#1c7f5e, #4fd3a5); border-color: light-dark(#23a97d, #2f7a51); } .eff-faible { background: light-dark(#fdeae7, #3b2521); color: light-dark(#a53c2b, #ffb3a5); border-color: #f77562; } .type-heure { background: light-dark(#fdeae7, #3b2521); color: light-dark(#a53c2b, #ffb3a5); border: 1px solid #f77562; } .type-forfait { background: light-dark(#eceffa, #26263a); color: light-dark(#2c2c6b, #a9a9ea); border: 1px solid light-dark(#c3c9e8, #4a4a6b); } .task-amount { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; color: light-dark(#161615, #e9e9f1); } .task-zero .task-name, .task-zero .task-amount { color: light-dark(#8a8fa3, #8d92a8); } .task-empty { margin: 6px 0; color: light-dark(#8a8fa3, #8d92a8); font-size: 12px; } .badge-sans-date { display: inline-block; background: light-dark(#fef4e2, #3a2f11); color: light-dark(#8a6210, #f2cf7e); border: 1px solid #f6bb3f; border-radius: 10px; font-size: 10px; padding: 1px 8px; font-style: normal; } .meta { margin-top: 10px; font-size: 10px; color: light-dark(#8a8fa3, #82879c); }