/* COPIE AUTOMATIQUE DE public/base/cartes-retenues.css -- NE PAS EDITER ICI. La source est au banc ; `python tools/base/porter_reprise.py` refait cette copie, et son mode `verifier` signale toute divergence. */ /* ========================================================================= LES TROIS ROLES DE CARTE ========================================================================= L ACCENTUATION N EST PAS UNE COUCHE POSEE SUR UNE CARTE, C EST UN STYLE DE CARTE A PART ENTIERE. C'est la correction qui a demande une reprise entiere : tant que l'accent etait un vernis, deux reglages visaient le meme objet, le dernier gagnait, et « Relief » ne se voyait pas sur le tableau de bord sans qu'aucune erreur ne le dise. Trois roles, trois listes DISJOINTES par construction : carte de titre celle qui ouvre la page 1 par page carte accentuee celle qui dit « ici d'abord » au plus 1 par page carte normale toutes les autres 5 sur le tableau de bord La normale exclut nommement les deux autres. Sans ce `:not`, on retomberait sur le meme conflit, en plus discret. CE QUI A ETE RETENU A L ATELIER : relief pour la normale, nue pour le titre, tete pour l'accentuee. ========================================================================= */ /* ------------------------------------------------------------------------- 1 · LA CARTE NORMALE — « relief » ------------------------------------------------------------------------- ELLE NE SE POSE PAS SUR LE FOND, ELLE S EN DETACHE. Un degrade tres court du haut vers le bas, une arete de lumiere sur le bord superieur, une ombre portee courte. Aucun filet : c'est l'ombre qui dit ou la carte s'arrete, et un filet par-dessus ferait redite. L ARETE DE LUMIERE NE SUIT PAS LE THEME, ET C EST VOULU. Elle etait ecrite `rgba(var(--white-rgb), .045)`, donc elle devenait une ligne SOMBRE sur le theme clair : un creux en haut de la carte, exactement le contraire de ce qu'un relief raconte. Une arete est une LUMIERE, pas une encre ; elle reste blanche des deux cotes. Sur clair elle ne fait presque rien, et c'est juste : sur un sol clair, une carte surelevee se dit par son ombre, pas par sa crete. L OMBRE PORTEE RESTE NOIRE DES DEUX COTES pour la meme raison inverse : une ombre est une absence de lumiere, elle n'a pas de version claire. ------------------------------------------------------------------------- */ .card:not(header):not(.consultation-viewer-notice):not(.admin-dashboard__hero):not(.journey-stage-card):not(.diagnostic-viewer-header-card):not(.dashboard-card--large):not(.billing-state__card):not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)), .dashboard-card:not(header):not(.consultation-viewer-notice):not(.admin-dashboard__hero):not(.journey-stage-card):not(.diagnostic-viewer-header-card):not(.dashboard-card--large):not(.billing-state__card):not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)), .partner-client-card:not(header):not(.consultation-viewer-notice):not(.admin-dashboard__hero):not(.journey-stage-card):not(.diagnostic-viewer-header-card):not(.dashboard-card--large):not(.billing-state__card):not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)), .journey-section-card:not(header):not(.consultation-viewer-notice):not(.admin-dashboard__hero):not(.journey-stage-card):not(.diagnostic-viewer-header-card):not(.dashboard-card--large):not(.billing-state__card):not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)) { padding: var(--espace-carte); border: 0; border-radius: var(--rayon-bloc); background: var(--surface-carte); box-shadow: var(--arete-lumiere), var(--ombre-carte); } /* `:not(header)` EN TETE DE CHAQUE CHAINE : un `
` qui porte une carte est le bloc qui OUVRE une page, et une page s'ouvre sur un titre, pas sur une boite. Il est ecarte ICI, a la source, parce que la regle « nue » ne pouvait pas gagner contre cette chaine a cinq `:not()` -- (0,6,0) contre (0,2,1). Troisieme fois que la course aux poids se perd de la meme facon. UNE CARTE-CADRE N EST PLUS PEINTE, ET C EST `:not(.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice))` CI-DESSUS QUI LE FAIT, pas cette regle-ci. ------------------------------------------------------------------------- DEUX REGLES PEIGNENT LES CARTES : celle du dessus, qui porte cinq `:not()` donc (0,6,0), et une autre dans `elements-retenus.css`. Leur opposer une regle plus precise aurait demande d'entrer dans une course aux poids -- chaque `:not()` compte comme une classe -- et de produire un selecteur dont personne n'aurait su, six mois plus tard, contre quoi il se battait. Deux tentatives ont d'ailleurs echoue en silence avant celle-ci : (0,4,0) contre (0,6,0), puis (0,2,0) contre (0,2,0) ou la derniere feuille l'emporte. ON EXCLUT A LA SOURCE. `mb-3` designe dans ce produit les cartes qui ENTOURENT une section -- quatorze endroits, tous des cadres, aucune carte de contenu -- et les deux regles qui peignent l'ecartent maintenant. LA CARTE D ENTETE DU VISUALISEUR PORTE `mb-3` ET N EST PAS UN CADRE : elle dit le nom du client et la seance. D'ou le `:not()` imbrique -- on ecarte les cadres SAUF celui-la. Sa specificite est celle de son argument le plus fort, donc la regle pese un cran de plus, ce qui ne gene personne : rien ne se bat contre elle. CE QUI RESTE ICI est ce que la peinture laissait derriere elle : le remplissage lateral, qui sans fond ne fait plus qu'un decalage, et le lisere de tete des cartes accentuees, qui serait un trait en haut du vide. */ .card.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice), .dashboard-card.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice) { background: none; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; } .card.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)::before, .dashboard-card.mb-3:not(.diagnostic-viewer-header-card):not(.consultation-viewer-notice)::before { content: none; } /* ------------------------------------------------------------------------- 2 · LA CARTE DE TITRE — « nue » ------------------------------------------------------------------------- ELLE N EST PAS UNE CARTE. « Espace praticien », « Vous pouvez passer au test principal », l'en-tete du visualiseur : son role est de SITUER avant de montrer, et rien dans ce role ne demande une boite. La planche C.136 le dit mieux que n'importe quelle regle : c'est l'espace qui detache un titre, pas un cadre. On retire donc tout, et on le retire explicitement -- le produit lui pose une carte, et un `background: none` seul laisserait le filet et l'ombre derriere. ELLE EST UNIQUE PAR PAGE, verifie sur quatre ecrans. C'est ce qui autorise a ne rien lui donner : ce qui ne se repete pas n'a pas besoin d'etre range. `.lk-body` DEVANT, ET C EST LUI QUI FAIT TOUT LE TRAVAIL. Ces trois classes sont aussi des `.card`, et `lk.css` peint toutes les cartes par `.lk-body .card:not(:where(...))`, soit (0,2,0). Ecrite sans ancetre, la regle qui depouille pesait (0,1,0) et perdait en silence : « nue » ne s'appliquait sur aucune page. Mesure sur « Mes clients », modele contre produit, a 1440 en sombre -- transparent et sans ombre d'un cote, `rgba(255,255,255,.04)` plus degrade plus `0 10px 30px rgba(0,0,0,.28)` de l'autre. ON NE CHERCHE PAS A PESER PLUS, ON PESE AUTANT : cette feuille est lue apres `lk.css`, donc l'egalite suffit. Un cran de plus relancerait la course aux poids que ces feuilles ont deja perdue trois fois. ------------------------------------------------------------------------- */ .lk-body .admin-dashboard__hero, .lk-body .journey-stage-card, .lk-body .diagnostic-viewer-header-card { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; /* LE REMBOURRAGE ET LE RAYON SUIVENT. `lk.css` pose 20 px et 12 px sur toute carte ; depouillee, la carte garderait le creux d'une boite qui n'existe plus. Le modele mesure 14 px et 8. */ padding: var(--espace-carte); border-radius: var(--rayon-bloc); } .lk-body .admin-dashboard__hero::before, .lk-body .journey-stage-card::before, .lk-body .diagnostic-viewer-header-card::before { content: none; } /* ET LE ROLE SE RECONNAIT AUSSI A LA BALISE, pas seulement a une liste de classes. ------------------------------------------------------------------------- TROIS CLASSES NE SUFFISAIENT PAS, et c'est une mesure qui l'a dit : sur les quarante-neuf pages rendues, DIX ouvrent sur un bloc de titre PEINT. Cinq d'entre elles l'ecrivent `
` -- sans `admin-dashboard__hero` -- donc elles recevaient le traitement des cartes ordinaires : un fond, une ombre, un rayon, autour du titre de la page. Aucune regle n'etait fausse ; la liste des classes etait seulement incomplete, et elle le redeviendra a la prochaine page ecrite. `header.card` DIT LA MEME CHOSE SANS LISTE. Un `
` qui porte une carte est le bloc qui OUVRE une page -- douze gabarits l'ecrivent ainsi, aucun ne s'en sert pour autre chose. Nommer le role par la balise vaut mieux que le nommer par ce qu'on a croise jusqu'ici. SON POIDS EST (0,2,1), un cran au-dessus de la regle de `lk.css` qui peint toutes les cartes. C'est le minimum qui gagne : l'egalite ne suffisait pas ici, `lk.css` et cette feuille ne sont pas dans le meme ordre pour toutes les pages. */ .lk-body header.card { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--espace-carte); border-radius: var(--rayon-bloc); } .lk-body header.card::before { content: none; } /* ------------------------------------------------------------------------- 3 · LA CARTE ACCENTUEE — « tete » ------------------------------------------------------------------------- UN LISERE EN TETE, ET RIEN D AUTRE. La carte garde le voile de teinte du produit ; ce qui la designe est un trait de deux pixels qui s'eteint vers la droite. Il commence franc et disparait : il POINTE au lieu d'encadrer. POURQUOI PAS UN CADRE DE TEINTE. Une carte cerclee de couleur devient une alerte -- et il y en a une par page, donc chaque page aurait l'air de signaler un probleme. Le liseré dit « commencez par la », ce qui est le vrai propos. LE DEGRADE PORTE LA TEINTE DE SURFACE, pas celle du texte : c'est un aplat de deux pixels, il lui suffit de 3,0 et il gagne a etre vif. `overflow: hidden` EST CE QUI LE FAIT TENIR DANS LE COIN ARRONDI. Sans lui, le liseré depasse aux deux bouts et la carte a l'air ebrechee. ------------------------------------------------------------------------- */ .dashboard-card--large, .billing-state__card { position: relative; overflow: hidden; padding: var(--espace-carte); border: var(--filet-epaisseur) solid var(--filet-neutre-large); border-radius: var(--rayon-bloc); background: var(--surface-accentuee); } .dashboard-card--large::before, .billing-state__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, rgba(var(--accent-surface-rgb), 0.9), rgba(var(--accent-surface-rgb), 0)); } /* ------------------------------------------------------------------------- LE DEDANS D UNE CARTE — de 5 a 9 pages selon le bloc ------------------------------------------------------------------------- Ces blocs ne dependent pas du ROLE de la carte : une carte de titre, une accentuee et une normale ont la meme tete et le meme pied. C'est pour ca qu'ils sont ecrits une fois, hors des trois roles. L ORDRE DE LECTURE EST TOUJOURS LE MEME : ce que c'est (la tete), ce que ca vaut (les chiffres), ou ca mene (le pied). Un ecran qui garde cet ordre se parcourt sans etre relu. ------------------------------------------------------------------------- */ .dashboard-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--e-6); } .dashboard-card__title { margin: 0; font-size: 18px; font-weight: 800; } .dashboard-card__desc { margin: var(--e-2) 0 0; color: var(--texte-calme); } /* L ETAT SE RANGE A DROITE DE LA TETE. En capitales et petit : il qualifie le bloc, il ne le titre pas. */ .dashboard-card__state { flex: none; padding: var(--e-2) var(--e-5); border-radius: var(--rayon-gelule); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; } /* LES CHIFFRES SE PLACENT SEULS. `auto-fit` avec une largeur minimale : deux chiffres cote a cote quand la carte est large, l'un sous l'autre quand elle ne l'est plus. Le produit ecrivait un nombre de colonnes fixe et une regle de plus sous un seuil pour le corriger. */ .dashboard-card__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--e-7) var(--e-9); margin-bottom: var(--e-2); padding-bottom: var(--e-8); } /* LA VALEUR AU-DESSUS DE SON LIBELLE, jamais a cote : c'est le chiffre qu'on cherche, le libelle ne fait que le nommer une fois qu'on l'a trouve. */ .dashboard-figure { display: flex; flex-direction: column; gap: var(--e-1); } .dashboard-figure__valeur { font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; } .dashboard-figure__libelle { color: var(--texte-second); font-size: 12px; } /* LE PIED DE BLOC EST POUSSE VERS LE BAS par `margin-top: auto` : dans une grille ou les cartes s'etirent a la meme hauteur, les liens s'alignent alors d'une carte a l'autre au lieu de suivre la longueur du contenu. */ .dashboard-card__foot { display: flex; align-items: center; gap: var(--e-5); margin-top: auto; padding-top: var(--e-7); } .dashboard-card__link { margin-left: auto; padding: var(--e-4) 0; font-weight: 600; text-decoration: none; } /* ------------------------------------------------------------------------- LA GRILLE DES CARTES ------------------------------------------------------------------------- ELLE S ADAPTE SEULE, ET C EST UN CHANGEMENT. Le produit ecrivait `repeat(3, minmax(0, 1fr))` -- trois colonnes, toujours -- puis une regle de plus sous un seuil pour repasser a deux, et une autre pour passer a une. Trois regles pour une idee, et trois occasions de les desaccorder. `auto-fill` avec une largeur minimale dit la meme chose une seule fois : une carte n'est pas lisible sous 340 px, donc on en met autant que la place le permet. A 1 208 px de contenu cela fait trois colonnes, comme avant ; a 900, deux ; sur telephone, une. Aucun seuil n'est necessaire, et la grille reste juste a des largeurs que personne n'avait prevues. ------------------------------------------------------------------------- */ .admin-dashboard { display: flex; flex-direction: column; gap: var(--espace-section); } /* `min(340px, 100%)` ET NON `340px` : une piste qui exige 340 px dans un cadre qui en offre 338 ne se serre pas, elle deborde. Le `min()` la laisse valoir toute la largeur disponible quand celle-ci est plus petite que le minimum. */ .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: var(--e-8); align-items: stretch; } /* TROIS TAILLES DE CARTE, ET C EST UNE HIERARCHIE, pas un remplissage. L accentuee prend TOUTE la largeur : c'est elle qui dit « regardez ici d'abord », la mettre en colonne parmi d'autres annulerait ce qu'elle annonce. Elle est unique par page, donc cette ligne ne peut pas se retourner contre une grille pleine de cartes larges. La DOUBLE en prend deux : elle porte un tableau, une piste, un formulaire -- du contenu qui ne tient pas dans une colonne sans devenir illisible. Sur le tableau de bord, quatre cartes sur six sont doubles. La simple en prend une. Sans ces deux lignes, les six cartes se valent, et une grille ou tout se vaut ne hierarchise rien. */ .dashboard-grid .dashboard-card--large { grid-column: 1 / -1; } .dashboard-grid .dashboard-card--double { grid-column: span 2; } /* DEUX COLONNES DE LARGE DANS UNE GRILLE QUI N EN A QU UNE : la carte double FABRIQUE la seconde. La grille en rend une seule sur un telephone, `span 2` lui en fait creer une implicite -- mesure : pistes `340px 28px` dans un cadre de 366, et 172 px de contenu dehors, coupes par le corps. Le produit avait deja ce point de rupture pour la meme carte (`820px`) : on le redit ici, parce que la couche retenue se charge APRES lui et lui reprenait `grid-column` sans reprendre son repli. Une regle deplacee se deplace en entier, exceptions comprises. */ @media (max-width: 820px) { .dashboard-grid .dashboard-card--double { grid-column: auto; } } /* POURQUOI CE BLOC EST ICI ET NON DANS UN FICHIER DE PAGE. Il y a TROIS tableaux de bord -- client, praticien, administration -- et ils partagent ce motif : `.admin-dashboard` se retrouve sur 20 pages, la grille sur 4. Range dans le fichier de l'un des trois, il aurait garanti que les deux autres le redefinissent un peu differemment. C'est exactement le conflit que l'architecture veut rendre impossible, et je l'avais commis dans le premier fichier de page que j'ecrivais. */