/* ============================================================ CaptainContext — thème "carte marine" Papier froid, encre marine, accent sarcelle, mono = journal de bord ============================================================ */ :root { --paper: #eef1ee; --card: #ffffff; --ink: #182b3a; --ink-2: #53636f; /* V8.57 — `--ink-3` ÉTAIT SOUS LE SEUIL D'ACCESSIBILITÉ, ET DEPUIS TOUJOURS. #8795a0 sur blanc donne 3,07:1 ; WCAG AA demande 4,5:1 pour du texte courant. Ce jeton habille les en-têtes de tableau, les textes d'aide, les dates, les libellés secondaires — c'est-à-dire beaucoup de choses qu'on lit vraiment. Le défaut n'a rien à voir avec le thème sombre ; c'est le banc de contraste écrit pour LUI (tests/v8.57_theme.mjs) qui l'a trouvé, en mesurant aussi le thème clair. On assombrit d'un cran : 4,95:1 sur le blanc des cartes, 4,61:1 sur les surfaces enfoncées. La nuance reste nettement plus pâle que `--ink-2`, donc la hiérarchie visuelle ne bouge pas — seule la lisibilité monte. */ --ink-3: #64727d; --line: #d4dcd9; --line-soft: #e4e9e7; --accent: #0f7583; --accent-fonce: #0b5a65; --accent-pale: #e2eff0; --danger: #a03d2c; --danger-pale: #f6e8e4; --ok: #3d7a46; --st-ouvert: #8a6a16; --st-actif: #0f7583; --st-resolu: #3d7a46; --st-abandonne: #8a4b3b; --st-remplace: #6b6f76; /* ============================================================ V8.57 — LES JETONS QUI MANQUAIENT POUR QUE LE THÈME SOMBRE TIENNE. Le thème sombre existait depuis la V8.33 (app2.css) et ne redéfinissait que des JETONS — c'était la bonne méthode. Elle supposait seulement que les règles en utilisent. Or cette feuille en contenait DEUX CENT QUATRE-VINGT-CINQ couleurs écrites en dur, invisibles tant qu'on reste en clair, et qui ne suivaient rien. ⚠ ET UNE INVERSION, QUI EXPLIQUE LE PIRE DÉFAUT VISIBLE. `.topbar` posait `background: var(--ink)` — l'ENCRE comme fond, ce qui est juste tant que l'encre est sombre. En thème sombre, `--ink` devient CLAIR (#e7edf0) : le bandeau devenait donc blanc, seule surface éclatante de l'écran, et le nom du produit — écrit en blanc — y disparaissait. Un jeton nommé d'après ce qu'il EST (« l'encre ») employé pour ce qu'il VAUT (« du foncé ») : la confusion se paie exactement au moment où la palette s'inverse. D'où `--topbar` et `--topbar-txt`, nommés par leur rôle. Les noms sont ceux qu'app2.css emploie déjà pour la v2 — on n'invente pas un second vocabulaire, on complète celui-ci pour que la base le parle aussi. Valeurs identiques au thème clair : rien ne change à l'écran aujourd'hui, tout devient inversable demain. ============================================================ */ --sunk: #f6f7f6; /* survol, en-tête de tableau, surface enfoncée */ --sunk-2: #eff1ef; /* pastille, bouton fantôme au survol */ --side-bg: #182b3a; /* la navigation (foncée en v1, claire en v2) */ --input-bg: #ffffff; /* le fond des champs de saisie */ --topbar: #182b3a; /* le bandeau — un RÔLE, pas « l'encre » */ --topbar-txt: #e9eef0; --topbar-ligne: #3b5062; /* les bordures DANS le bandeau */ --topbar-attenue: #90a3b0;/* les placeholders et icônes du bandeau */ --topbar-vif: #7fc6ce; /* le survol et la 2ᵉ moitié du mot-marque */ --warn: #8a6a16; --warn-pale: #f7f0dd; --ok-pale: #e6efe7; --live: #2f9e5c; /* présence : quelqu'un est là maintenant */ /* ⚠ `--accent-plein` N'EST PAS UN DOUBLON DE `--accent`, ET C'EST LE THÈME SOMBRE QUI L'A RÉVÉLÉ. `--accent` sert à DEUX choses opposées : peindre du texte et des filets sur le papier (il doit alors être FONCÉ pour se détacher), et remplir des boutons pleins sous du texte blanc (il doit alors être assez foncé pour que le blanc s'y lise). En thème clair, une seule valeur satisfait les deux. En sombre, l'accent doit s'éclaircir pour rester lisible sur fond marine — et le blanc posé dessus tombe alors à 2,9:1, sous le seuil d'accessibilité. Deux emplois, deux jetons : les boutons pleins prennent `--accent-plein`, identique à `--accent` en clair et volontairement plus profond en sombre. */ --accent-plein: #0f7583; --sur-accent: #ffffff; /* le texte posé SUR --accent-plein */ /* ⚠ V9.21 (TEST-56) — LE VERROU DE SORTIE, ET SA COULEUR À LUI. La doctrine chromatique du produit (voir plus bas, § pastilles) dit : turquoise = chez nous, ambre = chez quelqu'un d'autre, violet = restreint à des personnes. Ce verrou-ci n'est aucun des trois — il ne parle pas de personnes mais de PORTES, et il ne restreint rien à l'intérieur de la maison. D'où une quatrième teinte, une brique sourde : assez proche de l'ambre pour dire « attention, ça concerne l'extérieur », assez distincte pour qu'on ne confonde jamais « partagé avec une autre organisation » avec « ne sort pas d'ici ». */ --hors-ia: #a4523a; --hors-ia-pale: #fbf0ec; --prive: #6b4f9e; /* le privé — violet, V5.6 */ --prive-encre: #fff; /* V9.18 — l'encre SUR --prive : 6,5:1 ici, declaree par theme */ /* ⚠ V9.18 — `--prive-pale` EXISTAIT DEJA, deux lignes plus bas. La premiere ecriture de ce lot en a redeclare une seconde, aussitot ecrasee par l'ancienne : une ligne sans effet, et un futur reglage qui n'aurait rien change. On garde la valeur d'origine, qui convient. */ --prive-pale: #f2eefa; --ombre: 0 1px 2px rgba(24, 43, 58, .05); --ombre-flot: 0 8px 28px rgba(24, 43, 58, .14); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --r: 6px; --sidebar-w: 292px; /* ⚠ `color-scheme` N'EST PAS DÉCORATIF. Il dit au NAVIGATEUR quel thème est en vigueur, et c'est lui — pas nos règles — qui repeint ce que la CSS ne touche pas : le menu déroulant natif d'un ``. Sans lui, un thème sombre garde des listes déroulantes blanches et des ascenseurs clairs, et aucune quantité de CSS n'y change quoi que ce soit. La valeur sombre est posée avec les autres jetons du thème (app2.css). */ color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); background: var(--paper); /* lignes de sonde très discrètes, façon carte marine */ background-image: linear-gradient(transparent 31px, rgba(24, 43, 58, 0.025) 32px); background-size: 100% 32px; } a { color: var(--accent-fonce); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; cursor: pointer; } /* ⚠ UN CHAMP SANS `background` N'EST PAS TRANSPARENT : LE NAVIGATEUR LUI EN POSE UN BLANC. C'était l'un des défauts les plus visibles du thème sombre — champs éclatants, texte pâle dedans, illisible — et il ne venait d'aucune règle de cette feuille, mais de leur absence : on ne peut pas corriger ce qu'on n'a jamais écrit. On habille donc ici TOUS les champs, une fois. ⚠ ON RESTE À LA SPÉCIFICITÉ D'UN SÉLECTEUR D'ÉLÉMENT (pas de `:not()`, qui la ferait monter) : des dizaines de règles plus bas reposent sur le fait que celle-ci cède, à commencer par les champs transparents du tableur et par `input:disabled` (lecture seule). La ligne d'après suffit à rendre aux cases à cocher et aux boutons radio leur fond natif — eux sont dessinés par le navigateur (`color-scheme`) et un fond imposé écrase l'état coché. */ /* V8.57 — LE FOND, LA COULEUR *ET* LA TEINTE DU TRAIT. Sans `background`, un champ garde le blanc que le navigateur lui donne : c'était l'un des trois défauts visibles du thème sombre (champ blanc, texte pâle dedans, illisible). Et sans `border-color`, il garde le trait par DÉFAUT du navigateur — que `color-scheme: dark` éclaircit, ce qui cerne chaque champ d'un liseré blanc sur fond marine. On ne touche ni à l'épaisseur ni au style du trait : seulement à sa teinte, pour ne pas déplacer d'un pixel les centaines de champs qui posent déjà leur propre bordure. */ input, select, textarea { font: inherit; color: var(--ink); background: var(--input-bg); border-color: var(--line); } input[type="checkbox"], input[type="radio"] { background: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------- Coquille ---------- */ /* ============================================================ ⚠ V11.5 — `#app` EST UNE COLONNE, PLUS UNE RANGÉE. La rangée était la cause d'un défaut visible : tout élément ajouté à `#app` qui n'était ni la barre latérale ni le contenu — les bandeaux de licence, de maintenance, d'aperçu, d'invitation — devenait une COLONNE DE PLUS à côté d'eux. Le bandeau « paiement en échec » occupait 856 px de large sur toute la hauteur, poussait la barre au milieu de l'écran, et son texte disparaissait sous la topbar fixe : l'application semblait cassée au moment précis où on demandait à quelqu'un de régulariser. La rangée existe toujours — elle est descendue d'un cran, dans `.app-corps`. ============================================================ */ #app { display: flex; flex-direction: column; height: 100vh; } /* Les bandeaux, en pleine largeur, sous la topbar fixe. ⚠ LA MARGE VAUT AUSSI QUAND C'EST VIDE, et c'est ce qui rend le correctif sans calcul : en flex les marges ne fusionnent pas, un `.app-chrome` sans bandeau occupe donc quand même la hauteur de la topbar et `.app-corps` démarre au bon endroit. Zéro bandeau ou trois, sur une ligne ou sur deux : rien à mesurer. ⚠ `var(--topbar-h, 52px)` ET NON `52px` EN DUR. La topbar mesure 52 px en v1 et 50 px sous la surcouche v2, qui pose `--topbar-h:50px` sur (cf. css/app2.css § 16 bis). Écrire le nombre ici recréerait exactement la bande de 2 px que la V8.34 avait dû corriger — et la recréerait dans le seul endroit qui, désormais, commande la position de TOUT le reste. La variable n'existant pas en v1, le repli rend la mesure de la v1. */ .app-chrome { flex: none; margin-top: var(--topbar-h, 52px); } /* La rangée d'autrefois. `min-height: 0` est OBLIGATOIRE : sans lui, un enfant flex refuse de descendre sous la taille de son contenu, `.contenu` cesse d'être borné, et le défilement de la V10.3 repart sur la fenêtre entière. */ .app-corps { display: flex; flex: 1; min-height: 0; } .topbar { position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--topbar); color: var(--topbar-txt); border-bottom: 3px solid var(--accent); } /* V8.54 — LE MOT-MARQUE N'EST PLUS EN MONOSPACE. `var(--mono)` est une PILE, pas une police : elle rend SF Mono sur macOS, Consolas sur Windows, Liberation Mono sur Linux. Trois dessins, trois chasses, trois largeurs pour le même mot — et celui qu'on voit le plus souvent, Consolas, donne au nom du produit l'allure d'un chemin de fichier. Un mot-marque doit avoir UNE forme, la même partout. La pile sans est déjà celle de toute l'interface, et ses polices (Segoe UI, SF, Roboto) sont dessinées pour être lues en gras à petite taille. On resserre l'interlettrage — un mot-marque se soude, il ne s'espace pas — et on monte d'un point pour compenser la chasse plus étroite du sans. ⚠ LA MONO NE BOUGE PAS AILLEURS. Codes de publication, identifiants, chemins, formules : là elle dit « ceci se recopie caractère par caractère », et c'est son emploi exact. Ce n'était simplement pas ce que disait le nom du produit. V8.55 — L'INTERLETTRAGE REVIENT À ZÉRO. Non, ce n'étaient pas des films : -0.015em à 16 px fait bien un quart de pixel de moins entre chaque lettre, et « relieo » est le pire mot possible pour ça — l·i·e sont trois traits verticaux consécutifs, et les resserrer les fait lire comme un seul signe. Le resserrement est une règle de mot-marque en CAPITALES ou en très grand ; à 16 px en bas-de-casse, sur fond sombre (où le texte clair « bave » déjà optiquement vers l'extérieur), il ne gagne rien et coûte la lisibilité. Reste le corps à 16 px, qui était l'essentiel du gain. */ .marque { font-family: var(--sans); font-size: 16px; font-weight: 700; /* V8.57 — CE BLANC RESTE UN BLANC. Le reste du bandeau est passé aux jetons `--topbar*`, mais le mot-marque est du TEXTE POSÉ SUR UNE SURFACE SOMBRE dans les deux thèmes : lui donner un jeton de texte le ferait virer au foncé le jour où la palette s'inverse — invisible. Même raison partout ailleurs dans cette feuille pour un `#fff` sur accent, danger ou bandeau. Il est aussi volontairement plus vif que `--topbar-txt` : le nom du produit passe devant les libellés qui l'entourent. */ color: #fff; letter-spacing: 0; white-space: nowrap; } /* V7.1 (RELI-430) — le nom du site est SAISI par les gens, il peut être long : on borne l'AFFICHAGE (ellipse) plutôt que la saisie — le bandeau ne doit jamais céder sous un nom, quel qu'il soit. ~18 caractères visibles ici, moins encore à l'écran étroit (media query plus bas). */ .topbar .marque { max-width: 230px; overflow: hidden; text-overflow: ellipsis; } .marque a { color: inherit; } .marque .cap { color: var(--topbar-vif); } .topbar .recherche-globale { flex: 1; max-width: 460px; position: relative; } .topbar .recherche-globale input { width: 100%; padding: 6px 10px 6px 30px; border-radius: var(--r); /* V6.2 — `#223càd` (valeur corrompue, ignoree par le parseur) supprimee. */ border: 1px solid var(--topbar-ligne); /* V8.57 — le champ de recherche est un CREUX dans le bandeau : il doit s'assombrir avec lui. Aucun jeton ne dit « creux du bandeau », et on n'en crée pas un pour un seul emploi : on teinte le fond du bandeau d'un peu de sa propre encre claire, ce qui redonne exactement le décrochage d'avant dans un thème comme dans l'autre. */ background: color-mix(in srgb, var(--topbar) 82%, var(--topbar-txt)); color: var(--topbar-txt); font-size: 13px; } .topbar .recherche-globale input::placeholder { color: var(--topbar-attenue); } .topbar .recherche-globale::before { content: "◎"; position: absolute; left: 9px; top: 5px; color: var(--topbar-attenue); font-size: 13px; } .topbar .espace { flex: 1; } .topbar .btn-quitter { background: none; border: 1px solid var(--topbar-ligne); color: var(--topbar-attenue); border-radius: var(--r); padding: 5px 10px; font-size: 12.5px; } .topbar .btn-quitter:hover { border-color: var(--topbar-vif); color: var(--topbar-txt); } /* V7.1 (RELI-430) — boutons réservés à l'écran étroit : la loupe (recherche en surcouche) et le menu qui recueille compte, Équipe, Admin, thème, Quitter. Invisibles au grand écran — le bandeau y est exactement celui d'avant. V8.57 — le second porte désormais la VIGNETTE du compte et non un « ⋮ » : voir ccBtnMenuMobile() (js/app.js) pour le pourquoi. Il perd donc son remplissage horizontal, qui écraserait la vignette. */ .btn-rech-mobile, .btn-menu-mobile { display: none; background: none; border: 1px solid var(--topbar-ligne); color: var(--topbar-attenue); border-radius: var(--r); padding: 4px 9px; font-size: 15px; line-height: 1.3; align-items: center; justify-content: center; /* V7.1b — centre la loupe SVG */ } .btn-menu-mobile { padding: 3px; border-radius: 50%; } /* ⚠ La vignette est ronde et pleine : le cadre du bouton ferait un double contour. Il n'apparaît qu'au survol et au focus, où il sert vraiment. */ .btn-menu-mobile:has(.cc-avatar) { border-color: transparent; } .btn-menu-mobile:hover, .btn-menu-mobile:focus-visible { border-color: var(--topbar-vif); } .btn-rech-mobile:hover, .btn-menu-mobile:hover, .topbar.rech-ouverte .btn-rech-mobile { border-color: var(--topbar-vif); color: var(--topbar-txt); } /* ---------- Barre latérale : l'arbre ---------- */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); /* V11.5 — la hauteur vient du `flex:1` de `.app-corps`, plus d'un calc() en dur qui ignorait la présence d'un bandeau. */ height: auto; min-height: 0; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; } .sidebar-tete { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; /* V9.6 — `gap` + `wrap` : la pastille de quota (« Il reste 2 sur 5 ») se pose à côté du bouton « + racine » dans une barre de 292 px. Sans repli, elle comprimait l'eyebrow « CARTE DES CONNAISSANCES » jusqu'à le tronquer. Sans pastille — c'est-à-dire la plupart du temps — rien ne change : deux enfants qui tiennent sur une ligne se comportent exactement comme avant. */ flex-wrap: wrap; gap: 6px; } .sidebar-tete .eyebrow { margin: 0; } .eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); } .arbre { flex: 1; overflow: auto; padding: 6px 6px 40px; } .noeud-ligne { display: flex; align-items: center; gap: 4px; padding: 3px 6px 3px 2px; border-radius: 5px; cursor: pointer; user-select: none; position: relative; border: 1px solid transparent; } .noeud-ligne:hover { background: var(--line-soft); } .noeud-ligne.actif { background: var(--accent-pale); border-color: var(--line); } .noeud-ligne.actif .noeud-nom { color: var(--accent-fonce); font-weight: 600; } /* V2.4 — flèches déplier/replier agrandies (retour d'usage : cible de clic trop petite) : zone 26×26 px, glyphe 14 px, survol plus visible. */ .noeud-ligne .pli { width: 26px; height: 26px; line-height: 24px; text-align: center; color: var(--ink-3); font-size: 14px; border: none; background: none; padding: 0; flex: none; border-radius: 5px; cursor: pointer; } .noeud-ligne .pli:hover { background: var(--line); color: var(--ink); } .noeud-ligne .pli.vide { visibility: hidden; } .noeud-nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; } .noeud-badge { font-family: var(--mono); font-size: 10px; color: var(--ink-3); background: var(--line-soft); border-radius: 8px; padding: 0 6px; flex: none; } .arbre ul { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 1px solid var(--line-soft); } .arbre > ul { border-left: none; padding-left: 0; } /* zones de drop */ .noeud-ligne.drop-into { background: var(--accent-pale); border: 1px dashed var(--accent); } .noeud-ligne.drop-avant::before, .noeud-ligne.drop-apres::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); } .noeud-ligne.drop-avant::before { top: -1px; } .noeud-ligne.drop-apres::after { bottom: -1px; } .noeud-ligne.en-deplacement { opacity: 0.4; } .drop-racine { margin: 10px 8px; padding: 8px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; color: var(--ink-3); font-size: 12px; display: none; } .drop-racine.visible { display: block; } .drop-racine.drop-into { border-color: var(--accent); color: var(--accent-fonce); background: var(--accent-pale); } .sidebar-pied { padding: 10px 12px; border-top: 1px solid var(--line-soft); } /* ---------- Contenu principal ---------- */ .contenu { /* V11.5 — même chose : la hauteur est celle que `.app-corps` lui laisse. `min-height: 0` garde `overflow:auto` opérant — c'est LUI le port de défilement de la V10.3, et il doit rester borné. */ flex: 1; height: auto; min-height: 0; overflow: auto; padding: 22px 28px 80px; } .cap-chemin { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-bottom: 6px; } .cap-chemin a { color: var(--ink-2); } .cap-chemin a:hover { color: var(--accent-fonce); } .cap-chemin .sep { color: var(--ink-3); padding: 0 4px; } h1.titre-page { margin: 0 0 4px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; /* V6.2 (RELI-322) — le titre porte desormais des actions a sa droite (« Suivre »). Sans flex, le champ en width:100% les repoussait a la ligne. .titre-avec-icone posait deja exactement cette regle de son cote. PAS de `gap` ici : il ecraserait celui de .titre-avec-icone (h1.titre-page est plus specifique), et les libelles portent deja leur espace litteral. */ display: flex; align-items: center; } h1.titre-page input { font: inherit; border: none; background: transparent; width: 100%; border-bottom: 1px dashed transparent; padding: 0; min-width: 0; } /* Les actions de titre restent a droite et ne se laissent pas comprimer. */ .titre-actions { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } /* V6.2 — jeton d'une valeur selectionnee que l'editeur ne sait pas nommer (compte proprietaire, collection privee d'un collegue). Volontairement terne et en chiffres : il dit « il y a quelque chose ici que je ne peux pas afficher », pas « voici une valeur normale ». */ .type-pill.inconnu { background: var(--line-soft); color: var(--ink-3); font-family: var(--mono); font-size: 11px; } .titre-actions .btn-mini { font-size: 12px; font-weight: 500; letter-spacing: 0; } @media (max-width: 700px) { .btn-suivre-tete .btn-suivre-txt { display: none; } } h1.titre-page input:hover { border-bottom-color: var(--line); } h1.titre-page input:focus { border-bottom-color: var(--accent); outline: none; } .type-pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-fonce); background: var(--accent-pale); padding: 2px 8px; border-radius: 9px; vertical-align: middle; } .carte { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 16px; } .carte h3 { margin: 0 0 8px; font-size: 13px; } .carte h3 .eyebrow { display: block; } /* V8.15.1 — TROIS COLONNES EN DUR, POUR TROIS CARTES QUI N'EXISTENT PLUS. Contexte, Vocabulaire et Ontologie se partageaient cette grille. Depuis que les deux dernières sont devenues une vue et une couche du graphe, il ne reste qu'une carte — qui continuait d'occuper un tiers de la largeur, avec deux colonnes vides à côté. `auto-fit` règle le cas sans rien décider d'avance : une carte prend toute la largeur, deux se partagent, trois se rangent en trois — et le jour où l'on en rajoute une, personne n'aura à y penser. */ .grille-contexte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; } .zone-editable textarea { width: 100%; min-height: 84px; resize: vertical; border: 1px solid var(--line-soft); border-radius: var(--r); padding: 8px; font-size: 13px; background: var(--input-bg); } .zone-editable textarea:focus { border-color: var(--accent); outline: none; background: var(--input-bg); } /* ---------- Onglets ---------- */ .onglets { display: flex; gap: 2px; border-bottom: 2px solid var(--line); margin: 18px 0 14px; } .onglet { border: none; background: none; padding: 7px 14px; font-size: 13.5px; color: var(--ink-2); border-bottom: 2px solid transparent; margin-bottom: -2px; } .onglet:hover { color: var(--ink); } .onglet.actif { color: var(--accent-fonce); font-weight: 600; border-bottom-color: var(--accent); } /* ---------- Boutons ---------- */ .btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: var(--r); padding: 6px 12px; font-size: 13px; } .btn:hover { border-color: var(--ink-3); } .btn-primaire { background: var(--accent-plein); border-color: var(--accent-plein); color: var(--sur-accent); } .btn-primaire:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); } .btn-danger { color: var(--danger); border-color: var(--danger-pale); } .btn-danger:hover { background: var(--danger-pale); } .btn-mini { padding: 2px 8px; font-size: 12px; border-radius: 4px; } .btn-lien { border: none; background: none; color: var(--accent-fonce); padding: 0; font-size: 12.5px; } .btn-lien:hover { text-decoration: underline; } /* V4.7 — boutons d'action icône : zone de clic confortable + retour au survol (les icônes seules restent, mais on ne « chasse » plus un glyphe de 12 px) */ .btn-lien.btn-mini { font-size: 14px; padding: 3px 6px; border-radius: 5px; line-height: 1.2; } .btn-lien.btn-mini:hover { background: var(--accent-pale); text-decoration: none; } /* V4.7 — icônes SVG (Lucide) : alignées sur le texte, couleur héritée */ .cc-icone { vertical-align: -2px; } button .cc-icone, a .cc-icone { pointer-events: none; } /* V4.9 — type checklist : jauge X/Y (orange < 50 %, jaune 50-99 %, vert 100 %) */ .jauge-checklist { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } .jauge-checklist .barre { width: 46px; height: 6px; border-radius: 3px; background: var(--line-soft, rgba(0,0,0,.12)); overflow: hidden; } .jauge-checklist .barre i { display: block; height: 100%; border-radius: 3px; } .jauge-checklist .mention-attente { font-size: 13px; cursor: help; } /* V4.12 — tableur : sélection de plage + couleurs de cellules */ .bloc-tableur td.sel { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--accent-pale); } .bloc-tableur td input { background: transparent; font-weight: inherit; } .bloc-tableur th { cursor: pointer; user-select: none; position: relative; } /* V4.12b — glisser-sélectionner, redimensionner les colonnes */ .bloc-tableur { table-layout: fixed; } .bloc-tableur td { overflow: hidden; } .bloc-tableur.drag-sel, .bloc-tableur.drag-sel input { user-select: none; cursor: cell; } .bloc-tableur th .redim { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; } .bloc-tableur th .redim:hover { background: var(--accent); opacity: .5; } /* V4.13 — présence : pastilles flottantes + bloc/cellule occupés */ #cc-presence { position: fixed; top: 62px; right: 14px; z-index: 850; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; pointer-events: none; } .presence-pill { display: inline-flex; align-items: center; gap: 6px; pointer-events: auto; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px; font-size: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); } .presence-point { width: 8px; height: 8px; border-radius: 50%; flex: none; } .presence-detail { color: var(--ink-3); font-size: 11px; } .bloc-ligne.bloc-occupe { position: relative; outline: 2px dashed rgba(245, 158, 11, .55); outline-offset: 2px; border-radius: 4px; } .bloc-ligne.bloc-occupe::after { content: '✏ ' attr(data-occupant); position: absolute; top: -9px; right: 4px; font-size: 10px; line-height: 1.5; background: #f59e0b; color: #fff; border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 5; } td.cellule-occupee { position: relative; outline: 2px dashed #f59e0b; outline-offset: -2px; } /* ⚠ V11.11 (retour de banc) — LE BADGE VIT DANS LA CELLULE, PLUS AU-DESSUS. `top:-9px` le faisait flotter hors de la cellule : sur la première ligne du tableau il passait SOUS l'en-tête figé et l'enveloppe défilante le coupait — « la bulle d'info est coupée, on voit rien ». Un onglet collé au coin intérieur ne peut être coupé par rien, et l'ellipse borne les noms longs. */ td.cellule-occupee::after { content: '✏ ' attr(data-occupant); position: absolute; top: 0; right: 0; max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.7; background: #f59e0b; color: #fff; border-radius: 0 0 0 8px; padding: 0 6px; pointer-events: none; z-index: 5; } /* V11.11 — la présence croisée marque aussi les champs de la PAGE FICHE (titre, description courte, lignes de champ) : mêmes couleurs, encadrement vers l'extérieur — ces éléments ont des marges, contrairement aux . */ :not(td).cellule-occupee { position: relative; outline: 2px dashed rgba(245, 158, 11, .55); outline-offset: 2px; border-radius: 4px; } :not(td).cellule-occupee::after { content: '✏ ' attr(data-occupant); position: absolute; top: -9px; right: 4px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.5; background: #f59e0b; color: #fff; border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 5; } /* V11.11 (retour de banc) — CONSULTER N'EST PAS MODIFIER. L'œil, un trait pointillé plus doux : on sait qu'elle est LÀ, pas qu'elle écrit ICI. Ne sert plus qu'aux CARTES (kanban) : une carte est la fiche entière, l'encadrement y est le bon grain. */ .cellule-occupee.presence-consulte { outline-style: dotted; outline-color: rgba(245, 158, 11, .5); } .cellule-occupee.presence-consulte::after { content: '👁 ' attr(data-occupant); background: #d97706; } /* ⚠ V11.11 (3e passe de banc) — SUR LE TABLEAU, QUELQU'UN « SUR LA FICHE » N'ENCADRE AUCUNE CELLULE. L'encadrement du titre — même pointillé — disait « elle édite le titre » : « elle apparaît sur le titre alors qu'elle n'est pas sur le titre ». La LIGNE se teinte, et une pastille 👁 se pose au bord droit de la colonne titre, centrée verticalement — DANS la cellule, donc jamais coupée par l'en-tête figé, et bornée par une ellipse. */ tr.ligne-consultee > td { background: rgba(217, 119, 6, .05); } td.cellule-consultee { position: relative; } td.cellule-consultee::after { content: '👁 ' attr(data-consultant); position: absolute; top: 50%; right: 4px; transform: translateY(-50%); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.7; background: #d97706; color: #fff; border-radius: 8px; padding: 0 6px; pointer-events: none; z-index: 5; } /* V11.11 — « EN TRAIN D'ÉCRIRE » : le ⋯ des messageries. Le trait passe en PLEIN (occupé = pointillé, en frappe = plein) et le badge pulse FRANCHEMENT — le premier réglage (opacité .35, 1,1 s) demandait de se concentrer pour le voir, c'est un contresens pour un signal. Deux signaux redondants exprès : la couleur seule ne suffit pas à tout le monde. L'encadrement lui-même ne clignote pas : il marque une place, pas un événement. */ .presence-frappe { outline-style: solid !important; outline-color: #f59e0b !important; } .presence-frappe::after { animation: cc-frappe .8s ease-in-out infinite; } .presence-points { display: inline-block; margin-left: 4px; font-weight: 700; letter-spacing: 2px; font-size: 15px; line-height: 1; color: #b45309; animation: cc-frappe .8s ease-in-out infinite; } .presence-pill-frappe { border: 1px solid #f59e0b; background: rgba(245, 158, 11, .1); } .presence-pill-frappe .presence-detail { color: #b45309; font-weight: 600; } @keyframes cc-frappe { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } @media (prefers-reduced-motion: reduce) { .presence-frappe::after, .presence-points { animation: none; } } /* ============================================================ V9.38 (RELI-75/78) — LA CELLULE QUI VIENT DE CHANGER TOUTE SEULE. Depuis ce lot, la modification d'un collègue ne reconstruit plus l'écran : elle repeint la cellule concernée, sur place. ⚠ ET UNE VALEUR QUI CHANGE EN SILENCE REMPLACERAIT UN DÉFAUT PAR UN AUTRE — le tableau ne sauterait plus, et une note passerait de 3 à 8 sous les yeux de quelqu'un sans qu'il puisse dire si elle avait toujours été là. Le liseré dit « ceci vient de bouger ». Même vocabulaire visuel que « cellule occupée » juste au-dessus, mais l'autre couleur et l'autre durée : l'orange dit « quelqu'un écrit ICI, maintenant » et reste tant que c'est vrai ; le vert dit « c'est écrit, c'est arrivé » et s'efface. Les confondre aurait fait croire à une présence là où il n'y a qu'une trace. `box-shadow: inset` et non `outline` : le tableau est en `border-collapse: collapse`, où un outline se fait manger par les bordures voisines — c'est la leçon de la V9.34 sur l'en-tête figé, et elle vaut ici aussi. ============================================================ */ /* ⚠ V11.11 — LE SÉLECTEUR PERD SON `td`, ET C'EST UN CORRECTIF, PAS UN ÉLARGISSEMENT DE CONFORT. `ccLigneChampSignaler` (js/vues.js, V10.1) pose cette classe sur les LIGNES DE CHAMP de la page fiche — des
— depuis que la fiche sait se repeindre. Le sélecteur, écrit pour le tableau, ne les a jamais atteints : le liseré vert promis par la V10.1 n'a jamais été visible sur la page fiche. La V11.11 y ajoute la description courte et les blocs du document ; sans ce correctif, ses valeurs changeraient en silence — exactement ce que le commentaire au-dessus interdit. */ .cellule-repeinte { animation: cc-repeinte 1.6s ease-out; position: relative; } /* ⚠ V11.11 (retour de banc) — LE VERT DIT SON NOM. « Des fois un cadre vert sans nom, on voit rien » : le liseré signalait qu'une valeur venait de changer sans dire ni quoi ni pourquoi — à côté du badge orange nominatif, il passait pour un défaut. Il porte désormais sa propre étiquette (« ↻ », posée par le JS dans data-repeinte), qui s'efface avec lui. ⚠ SAUF si la cellule est aussi OCCUPÉE : le badge orange nominatif suffit, deux étiquettes se chevaucheraient. */ .cellule-repeinte:not(.cellule-occupee)::after { content: '↻ ' attr(data-repeinte); position: absolute; top: 0; right: 0; max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 1.7; background: var(--ok, #16a34a); color: #fff; border-radius: 0 0 0 8px; padding: 0 6px; pointer-events: none; z-index: 5; animation: cc-repeinte-badge 1.6s ease-out forwards; } @keyframes cc-repeinte-badge { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } } @keyframes cc-repeinte { 0% { box-shadow: inset 0 0 0 2px var(--ok, #16a34a); background: color-mix(in srgb, var(--ok, #16a34a) 14%, transparent); } 70% { box-shadow: inset 0 0 0 2px var(--ok, #16a34a); background: color-mix(in srgb, var(--ok, #16a34a) 8%, transparent); } 100% { box-shadow: inset 0 0 0 0 transparent; background: transparent; } } /* ⚠ ET ON N'ANIME PAS QUELQU'UN QUI A DEMANDÉ QU'ON N'ANIME PAS. Le liseré doit rester VISIBLE — c'est son travail — mais il ne clignote pas : il s'affiche et il disparaît, sans transition. */ @media (prefers-reduced-motion: reduce) { .cellule-repeinte { animation: none; box-shadow: inset 0 0 0 2px var(--ok, #16a34a); } } /* V4.12h — cellules référencées par la formule en cours d'édition */ /* ⚠ CES CINQ COULEURS SONT UNE DONNÉE, PAS UN THÈME. Elles numérotent les références d'une formule et doivent rester cinq teintes distinctes et reconnaissables dans les deux thèmes — les passer aux jetons les ramènerait à trois nuances de la même sarcelle. Idem l'orange de « cellule occupée » juste au-dessus. On n'y touche pas. */ .bloc-tableur td.ref-0 { box-shadow: inset 0 0 0 2px #3b82f6; } .bloc-tableur td.ref-1 { box-shadow: inset 0 0 0 2px #ef4444; } .bloc-tableur td.ref-2 { box-shadow: inset 0 0 0 2px #22c55e; } .bloc-tableur td.ref-3 { box-shadow: inset 0 0 0 2px #a855f7; } .bloc-tableur td.ref-4 { box-shadow: inset 0 0 0 2px #f59e0b; } /* V4.10 — bloc « cases à cocher » */ .bloc-cases-ligne { display: flex; align-items: center; gap: 8px; padding: 1px 0; } .bloc-cases-ligne input[type="checkbox"] { flex: none; } /* V11.14 (retour de banc) — le ✕ au survol : retirer une ligne PLEINE à la souris, sans la vider caractère par caractère. Invisible au repos (une liste de vingt lignes hérissée de vingt croix serait du bruit), révélé au survol de SA ligne — et au focus clavier, pour rester atteignable. */ .bloc-cases-suppr { flex: none; opacity: 0; transition: opacity .12s; color: var(--ink-3); padding: 0 4px; } .bloc-cases-ligne:hover .bloc-cases-suppr, .bloc-cases-suppr:focus-visible { opacity: 1; } .bloc-cases-suppr:hover { color: #a03d2c; } .bloc-cases-texte { flex: 1; border: none; background: none; font: inherit; padding: 2px 0; outline: none; } .bloc-cases-ligne.fait .bloc-cases-texte { text-decoration: line-through; color: var(--ink-3); } /* V9.25 (RELI-36) — LA VUE D'UNE LIGNE DE CHECKLIST PORTANT UNE MENTION. Elle emprunte `.bloc-cases-texte` (police, marges, barré des lignes faites) pour que l'échange avec l' ne déplace rien. Trois ajouts seulement : · une hauteur minimale, sans quoi une ligne vide serait haute de zéro ; · `pre-wrap`, parce qu'une vue PEUT aller à la ligne là où un défile — on lit plus souvent qu'on n'édite, et un texte long tronqué à droite est illisible ; · un curseur de texte : elle se comporte comme un champ, elle doit en avoir l'air. */ .bloc-cases-vue { min-height: 1.4em; white-space: pre-wrap; word-break: break-word; cursor: text; } .bloc-cases-vue:focus { outline: none; } .bloc-cases-ligne.fait .bloc-cases-vue .cc-ref { text-decoration: line-through; } /* V4.10 — planning « semaine type » (champ horaires) */ .semaine-type { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; } .semaine-entete { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding: 4px 2px; text-align: center; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .semaine-col { min-height: 60px; } .semaine-chip { display: block; width: 100%; text-align: left; margin: 3px 0; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); font-size: 11.5px; cursor: pointer; line-height: 1.35; } .semaine-chip:hover { border-color: var(--accent); background: var(--accent-pale); } .semaine-chip strong { color: var(--accent-fonce); } /* V4.9 — type horaires : chips de jours dans l'éditeur */ .jour-chip { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 2px 7px; font-size: 11px; cursor: pointer; text-transform: capitalize; } .jour-chip.actif { background: var(--accent-pale); border-color: var(--accent); color: var(--accent-fonce); font-weight: 600; } /* ---------- Tableau (vue base) ---------- */ .barre-outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .chip-filtre { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-pale); color: var(--accent-fonce); border: 1px solid var(--line); border-radius: 12px; padding: 2px 8px; font-size: 12px; } .chip-filtre button { border: none; background: none; color: inherit; padding: 0; font-size: 13px; line-height: 1; } .enveloppe-tableau { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); } table.base { border-collapse: collapse; width: 100%; min-width: 640px; } table.base th, table.base td { border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); padding: 6px 10px; text-align: left; font-size: 13px; vertical-align: top; } table.base th { background: var(--sunk); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; } /* ============================================================ V8.30 — EN-TÊTE DE TABLEAU FIGÉ AU DÉFILEMENT ------------------------------------------------------------ ⚠ LE `position: sticky` CI-DESSUS EXISTE DEPUIS LONGTEMPS ET NE SERVAIT À RIEN. Il faut comprendre pourquoi avant de lire le correctif, sinon celui-ci a l'air arbitraire. `position: sticky` se cale sur le PLUS PROCHE ANCÊTRE QUI DÉFILE. Ici, cet ancêtre n'est pas `.contenu` (le vrai port de défilement de la page) mais `.enveloppe-tableau` : elle porte `overflow-x: auto`, et la spécification CSS dit qu'un `overflow` non-`visible` sur UN axe force l'autre à `auto`. L'enveloppe est donc, techniquement, une boîte qui défile — sauf qu'elle n'a aucune hauteur maximale, donc elle grandit avec le tableau et ne défile jamais verticalement. L'en-tête restait « collé » en haut d'une boîte qui ne bougeait pas : parfaitement immobile, et parfaitement inutile. Le correctif ne touche donc pas au `th` : il donne à l'enveloppe la hauteur qui lui manquait, ce qui en fait le port de défilement qu'elle prétendait déjà être. ============================================================ */ .enveloppe-tableau.entete-fige { /* La hauteur disponible sous la barre du haut (52 px), le fil d'Ariane et la barre d'outils de la vue, moins la marge basse de `.contenu`. Le `min-height` protège les petits écrans : mieux vaut déborder un peu que réduire le tableau à deux lignes et demie. */ /* V9.5.2 — LE 210 px N'EST PLUS QU'UN FILET DE SÉCURITÉ. C'était la valeur de travail : une somme SUPPOSÉE (bandeau + fil d'Ariane + barre d'outils) qu'aucune mesure ne venait confirmer. Elle était trop grande dans le cas courant — ~130 px sont réellement occupés au-dessus du tableau — et le tableau se privait de la différence, soit une bonne ligne et demie. `ccAjusterTableauFige()` (js/app.js) pose maintenant la vraie valeur sur l'élément, mesurée après chaque rendu et à chaque redimensionnement. Le repli ci-dessous ne sert plus que si le script ne tourne pas. */ max-height: calc(100vh - var(--entete-fige-marge, 210px)); max-height: calc(100dvh - var(--entete-fige-marge, 210px)); /* dvh : hauteur réelle, cf. § 2 de app2.css */ overflow: auto; } /* Un tableau à en-tête figé OCCUPE DÉJÀ TOUTE LA HAUTEUR : la réserve du bas de `.contenu` (96 px en v2, 80 en v1) devient sous lui une bande vide, et un défilement de page qui ne mène qu'à elle. C'est exactement ce que le retour de test appelait « on perd des centimètres ». ⚠ La classe est posée par le script UNIQUEMENT quand un tel tableau est à l'écran. Partout ailleurs — une fiche, un formulaire, un tableau dont l'en-tête n'est pas figé et qui coule dans la page — la réserve garde tout son sens et ne bouge pas d'un pixel. */ body.cc-tableau-plein .contenu { padding-bottom: 16px; } /* Le plancher ne vaut que sur un écran assez haut pour se le permettre : posé sans condition, il réservait 240 px de vide sous une collection de deux fiches, cadre et bordure compris. */ @media (min-height: 700px) { .enveloppe-tableau.entete-fige { min-height: 240px; } } .enveloppe-tableau.entete-fige table.base th { /* ⚠ `border-collapse: collapse` (déclaré sur table.base) FAIT DÉFILER LES BORDURES AVEC LE CORPS : elles appartiennent alors à la table, pas aux cellules, et l'en-tête figé se retrouve sans trait sous lui dès la première ligne dépassée. On les redessine en ombre interne, qui, elle, est peinte avec la cellule. */ /* V8.57 — les deux replis divergeaient du `:root` (#dbe4e6 / #e8eeef pour #d4dcd9 / #e4e9e7) : on les remet d'aplomb, un repli faux ne se voit que le jour où il sert. */ box-shadow: inset 0 -1px 0 var(--line, #d4dcd9), inset -1px 0 0 var(--line-soft, #e4e9e7); /* Au-dessus des cellules qui passent dessous — et des contrôles qu'elles contiennent (interrupteurs, champs de saisie en cours d'édition). */ z-index: 3; } .enveloppe-tableau.entete-fige table.base th.th-poignee, .enveloppe-tableau.entete-fige table.base th:first-child { z-index: 4; } /* ============================================================ V9.34 (RELI-63) — L'EN-TÊTE FIGÉ MARCHE AUSSI SUR TÉLÉPHONE. ------------------------------------------------------------ ⚠ CE BLOC ANNULE UNE DÉCISION DE LA V8.30, qui écrivait : « pas d'en-tête figé sous 800 px, quel que soit le réglage — sur un téléphone la hauteur d'écran est la ressource rare ». L'argument était juste et la conclusion fausse, parce qu'elle regardait une seule des deux dimensions. Ce qui manque sur un téléphone, ce n'est pas de la hauteur : c'est de la LARGEUR. Un tableau à huit colonnes y défile horizontalement sur trois écrans, et sans en-tête ni titre figés, la colonne qu'on lit n'a plus ni nom ni ligne — on regarde « 12/03/2026 » sans savoir ni de quelle date il s'agit, ni de quelle fiche. Le retour de test le dit sans détour : « sur mobile ça rendrait le truc inutilisable ». Économiser trente pixels de haut pour rendre le tableau illisible n'était pas le bon échange. La double barre de défilement reste un vrai inconvénient. Il est traité par ce qui l'entoure — `ccAjusterTableauFige()` (js/app.js) MESURE la place disponible plutôt que de la supposer, et `100dvh` suit la barre d'adresse qui se rétracte — et non plus en supprimant la fonction. ============================================================ */ @media (max-width: 800px) { /* Le plancher de 240 px n'a plus de sens ici : sur un écran de 600 px de haut dont 130 sont pris au-dessus, l'imposer reviendrait à réserver de la place à un tableau de deux lignes. On laisse la mesure décider. */ .enveloppe-tableau.entete-fige { min-height: 0; } } /* ============================================================ V9.34 (RELI-63) — LA COLONNE TITRE FIGÉE ------------------------------------------------------------ ⚠ ELLE NE COÛTE RIEN QUAND ELLE NE SERT PAS. `position: sticky; left: 0` n'a d'effet que s'il y a un défilement horizontal : sur une collection dont le tableau tient dans la fenêtre, ces règles sont strictement invisibles. C'est ce qui permet de l'activer par défaut sans rien changer à ce que les gens voient aujourd'hui. ⚠ ET C'EST LA LIGNE QUI PORTE LA COULEUR, PAS LA CELLULE. Une cellule figée doit être OPAQUE, sinon le tableau défile en transparence dessous. Lui poser un fond en dur aurait mangé le survol de ligne (v1) et le fond de la ligne en création. On déplace donc la couleur sur le `tr`, et la cellule figée l'hérite — ce qui est exactement la doctrine que l'interface v2 avait déjà écrite pour elle-même : « une seule couche de couleur : la ligne. Jamais la cellule. » Les deux interfaces se retrouvent ici sans qu'on ait eu à écrire deux fois les règles. ⚠ LES BORDURES, ELLES, NE SUIVENT PAS. `border-collapse: collapse` (table.base) fait appartenir les bordures à la TABLE, pas aux cellules : une cellule figée se retrouve donc sans trait à sa droite dès qu'on défile. Même remède que pour l'en-tête figé de la V8.30 — une ombre interne, qui, elle, est peinte avec la cellule. ============================================================ */ .enveloppe-tableau.col-titre-figee table.base tbody tr { background: var(--card); } .enveloppe-tableau.col-titre-figee table.base tbody tr:hover { background: var(--sunk); } .enveloppe-tableau.col-titre-figee table.base tbody tr.ligne-nouvelle { background: var(--sunk); } .enveloppe-tableau.col-titre-figee table.base tbody tr.saisie-privee { background: var(--prive-pale, rgba(107, 79, 158, .08)); } .enveloppe-tableau.col-titre-figee table.base th.th-titre, .enveloppe-tableau.col-titre-figee table.base td.cellule-titre, .enveloppe-tableau.col-titre-figee table.base th.th-poignee, .enveloppe-tableau.col-titre-figee table.base td.td-poignee { position: sticky; left: 0; z-index: 2; box-shadow: inset -1px 0 0 var(--line-soft, #e4e9e7); } /* La poignée ne porte pas de trait : c'est le titre, juste après elle, qui marque le bord de la zone figée. Deux traits collés feraient un liseré. */ .enveloppe-tableau.col-titre-figee table.base th.th-poignee, .enveloppe-tableau.col-titre-figee table.base td.td-poignee { box-shadow: none; } /* Les cellules de corps héritent de la couleur de leur ligne (cf. ci-dessus). L'en-tête, lui, a déjà son propre fond opaque (`--sunk`) : on n'y touche pas. */ .enveloppe-tableau.col-titre-figee table.base td.cellule-titre, .enveloppe-tableau.col-titre-figee table.base td.td-poignee { background: inherit; } /* ⚠ L'AFFORDANCE D'ÉDITION SURVIT. Sans cette ligne, la règle d'héritage ci-dessus (plus spécifique) écrasait `td.cellule-editable:hover` et la colonne titre devenait la seule à ne plus se teinter sous le curseur — c'est-à-dire la seule à ne plus dire qu'elle est modifiable. */ .enveloppe-tableau.col-titre-figee table.base tbody tr td.cellule-titre.cellule-editable:hover { background: var(--accent-pale); } /* En ordre personnalisé, une colonne-poignée de 28 px (cf. le colgroup de js/vues.js) précède le titre : la zone figée commence donc plus loin. */ .enveloppe-tableau.col-titre-figee.avec-poignee table.base th.th-titre, .enveloppe-tableau.col-titre-figee.avec-poignee table.base td.cellule-titre { left: 28px; } /* Le coin haut-gauche est figé DEUX FOIS (en haut et à gauche) : il doit passer au-dessus de ses deux voisins, sinon il disparaît sous l'un d'eux dès qu'on défile en diagonale. */ .enveloppe-tableau.col-titre-figee.entete-fige table.base th.th-titre, .enveloppe-tableau.col-titre-figee.entete-fige table.base th.th-poignee { z-index: 5; } /* ⚠ ET SURTOUT : PAS D'EN-TÊTE FIGÉ À L'IMPRESSION. C'est la régression que la relecture adverse a attrapée, et elle était silencieuse. Le réglage étant ACTIF PAR DÉFAUT, la boîte gardait à l'impression son `max-height` et son `overflow: auto` — or aucun navigateur n'imprime ce qui dépasse d'un conteneur à défilement. Une collection de 300 fiches sortait donc sur UNE page au lieu de dix, sans le moindre avertissement, là où la V8.29 imprimait tout. On rend donc la boîte à sa hauteur naturelle, et l'en-tête à sa position statique — un en-tête « collé en haut de l'écran » n'ayant de toute façon aucun sens sur du papier. */ @media print { .enveloppe-tableau.entete-fige { max-height: none !important; min-height: 0 !important; overflow: visible !important; } .enveloppe-tableau.entete-fige table.base th { position: static !important; box-shadow: none !important; z-index: auto !important; } /* V9.34 — MÊME RAISON POUR LA COLONNE. Une colonne « collée à gauche » n'a pas plus de sens sur du papier qu'un en-tête collé en haut, et le `position: sticky` fait dériver la cellule au moment du découpage en pages. Le fond de ligne posé pour l'opacité part aussi : imprimer une trame grise sur chaque ligne survolée-au-hasard gâche l'encre. */ .enveloppe-tableau.col-titre-figee table.base th.th-titre, .enveloppe-tableau.col-titre-figee table.base td.cellule-titre, .enveloppe-tableau.col-titre-figee table.base th.th-poignee, .enveloppe-tableau.col-titre-figee table.base td.td-poignee { position: static !important; box-shadow: none !important; z-index: auto !important; } .enveloppe-tableau.col-titre-figee table.base tbody tr { background: none !important; } } /* ============================================================ V9.35 (RELI-61) — LA LÉGENDE D'UNE COLONNE, SOUS SON NOM ------------------------------------------------------------ « Importance », et dessous, en petit : « 1 = faible, 10 = critique ». ⚠ TROIS RÈGLES DE L'EN-TÊTE JOUENT CONTRE ELLE, ET IL FAUT LES DÉFAIRE TOUTES LES TROIS — en défaire deux donne une légende invisible, ce qui est pire qu'une légende absente, parce qu'on l'a écrite et qu'on la croit là : · `white-space: nowrap` (table.base th) : la légende est une PHRASE, elle doit pouvoir passer à la ligne dans une colonne étroite ; · `text-transform: uppercase` + `font-family: var(--mono)` : hérités du nom de colonne, ils rendraient « 1 = FAIBLE, 10 = CRITIQUE » en chasse fixe — illisible, et faux (la légende est saisie telle quelle) ; · `overflow: hidden` sur le `th` (css ligne ~1290, pour la troncature des noms) : il coupe la seconde ligne net. On ne le retire pas — il sert au nom — mais le `th` reprend une hauteur automatique dès qu'il porte une légende, sinon il resterait à la hauteur d'une ligne et n'en montrerait que la moitié. ⚠ ET L'EN-TÊTE FIGÉ CONTINUE DE MARCHER. Il se cale sur la hauteur réelle du `th` (`position: sticky; top: 0`), pas sur une valeur écrite quelque part : une légende le rend simplement plus haut. C'est vérifié à la lecture, pas dans un navigateur — voir le § « ce qui n'est pas fait » de la note. ============================================================ */ table.base th .col-legende { display: block; margin-top: 2px; font-family: var(--sans, inherit); font-size: 10.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3, var(--ink-2)); white-space: normal; line-height: 1.25; } /* La hauteur d'un en-tête qui porte une légende n'est plus celle d'une ligne. */ table.base th.th-legende, table.base th:has(.col-legende) { white-space: normal; vertical-align: top; } /* Sur la FICHE, la légende vit sous le libellé du champ — même classe, autre contexte : ici rien ne la contrarie, il suffit de la rendre discrète et de défaire la casse du