/* ═══════════════════════════════════════════════════════════════════════ .soma-ligne — LE COMPOSANT DE LIGNE SIG · la bascule en cartes ───────────────────────────────────────────────────────────────────────── DESIGN.md §8.9 : « Sous 1080 px, la table bascule en cartes — une table 6 colonnes écrasée n'est pas une réponse mobile. LE BASCULEMENT FAIT PARTIE DU COMPOSANT. » Écrit UNE fois, ici. Toute table SIG porte `.soma-ligne-table` et en hérite : Commercial, Détections, Devis, poste de tri — et les écrans SIG à venir sans une ligne de CSS de plus (dette soldée le 22/08, étape 3 du macro, GO Maxime). Le contrat de la carte : · chaque cellule dit CE QU'ELLE EST (libellé lu dans `data-col`) — une valeur nue (« 13 % ») ne veut rien dire sans sa colonne ; · une cellule sans `data-col` est décorative (actions, kebab) : elle s'affiche sans libellé ; · les bandes (« qui doit agir ») gardent leur rôle de séparateur ; · aucune information n'est masquée — on empile, on ne cache jamais. ═══════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════ LA BARRE D'ÉTAT — la grammaire unique de SOMA (DESIGN.md § 8.9, révisée le 2026-09-10 sur décision de Maxime : « la barre doit témoigner d'un état — vert, orange, rouge » puis « rajoute juste couleur blanc ocre si rien, mais une ligne visible quand même »). TOUTES les lignes portent une barre. TROIS d'entre elles parlent. Ce qui est permanent, c'est le RAIL — le blanc ocre, qui ne réclame rien et tient la colonne. Ce qui doit rester RARE, c'est la NOTE : les trois couleurs vives. Le sapin de Noël du 20/08, ce n'était pas « une barre partout », c'était « des couleurs vives partout ». ⚠️ LA COULEUR VIT DANS UNE VARIABLE, PAS DANS QUATRE RÈGLES. `box-shadow` ne se cumule PAS entre deux règles : la dernière REMPLACE l'autre. Si chaque niveau redéclarait `box-shadow`, le halo de `:focus-visible` (§ 8.9) effacerait la barre au moment précis où on sélectionne la ligne au clavier. Avec `--etat`, le focus COMPOSE. 4 px et pas 3 : mesuré le 10/09, le blanc ocre fait 1,39 de contraste sur blanc et 1,22 au survol (le filet `--border` est à 1,24), et il se confond avec le vert (couple à 1,71). À 3 px il ne se lisait pas. ═══════════════════════════════════════════════════════════════════════ */ .soma-ligne { --etat: var(--etat-neutre); box-shadow: inset 4px 0 0 var(--etat); } .soma-ligne--reclame { --etat: var(--red); } /* toi, maintenant */ .soma-ligne--vigilance { --etat: var(--yellow); } /* ça va se gâter */ .soma-ligne--vivant { --etat: var(--green); } /* à jour, et récent */ /* Survol : fond seul, la barre ne bouge jamais (§ 8.9). */ .soma-ligne:hover { background: var(--grey-soft); } /* Focus : `:focus-visible` UNIQUEMENT (jamais `:focus` — halo collant vécu le 18/08), et il RAPPELLE la barre au lieu de l'écraser. `outline: none` est nécessaire ici : sans lui, le halo natif bleu du navigateur reste posé PAR-DESSUS le halo vert — preuve capture cerveau/captures/lot-U2/02-focus.png (audit du 10/09, lot U2). */ .soma-ligne:focus-visible{ outline: none; box-shadow: inset 4px 0 0 var(--etat), 0 0 0 3px rgba(47,191,122,.25); } /* Carte ou vignette : même grammaire, même variable, pleine hauteur. Là où Maxime dit « si pastille tu trouves un moyen de la mettre ». */ .soma-carte { --etat: var(--etat-neutre); position: relative; } .soma-carte--reclame { --etat: var(--red); } .soma-carte--vigilance { --etat: var(--yellow); } .soma-carte--vivant { --etat: var(--green); } .soma-carte::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--soma-r-sm) 0 0 var(--soma-r-sm); /* suit le rayon de la carte — token, jamais en dur (§8.9 nommage) */ background: var(--etat); } /* ── LA LÉGENDE — une seule forme pour tout SOMA ────────────────────────── Décision Maxime, 10/09 : « comme sur planning tu peux utiliser une légende si tu veux, mais pas autant de couleurs. » QUATRE entrées, jamais cinq. Une ÉTAPE n'est pas un ÉTAT : Réceptionné, Étude en cours, Devis en édition, Envoyé, RDV s'écrivent EN TOUTES LETTRES en `--muted`, sans couleur. Seul « en retard » est rouge : c'est le seul qui réclame un geste. ────────────────────────────────────────────────────────────────────── */ .soma-legende { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 10px 0 0; font-size: 11px; color: var(--muted); } .soma-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; font-style: normal; } /* Le « ? » d'un écran : la règle de CET écran, en quatre lignes. Son texte est lu dans `soma_etat_mots` — il n'existe qu'à un endroit, donc il ne peut pas se désynchroniser. */ .soma-regle { font-size: 12px; color: var(--text2); line-height: 1.5; display: flex; flex-direction: column; gap: 6px; max-width: 420px; } .soma-regle-t { font-weight: 900; color: var(--text); margin-bottom: 2px; } .soma-regle-l { display: grid; grid-template-columns: 9px auto 1fr; align-items: baseline; gap: 8px; } .soma-regle-l i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; font-style: normal; } .soma-regle-l b { font-weight: 700; color: var(--text); } .soma-regle-l span { color: var(--muted); } .soma-regle-l .e-reclame { background: var(--red); } .soma-regle-l .e-vigilance { background: var(--yellow); } .soma-regle-l .e-vivant { background: var(--green); } .soma-regle-l .e-neutre { background: var(--etat-neutre); } .soma-legende .e-reclame { background: var(--red); } .soma-legende .e-vigilance { background: var(--yellow); } .soma-legende .e-vivant { background: var(--green); } .soma-legende .e-neutre { background: var(--etat-neutre); } @media (max-width: 1080px) { /* la table cesse d'être une grille : chaque ligne devient une carte */ .soma-ligne-table, .soma-ligne-table > tbody, .soma-ligne-table > tr, .soma-ligne-table > tbody > tr, .soma-ligne-table > thead, .soma-ligne-table td, .soma-ligne-table th { display: block; width: auto; } /* l'en-tête et les largeurs fixes n'ont plus de sens empilés */ .soma-ligne-table > thead, .soma-ligne-table > colgroup, .soma-ligne-table > tr:first-child > th, .soma-ligne-table > tbody > tr:first-child > th { display: none; } .soma-ligne-table { table-layout: auto; } /* LA CARTE — une ligne, un bloc, séparé du suivant */ .soma-ligne-table > tr, .soma-ligne-table > tbody > tr { padding: 4px 0 10px; border-bottom: 1px solid var(--border); } .soma-ligne-table > tr:last-child, .soma-ligne-table > tbody > tr:last-child { border-bottom: none; } /* les cellules : libellé à gauche (repris de l'en-tête), valeur à droite */ .soma-ligne-table td { border-bottom: none; padding: 3px 18px; text-align: left; } .soma-ligne-table td[data-col] { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .soma-ligne-table td[data-col]::before { content: attr(data-col); flex: none; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* la 1re cellule est le TITRE de la carte : pas de libellé, pleine largeur */ .soma-ligne-table td:first-child { display: block; padding-top: 10px; padding-left: 18px; } .soma-ligne-table td:first-child::before { content: none; } /* les bandes « qui doit agir » restent des séparateurs pleine largeur */ .soma-ligne-table .comsig-bande td, .soma-ligne-table .pt-bande td, .soma-ligne-table .detsig-bande td, .soma-ligne-table .dvsig-bande td { display: block; padding: 7px 18px; } /* (10/09) La barre ne se redessine plus ici : `.soma-ligne` la porte à toutes les tailles, et elle est posée sur ces lignes-là. Avant, elle n'existait QUE sous 1080 px — sur l'écran de Maxime, ces lignes n'avaient aucune barre. Il reste à neutraliser l'ombre héritée sur la première cellule, qui doublerait la barre de la carte. */ .soma-ligne-table .comsig-reclame td:first-child, .soma-ligne-table .pt-reclame td:first-child, .soma-ligne-table .detsig-reclame td:first-child, .soma-ligne-table .dvsig-reclame td:first-child { box-shadow: none; } /* les gestes passent en bas de carte, alignés à gauche comme le reste */ .soma-ligne-table td.act, .soma-ligne-table td.actions { padding-top: 8px; } /* plus rien à faire défiler latéralement : la carte tient dans l'écran */ .comsig-carte, .pt-carte, .det-table-wrap, .com-table-wrap { overflow-x: visible; } /* ── VARIANTE GRILLE ──────────────────────────────────────────────── La liste Devis n'est pas une mais une grille de div : même contrat, même bascule. L'en-tête disparaît, chaque ligne devient une carte d'une seule colonne, et chaque cellule porte son libellé. */ .devis-grid-head { display: none; } .devis-grid-row { grid-template-columns: 1fr; gap: 3px; padding: 10px 18px 12px; } .devis-grid-td[data-col] { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; overflow: visible; } .devis-grid-td[data-col]::before { content: attr(data-col); flex: none; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } /* les gestes d'une ligne sont toujours accessibles au doigt (pas de survol) */ .devis-row-actions { opacity: 1; } } /* ── LECTURE RATÉE (15/09, ordre de fermeture, lot 1) ───────────────────── Une lecture qui rate ne fabrique plus une liste vide crédible. UNE ligne en haut de l'écran (ambre : c'est un avertissement, pas une alerte rouge), et les cellules concernées disent « non lu » — en retrait, jamais une couleur d'état : un rouge ou un ambre sur une donnée non lue est une alerte fausse. */ .soma-lecture-ratee { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--yellow-bg); border: 1px solid var(--yellow-border, var(--yellow)); color: var(--yellow-dark); font-size: 13px; font-weight: 400; } .soma-lecture-ratee b { font-weight: 900; } .soma-non-lu { color: var(--muted); font-weight: 400; } .soma-non-lu-bloc { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14px; }