/* ============================================================================= Section Ressources — ce qui lui est propre. La page charge la charte Archiverse Search, celle des bibliotheques Outils et Logiciels, pour que les trois sous-sections se lisent de la meme facon : meme fil, meme titre, meme barre de recherche, memes cartes. Cette feuille ne porte que ce que la charte ne peut pas savoir : la mise en page particuliere a Ressources, et les quelques classes inventees pour ses fiches. Le volet de droite, qui affiche une fiche ouverte, garde ses styles d'origine — la refonte s'arrete ou commence ce qui marchait deja. ============================================================================= */ /* ---------- ce que la charte suppose, et qui ne vaut pas ici --------------- .archiverse-search porte min-height: 60vh et un fond. C'est juste pour un conteneur qui tient toute une page — les bibliotheques Outils et Logiciels en ont un seul, du haut en bas. Ici la charte habille trois morceaux, et chacun heritait de six dixiemes de la hauteur de l'ecran et d'un aplat blanc : l'en-tete trainait cinq cents pixels de vide, et les aplats se voyaient en bandes claires bordees de gris sur les cotes. */ .ressources-entete, .ressources-controls, .ressources-alertes, #entityZone.archiverse-search { min-height: 0; background: transparent; } /* ---------- ce que css/style2.css impose, et qu'il faut lui reprendre ------- Cette feuille sert la page depuis toujours et pose des regles d'element, pas de classe : « h1 { font-size: 8vh } » et « h1, h2 { color: black } ». Elles ne genaient personne tant que la page n'avait pas de titre de section. Le titre en faisait cent un pixels au lieu de quarante et un — huit pour cent d'une fenetre haute — et sortait en noir pur au lieu du #231F20 de la charte, qui est un noir chaud. Les selecteurs d'element perdent contre une classe, mais .hub__titre ne fixe pas la couleur : l'heritage ne pouvait pas gagner contre une regle, si faible soit-elle. On rend donc a la charte ce qui lui revient, a l'interieur de ses conteneurs seulement — le reste de la page garde les regles de style2.css. */ .archiverse-search h1, .archiverse-search h2 { color: var(--text); } /* :where() plutot que le selecteur nu : la regle garde juste assez de poids pour battre le « h1 » de style2.css (meme specificite, mais ce fichier est charge apres), et plus assez pour ecraser une classe de composant. Ecrite « .archiverse-search h1 », elle valait 0,1,1 et l emportait sur .formpage__title, qui vaut 0,1,0 : le titre de « Creer une entite » est tombe a la taille du texte courant le jour ou cette page s est mise a charger cette feuille. Un composant de la charte doit decider de sa taille ; cette remise a zero ne vise que les h1 qui n en ont aucune. */ :where(.archiverse-search) h1 { font-size: inherit; } .archiverse-search .hub__titre { font-size: clamp(1.65rem, 4vw, 2.6rem); } /* ---------- le fond, celui d'Outils et de Logiciels ------------------------ Dans les deux bibliotheques, tout le contenu vit dans un .archiverse-search qui peint --bg, un gris tres clair, et les cartes s'y detachent en --surface, presque blanc. Deux tons proches, mais c'est cet ecart qui fait exister les cartes. Ici les conteneurs de la charte sont trois ilots poses sur le fond du site, lui-meme en #FAFAFA — la couleur des cartes. Elles ne se detachaient plus de rien, et la page paraissait plus claire et plus plate que ses deux voisines. Le fond se pose donc sur , en !important parce que components/header_v2.php l'y pose deja ainsi. Le :has() limite la portee a cette page : aucune autre ne porte ce bandeau. */ /* Le fond du corps est desormais regle pour TOUTE page de la charte, dans tools/assets/css/style.css (body:has(.archiverse-search)) : cette page-ci n a plus de raison d avoir sa regle a elle. Deux regles qui disent la meme chose finissent par ne plus la dire pareil. */ /* Et sa largeur, qui vient du meme endroit : css/style2.css pose « body { width: 100vw; max-width: 100vw } ». 100vw compte la barre de defilement verticale — mille quatre cent neuf pixels ici — alors que la zone reellement visible en fait mille trois cent quatre-vingt-quatorze. Le corps de page depassait donc de quinze pixels sous la barre, et tout ce qui s'y centre se retrouvait decale de huit vers la droite : l'en-tete de Ressources commencait a quatre-vingt-cinq pixels du bord quand celui d'Outils commence a soixante-dix-sept. Huit pixels, mais visibles des qu'on passe d'un onglet a l'autre. 100% du parent, lui, ne compte que ce qui reste apres la barre. */ body:has(.ressources-bandeau) { width: 100%; max-width: 100%; } /* La barre du site ne suit pas le defilement, comme dans Outils et Logiciels. Une seule barre accompagne la lecture dans cette section : celle du mode. La barre de navigation, elle, s'en va avec le haut de page — sinon trois bandeaux s'empilent et mangent cent quatre-vingts pixels d'ecran des qu'on descend. Consequence directe : la barre de mode se cale a zero et non a soixante, et la barre de recherche juste en dessous. C'est ce que dit --barre-mode-top, que tools/assets/css/outils.css pose deja de la meme facon pour les pages Outils et Logiciels. */ body:has(.ressources-bandeau) nav.main-menu.is-sticky { position: relative; } body:has(.ressources-bandeau) { --barre-mode-top: 0px; } /* Et il faut rendre le defilement au document, sans quoi rien ne colle ici. L'en-tete pose overflow-x: hidden sur html et body. Ce reglage fait d'eux des boites de defilement, ce qui annule position:sticky pour tous leurs descendants — la barre de recherche ci-dessous comprise. « clip » coupe le debordement horizontal de la meme facon sans creer cette boite. Outils et Logiciels s'en tirent parce que leur feuille pose deja la meme ligne ; Ressources ne la charge pas. Restait celle de css/barre-mode.css, mais elle est conditionnee a la presence de la barre de mode — laquelle n'est ecrite que pour le compte fondateur. La barre de recherche collait donc pour lui seul, et defilait avec la page pour tout le monde. Les deux declarations sont volontaires : un navigateur qui ignore « clip » garde « hidden » et son ancien comportement plutot qu'aucun des deux. */ body:has(.ressources-bandeau) { overflow-x: hidden; overflow-x: clip; } /* ---------- le bandeau du haut -------------------------------------------- Le fond court d'un bord a l'autre de la fenetre, le contenu s'arrete a la colonne. C'est la seule facon d'eviter les deux bandes grises qui bordaient l'aplat clair : un fond limite a 1320 pixels laisse forcement voir la page derriere lui des que l'ecran est plus large. Le de cette page est par ailleurs un conteneur flex, ou un enfant prend par defaut la largeur de son contenu. D'ou le width: 100% : sans lui, le bandeau se reglait sur son texte. */ .ressources-bandeau { width: 100%; flex: 0 0 auto; /* Le meme fond que la grille en dessous : dans Outils et Logiciels, l'en-tete et les cartes partagent le fond de page, seul le filet les separe. Un bandeau plus clair aurait fait un troisieme ton. */ background: var(--bg); border-bottom: 1px solid var(--line); } /* Le conteneur porte .hub : la charte lui donne sa largeur, sa gouttiere et son rembourrage — clamp(1.8rem, 4vw, 3rem) en haut, soit quarante-huit pixels sur un grand ecran. J'y avais mis 1.6rem, vingt-cinq pixels : la page commencait vingt-deux pixels plus haut que Outils et Logiciels, un decalage qu'on voit en passant d'un onglet a l'autre sans savoir le nommer. Ce n'etait pas la barre de mode, identique sur les trois pages — elle finit a cent vingt pixels partout. Le fil, le titre et l'accroche viennent eux aussi de la charte. Les redefinir ici revenait a fabriquer une seconde nomenclature pour le meme objet, et les trois sous-sections cessaient de se ressembler. */ .ressources-entete .hub__lead { margin-bottom: 0; } /* ---------- barre de recherche -------------------------------------------- */ /* Le conteneur de la barre court d'un bord a l'autre — un bandeau colle qui s'arreterait a la colonne laisserait passer le contenu sur ses cotes. C'est .controls__inner qui tient la colonne, avec les memes variables que l'en-tete : celles de la charte, et non celles de la barre de navigation. Elles valent la meme chose aujourd'hui, mais deux blocs qui doivent s'aligner ne peuvent pas dependre de deux sources. */ .ressources-controls { width: 100%; flex: 0 0 auto; } /* Les bandeaux d'alerte, au-dessus de la barre et non dedans : sans ce bloc ils héritaient du position:sticky du conteneur de la barre. */ .ressources-alertes { width: 100%; flex: 0 0 auto; } /* Le panneau de filtres et le compteur, sous la barre et non dedans. */ .ressources-souslabarre { width: 100%; flex: 0 0 auto; min-height: 0; background: transparent; } /* Le compteur tient la colonne : c'est du texte, pas un bandeau. width: 100% est indispensable ici. Son parent est en flex-column, ou un enfant sans largeur se dimensionne sur son contenu ; « margin-inline: auto » centrait donc une boite de cent quatre-vingt-douze pixels au milieu de l ecran, et le texte commencait a sept cents pixels du bord au lieu de soixante-dix-sept. Avec une largeur explicite, la marge automatique centre la colonne de mille trois cent vingt et le texte se cale a son bord gauche, sur la meme verticale que le titre, la barre et les cartes. */ .ressources-souslabarre .resultcount { width: 100%; max-width: var(--maxw, 1320px); margin-inline: auto; padding-inline: var(--gut, clamp(1rem, 3.2vw, 2.5rem)); } /* La barre suit le defilement, comme celle de la bibliotheque Logiciels, avec son filet au-dessus et son filet en dessous. Je lui avais retire les deux et l'avais figee en position statique, la croyant a sa place dans le bandeau d'en-tete. Elle n'y avait de toute facon aucune course : un element colle ne depasse jamais la boite de son parent, et ce parent ne faisait que sa propre hauteur. Elle est donc sortie du bandeau, qui ne porte plus que le titre, et c'est son conteneur qui colle — le panneau de filtres et le compteur ont suivi dans un bloc a part, sans quoi ils seraient restes epingles avec elle. Le fond translucide et le flou d'arriere-plan viennent de la charte : le contenu qui passe dessous se devine sans se lire, ce qui dit que la page defile encore. */ .ressources-controls { position: sticky; z-index: 40; background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); } /* Ou elle s'arrete en montant : sous la barre de mode quand il y en a une, tout en haut sinon. La barre du site etant repassee en flux juste au-dessus, elle ne compte plus. */ .ressources-controls { top: 0; } body:has(.barre-mode) .ressources-controls { top: var(--hauteur-barre, 60px); } /* Le bandeau ne porte plus que le titre : son filet du bas ferait double emploi avec celui du haut de la barre, a deux pixels l'un de l'autre. */ .ressources-bandeau { border-bottom: 0; } .ressources-controls .controls { position: static; background: transparent; border: 0; min-height: var(--hauteur-barre, 60px); } .ressources-controls .controls__inner { padding-inline: var(--gut); } /* Le bouton de contribution tient la gauche de la ligne et ne se retrecit pas : c'est le champ de recherche qui cede quand la place manque, lui le peut. */ #btn-proposer-entite { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; text-decoration: none; } /* Le panneau de filtres reprend le blanc de la charte — .panelfilters pose --surface et un filet en bas, comme dans Logiciels. Je l'avais rendu transparent et sans bordure, ce qui le laissait flotter sur le fond de page : rien ne disait ou il commencait ni ou il finissait. Il court d'un bord a l'autre, son interieur tenant la colonne : un aplat arrete a mille trois cent vingt pixels laisse voir la page sur ses cotes, et l'ouverture des filtres ressemble alors a une carte posee de travers. */ .ressources-souslabarre .panelfilters { margin-top: 0; } /* Le compteur ne redefinit plus rien : la charte lui donne .84rem, --text-2 et une marge basse de .9rem, exactement comme dans Logiciels. Je lui avais mis .82rem, --text-3 et une marge haute — trois valeurs differentes pour le meme objet a deux onglets d'ecart. L'ecart qui le separe de la barre vient du bloc qui le porte, comme la section .results de Logiciels porte le sien. */ .ressources-souslabarre .resultcount { margin-top: 1.2rem; } /* ---------- la liste ------------------------------------------------------ */ /* Aucun rembourrage lateral : les cartes doivent commencer sur la meme verticale que le fil, le titre et le champ de recherche. Les trois dixiemes de rem que j'avais laisses les decalaient de trois pixels — assez pour que la colonne paraisse flotter. */ #search-results { display: grid; gap: .7rem; padding: 0 0 4rem; } /* Vingt pixels de trop entre le compteur et la premiere carte, venus de deux regles de css/style2.css : dix de rembourrage sur #entityZone, dix de marge haute sur les cartes. La marge basse du compteur, .9rem, suffit a les separer — c est l ecart qu on lit dans Logiciels. La grille gere le reste par son gap. */ #entityZone.archiverse-search { padding-top: 0; } #search-results .card--entite { margin: 0; } /* Et sa marge laterale, qui venait d ailleurs. css/mobile-style.css donne a #entityZone, sous 791 pixels : margin: 15px 0 0 0; padding: 0 15px 80px 15px; C etait juste du temps ou cette zone etait un volet a part, avec sa propre gouttiere. Elle est aujourd hui posee DANS la section, qui donne deja la sienne : les quinze pixels s ajoutaient, et les fiches se retrouvaient quinze pixels plus a droite que le titre et la barre de recherche — un decrochement qui apparaissait sous 791 pixels et nulle part ailleurs. On les lui reprend ici plutot que dans l autre feuille : le volet historique existe encore sur d autres pages, et c est seulement dans la section que la gouttiere est deja fournie. */ #entityZone.archiverse-search { padding-inline: 0; padding-bottom: 0; margin-top: 0; } /* #tagZone portait le champ de recherche avant qu il ne remonte dans la barre. Il ne lui reste que trois conteneurs vides — les suggestions, les mots-cles choisis, les resultats d entites — que les scripts remplissent a l occasion et qu on ne peut donc pas supprimer. Vides ils valaient dix pixels, ce qui repoussait toute la colonne d autant. On les efface tant qu ils n ont rien a montrer ; ils reapparaissent des qu on leur donne un mot-cle. */ /* Le coupable exact : #selected-tags, la boite des mots-cles choisis, porte une marge haute de dix pixels. Vide elle ne mesure rien, mais sa marge compte quand meme — son parent est en flex, ou les marges ne fusionnent pas — et repoussait toute la colonne d autant. La marge revient des qu un mot-cle y est depose, ce qui est le seul moment ou elle sert. :empty ne pouvait pas servir ici : ces boites contiennent des retours a la ligne, et un noeud de texte suffit a les rendre non vides. */ #tagZone #selected-tags:not(:has(*)) { margin-top: 0; } #tagZone #suggestions:not(:has(*)) { margin-top: 0; } /* La carte entiere est un lien. La charte pose .card__name a::after en pave invisible pour rendre toute la carte cliquable ; ici c'est deja un , il faut donc seulement lui retirer le soulignement et la couleur de lien. */ .card--entite { text-decoration: none; color: inherit; cursor: pointer; } .card--entite:hover { text-decoration: none; } /* La fiche ouverte se marque dans la liste : sans cela on perd de vue laquelle des cinquante cartes on est en train de lire a cote. */ .card--entite.active-card { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } /* La vignette : l'image de fond de la fiche, reduite. Les entites n'ont pas d'icone — ce que la base leur connait, c'est l'image que le volet de droite affiche en banniere. Les fiches qui n'en ont pas n'affichent rien : ni carre gris, ni monogramme, ni silhouette de remplacement. Une colonne de pastilles inventees se parcourt moins bien qu'une colonne de titres, parce que l'oeil s'arrete sur chacune pour decouvrir qu'elle ne dit rien. En fond plutot qu'en : le cadrage se fait au centre quel que soit le rapport de l'image, et une photo manquante ne laisse pas d'icone cassee. */ .vignette { flex: none; width: 42px; height: 42px; border-radius: var(--r-control); background-color: var(--surface-2); background-size: cover; background-position: center; border: 1px solid var(--line); } /* La vignette se cale en haut et non au milieu : sur une carte dont le titre tient deux lignes, un alignement centre la faisait descendre d'une demi-ligne et la rangee de vignettes ne suivait plus aucune horizontale. */ .card--entite .card__head { align-items: flex-start; } .card__head--sans-image { gap: 0; } /* Le type, au pied de la carte et cale a droite, sur la ligne des mots-cles. Les classes Type_… du site lui donnent sa couleur — un fond pale et un texte assorti, seize paires deja reglees ailleurs, qu'il aurait ete absurde de redefinir. Mais elles supposent une pastille : posees sur un paragraphe, elles etalaient leur fond sur toute la largeur de la carte et le type ressemblait a un trait de surligneur. On ne fixe donc ici que sa forme. Il ne se retrecit jamais : ce sont les mots-cles qui cedent la place quand elle manque, eux se coupent aux points de suspension. */ .card--entite .card__type { flex: 0 0 auto; margin-left: auto; display: inline-block; padding: .1rem .4rem; border-radius: var(--r-pill); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } /* Les mots-cles au pied de la carte. Une seule ligne, coupee : trois etiquettes tiennent, la quatrieme ferait grandir la carte d'une rangee et la grille perdrait son rythme. */ .card--entite .card__foot { padding-top: .7rem; display: flex; align-items: center; gap: .5rem; /* Une seule ligne, toujours. La charte laisse le pied des cartes revenir à la ligne, ce qui convient à une fiche de logiciel dont le pied ne porte que des étiquettes de même nature. Ici il en porte deux : les mots-clés à gauche, la catégorie calée à droite. Les laisser s'empiler faisait tomber la catégorie SOUS les mots-clés dès qu'une fiche en avait quatre, et la carte gagnait une rangee au passage. Sans retour a la ligne, ce sont les mots-clés qui cèdent la place — c'est bien eux qu'on veut voir céder, la catégorie étant unique et courte. */ flex-wrap: nowrap; } .card--entite .card__tags { display: flex; gap: .3rem; min-width: 0; overflow: hidden; flex-wrap: nowrap; /* Elle rétrécit mais ne grandit pas. En la laissant grandir, elle prenait toute la place libre de la ligne et poussait le compteur « +3 » à l'autre bout, contre la catégorie : il paraissait appartenir à celle-ci alors qu'il compte les mots-clés. À largeur naturelle, il reste collé au dernier mot-clé, où il se lit comme la suite de la liste. C'est la catégorie, et elle seule, que sa marge automatique cale a droite. */ flex: 0 1 auto; } .tag--mot { font-size: .68rem; padding: .12rem .42rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Sans min-width, un élément de flex refuse de descendre sous la largeur de son texte : les points de suspension déclarés au-dessus ne servaient jamais et l'étiquette était tranchée net par le débordement du conteneur. */ min-width: 0; } .tag--reste { flex: none; font-size: .68rem; padding: .12rem .42rem; background: transparent; border-style: dashed; color: var(--text-3); } /* ---------- la grille et la fiche en surcouche ----------------------------- La page n'a plus deux etats. La fiche s'ouvrant par-dessus, la grille garde toute la largeur en permanence : c'est un index, il se parcourt. Ce que remplaçait cette section : un volet fixe qui prenait les deux tiers de l'ecran meme sans fiche ouverte, et une liste tassee dans le tiers restant. */ #recherche-textuelle { display: block; height: auto; margin-top: 0; width: 100%; max-width: var(--maxw, 1320px); margin-inline: auto; padding-inline: var(--gut, clamp(1rem, 3.2vw, 2.5rem)); box-sizing: border-box; } /* Les marges laterales d'origine faisaient double emploi avec la gouttiere ci-dessus et decalaient la colonne d'une vingtaine de pixels. */ #recherche-textuelle > #selection-zone, #recherche-textuelle #tagZone, #recherche-textuelle #entityZone { margin: 0; } #recherche-textuelle #selection-zone { overflow: visible; padding-bottom: 0; } #recherche-textuelle #entityZone { overflow: visible; max-height: none; } #search-results { grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); } /* Les cartes se posent l une apres l autre plutot que d apparaitre d un bloc. C est l animation de la charte, celle des grilles Outils et Logiciels ; elle ne s appliquait pas ici parce qu elle vise « .grid > * » et que cette colonne s appelle #search-results. Le retard de chaque carte est pose par php/fetch_entities.php, en ligne. */ #search-results > * { animation: cardin .4s var(--ease) both; } /* ---------- la fiche, en surcouche ---------------------------------------- Un voile qui assombrit la page, un panneau qui la recouvre, une croix pour le refermer. Le panneau defile pour lui-meme ; la page en dessous est bloquee le temps de la lecture, faute de quoi la molette la fait glisser derriere la fiche et on la retrouve ailleurs en refermant. */ .fiche-surcouche { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 4vh, 3rem) clamp(1rem, 4vw, 3rem); overscroll-behavior: contain; } .fiche-surcouche[hidden] { display: none; } .fiche-surcouche__voile { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); animation: fiche-voile .18s ease-out; } @keyframes fiche-voile { from { opacity: 0; } } /* ---- la feuille de la fiche --------------------------------------------- Un seul jeton pour la couleur du document, decline une fois par theme. Tout ce qui se pose dessus — la carte, les encarts, les mini-fiches — s'y refere au lieu de porter sa propre valeur. C'est ce qui manquait : chaque element avait sa couleur claire ecrite en dur et, quelque part ailleurs, une regle !important pour le mode sombre. Un element ajoute sans sa regle jumelle restait clair — la liste a puces, le bouton Favoris, et ce qui suivrait. Les trois etats du theme sont declares, comme partout dans la charte : le choix explicite dans les deux sens, et le reglage du systeme par defaut. */ .fiche-surcouche, #entityClicked, #popupContent, .examen__apercu { --fiche-feuille: #ffffff; --fiche-pose: #f4f5f7; --fiche-trait: var(--line, #d7d8db); } html[data-theme="dark"] .fiche-surcouche, html[data-theme="dark"] #entityClicked, html[data-theme="dark"] #popupContent, html[data-theme="dark"] .examen__apercu { --fiche-feuille: #17181b; --fiche-pose: #1f2126; --fiche-trait: var(--line, #2d3139); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .fiche-surcouche, html:not([data-theme="light"]) #entityClicked, html:not([data-theme="light"]) #popupContent, html:not([data-theme="light"]) .examen__apercu { --fiche-feuille: #17181b; --fiche-pose: #1f2126; --fiche-trait: var(--line, #2d3139); } } .fiche-surcouche__panneau { position: relative; width: 100%; max-width: 920px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; transform: translateZ(0); will-change: scroll-position; contain: paint; /* La feuille sur laquelle on lit. En clair, un blanc franc plutot que --surface : la fiche est un document, elle doit se detacher du gris de la page comme une page posee sur un bureau, et --surface (le blanc casse des cartes) la faisait paraitre grise des qu'elle occupait tout l'ecran. En sombre, ce meme blanc restait blanc : la fiche s'ouvrait en feuille lumineuse au milieu d'un site sombre. D'ou --fiche-feuille, declare juste au-dessus une fois par theme. */ background: var(--fiche-feuille); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-lg); min-height: 0; isolation: isolate; animation: fiche-monte .2s cubic-bezier(.16, 1, .3, 1); } @keyframes fiche-monte { from { opacity: 0; transform: translateY(12px); } } /* La croix suit le defilement du panneau : sur une fiche longue, elle doit rester atteignable sans qu'on remonte. Elle est posee sur un fond plein, sinon elle disparait des qu'une image passe dessous. « float: right » ne pouvait pas la placer : le panneau porte .archiverse-search, donc display: flex, et les flottants ne s'appliquent pas aux enfants d'un conteneur flex. Elle partait a gauche, sur le bouton Favoris. align-self fait le travail que le flottant ne pouvait pas faire. */ /* La barre de tete de la fiche : le type a gauche, la croix a droite. Les deux sont dans la meme barre, qui colle en haut du panneau. Poses separement — l'un colle, l'autre non — ils se desalignaient des les premiers pixels de defilement, ce qui etait le cas quand l'etiquette vivait dans le corps de la fiche. La marge negative la superpose au contenu qui suit : elle flotte sur la banniere quand il y en a une, sur le blanc de la fiche sinon. Le plan est eleve pour qu'elle recoive les clics — sans lui, le texte peint au-dessus les interceptait, la croix restant visible mais inerte. isolation: isolate sur le panneau enferme ce plan dans la fiche, pour qu'il ne passe pas devant le voile ni devant les barres du site. */ .fiche-surcouche__barre { position: sticky; top: .75rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: .75rem .75rem -3.1rem; flex: none; pointer-events: none; transform: translateZ(0); } .fiche-surcouche__barre > * { pointer-events: auto; } /* L'etiquette porte un fond plein : posee sur une photo, elle serait sinon illisible une fois sur deux. Ses couleurs de type viennent des classes Type_… du site ; on ne fixe ici que sa forme et son opacite. */ .fiche-surcouche__barre .entity-category-badge { display: inline-flex; align-items: center; gap: .35rem; height: 36px; padding: 0 .8rem; border-radius: var(--r-pill); border: 1px solid var(--line); box-shadow: var(--shadow-sm); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 0; } .fiche-surcouche__croix { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; /* La couleur de la feuille, pas un blanc en dur : la croix flotte au-dessus de la fiche et doit s en detacher dans les deux themes. */ background: var(--fiche-feuille, #fff); color: var(--text-2); box-shadow: var(--shadow-sm); cursor: pointer; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .fiche-surcouche__croix:hover { background: var(--surface-2); color: var(--text); } /* ---------- la fiche, en page entière -------------------------------------- Le second état, celui où l'on arrive de l'extérieur : plus de surcouche, une page. Le voile s'en va, le panneau redescend dans le flux, la page défile pour elle-même. On garde tout le reste — la feuille, sa typographie, sa barre de tête — parce que c'est la même fiche : seule sa façon d'occuper l'écran change. Voir la décision dans home.php. L'index est masqué plutôt que retiré : le gabarit de la section est le même des deux côtés, et une seule page sert les deux états. Sa requête, elle, n'est pas lancée. */ [data-fiche-page] .ressources-bandeau, [data-fiche-page] .ressources-alertes, [data-fiche-page] .ressources-controls, [data-fiche-page] .ressources-souslabarre, [data-fiche-page] #entityZone, [data-fiche-page] #entityPopup { display: none; } /* Le conteneur s'efface complètement : le héros doit courir d'un bord à l'autre, et .hero comme .detail tiennent déjà leur propre colonne. */ .fiche-surcouche--page { position: static; display: block; padding: 0; z-index: auto; } .fiche-surcouche--page .fiche-surcouche__voile { display: none; } /* La barre de tête appartenait à la surcouche — le type à gauche, la croix à droite. En page, le type est dans le héros et le retour aussi. */ .fiche-surcouche--page .fiche-surcouche__barre { display: none; } .fiche-surcouche--page .fiche-surcouche__panneau { max-width: none; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; animation: none; } /* ---- la fiche n'est plus une FEUILLE, elle est la PAGE -------------------- La surcouche traite la fiche comme un document posé sur un bureau : une feuille claire (--fiche-feuille) qui se détache du gris de la page, un coin arrondi, un texte en --text-2 puisqu'il est lu de près sur du blanc. Trois règles qui viennent d'ailleurs et qui n'ont pas été écrites pour cet état : #entityClicked peint sa feuille depuis css/style2.css, où elle datait du volet latéral fixe. En page, il n'y a plus de bureau. La feuille couvrait le contenu et s'arrêtait net avant le pied de page : un bloc clair, puis une bande du gris de la page, puis le pied. C'est cette bande qu'on voyait. On rend donc à la page ses propres couleurs, celles d'une fiche logiciel : fond transparent d'un bout à l'autre, le sol du site dessous, et le texte à pleine encre. Le seul aplat est celui des panneaux du volet, --surface, comme là-bas. */ .fiche-surcouche--page #entityClicked { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; overflow: visible; } /* Deux classes plutot qu une : la regle de la surcouche (.fiche-surcouche .entity-body-content, plus bas dans ce fichier) a la meme specificite et vient apres, elle l emporterait a egalite. On ne compte donc pas sur l ordre, qui change des qu on deplace un bloc. */ .fiche-surcouche.fiche-surcouche--page .entity-body-content { color: var(--text); } /* Le héros : l'image de couverture court d'un bord à l'autre et le dégradé de .hero__bg::after la fond dans la page. Aucun aplat sous elle — c'est le sol du site qu'on voit, comme sur une fiche logiciel. Sans image, le bandeau n'a rien à montrer : il se réduit à ce qu'il porte. */ .fichepage__hero { background: none; } .fichepage__hero:not(:has(.hero__bg)) { min-height: 0; } /* L'étiquette de type au-dessus du nom, comme le fournisseur d'un logiciel se pose au-dessous du sien : ce qui qualifie encadre ce qui nomme. */ .fichepage__hero .entity-category-badge { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .5rem; padding: .25rem .7rem; border-radius: var(--r-pill); font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .fichepage__hero .hero__name { margin: 0; } .fichepage__hero .entity-tags-row { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0 0; } /* Les commandes gardent leur gabarit de la surcouche — même hauteur, même dessin — mais elles sont ici la contrepartie du « Télécharger » d'une fiche logiciel : elles tiennent la droite du héros. */ .fiche-surcouche--page .fiche__actions { margin-left: auto; } /* Le corps du texte n'a plus de carte autour de lui : il EST la colonne. */ .fiche-surcouche--page .entity-body-content { padding: 0; background: none; } .fiche-surcouche--page .entity-linked-scroll { display: flex; flex-wrap: wrap; gap: .6rem; } /* Le volet de droite : qui a écrit, quand, et le document s'il y en a un. */ .fiche-surcouche--page .panel__title { font-size: .74rem; font-weight: 680; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .7rem; } .fiche-surcouche--page .panel .entity-meta-info { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; border: 0; } .fiche-surcouche--page .panel .entity-download-cta { width: 100%; justify-content: center; } /* Sous 900 pixels la grille de .detail passe déjà sur une colonne ; le volet descend alors sous le texte, ce qui est le bon ordre — on lit d'abord. */ @media (max-width: 900px) { .fiche-surcouche--page .fiche__actions { margin-left: 0; width: 100%; } } /* ---------- la fiche elle-meme -------------------------------------------- Le gabarit vient de la page d'origine — banniere, carte, corps de texte — et il etait dessine pour un volet fixe de huit cents pixels. Dans un panneau qui se referme, deux choses ne tenaient plus. La carte flottait dans le panneau : un cadre blanc, arrondi et ombre, pose sur un autre cadre blanc, arrondi et ombre. Une carte dans une carte ne dit rien de plus que la carte seule ; elle est donc mise a plat. Et le titre passait apres l'etiquette de type, en petit : sur une fiche ouverte exprès, le nom de ce qu'on lit doit etre la premiere chose lue. Il reprend l'echelle des titres de la charte. */ .fiche-surcouche .entity-view-container { margin: 0; } .fiche-surcouche .entity-hero { height: clamp(140px, 22vh, 210px); border-radius: 0; } .fiche-surcouche .entity-main-card { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 1.5rem clamp(1.2rem, 3vw, 2.2rem) 2.5rem; } /* Sans banniere, le contenu ne doit pas commencer sous la croix. */ .fiche-surcouche .entity-hero + .entity-main-card { padding-top: 1.5rem; } /* Le bas de la fiche. Il pesait cent quarante-quatre pixels de vide sous la dernière section, et trois réglages s'y ajoutaient sans le savoir : - quatre-vingts pixels de padding bas sur #entityClicked, hérités de style2.css. Ils dataient du volet latéral fixe, dont le bas disparaissait sous la barre du site ; en surcouche, le panneau s'arrête de lui-même et ces pixels ne retiennent plus rien ; - vingt-quatre pixels de marge basse sur la dernière section, qui n'a pourtant plus rien apres elle ; - les quarante pixels de respiration du corps de fiche, eux legitimes. On ne garde que les derniers. Une fiche se termine sur une marge franche, pas sur un tiers d'écran blanc. */ .fiche-surcouche #entityClicked { padding-bottom: 0; } .fiche-surcouche .entity-main-card > *:last-child { margin-bottom: 0; } .fiche-surcouche .entity-title-large { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.02em; margin: .5rem 0 .7rem; color: var(--text); } /* L'etiquette de type passe au-dessus du nom, en petit : elle situe, elle n'annonce pas. */ .fiche-surcouche .entity-category-badge { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .fiche-surcouche .entity-tags-row { gap: .3rem; } /* Les deux lignes de dates : une information de service, pas de contenu. */ .fiche-surcouche .entity-meta-info { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } /* Le corps du texte reprend la mesure de lecture de la charte. Etale sur les neuf cents pixels du panneau, une ligne oblige l'oeil a un balayage complet pour retrouver la suivante. */ /* Le texte occupe la largeur de la fiche. Il etait limite a 72 caracteres — une bonne mesure de lecture en theorie, mais le panneau fait 920 pixels et la carte porte deja son propre rembourrage : cela laissait deux cent trente pixels vides a droite, sous une ligne d en-tete qui, elle, allait jusqu au bord. Ce n etait pas une colonne de lecture, c etait un decrochement. La mesure est desormais celle du panneau lui-meme, qui la porte deja : 920 pixels moins les marges font environ quatre-vingts caracteres. */ .fiche-surcouche .entity-body-content { max-width: 100%; font-size: .95rem; line-height: 1.65; color: var(--text-2); } .fiche-surcouche .entity-body-content h3, .fiche-surcouche .entity-body-content h4 { color: var(--text); margin-top: 1.4rem; } .fiche-surcouche .entity-body-content a { color: var(--accent); } /* La ligne du haut : ce que la fiche est, et les deux gestes qu'on peut faire dessus. Favoris et Modifier vivaient sur la banniere, en haut a droite — c'est-a-dire exactement sous la croix de fermeture, qu'ils recouvraient a chaque ouverture. Ils descendent ici, ou ils se lisent avec l'etiquette de type plutot que de flotter sur une photo. */ /* La rangee de service : les deux dates a gauche, les deux commandes a droite. Favoris et Modifier etaient d'abord sur la banniere, sous la croix ; puis sur la ligne du type, ou ils pesaient plus lourd que la fiche elle-meme. Leur place est ici : ce sont des gestes de service, comme « modifiee le » et « creee par » sont des informations de service. Meme rangee, meme discretion. */ .fiche__service { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .fiche__service .entity-meta-info { margin: 0; padding: 0; border: 0; flex: 1 1 auto; min-width: 0; } .fiche__actions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex: 0 0 auto; } /* Les deux commandes prennent le gabarit des boutons de la charte : elles portaient les leurs, dessines pour une photo sombre — fond translucide, texte blanc — illisibles sur un fond clair. */ .fiche-surcouche .bookmark-btn, .fiche-surcouche .edit-btn { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .75rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text-2); font-family: var(--font-sans); font-size: .8rem; font-weight: 560; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; backdrop-filter: none; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .fiche-surcouche .bookmark-btn:hover, .fiche-surcouche .edit-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-strong); } /* En favori, le bouton le dit par sa couleur. « is-favorite » est la classe que le script pose ; is-active et active ne correspondaient a rien et cette regle ne s appliquait jamais. */ .fiche-surcouche .bookmark-btn.is-favorite, .fiche-surcouche .bookmark-btn.is-active, .fiche-surcouche .bookmark-btn.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* Sans texte, le bouton devient carre : on lui rend une cible cliquable. */ .fiche-surcouche .bookmark-btn { width: 2rem; padding: 0; justify-content: center; } .fiche-surcouche .bookmark-btn .bookmark-icon { font-size: .95rem; } /* La banniere ne se pose que si la fiche a vraiment une image. Le repli en aplat sombre remplissait deux cents pixels sans rien apprendre — meme regle que sur les cartes de la liste. */ .fiche-surcouche .fiche__banniere { margin-bottom: 0; } /* Sans banniere, le corps commence plus bas : la croix occupe le coin. */ /* Sans banniere, le titre passerait sous la barre de tete, qui flotte. */ .fiche-surcouche .fiche__corps:first-child { padding-top: 3.4rem; } /* Les mots-cles : une seule rangee de pastilles, pas un pave. */ .fiche-surcouche .entity-tags-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .2rem; } /* Les mots-cles sans cadre ni fond : sur la fiche ils ne sont pas des boutons — on ne clique pas dessus, ils ne filtrent rien — et une rangee de pastilles promettait une interaction qui n'existe pas. Le croisillon suffit a les designer. */ .fiche-surcouche .entity-tag-chip { font-size: .78rem; padding: 0; background: none; border: 0; border-radius: 0; color: var(--text-3); } .fiche-surcouche .entity-tags-row { gap: .55rem; } /* Le lien de telechargement prend le bouton d'action principal de la charte, au lieu du bleu ecrit en dur qu'il portait. */ .fiche-surcouche .entity-download-cta { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.4rem; padding: .6rem 1rem; border-radius: var(--r-control); background: var(--accent); color: var(--on-accent); font-size: .88rem; font-weight: 600; text-decoration: none; } .fiche-surcouche .entity-download-cta:hover { background: var(--accent-hi); } /* Les entites associees passent en fin de fiche : on les consulte apres avoir lu, pas avant. Elles coupaient le texte en deux. */ .fiche-surcouche .entity-linked-section { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .fiche-surcouche .entity-linked-section h4 { font-size: .72rem; font-weight: 640; letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .7rem; } .fiche-surcouche .mini-entity-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-control); transition: border-color var(--dur) var(--ease); } .fiche-surcouche .mini-entity-card:hover { border-color: var(--line-strong); } /* Le corps de page ne defile plus tant que la fiche est ouverte. */ body.fiche-ouverte { position: fixed; width: 100%; overflow: hidden; } /* La gouttiere de la section ne se fixe plus en dessous de 900 px. Ces quatre elements suivaient --gut, c est-a-dire clamp(1rem, 3.2vw, 2.5rem) : une marge qui grandit avec la fenetre, du plancher d un rem au plafond de deux et demi. La regle qui etait ici la remplacait par 1rem fixe sous 900 px — la marge tombait donc d un coup de 28 a 16 pixels au passage du seuil, alors qu elle change continument sur les autres pages de Search. Le clamp fait deja ce que cette regle cherchait : il ne descend jamais sous 1rem. Il n y avait rien a corriger, seulement a ne pas l ecraser. */ @media (max-width: 900px) { /* Sur telephone la fiche prend tout l'ecran : un panneau centre avec des marges y perd la moitie de sa place, et un texte long ne se lit plus. */ .fiche-surcouche { padding: 0; } .fiche-surcouche__panneau { max-width: none; max-height: 100%; height: 100%; border: 0; border-radius: 0; } } /* ---- les bandeaux d'administration --------------------------------------- Ils annoncent ce qui attend, au-dessus de la barre de recherche, exactement comme ceux de la page Logiciels — memes classes .bandeau, meme forme, memes couleurs de famille. Ce bloc ne fait qu'une chose : les CADRER. Le conteneur est un frere de .controls, qui est collant et va donc d'un bord a l'autre ; sans reprendre ses gouttieres, les bandeaux commencaient a zero pendant que le titre de la page et la barre de recherche commencaient a trente pixels. Trois elements empiles sur deux alignements differents, cela se voit tout de suite. Les memes valeurs que .controls__inner, et pour la meme raison : c'est le gabarit de la section. */ /* La colonne des bandeaux : la même que le titre, la barre de recherche et les cartes, sur la même verticale. Elle tenait à l'identifiant du seul hôte qui existait alors, celui des alertes d'administration. Le jour où un second bandeau est arrivé — l'accusé de réception après un envoi — il s'est retrouvé collé au bord gauche de la fenêtre pendant que ses voisins gardaient la gouttière. Une géométrie commune se déclare sur une classe : c'est ce que tout hôte de bandeau porte désormais. */ .bandeaux { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); } /* Le dernier bandeau ne doit pas toucher la barre de recherche. */ .bandeaux .bandeau:last-child { margin-bottom: 1rem; } /* Mais « dernier » veut dire dernier de la SÉRIE, pas dernier de son hôte. Les bandeaux vivent dans deux blocs voisins — l'accusé de réception d'un côté, les alertes d'administration de l'autre, parce que le second se masque en mode utilisateur et pas le premier. Les marges ne fusionnent pas d'un bloc à l'autre : le bas de l'un s'ajoutait au haut du suivant, et l'écart sous le bandeau vert valait le double des autres — trente-deux pixels contre seize. Un hôte suivi d'un hôte qui porte un bandeau ne prend donc rien : l'écart est déjà fait par le « margin-top » du bandeau d'après. */ .ressources-alertes:has(~ .ressources-alertes .bandeau) .bandeau:last-child { margin-bottom: 0; } /* ---- la fiche sur petit ecran ------------------------------------------- css/mobile-style.css cache #entityClicked en dessous de 791 pixels : @media (max-width: 791px) { #entityClicked { display: none } } C etait juste du temps ou la fiche occupait un volet fixe a droite, que le telephone remplacait par #entityPopup. La fiche est passee en surcouche, qui marche a toutes les largeurs — mais la regle est restee, et ouvrir une fiche sur telephone donnait une feuille vide. On la desactive la ou elle n a plus lieu d etre, sans toucher au fichier d origine : ailleurs, le volet historique garde son comportement. */ @media (max-width: 791px) { .fiche-surcouche #entityClicked { display: block; } } /* ---- le texte rendu d'une fiche ------------------------------------------ Ce que l'editeur produit, affiche tel quel : dans la fiche ouverte depuis la liste, et dans la charte de redaction que le formulaire de creation montre par-dessus lui. Deux endroits, une seule definition. Ces regles vivaient dans css/style2.css, que le formulaire ne peut pas charger : .input, .field, fieldset et .suggest y existent aussi et viendraient repeindre ses champs. */ .entity-body-content h1, .entity-body-content h2, .entity-body-content h3, .entity-body-content h4 { font-family: 'Bricolage Grotesque', sans-serif; color: var(--text, #231f20); line-height: 1.25; margin: 26px 0 10px; } .entity-body-content h1 { font-size: 1.55rem; font-weight: 700; } .entity-body-content h2 { font-size: 1.35rem; font-weight: 700; } .entity-body-content h3 { font-size: 1.18rem; font-weight: 700; } .entity-body-content h4 { font-size: 1.05rem; font-weight: 650; } .entity-body-content > *:first-child { margin-top: 0; } .entity-body-content p { margin: 0 0 14px; } .entity-body-content strong, .entity-body-content b { color: var(--text, #231f20); font-weight: 650; } .entity-body-content a { color: var(--accent, #4d6fb3); text-decoration: underline; text-underline-offset: 2px; } .entity-body-content a:hover { text-decoration-thickness: 2px; } /* Les listes. padding-inline-start plutot que padding-left : la charte remet le premier a zero, et une valeur en padding-left seule ne l'emportait pas. */ .entity-body-content ul, .entity-body-content ol { margin: 0 0 16px; padding-inline-start: 1.35rem; } .entity-body-content li { margin: 4px 0; padding-inline-start: .2rem; } .entity-body-content ul > li { list-style: disc outside; } .entity-body-content ol > li { list-style: decimal outside; } /* Quill 2 : la nature de la liste est portee par la LIGNE, pas par la liste. Un meme

peut donc melanger puces et numeros. */ .entity-body-content li[data-list="bullet"] { list-style: disc outside; } .entity-body-content li[data-list="ordered"] { list-style: decimal outside; } .entity-body-content li[data-list]::marker { color: var(--text-3, #83878f); } /* Le marqueur vide que Quill insere pour son propre affichage : hors de l'editeur il ne sert a rien et decale le texte. */ .entity-body-content li > .ql-ui { display: none; } /* Les retraits de l'editeur, que sa feuille porte d'habitude. */ .entity-body-content .ql-indent-1 { padding-inline-start: 2.5rem; } .entity-body-content .ql-indent-2 { padding-inline-start: 4rem; } .entity-body-content .ql-indent-3 { padding-inline-start: 5.5rem; } .entity-body-content blockquote { margin: 16px 0; padding: 2px 0 2px 14px; border-left: 3px solid var(--accent, #4d6fb3); color: var(--text-2, #55585f); font-style: italic; } .entity-body-content code, .entity-body-content pre { background: var(--fiche-pose, #f4f5f7); border: 1px solid var(--fiche-trait, #d7d8db); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; } .entity-body-content code { padding: 1px 5px; } .entity-body-content pre { padding: 12px 14px; overflow-x: auto; margin: 0 0 16px; } .entity-body-content img { max-width: 100%; height: auto; border-radius: 10px; } .entity-body-content hr { border: 0; border-top: 1px solid var(--fiche-trait, #d7d8db); margin: 22px 0; } .entity-body-content table { border-collapse: collapse; margin: 0 0 16px; } .entity-body-content th, .entity-body-content td { border: 1px solid var(--fiche-trait, #d7d8db); padding: 6px 10px; text-align: left; } .entity-body-content .ql-align-center { text-align: center; } .entity-body-content .ql-align-right { text-align: right; } .entity-body-content .ql-align-justify { text-align: justify; } /* Force dark inline colored spans (from Quill or copy-paste) to be white/light */ [data-theme="dark"] .entity-body-content [style*="color: rgb(0, 0, 0)"], [data-theme="dark"] .entity-body-content [style*="color: rgb(0,0,0)"], [data-theme="dark"] .entity-body-content [style*="color: #000"], [data-theme="dark"] .entity-body-content [style*="color: #000000"], [data-theme="dark"] .entity-body-content [style*="color: black"], [data-theme="dark"] .entity-body-content [style*="color: rgb(17, 17, 17)"], [data-theme="dark"] .entity-body-content [style*="color: rgb(34, 34, 34)"], [data-theme="dark"] .entity-body-content [style*="color: rgb(51, 51, 51)"], [data-theme="dark"] .entity-body-content [style*="color: #111"], [data-theme="dark"] .entity-body-content [style*="color: #222"], [data-theme="dark"] .entity-body-content [style*="color: #333"], [data-theme="dark"] .entity-body-content [style*="color: #444"], [data-theme="dark"] .entity-body-content [style*="color: #555"], [data-theme="dark"] .entity-body-content [style*="color: #1a1a1a"], [data-theme="dark"] .entity-body-content [style*="color: #2d3748"], [data-theme="dark"] .entity-body-content [style*="color: #1e293b"], [data-theme="dark"] .entityDescription [style*="color: rgb(0, 0, 0)"], [data-theme="dark"] .entityDescription [style*="color: #000"], [data-theme="dark"] .entityDescription [style*="color: black"] { color: var(--text, #fafafa) !important; } [data-theme="dark"] .entity-body-content [style*="background-color: rgb(255, 255, 255)"], [data-theme="dark"] .entity-body-content [style*="background-color: #fff"], [data-theme="dark"] .entity-body-content [style*="background-color: #ffffff"], [data-theme="dark"] .entity-body-content [style*="background-color: white"], [data-theme="dark"] .entityDescription [style*="background-color: rgb(255, 255, 255)"], [data-theme="dark"] .entityDescription [style*="background-color: #fff"], [data-theme="dark"] .entityDescription [style*="background-color: white"] { background-color: transparent !important; } /* In Light Mode, force white inline colored spans to dark */ .entity-body-content [style*="color: rgb(255, 255, 255)"], .entity-body-content [style*="color: rgb(255,255,255)"], .entity-body-content [style*="color: #fff"], .entity-body-content [style*="color: #ffffff"], .entity-body-content [style*="color: white"], .entityDescription [style*="color: rgb(255, 255, 255)"], .entityDescription [style*="color: #fff"], .entityDescription [style*="color: white"] { color: var(--text, #231f20) !important; } .entity-body-content [style*="background-color: rgb(0, 0, 0)"], .entity-body-content [style*="background-color: #000"], .entity-body-content [style*="background-color: black"] { background-color: transparent !important; } /* ---- le signet d une carte ------------------------------------------------ Une fiche mise en favori le dit sur sa carte, a gauche du type : c est la que l oeil termine sa lecture, et c est la meme place que dans la fiche ouverte. Le signet ne s affiche que pour la personne qui l a pose — les favoris sont personnels, et la carte est rendue par le serveur en fonction du compte de la session. Il remonte aussi la fiche en tete de liste, mais cela se joue dans la requete (php/fetch_entities.php), pas ici. */ /* ---- la marque des modifications en attente ----------------------------- Un crayon et un nombre, juste avant le signet et le type. Elle est visible par tout le monde : savoir qu une fiche est en train de changer sert a qui la lit, pas seulement a qui peut trancher. Elle prend l accent. Elle portait l ambre des avertissements : c en etait un pour la moderation, ce n en est pas un pour un lecteur — rien ne va mal, quelqu un ecrit. */ .card__modifs { display: inline-flex; align-items: center; gap: .2rem; flex: none; margin-left: auto; margin-right: .1rem; padding: .1rem .35rem; border-radius: var(--r-pill); background: var(--accent-soft, #d1dffa); color: var(--accent, #4d6fb3); font-size: .68rem; font-weight: 700; } html[data-theme="dark"] .card__modifs { background: var(--accent-soft, #0f2757); color: var(--accent, #85a3e0); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .card__modifs { background: var(--accent-soft, #0f2757); color: var(--accent, #85a3e0); } } /* ---- la meme marque, dans la fiche ouverte ------------------------------- Entre le signet et « Modifier », a la place ou la carte la montre a gauche du type : le meme crayon, le meme nombre, et rien a se demander. Elle prend le gabarit des deux commandes qui l entourent — meme hauteur, meme rayon — mais reste bleue : c est un etat, pas une commande neutre. Elle a deux etats, et c est le seul endroit ou elle en a deux. INERTE — un lecteur, ou la moderation passee en mode utilisateur — elle prend le gabarit exact de « Modifier » : meme fond, meme filet, meme encre. Le mode utilisateur sert a voir ce que verra tout le monde ; s il montrait une marque bleue la ou un lecteur en voit une grise, il mentirait sur la page qu il est cense reproduire. CLIQUABLE, elle passe au bleu : c est alors une commande, et le bleu est ce que porte tout ce qui mene ailleurs. Un bouton qui ne mene nulle part se cliquerait quand meme, et ne rien voir arriver se lit comme une panne. */ .fiche-surcouche .fiche__modifs { display: inline-flex; align-items: center; gap: .3rem; height: 2rem; padding: 0 .6rem; border: 1px solid var(--line); border-radius: var(--r-control); background: var(--surface); color: var(--text-2); font-family: var(--font-sans); font-size: .8rem; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none; flex: 0 0 auto; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } /* Sans lien, le curseur ne promet rien. */ .fiche-surcouche span.fiche__modifs { cursor: default; } .fiche-surcouche a.fiche__modifs { border-color: var(--accent-line, #a8c0f0); background: var(--accent-soft, #d1dffa); color: var(--accent, #4d6fb3); } .fiche-surcouche a.fiche__modifs:hover { background: var(--accent, #4d6fb3); border-color: var(--accent, #4d6fb3); color: var(--on-accent, #ffffff); } /* Quand les deux marques sont la, c est la premiere qui pousse vers la droite : deux margin-left:auto se partageraient l espace et les ecarteraient l une de l autre. */ .card__modifs + .card__favori { margin-left: 0; } .card__favori { display: inline-grid; place-items: center; flex: none; margin-left: auto; /* Le pied de carte est une flexbox a gap: .5rem. Le signet et le type forment une paire — l un qualifie l autre — et huit pixels les detachaient trop. La marge negative reprend la moitie de l ecart. */ margin-right: -.25rem; color: var(--accent); } /* Le type se calait a droite par margin-left:auto. Le signet le precede desormais et porte cette marge : sans quoi les deux se seraient pousses. */ .card__favori + .card__type { margin-left: 0; } /* ---- examiner une proposition ------------------------------------------- La page de moderation d une entite : ce qu il faut verifier, la fiche telle qu elle paraitra, puis la decision. Elle rendait auparavant un tableau de champs bruts hors de la charte. Le vocabulaire est celui du reste — .formpage, fieldset, .repere, .pill, .jeton — et rien ici ne fixe de couleur : tout vient des jetons. */ .examen__reperes { display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin-bottom: 1.2rem; } .examen__reperes .repere__k { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } .examen__reperes .repere__v { margin: .25rem 0 0; font-size: .95rem; color: var(--text); } .examen__liste { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; } .examen__liste li { display: grid; grid-template-columns: 11rem 1fr; gap: .2rem 1rem; align-items: baseline; padding: .5rem 0; border-top: 1px solid var(--line); } @media (max-width: 620px) { .examen__liste li { grid-template-columns: 1fr; } } .examen__k { font-size: .82rem; font-weight: 560; color: var(--text-2); } .examen__v { font-size: .9rem; color: var(--text); min-width: 0; overflow-wrap: anywhere; } /* Ce qui manque se dit, au lieu de ne rien afficher : une ligne absente ne se remarque pas, une ligne qui dit « aucune » se remarque. */ .examen__manque { color: var(--text-3); font-style: italic; } /* L apercu : la fiche posee dans une feuille, comme elle le sera. */ .examen__apercu { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--fiche-feuille, #fff); } .examen__apercu .entity-main-card { margin: 0; border: 0; box-shadow: none; border-radius: 0; } .examen__apercu .entity-hero { height: 200px; } .examen__gestes { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .examen__refus { display: grid; gap: .9rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } /* La suppression definitive sort de la rangee des autres gestes : elle ne se repare pas, et elle etait alignee avec eux comme un choix parmi d autres. */ .examen__definitif { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--line); } .examen__avertit { margin: .8rem 0; font-size: .85rem; color: var(--danger, #b42318); max-width: 48ch; } .examen__liste .jeton { text-decoration: none; } /* Le formulaire de correction, dans la page d examen. Il se deplie sous les gestes : corriger fait partie de la decision, ce n est pas un ailleurs. */ .examen__correction { display: grid; gap: 1rem; margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid var(--line); } /* ---- comparer les modifications ------------------------------------------ La page est organisee PAR CHAMP et non par proposition : pour chaque endroit modifie, la valeur actuelle et les valeurs proposees, cote a cote, et un choix. Sept champs au maximum, donc sept decisions, quel que soit le nombre de propositions. */ .versions__choix { display: grid; gap: .6rem; } .versions__option { display: block; cursor: pointer; } .versions__option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .versions__carte { display: grid; gap: .35rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--r-card, 12px); background: var(--surface); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .versions__option:hover .versions__carte { border-color: var(--line-strong); } /* Le choix retenu se voit de loin : c est la seule chose qui compte dans une colonne de valeurs qui se ressemblent. */ .versions__option input:checked + .versions__carte { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .versions__option input:focus-visible + .versions__carte { outline: 2px solid var(--accent); outline-offset: 2px; } .versions__qui { font-size: .78rem; font-weight: 560; color: var(--text-2); } .versions__valeur { font-size: .9rem; color: var(--text); max-height: 16rem; overflow: auto; overflow-wrap: anywhere; } .versions__valeur p { margin: 0 0 .5rem; } .versions__valeur > *:last-child { margin-bottom: 0; } /* Le seul cas ou l ordre d arrivee ne suffit pas a decider. */ .versions__conflit { margin-left: .5rem; padding: .1rem .4rem; border-radius: var(--r-pill); background: var(--warn-soft, #fdf1dc); color: var(--warn, #9a6212); font-size: .68rem; font-weight: 700; letter-spacing: 0; text-transform: none; } html[data-theme="dark"] .versions__conflit { background: var(--warn-soft, #3a2a10); color: var(--warn, #e2b166); } .versions__vides { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-card, 12px); background: var(--surface-2); } .versions__vides p { margin: 0 0 .6rem; font-size: .88rem; color: var(--text-2); } .versions__fait { margin: 0 0 1.2rem; padding: .6rem .8rem; border-radius: var(--r-card, 12px); background: var(--accent-soft); color: var(--text); font-size: .88rem; } /* Refuser se dit en rouge. C est le seul geste de la barre qui retire quelque chose ; le distinguer par la couleur evite d avoir a relire le mot. Le fond reste neutre : un aplat rouge en ferait le geste principal, alors qu il est l autre issue. */ .btn--refus { color: var(--danger, #b42318); } .btn--refus:hover { border-color: var(--danger, #b42318); color: var(--danger, #b42318); } /* Le nombre de propositions d une fiche, quand il y en a plus d une : c est ce qui dit qu il faudra choisir, et non simplement lire. */ .trashrow__combien { margin-left: .35rem; padding: .05rem .35rem; border-radius: var(--r-pill); background: var(--warn-soft, #fdf1dc); color: var(--warn, #9a6212); font-size: .68rem; font-weight: 700; } html[data-theme="dark"] .trashrow__combien { background: var(--warn-soft, #3a2a10); color: var(--warn, #e2b166); }