/* 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 `::after` AUSSI, QUI AVAIT ETE OUBLIE. Une carte depouillee de son fond gardait une lueur posee par-dessus : `journey.css` peint un `radial-gradient(circle at top right)` sur toute la surface du bloc de titre. Le fond, le filet et l'ombre etaient partis ; il restait un halo cyan dans le coin droit, sans boite autour de lui pour l'expliquer. C'est la meme raison que pour `::before` : ces deux couches DECORENT une carte, et ce bloc n'en est plus une. */ .lk-body .admin-dashboard__hero::after, .lk-body .journey-stage-card::after, .lk-body .diagnostic-viewer-header-card::after { 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. LE MINIMUM EST MESURE, PAS CHOISI (09/10/2026). Il valait 180 px, et rien ne le justifiait : releve des dix chiffres du tableau praticien, le libelle le PLUS LARGE -- « confreres praticiens » -- mesure 104 px. On reservait donc 76 px de vide par piste, et c'est ce vide qui faisait basculer une carte d'une part sur une seule colonne : 180 + 180 + 20 d'ecart font 380, de trop dans les 328 px utiles d'une carte etroite. Les deux chiffres s'empilaient, chacun seul sur sa ligne avec un grand blanc a droite. Releve par l'Admin sur « Credits de traitement », capture a l'appui. 140 LAISSE 36 PX D AIR au libelle le plus long, et fait tenir deux pistes dans 300 px -- une carte d'une part en offre 328. Une traduction plus longue que 140 passe a la ligne au lieu de casser la rangee : le texte s'enroule, la grille tient. C'est l'arbitrage voulu, parce qu'une rangee qui se brise se voit de loin, alors qu'un libelle sur deux lignes ne se remarque pas. */ /* `min(140px, 100%)` ET NON `140px` : LE PLANCHER RESTE 140, IL DEVIENT SEULEMENT RELATIF. Tout le raisonnement ci-dessus tient, et le chiffre ne change pas. Ce qui change est le cas qu'il ne prevoyait pas : quand la carte offre MOINS que le plancher. `auto-fit` sait retirer des colonnes, il ne sait pas retrecir la derniere sous son minimum -- elle garde ses 140 px et sort de la carte. MESURE SUR `/admin`, PAGE REELLE : a 400 px de fenetre, une carte de la rangee du bas n'offre que 89 px, la piste en prend 140, et c'est la PAGE entiere qui part de 26 px en travers. A 360 px, 39 px. `min(140px, 100%)` dit exactement ce que le raisonnement voulait dire : 140 px tant qu'il y a la place, la largeur disponible sinon. Les cartes larges ne bougent pas d'un pixel. ET C EST ICI QU IL FALLAIT L ECRIRE : `admin-dashboard.css` declare la meme classe avec un autre plancher, mais cette feuille-ci est chargee APRES et l'emporte. Corrige la-bas, le remede n'avait aucun effet -- et un essai injecte en fin de page le cachait, puisqu'il gagnait sur les deux. */ .dashboard-card__figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: var(--e-7) var(--e-9); margin-bottom: var(--e-2); padding-bottom: var(--e-8); } /* UNE CARTE QUI PORTE UN OUTIL RANGE SES CHIFFRES EN RANGEE. L'ADMIN, LE 03/11/2026 : « champ de recherche a droite au meme niveau que les nombres des comptes/praticien/clients », et « pareil pour "Votre lien", a droite du nombre de personnes suivies ». POURQUOI LA GRILLE NE SUFFIT PAS. `auto-fit` donne a chaque enfant une colonne d'au moins 140 px et les etire a parts egales : l'outil deviendrait une colonne comme une autre, large comme un chiffre de deux caracteres. Ce qu'on veut est l'inverse -- les chiffres a leur taille, et tout le reste a l'outil. LA RANGEE NE S APPLIQUE QU AUX CARTES QUI EN PORTENT UN (`:has`), donc les quinze autres gardent leur grille au pixel pres. LA TAILLE EST CELLE DE L USAGE, PAS DE LA PLACE DISPONIBLE. L'Admin, le 03/11/2026 : « reduis la taille du champ de recherche, on ne tape en general que quelques caracteres pour filtrer (taille dynamique pour rentrer) ». Il demandait donc deux choses : plus petit, et qui se serre pour tenir sur la ligne. `flex: 0 1 280px` AVEC UN PLANCHER A 160 : il ne grandit jamais au-dela de 280 (un champ large comme une carte ne se lit pas mieux), il se CONTRACTE jusqu'a 160 quand la rangee se resserre, et il ne passe a la ligne qu'en dessous -- ou il n'aurait plus la place d'un mot. Le seuil de repli tombe ainsi de 704 a 544 px de rangee. */ .dashboard-card__figures:has(.dashboard-card__outil) { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--e-9); } .dashboard-card__figures:has(.dashboard-card__outil) > .dashboard-figure { flex: 0 0 auto; min-width: 128px; } .dashboard-card__outil { flex: 0 1 280px; min-width: 160px; margin-left: auto; } /* ET L OUTIL QUI DOIT SE LIRE EN ENTIER PREND CE QUI RESTE. L'Admin, le 03/11/2026 : « dynamique aussi mais plus grand, il n'y a qu'un chiffre, le margin de 394 px est beaucoup trop grand ». Un seul chiffre dans la rangee laissait 394 px de vide a cote d'une adresse coupee au milieu. `flex: 1 1` SANS PLAFOND : contrairement au champ de recherche, une adresse a copier se lit en entier ou ne sert a rien, et il n'y a pas de largeur au-dela de laquelle elle se lirait moins bien. Le plancher de 160 px du cas general reste : en dessous, l'outil passe a la ligne. */ .dashboard-card__outil--large { flex: 1 1 320px; } /* 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); } /* LES CARTES REMPLISSENT LEUR LIGNE, ELLES NE SE POSENT PAS DANS DES COLONNES. CE QUI NE MARCHAIT PAS, ET QUI SE VOYAIT. Des colonnes fixes et des cartes qui en prennent une, deux ou toutes : il suffit que le compte ne tombe pas juste pour qu'une ligne finisse a vide. Mesure du 05/10/2026 sur le tableau de bord praticien, dans un cadre de 1170 : la carte des credits occupait 379 px et laissait 791 px de vide a sa droite, parce qu'aucune des cartes suivantes ne tenait dans ce qui restait. Et ce trou se deplace avec le contenu -- il depend de quelles cartes le compte affiche, donc aucune valeur ecrite a la main ne le ferme pour tout le monde. UN FLUX LE FERME TOUT SEUL. Chaque carte demande une largeur (`flex-basis`), la ligne prend celles qui tiennent, et celles qui y sont GRANDISSENT jusqu'au bord. Une carte seule sur sa ligne vaut donc toute la ligne, trois cartes se partagent la leur : il n'y a plus de place a laisser vide, et rien a decider carte par carte. LE REPLI EST DANS LA MEME REGLE. `flex-shrink: 1` laisse une carte descendre sous sa largeur demandee quand le cadre est plus petit qu'elle, ce que les colonnes ne faisaient qu'avec un `min()` et un point de rupture ecrit a part. Le telephone n'a donc plus besoin de son `@media` : une seule carte tient par ligne, et elle vaut la ligne. */ .dashboard-grid { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: stretch; } /* `min-width: 0` : sans lui, une carte ne descend pas sous la largeur de son contenu le plus large -- un tableau, une adresse -- et c'est elle qui deborde au lieu de se serrer. */ .dashboard-grid > * { flex: 1 1 340px; min-width: 0; } /* DEUX TAILLES DEMANDEES, ET C EST UNE HIERARCHIE, pas un remplissage. La DOUBLE demande plus et grandit deux fois plus vite : elle porte un tableau, une piste, un formulaire -- du contenu qui devient illisible serre. 480 px et non 340 pour que la carte des clients garde son tableau large : a 320 px de demande, les trois premieres cartes tenaient sur une ligne et le tableau tombait a 479 px, ou les noms se cassent en deux. La LARGE demande la ligne entiere : elle dit « regardez ici d'abord », ou bien ce qu'elle porte EST une largeur -- une progression, une frise, un chemin qui se lit de bout en bout. Ces deux valeurs ne decident plus de la mise en page a elles seules, elles disent seulement ce que la carte PREFERE. C'est le flux qui tranche, et c'est pour ca qu'il n'y a plus de trou. */ .dashboard-grid > .dashboard-card--double { flex-grow: 2; flex-basis: 480px; } .dashboard-grid > .dashboard-card--large { flex-basis: 100%; } /* 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. */ /* ========================================================================= LA CARTE QUI PORTE CE QUI ATTEND ========================================================================= L'Admin, le 16/10/2026, en montrant le bloc d'ouverture de « Mon parcours praticien » : « "Ce qui attend", je veux que le style soit comme ca, /partner et /admin ». LA RECETTE EST RECOPIEE VALEUR PAR VALEUR de `journey.css`, ou elle habille `.partner-journey-page .admin-dashboard__hero`. Recopiee et pas rapprochee a vue : c'est ce qui evite le troisieme dialecte de cyan. Si elle bouge la-bas, elle doit bouger ici, et ce commentaire est le seul lien entre les deux. LE FILET D ACTION EST RESERVE, UNE SEULE CHOSE PAR PAGE PEUT LE PORTER, et sur ces deux tableaux de bord c'est celle-ci : elle annonce le seul geste que la page demande tout de suite. Les autres cartes gardent le filet neutre. L OMBRE TOMBE. La carte de reference n'en a pas : elle se detache par sa teinte et son filet. Une ombre par-dessus ajouterait un relief que l'autre page n'a pas, et c'est l'ecart qu'on vient fermer. ========================================================================= */ /* DEUX FOIS LE MEME NOM, ET CE N EST PAS UNE COQUETTERIE. Ecrite avec une seule classe, cette regle perdait : `elements-retenus.css` pose un fond sur `.dashboard-card` tout court, a poids egal, et sa feuille se charge APRES celle-ci. Mesure en reel apres le premier deploiement : filet gris, ombre portee, fond blanc a 4 % -- la carte n'avait pas bouge d'un pixel. LE NOM REPETE PORTE LA REGLE A DEUX CLASSES, donc au-dessus de tout ce qui habille `.dashboard-card` d'un seul nom, quel que soit l'ordre des feuilles. C'est ce qui la rend independante de cet ordre, et c'est pour ca qu'on ne deplace pas la regle d'une feuille a l'autre : la prochaine couche ajoutee entre les deux rouvrirait le meme defaut. */ .dashboard-card.dashboard-card--attend { border: var(--filet-epaisseur) solid var(--filet-action); border-radius: 12px; background: radial-gradient(circle at 0% 0%, rgba(var(--portal-accent-rgb), 0.22), transparent 55%), rgba(var(--portal-accent-rgb), 0.10); box-shadow: none; }