/* ===================================================================== CRM — v3 « Moteur d'action Ontario » Design tokens propres (--crm-*) dérivés du shell GANDALF : thème clair (signature Chanv crème) + sombre via body[data-gtheme="dark"]. Tout est scopé .crm- ; aucune fuite vers le reste du hub. ===================================================================== */ /* .crm-rt-notepop est ancré au (hors #crm-view) comme .crm-sheet-ov : sans lui dans cette liste, tous ses var(--crm-*) seraient indéfinis. */ #crm-view, #agriculture-view, #ambassadeurs-view, #diffusions-view, #ligne-du-temps-view, .crm-sheet-ov, .crm-rt-notepop { /* thème clair (défaut) */ --crm-ground: transparent; --crm-card: #FFFFFF; --crm-card-2: #FAF6EC; --crm-line: rgba(40, 34, 24, .09); --crm-line-strong: rgba(40, 34, 24, .16); --crm-ink: #282521; --crm-ink-2: rgba(40, 38, 34, .62); --crm-ink-3: rgba(40, 38, 34, .42); --crm-accent: #A8863F; --crm-accent-ink: #FFFFFF; --crm-accent-soft: rgba(168, 134, 63, .10); --crm-shadow: 0 1px 2px rgba(40, 34, 24, .04), 0 8px 24px -12px rgba(40, 34, 24, .10); --crm-shadow-lift: 0 2px 4px rgba(40, 34, 24, .05), 0 16px 32px -16px rgba(40, 34, 24, .18); --crm-ok-ink: #256B43; --crm-ok-bg: #E3F2E8; --crm-ok-dot: #34A264; --crm-warn-ink: #8A5A12; --crm-warn-bg: #F9EED9; --crm-warn-dot: #D08A2A; --crm-crit-ink: #93443B; --crm-crit-bg: #F7E9E6; --crm-crit-dot: #C0574E; --crm-info-ink: #31518E; --crm-info-bg: #E8EDF8; --crm-info-dot: #4A76C4; --crm-chart-a: #B99653; --crm-chart-b: #DDCBA4; /* Sentiments (Ambassadeurs) — échelle DIVERGENTE : deux teintes + un point neutre, luminosité en escalier vers chaque pôle (vérifiée en OKLab). Le vert et le rouge ne se touchent jamais : le neutre les sépare toujours. */ --amb-s-tres-positif: #256B43; --amb-s-positif: #34A264; --amb-s-mitige: #A89F8D; --amb-s-negatif: #C0574E; --amb-s-tres-negatif: #8F3A31; --amb-s-aucun: #CFC8B8; } body[data-gtheme="dark"] #crm-view, body[data-gtheme="dark"] #agriculture-view, body[data-gtheme="dark"] #ambassadeurs-view, body[data-gtheme="dark"] #diffusions-view, body[data-gtheme="dark"] #ligne-du-temps-view, body[data-gtheme="dark"] .crm-sheet-ov, body[data-gtheme="dark"] .crm-rt-notepop { --crm-card: #2b2823; --crm-card-2: #332f28; --crm-line: rgba(221, 203, 164, .13); --crm-line-strong: rgba(221, 203, 164, .26); --crm-ink: rgba(255, 255, 255, .92); --crm-ink-2: rgba(255, 255, 255, .58); --crm-ink-3: rgba(255, 255, 255, .36); --crm-accent: #DDCBA4; --crm-accent-ink: #241f16; --crm-accent-soft: rgba(221, 203, 164, .12); --crm-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 28px -14px rgba(0, 0, 0, .5); --crm-shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 18px 38px -16px rgba(0, 0, 0, .55); --crm-ok-ink: #96C7A8; --crm-ok-bg: rgba(84, 160, 116, .16); --crm-ok-dot: #64B586; --crm-warn-ink: #E5B573; --crm-warn-bg: rgba(208, 138, 42, .15); --crm-warn-dot: #DA9A44; --crm-crit-ink: #DE9A90; --crm-crit-bg: rgba(192, 87, 78, .16); --crm-crit-dot: #CC6B5A; --crm-info-ink: #A3BCE8; --crm-info-bg: rgba(74, 118, 196, .17); --crm-info-dot: #7B9BD6; --crm-chart-a: #DDCBA4; --crm-chart-b: #8a7347; /* Sentiments en thème sombre : mêmes teintes, escalier INVERSÉ — sur fond sombre, « plus fort » = plus clair. Jamais un simple recopiage du clair. */ --amb-s-tres-positif: #96C7A8; --amb-s-positif: #5FA97F; --amb-s-mitige: #7A7264; --amb-s-negatif: #B95F50; --amb-s-tres-negatif: #E29C92; --amb-s-aucun: #4A443A; } .crm-list, .crm-fiche { max-width: 980px; margin: 0 auto; color: var(--crm-ink); } /* --- Animations partagées ------------------------------------------- */ @keyframes crm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes crm-sheet-up { from { opacity: .4; transform: translateY(36px); } to { opacity: 1; transform: none; } } @keyframes crm-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes crm-shimmer { from { background-position: 140% 0; } to { background-position: -40% 0; } } @keyframes crm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52, 162, 100, .45); } 60% { box-shadow: 0 0 0 5px rgba(52, 162, 100, 0); } } @media (prefers-reduced-motion: reduce) { /* .crm-rt-notepop est ancré au : il échappe à `#crm-view *`, exactement comme .crm-sheet-ov. Sans lui ici, le panneau de note continuerait de glisser alors que « Réduire les animations » est actif. */ #crm-view *, #crm-view *::before, #crm-view *::after, .crm-sheet-ov, .crm-sheet, .crm-rt-notepop { animation: none !important; transition: none !important; } } /* --- Squelettes de chargement --------------------------------------- */ .crm-skel { border-radius: 10px; background: linear-gradient(100deg, var(--crm-card-2) 40%, var(--crm-card) 50%, var(--crm-card-2) 60%) 0 0 / 200% 100%; animation: crm-shimmer 1.4s linear infinite; } .crm-skel-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; } .crm-skel-row + .crm-skel-row { border-top: 1px solid var(--crm-line); } .crm-skel--av { width: 42px; height: 42px; border-radius: 13px; flex: none; } .crm-skel--l1 { height: 13px; width: 46%; margin-bottom: 7px; } .crm-skel--l2 { height: 11px; width: 28%; } .crm-skel--pill { width: 74px; height: 24px; border-radius: 999px; margin-left: auto; flex: none; } /* --- En-tête de la liste --------------------------------------------- */ .crm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; animation: crm-in .3s ease both; } .crm-head__title { font-size: 24px; font-weight: 650; letter-spacing: -.02em; } .crm-head__sub { font-size: 13px; color: var(--crm-ink-2); margin-top: 3px; } .crm-head__new { display: inline-flex; align-items: center; gap: 7px; background: var(--crm-accent); color: var(--crm-accent-ink); border: none; border-radius: 12px; font: inherit; font-size: 13.5px; font-weight: 550; padding: 10px 16px; cursor: pointer; box-shadow: var(--crm-shadow); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .crm-head__new:hover { transform: translateY(-1px); box-shadow: var(--crm-shadow-lift); filter: brightness(1.04); } .crm-head__new:active { transform: none; } /* KPI cliquables = filtres de statut */ .crm-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; } .crm-kpi { position: relative; text-align: left; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 16px; padding: 13px 16px 12px; cursor: pointer; font: inherit; color: inherit; box-shadow: var(--crm-shadow); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; animation: crm-in .34s ease both; } .crm-kpi:nth-child(2) { animation-delay: .03s; } .crm-kpi:nth-child(3) { animation-delay: .06s; } .crm-kpi:nth-child(4) { animation-delay: .09s; } .crm-kpi:nth-child(5) { animation-delay: .12s; } .crm-kpi:hover { transform: translateY(-2px); box-shadow: var(--crm-shadow-lift); } .crm-kpi:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 2px; } .crm-kpi__n { font-size: 22px; font-weight: 650; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; } .crm-kpi__l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--crm-ink-2); margin-top: 3px; } .crm-kpi__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--crm-ink-3); } .crm-kpi--actif .crm-kpi__dot { background: var(--crm-ok-dot); } .crm-kpi--ralentit .crm-kpi__dot { background: var(--crm-warn-dot); } .crm-kpi--dormant .crm-kpi__dot { background: var(--crm-crit-dot); } .crm-kpi--prospect .crm-kpi__dot { background: var(--crm-info-dot); } .crm-kpi.on { border-color: var(--crm-accent); box-shadow: 0 0 0 1px var(--crm-accent) inset, var(--crm-shadow); } .crm-kpi.on::after { content: ''; position: absolute; inset: 0; border-radius: 16px; background: var(--crm-accent-soft); pointer-events: none; } /* --- Barre d'outils --------------------------------------------------- */ .crm-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; animation: crm-in .38s ease both; } .crm-search { flex: 1 1 240px; min-width: 170px; display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 13px; transition: border-color .15s ease, box-shadow .15s ease; } .crm-search:focus-within { border-color: var(--crm-accent); box-shadow: 0 0 0 3px var(--crm-accent-soft); } .crm-search svg { color: var(--crm-ink-3); flex: none; } .crm-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--crm-ink); } .crm-search input::placeholder { color: var(--crm-ink-3); } .crm-filter { height: 42px; padding: 0 34px 0 13px; border: 1px solid var(--crm-line); border-radius: 13px; font: inherit; font-size: 13px; background: var(--crm-card); color: var(--crm-ink); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23968a70' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: border-color .15s ease; } .crm-filter:hover { border-color: var(--crm-line-strong); } .crm-count { font-size: 12.5px; color: var(--crm-ink-3); margin: 2px 2px 8px; } /* --- Table des magasins (desktop) / cards (mobile) -------------------- */ .crm-listwrap { background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 18px; overflow: hidden; box-shadow: var(--crm-shadow); animation: crm-in .42s ease both; } .crm-thead { display: grid; grid-template-columns: 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; gap: 13px; align-items: center; padding: 10px 18px; background: var(--crm-card-2); border-bottom: 1px solid var(--crm-line); } .crm-th { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--crm-ink-3); text-align: left; } button.crm-th { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: color .12s ease; } button.crm-th:hover { color: var(--crm-ink); } button.crm-th.on { color: var(--crm-accent); } .crm-th__arrow { font-size: 9px; line-height: 1; } .crm-row { display: grid; grid-template-columns: 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; gap: 13px; align-items: center; padding: 11px 18px; cursor: pointer; transition: background .12s ease; } .crm-row + .crm-row { border-top: 1px solid var(--crm-line); } .crm-row:hover { background: var(--crm-accent-soft); } /* Mode sélection (export ShipStation) — réservé aux gestionnaires. La piste de cases n'existe que sous .crm-list--sel : la grille à 9 pistes reste intacte pour les autres. */ .crm-list--sel .crm-thead, .crm-list--sel .crm-row { grid-template-columns: 26px 42px minmax(160px, 2fr) 76px minmax(78px, 1fr) minmax(78px, 1fr) 104px 96px 104px 100px; } .crm-sel-cb { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--crm-accent); } .crm-selbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 2px 8px; padding: 9px 13px; border: 1px solid var(--crm-accent); border-radius: 12px; background: var(--crm-accent-soft); animation: crm-in .2s ease both; } .crm-selbar__n { font-size: 13px; font-weight: 600; } .crm-selbar__sp { flex: 1; } .crm-selbar button { font-family: inherit; font-size: 12.5px; border-radius: 9px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--crm-line); background: var(--crm-card); color: var(--crm-ink); transition: filter .12s ease; } .crm-selbar button:hover:not(:disabled) { filter: brightness(.97); } .crm-selbar button:disabled { opacity: .55; cursor: default; } .crm-selbar__go { background: var(--crm-accent); border-color: var(--crm-accent); color: #fff; font-weight: 600; } .crm-selbar__msg { font-size: 12.5px; color: var(--crm-ink-3); } .crm-selbar__msg a { color: var(--crm-accent); font-weight: 600; } .crm-row:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: -2px; } .crm-row__main { min-width: 0; } .crm-row__name { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-row__sub, .crm-row__cell { color: var(--crm-ink-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-row__num { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- Pastilles de tags. Discrètes par construction : la liste va jusqu'à 1896 lignes actives, une pastille ne doit ni changer la hauteur d'une ligne ni tirer l'œil avant le nom du magasin — d'où 11 px, l'encre secondaire et l'absence de fond plein. Toutes les couleurs sortent des jetons --crm-* définis en clair ET en sombre au sommet du fichier : aucune valeur n'est posée dans un seul thème. --------------------------------------------------------------------------- */ .crm-tag { display: inline-flex; align-items: center; max-width: 130px; font: inherit; font-size: 11px; font-weight: 550; line-height: 1.55; padding: 0 7px; border-radius: 999px; border: 1px solid var(--crm-line-strong); background: var(--crm-card-2); color: var(--crm-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; } .crm-tag:hover { color: var(--crm-accent); border-color: var(--crm-accent); background: var(--crm-accent-soft); } /* Ce qui ne se clique pas ne fait pas semblant : « +N » (simple report) et une pastille désactivée (fiche sans navigation) gardent leur apparence au survol. */ .crm-tag--more, .crm-tag:disabled { cursor: default; } .crm-tag--more:hover, .crm-tag:disabled:hover { color: var(--crm-ink-2); border-color: var(--crm-line-strong); background: var(--crm-card-2); } /* Variante bouton (fiche, formulaire) : focus clavier visible, état « posé ». */ .crm-tag--btn:focus-visible { outline: 2px solid var(--crm-accent); outline-offset: 1px; } .crm-tag--btn.on { background: var(--crm-accent); border-color: var(--crm-accent); color: var(--crm-accent-ink); } /* Dans une ligne de liste, c'est la VILLE qui cède la place, pas les tags : la colonne « Magasin » tombe à son minimum de 160 px et les points de suspension mangeaient les pastilles — un tag qu'on ne voit pas ne sert à rien. `:not(.crm-row__mob)` : la sous-ligne MOBILE n'a pas de `__subtxt`, son texte y serait un item de flex anonyme sur lequel text-overflow: ellipsis ne s'applique pas — elle se ferait couper net au lieu de finir en « … ». */ .crm-row__sub:not(.crm-row__mob) { display: flex; align-items: center; } .crm-row__subtxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-tags { display: inline-flex; gap: 4px; flex: none; vertical-align: middle; } .crm-tags:not(:empty) { margin-left: 7px; } .crm-row .crm-tag { max-width: 76px; } /* Le se réduisent à leur contenu tronqué. */ .agri-feed .crm-filter { flex: 1 1 42%; min-width: 0; } .agri-feed .agri-check { flex: 1 1 100%; } .agri-obs { grid-template-columns: minmax(0, 1fr); gap: 9px; } .agri-obs__meta { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; } .agri-obs__media { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .agri-obs__thumb { width: 92px; height: 70px; } .agri-audio { width: 100%; } } /* Fournisseurs (lot 1 : consultation du référentiel FormAchat) */ .crm-sup-notes { margin-top: 6px; font-size: 12.5px; color: var(--crm-ink-3); white-space: pre-wrap; } /* Provenance des données : le dire évite de croire que l'information manque alors qu'elle se saisit simplement ailleurs. */ .crm-sup-src { margin-top: 16px; font-size: 12px; color: var(--crm-ink-3); font-style: italic; line-height: 1.5; } /* Fournisseurs — lot 2 : profil d'enrichissement */ .crm-sup-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .crm-sup-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 550; padding: 3px 8px; border-radius: 999px; background: var(--crm-accent-soft, rgba(168,134,63,.1)); color: var(--crm-ink-2, #6b6455); white-space: nowrap; } .crm-sup-card--off { opacity: .55; } /* Case à cocher « Fournisseur actif ». Deux règles GLOBALES du hub s'appliquaient ici et cassaient la rangée : `input { width:100% }` étirait la case sur toute la largeur en repoussant le texte à droite (même piège que le ) --- */ #diffusions-view .crm-fld select, #diffusions-view .crm-fld input[type="date"], #diffusions-view .crm-fld input[type="time"] { width: 100%; height: 38px; border: 1px solid var(--crm-line); border-radius: var(--diff-radius); padding: 0 10px; font: inherit; font-size: 14px; color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box; transition: border-color .13s ease; } #diffusions-view .crm-fld textarea { width: 100%; border: 1px solid var(--crm-line); border-radius: var(--diff-radius); padding: 10px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--crm-ink); background: var(--crm-card); box-sizing: border-box; resize: vertical; transition: border-color .13s ease; } #diffusions-view .crm-fld textarea[readonly] { background: var(--crm-card-2); color: var(--crm-ink-2); } #diffusions-view .crm-fld select:focus, #diffusions-view .crm-fld input:focus, #diffusions-view .crm-fld textarea:focus { outline: none; border-color: var(--crm-accent); } /* .crm-form-grid porte `gap: 0 12px` : aucun espace VERTICAL entre les rangées. On rétablit le rythme, comme le fait le module Ambassadeurs. */ #diffusions-view .crm-form-grid { gap: var(--diff-gap-s) 12px; } .diff-fld--lang { max-width: 260px; } .diff-fld--text { display: block; margin-top: var(--diff-gap-s); } .diff-when { margin-top: var(--diff-gap); max-width: 460px; } /* --- Compteur de caractères -------------------------------------------- */ .diff-count { text-align: right; margin-top: 3px; font-variant-numeric: tabular-nums; } /* Au-delà de ~600 caractères personne ne lit sur un téléphone : on avertit sans interdire — la limite dure reste MAX_DIFFUSION côté serveur. */ .diff-count--long { color: var(--crm-warn-ink); font-weight: 600; } /* --- Pastilles de statut ----------------------------------------------- */ /* La couleur ne porte JAMAIS l'information seule : l'icône et le libellé sont toujours affichés avec elle (accessibilité, impression N&B). */ .diff-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--crm-card-2); color: var(--crm-ink-2); } .diff-pill--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); } .diff-pill--attente { background: var(--crm-warn-bg); color: var(--crm-warn-ink); } .diff-pill--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); } /* `.dim` sert de « texte secondaire » dans les trois modules à onglets, mais n'est stylée NULLE PART hors de .crm-table : dans une ligne de liste elle ne fait donc rien du tout, et les dates s'affichent au même poids que le reste. On la définit ici pour cette vue seulement — la corriger globalement changerait l'apparence du CRM et des Ambassadeurs, ce qui n'appartient pas à ce chantier. */ #diffusions-view .dim { color: var(--crm-ink-3); font-size: 12.5px; font-weight: 400; white-space: nowrap; } /* --- Étiquettes fines (langue de rédaction, repli, vide) ---------------- */ .diff-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--crm-accent-soft); color: var(--crm-ink-2); } .diff-tag--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); } /* --- Lignes de liste ---------------------------------------------------- */ .diff-click { cursor: pointer; } .diff-row { cursor: default; } .diff-excerpt { margin-top: 3px; font-size: 13px; color: var(--crm-ink-2); line-height: 1.45; overflow-wrap: anywhere; } .diff-verdict { margin-top: 6px; padding: 6px 10px; border-radius: var(--diff-radius); font-size: 13px; line-height: 1.45; background: var(--crm-card-2); color: var(--crm-ink-2); overflow-wrap: anywhere; } .diff-verdict--ok { background: var(--crm-ok-bg); color: var(--crm-ok-ink); } /* Un refus n'est notifié NULLE PART ailleurs (décision du 18 août) : c'est le seul endroit où il se lit. Il ne doit pas se lire comme une note. */ .diff-verdict--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); font-weight: 500; } /* --- Relecture des trois traductions ------------------------------------ */ /* Côte à côte sur un écran large — c'est tout l'intérêt de l'écran : voir d'un coup si l'espagnol dit bien ce que dit le français. Sur téléphone, auto-fit les empile plutôt que de rendre trois colonnes illisibles. */ .diff-tr-grid, .diff-trs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--diff-gap); } .diff-tr { border: 1px solid var(--crm-line); border-radius: var(--diff-radius); padding: 10px; background: var(--crm-card-2); } .diff-tr__h { font-size: 13px; font-weight: 650; color: var(--crm-ink); margin-bottom: 6px; } .diff-tr__b { font-size: 13px; line-height: 1.5; color: var(--crm-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; } .diff-tr-fld { display: block; } .diff-src { margin-bottom: var(--diff-gap); } .diff-src .crm-action { margin-top: var(--diff-gap-s); } .diff-editor { margin: 6px 0 var(--diff-gap) 26px; } .diff-reject { margin-top: var(--diff-gap); padding-top: var(--diff-gap); border-top: 1px solid var(--crm-line); } /* La barre de filtres réutilise .crm-tabs pour son allure — mais PAS son `position: sticky; top: 0`. L'écran du valideur porte déjà une barre d'onglets collante : deux éléments épinglés au même `top` se recouvrent dès qu'on fait défiler la file. Le filtre défile donc avec la page. */ .diff-filters { position: static; z-index: auto; margin-bottom: var(--diff-gap-s); } /* --- Bandeau d'audience ------------------------------------------------- */ /* La raison d'être du lot 2 : dire ce qu'on SUPPOSE, pas seulement ce qu'on compte. Un écran qui n'affiche que « 107 destinataires » ment par omission. */ .diff-audience { margin-top: var(--diff-gap); padding: 10px 12px; border-radius: var(--diff-radius); border: 1px solid var(--crm-line); background: var(--crm-card-2); } .diff-audience__h { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; font-size: 15px; color: var(--crm-ink); } .diff-audience__langs { font-size: 14px; color: var(--crm-ink-2); font-variant-numeric: tabular-nums; } .diff-note { margin-top: 6px; padding: 5px 9px; border-radius: 8px; font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; background: var(--crm-info-bg); color: var(--crm-info-ink); } .diff-note--warn { background: var(--crm-warn-bg); color: var(--crm-warn-ink); } .diff-note--crit { background: var(--crm-crit-bg); color: var(--crm-crit-ink); } /* --- Compte rendu de dépôt ---------------------------------------------- */ .diff-card--accent { border-left: 3px solid var(--crm-accent); } /* --- Squelette de chargement -------------------------------------------- */ .diff-skel--list { height: 200px; } @media (max-width: 720px) { .diff-editor { margin-left: 0; } .diff-fld--lang { max-width: none; } } /* ===================================================================== LIGNE DU TEMPS SQDC / OCS — vue Horizons ===================================================================== Trois piles, pas une frise : le Gantt a été rejeté par David (« ingérable dès 6 produits par Product Call »). L'ordre des colonnes EST l'information — gauche = urgent, droite = lointain. Aucune couleur propre au module. Les trois horizons empruntent les jetons de statut du hub (crit / warn / ok), déjà réglés pour le thème sombre : une quatrième palette maison aurait divergé au premier ajustement. La couleur ne porte jamais le sens seule — chaque colonne écrit son titre et son délai en toutes lettres, chaque retard est doublé d'un ⚠️ et du mot « échu ». ===================================================================== */ /* --- Barre de filtres ---------------------------------------------------- */ .ldt-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: var(--crm-card); border: 1px solid var(--crm-line); border-radius: 15px; padding: .55rem .7rem; box-shadow: var(--crm-shadow); margin-bottom: 1.1rem; } .ldt-search { flex: 1 1 260px; min-width: 200px; max-width: 380px; } /* Le `. La Ligne du temps fait exactement les deux choses qu'ils évitent — une vraie par SKU et un