/* ============================================================================ REKOV — 04 · la colonne retenue ---------------------------------------------------------------------------- Grammaire de la grille tarifaire : une colonne est désignée, et le lecteur sait en une seconde laquelle il doit lire. La colonne Rekov passe en encre pleine et déborde au-dessus et en dessous du tableau — elle cesse d'être une colonne comparée pour devenir la réponse. Le nom « Rekov » cède la place au logotype. Sur l'encre, c'est la version fond sombre qui s'applique : lettres blanc chaud, zéro en terre claire, conforme au socle §2 qui réserve la terre brûlée au fond clair. ============================================================================ */ .th-logo { display: block; } .th-logo svg { width: clamp(76px, 7vw, 96px); height: auto; display: block; } .df-table thead th.is-us { vertical-align: bottom; } .df-table--key table { border-collapse: separate; border-spacing: 0; } /* La spécificité doit dépasser `.df-table td.is-us { color: var(--fg) }` de style.css (0,2,1) : sinon le texte reste en encre sur l'encre, invisible. */ .df-table--key thead th.is-us, .df-table--key tbody td.is-us { background: var(--ink); color: var(--blanc); padding-left: clamp(1rem, 2vw, 1.5rem); padding-right: clamp(1rem, 2vw, 1.5rem); } /* La colonne encre ne déborde PAS du tableau. Elle le faisait — 22 px en haut et en bas par box-shadow — et c'est précisément ce qui la faisait lire comme un panneau posé à côté de la grille plutôt que comme une de ses colonnes : une surface qui sort des bornes d'un tableau n'en fait visiblement plus partie. Elle tient désormais exactement les mêmes bornes que les autres. */ .df-table--key thead th.is-us { padding-top: clamp(0.9rem, 1.8vw, 1.3rem); padding-bottom: clamp(0.9rem, 1.8vw, 1.3rem); } /* Les filets internes passent en clair : le filet du registre jour serait invisible sur l'encre. */ .df-table--key tbody td.is-us { border-bottom: 1px solid rgba(251, 250, 249, 0.12); } .df-table--key tbody tr:last-child td.is-us { border-bottom: 0; } /* Le logotype prend sa version fond sombre à l'intérieur de la colonne. */ .df-table--key .th-logo svg .lg-zero { fill: #F0906B; } .df-table--key .th-logo svg path:not(.lg-zero) { fill: #FBFAF9; } /* L'intitulé suit désormais le logotype : sa marge passe donc au-dessus. Laissée en dessous, elle creusait un vide entre lui et le filet d'en-tête. */ .df-table--key .th-kicker { display: block; margin-top: 0.7rem; font-family: var(--fm); font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: #F0906B; } /* ---- Lisibilité des deux colonnes comparées ---- Les en-têtes tombaient à 9,56 px, en capitales et à 0,2em d'interlettrage : à cette taille, l'interlettrage large disperse le mot au lieu de l'aérer, et « Cabinet de réduction de coûts » devenait une frise illisible. Ils passent à 11 px, l'interlettrage se resserre à 0,12em, et la couleur passe du gris à l'encre — un en-tête de colonne doit tenir le tableau, pas s'effacer. Les cellules gardent leur gris (6,68:1 sur le papier, largement suffisant) : ce qui manquait n'était pas le contraste mais la matière. Graisse 500 et interlignage 1,6. */ .df-table--key thead th { font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--fg); } .df-table--key tbody td { font-weight: 500; line-height: 1.6; } /* ---- La délimitation ---- Deux repères qui ne se disputent pas : la GOUTTIÈRE sépare les colonnes, la BANDE guide la lecture d'une ligne. L'un travaille à la verticale, l'autre à l'horizontale ; ensemble ils font une grille lisible sans un seul filet vertical. Les deux alternatives reçoivent chacune leur panneau, séparé par une gouttière de 10 px : les trois colonnes se lisent comme trois blocs posés côte à côte plutôt que comme un tableau continu. Une ligne sur deux passe au blanc chaud, l'autre reste au papier de la section. Sur six critères, c'est ce qui empêche l'œil de sauter de rangée en traversant le tableau. */ /* Les colonnes sont des PANNEAUX DÉTACHÉS, pas les tranches d'une même surface. La gouttière s'ouvre sur le fond de section — elle ne peint rien — et chaque colonne porte son propre filet sur les quatre côtés. Le filet est posé sur les flancs de chaque cellule : empilées, elles dessinent un panneau continu, sans qu'aucun élément supplémentaire soit nécessaire. C'est la seule façon de border une colonne en HTML tabulaire. */ /* Colonnes JOINTIVES, séparées au filet et non par une gouttière. Des gouttières laissent lire trois surfaces posées côte à côte ; des colonnes qui se touchent ne peuvent se lire que comme une grille — c'est la moitié du malentendu réglée par la géométrie plutôt que par un mot. */ .df-table--key table { border-collapse: separate; border-spacing: 0; } .df-table--key thead th:not(:first-child), .df-table--key tbody td { border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); } .df-table--key thead th:not(:first-child) { border-top: 1px solid var(--rule); } .df-table--key thead th.is-us, .df-table--key tbody td.is-us { border-color: var(--ink); } /* Le séparateur en-tête / corps est le filet le plus fort du tableau : 2 px contre 1 px pour les rangées. Sur l'encre il était peint EN ENCRE, donc invisible — la division principale s'arrêtait au bord de la colonne Rekov. Blanc PLEIN, et non atténué : la même épaisseur ne suffit pas à donner le même poids. À gauche le filet est de l'encre pleine sur fond clair ; son miroir exact sur fond encre est du blanc plein. Une valeur intermédiaire ferait lire le séparateur comme plus faible de ce côté, donc la colonne comme moins solidaire du tableau. Le corps, lui, reste à 20 % : ses filets sont deux fois plus fins et ne portent pas la division principale. */ .df-table--key thead th.is-us { border-bottom-color: var(--blanc); } /* La colonne des critères sort du dispositif : elle nomme, elle ne compare pas. Sans fond ni filet, elle se lit comme une marge. */ .df-table--key thead th:first-child, .df-table--key tbody th { background: none !important; } .df-table--key tbody tr:last-child th { border-bottom: 0; } /* Chaque panneau clair est peint explicitement : sans fond, il laisserait voir le fond de section et cesserait d'exister comme surface. */ .df-table--key thead th:not(.is-us), .df-table--key tbody td:not(.is-us) { background: var(--clair-2); } /* Plus de bande alternée : les filets continus guident désormais la ligne, et une rangée sur deux en blanc ajouterait un second système de lecture — qui s'arrêterait de toute façon au bord de la colonne encre. */ .df-table--key thead th:not(:first-child), .df-table--key tbody td { padding-inline: clamp(0.9rem, 1.8vw, 1.4rem); } .df-table--key tbody th { padding-inline: clamp(0.7rem, 1.4vw, 1.1rem); } /* Les filets de ligne traversent le tableau ENTIER, colonne encre comprise : une ligne qui s'interrompt au bord d'une colonne dit que cette colonne est ailleurs. Ils sont maintenant continus d'un bout à l'autre — c'est ce qui prouve à l'œil que la colonne Rekov est dans la même grille. Deux valeurs pour un seul poids perçu : la hairline claire du registre jour sur les colonnes claires, et du blanc à 20 % sur l'encre — un filet sombre serait invisible sur fond encre, et du blanc plein y serait deux fois plus marqué que son voisin. */ .df-table--key tbody th, .df-table--key tbody td:not(.is-us) { border-bottom: 1px solid var(--rule); } .df-table--key tbody td.is-us { border-bottom: 1px solid rgba(251, 250, 249, 0.2); } /* La dernière rangée ne porte AUCUN filet bas : les filets séparent les rangées entre elles, ils ne referment pas le tableau. Un trait sous la dernière ligne en ferait une boîte close plutôt qu'un relevé ouvert. */ .df-table--key tbody tr:last-child th, .df-table--key tbody tr:last-child td { border-bottom: 0; } /* Le filet vertical entre colonnes : il sépare sans détacher. Côté encre il se confond avec l'aplat, la bascule de fond faisant seule la limite. */ .df-table--key thead th + th, .df-table--key tbody td { border-left: 1px solid var(--rule); } .df-table--key thead th.is-us, .df-table--key tbody td.is-us { border-left-color: var(--ink); } /* ---- Le survol de rangée ---- style.css le pose sur le . Ça ne peut pas fonctionner ici : chaque cellule porte son propre fond, qui recouvre celui de la rangée — côté clair la teinte était identique, côté encre elle était explicitement rétablie. Le survol est donc peint sur les CELLULES, avec une valeur par registre pour que les trois s'éclaircissent du même écart perçu. */ .df-table--key tbody tr:hover th, .df-table--key tbody tr:hover td:not(.is-us) { background: var(--blanc); } .df-table--key tbody tr:hover td.is-us { background: #211D19; } .df-table--key tbody th, .df-table--key tbody td { transition: background var(--t-med) var(--ease); } /* ---- L'en-tête de la colonne fusionnée ---- Logiciel et cabinet ne sont plus deux colonnes : ce qui les distingue l'un de l'autre n'intéresse pas le lecteur, seul compte ce qu'ils ont en commun — ils laissent au client une liste à exploiter, jamais un dossier prêt à envoyer. Le sous-titre nomme les deux métiers pour que la fusion ne passe pas pour un raccourci. */ .df-hd { display: block; /* style.css met les en-têtes de tableau en capitales. Un intitulé display à tracking négatif y devient illisible : des capitales serrées se collent là où une casse mixte respire. La casse mixte est aussi celle de la colonne voisine (th-kicker, logotype). */ text-transform: none; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.2; } .df-hd i { display: block; font-style: normal; margin-top: 0.35rem; text-transform: uppercase; font-family: var(--fm); font-size: 0.4375rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 400; opacity: 0.75; } /* Trois colonnes de largeurs déclarées : sans cela le navigateur donne au texte fusionné, plus long, une largeur écrasante. */ .df-table--key table { table-layout: fixed; } .df-table--key thead th:first-child { width: 22%; } .df-table--key thead th:nth-child(2) { width: 42%; } .df-table--key thead th.is-us { width: 36%; } /* ---- Le verdict de section ---- La rature de la première ligne a été retirée avec le repositionnement : le verdict n'est plus bâti sur une négation (« On ne vous envoie pas un rapport » → barré) mais sur deux affirmations (« On vous livre un dossier béton. » / « Et on vous rembourse si le transporteur refuse. »). Barrer la première dirait l'inverse de ce qu'elle affirme. Le composant .claim de style.css suffit : première ligne en poids moyen, seconde en gras. */