/: c'est un manque reel sur une page dont le sujet EST le code exact et copiable. Traitement en "caisson sombre", au meme rouge-sur-noir que la banniere de confiance (--accent-on-dark), jamais un decor qui distrairait de l'exactitude du texte. Scope a .p-adaptateurs main : la banniere et le pied de page portent eux aussi un (l'adresse odersa.org), et rien ici ne doit deteindre sur ce que ces deux pieces communes affichent sur les 41 autres pages. */ .p-adaptateurs main pre { margin-block: var(--s-6); padding: var(--s-5); overflow-x: auto; background: var(--bg-deep); color: var(--on-dark); border-inline-start: 3px solid var(--accent-on-dark); font-size: var(--t-s); line-height: 1.6; } .p-adaptateurs main pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .p-adaptateurs main :not(pre) > code { border: 1px solid var(--rule); padding-inline: 0.4em; font-size: 0.9em; } /* ============================================================================ LE SCHEMA D'OUVERTURE — source / adaptateur d'entree / memoire / adaptateur de projet / projet. Chaque etiquette est une citation exacte du corps de la page (« sa forme a elle », « sa forme a lui », « une source, un contexte, une langue, une valeur », « adaptateur d'entree », « adaptateur de projet ») : le schema ne dit rien que le texte ne dise deja, il le rend visible en trois secondes. ============================================================================ */ .p-adaptateurs main .circuit { display: grid; grid-template-columns: 1fr; gap: var(--s-6); } @media (min-width: 56rem) { .p-adaptateurs main .circuit { grid-template-columns: 1.1fr 0.7fr 1.3fr 0.7fr 1.1fr; align-items: stretch; gap: var(--s-4); } } .p-adaptateurs main .circuit__borne { border: 1px solid var(--rule); border-block-start: 3px solid var(--ink-mid); background: var(--bg); padding: var(--s-5); } .p-adaptateurs main .circuit__borne--memoire { border-block-start-color: var(--accent); } .p-adaptateurs main .circuit__label { margin: 0 0 var(--s-2); font: 600 var(--t-s)/1.3 var(--sans); color: var(--ink); } .p-adaptateurs main .circuit__forme { margin: 0; font: italic 400 0.95em/1.4 var(--serif); color: var(--ink-mid); } /* Le lien : un fil en pointilles avec son nom pose dessus, comme sur un plan de cablage reel. Vertical quand les bornes s'empilent (360 px), horizontal quand elles s'alignent (56 rem) — la meme regle sert les deux, seule l'orientation du filet change. */ .p-adaptateurs main .circuit__lien { position: relative; display: flex; align-items: center; justify-content: center; min-block-size: var(--s-16); padding-block: var(--s-2); } .p-adaptateurs main .circuit__lien::before { content: ""; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-start: 50%; border-inline-start: 2px dashed var(--rule-soft); } @media (min-width: 56rem) { .p-adaptateurs main .circuit__lien { min-block-size: 0; } .p-adaptateurs main .circuit__lien::before { inset-block-start: 50%; inset-block-end: auto; inset-inline-start: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 2px dashed var(--rule-soft); } } .p-adaptateurs main .circuit__lien-nom { position: relative; z-index: 1; max-inline-size: 11rem; background: var(--bg-alt); padding-inline: var(--s-2); text-align: center; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.04em; color: var(--ink-mid); } /* ============================================================================ « LE PROBLEME » — trois ecarts comme trois broches numerotees. compo-etapes vient du socle telle quelle : un connecteur numerote existait deja dans la boite a outils commune, nul besoin d'en inventer un autre. ============================================================================ */ .p-adaptateurs main .p-adaptateurs__cas > li pre { margin-inline-start: calc(-1 * var(--s-2)); } /* ============================================================================ « LA FRONTIERE ENTRE LE VERIFIE ET LA MACHINE » — le fil, pas le paragraphe. Le contrat de composition demande explicitement que cette frontiere puisse devenir "une ligne visible plutot qu'un paragraphe" : .frontiere__fil est cette ligne, un filet de 4 px — le meme poids que .etat emploie deja dans le systeme pour marquer un etat qu'on ne dit jamais par la seule couleur. ============================================================================ */ .p-adaptateurs main .frontiere { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin-block: var(--s-8); } @media (min-width: 40rem) { .p-adaptateurs main .frontiere { grid-template-columns: 1fr auto 1fr; align-items: stretch; } } .p-adaptateurs main .frontiere__cote { padding: var(--s-5); border: 1px solid var(--rule); } .p-adaptateurs main .frontiere__cote > :last-child { margin-block-end: 0; } .p-adaptateurs main .frontiere__cote--machine { background: var(--bg-deep); color: var(--on-dark); border-color: var(--dark-line); } .p-adaptateurs main .frontiere__cote--machine pre { margin: 0; padding: 0; border: 0; background: none; } .p-adaptateurs main .frontiere__cote--machine .sur-titre { color: var(--on-dark-muted); } .p-adaptateurs main .frontiere__cote--machine .sur-titre::before { background: var(--accent-on-dark); } .p-adaptateurs main .frontiere__fil { border-block-start: 4px solid var(--accent); } @media (min-width: 40rem) { .p-adaptateurs main .frontiere__fil { border-block-start: 0; border-inline-start: 4px solid var(--accent); } } /* ============================================================================ « ECRIRE UN ADAPTATEUR D'ENTREE / DE PROJET » — les deux broches du meme connecteur, lues cote a cote plutot qu'en deux h2 successifs et identiques. compo-duo vient du socle ; seul le filet qui distingue les deux cotes est propre a cette page. ============================================================================ */ .p-adaptateurs main .paire-ecriture__cote { border-inline-start: 3px solid var(--rule); padding-inline-start: var(--s-6); } .p-adaptateurs main .paire-ecriture__cote--entree { border-inline-start-color: var(--accent); } .p-adaptateurs main .paire-ecriture__cote h2 { margin-block-start: 0; } /* ============================================================================ « LES ADAPTATEURS REELLEMENT LIVRES » — le tableau comme un plan de broches. .table-rupture marque, dans le tableau meme, exactement la meme couture que le schema d'ouverture et la paire d'ecriture : les adaptateurs d'ENTREE d'un cote, les adaptateurs de PROJET de l'autre. Meme poids de filet que .table thead deja dans le systeme (2 px, --ink) : aucun trait neuf invente, la meme coupure reemployee a l'endroit qui la justifie. ============================================================================ */ .p-adaptateurs main .table-rupture th, .p-adaptateurs main .table-rupture td { border-block-start: 2px solid var(--ink); } .p-adaptateurs main .table-wrap td:nth-child(2) { font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mid); } /* ---- api.css ------------------------------------------------------- */ /* ============================================================================ L'API — LA SALLE DES MACHINES Cette page EST la salle des machines de la maison : on n'y vient pas pour lire, on y vient pour copier un appel et le faire tourner. Elle ouvre donc sur un BANC D'ESSAI, les deux appels qui marchent cote a cote, avant tout paragraphe qui les annonce. Ensuite seulement le sommaire tient lieu de pupitre fixe sous l'oeil, le contenu longe une conduite, chaque exemple copiable est un poste sombre monte dessus avec son filet d'alimentation rouge en tete, et chaque tableau de mesure est une plaque claire, filetee, chiffree. Le bloc de code est le heros de la page, jamais un a-cote gris. Rien n'est invente : filets, fonds --bg-alt/--bg-deep, bordures de 1 a 3 px et compteurs CSS du budget d'effets suffisent a tenir la metaphore. Aucune police n'est appelee : le mot-cle générique "monospace" et des polices deja presentes sur la machine du lecteur habillent les postes, sans fichier ni requete de plus. ============================================================================ */ /* --- LA FACADE : LA BANDE D'ENTREE ------------------------------------------ Le systeme colore deja h2/h3 sur .bande--profonde ; le h1 et le chapeau de .page-head lui manquent, on les rattache a la meme encre claire. */ .p-api .bande--profonde .page-head h1, .p-api .bande--profonde .page-head .lead { color: var(--on-dark); } .p-api .bande--profonde .page-head .lead { color: var(--on-dark-muted); } /* --- LE BANC D'ESSAI : LES DEUX APPELS, AVANT TOUT LE RESTE ----------------- Cette page vend un SDK : le premier geste de l'oeil doit tomber sur l'appel qu'on va copier, pas sur un paragraphe qui l'annonce. Les deux appels vivent donc hors du pupitre, en pleine largeur de conduite, cote a cote quand l'ecran le permet et l'un sous l'autre sinon. Le filet du bas ferme la section : ce qui suit est de la lecture, ce qui est au-dessus est de la copie. */ .p-api .appels { padding-block: var(--s-10); border-block-end: 1px solid var(--rule); } .p-api .appels .lead { margin-block-end: var(--s-8); } /* min-width a zero, sans quoi une ligne de code longue elargit sa colonne au lieu de defiler dans son propre cadre : c'est .table-wrap qui doit glisser, jamais la grille qui doit ceder. */ .p-api .duo-appels > * { min-width: 0; } .p-api .duo-appels h3 { margin-block-start: 0; } .p-api .duo-appels .poste { margin-block: var(--s-4); } /* --- LA DISPOSITION : PUPITRE FIXE, CONDUITE QUI DEFILE --------------------- */ .p-api .disposition { padding-block: var(--s-10) var(--s-16); } /* --- LE PUPITRE : LE SOMMAIRE, FIXE SOUS L'OEIL ----------------------------- compo-colle le maintient a l'ecran pendant que la conduite defile a cote ; sous 56rem, compo-asym redevient un flux simple et le pupitre n'est qu'un premier bloc, sans epingle. Chaque lien porte son numero de poste, un compteur CSS, jamais un texte invente. */ .p-api .pupitre { border-block-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-5); } @media (min-width: 56rem) { .p-api .pupitre { max-width: 22rem; } } .p-api .pupitre ul { list-style: none; margin: 0; padding: 0; counter-reset: poste; } .p-api .pupitre li { counter-increment: poste; border-block-end: 1px solid var(--rule); } .p-api .pupitre li:last-child { border-block-end: 0; } .p-api .pupitre a { display: flex; align-items: center; gap: var(--s-3); padding-block: var(--s-3); min-block-size: 44px; font: 600 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.02em; color: var(--ink-soft); text-decoration: none; } .p-api .pupitre a::before { content: counter(poste, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--accent); flex: none; } .p-api .pupitre a:hover, .p-api .pupitre a:focus-visible { color: var(--accent); } /* --- LA CONDUITE : LA COLONNE DE CONTENU ------------------------------------ Un filet continu le long du contenu, comme une conduite apparente a laquelle chaque section se raccorde. Retiree sous 56rem : un seul flux sur petit ecran n'a pas besoin de sa propre plomberie. */ @media (min-width: 56rem) { .p-api .conduite { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-8); } } /* LA LIGNE QUI EMPECHE LA PAGE DE DEBORDER, ET ELLE A ETE MESUREE. Au-dessus de 56rem, compo-asym pose ses colonnes en minmax(0, …) et rien ne deborde. En dessous, il n'y a plus de template : la colonne implicite se dimensionne sur la TAILLE MINIMALE AUTOMATIQUE de ses elements, qui vaut leur min-content. Un poste porte des lignes de code longues, et son .table-wrap ne suffit pas a les rendre insecables aux yeux de la grille : releve a 360 px de large, la conduite reclamait 821 px et la page entiere defilait horizontalement. min-width a zero rend la main a .table-wrap, qui fait alors ce pour quoi il existe : le cadre ne bouge plus, seul le code glisse dessous. Ceci vaut pour toute page qui met du code large dans un compo-asym, pas seulement celle-ci : la remontee est au rapport, le socle est au constructeur. */ .p-api .disposition > * { min-width: 0; } /* --- LE POSTE : LE BLOC DE CODE, HEROS DE LA PAGE --------------------------- Fond profond, filet d'alimentation rouge en tete : le contraire du reste de la page, pour qu'un appel copiable se voie avant qu'on lise une ligne. Le defilement horizontal reste sur .table-wrap, A L'INTERIEUR du poste : le cadre ne bouge jamais, seul le code glisse dessous. */ .p-api .poste { background: var(--bg-deep); border: 1px solid var(--dark-line); border-block-start: 3px solid var(--accent); padding: var(--s-5); margin-block: var(--s-6); } .p-api .poste pre { margin: 0; } .p-api .poste code, .p-api .poste pre { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace; font-size: var(--t-s); line-height: 1.6; color: var(--on-dark); } /* Les six facons d'appeler : une conduite numerotee, chaque poste sur sa propre vanne. .compo-etapes du socle donne deja le compteur et le filet de separation ; on ne fait ici que rendre au h3 sa place en tete de poste et retirer la marge basse du poste, deja tenue par le filet du li. */ .p-api .postes > li > h3:first-child { margin-block-start: 0; } .p-api .postes .poste { margin-block-end: 0; } /* --- LE MECANISME : LA CHAINE QUI REND L'ILLIMITE VRAI ---------------------- La promesse de la page ne se demontre pas par une phrase, elle se demontre par un enchainement : cinq maillons, et la phrase isolee qui suit la liste n'est que la conclusion de ce qu'on vient de lire. .compo-etapes du socle donne deja le compteur et le filet de separation ; on ne touche ici qu'au rythme, serre, pour que la chaine se lise d'un seul regard. Le retrait d'indentation reste celui du socle : le compteur y est place en absolu, et le reduire ferait passer le numero sous le texte. */ .p-api .mecanisme > li { padding-block: var(--s-3); } .p-api .mecanisme > li > h3 { margin-block: 0 var(--s-2); font-size: var(--t-base); } .p-api .mecanisme > li > p { margin-block: 0; } /* --- LE RELEVE : LES TABLEAUX DE MESURE ------------------------------------- Une plaque claire et filetee, chiffres alignes en colonnes : le contraire du poste sombre, pour que l'oeil separe « ce qu'on appelle » de « ce qu'on mesure » sans lire un mot. */ .p-api .releve { border-block-start: 3px solid var(--ink); padding-block-start: var(--s-4); margin-block: var(--s-6); } .p-api .releve table { font-variant-numeric: tabular-nums; } .p-api .releve th, .p-api .releve td { border-inline-start: 1px solid var(--rule-soft); } .p-api .releve th:first-child, .p-api .releve td:first-child { border-inline-start: 0; } /* ---- associations.css ---------------------------------------------- */ /* ============================================================================ .p-associations — POUR LES ASSOCIATIONS : LE COMPTOIR PARTI PRIS : cette page EST un comptoir d'accueil, pas un argumentaire. Une structure debordee n'a pas besoin qu'on lui demontre un principe, elle a besoin de reconnaitre SA situation en trois secondes. Donc la scene concrete passe toujours avant l'explication : la debrouille du quotidien (le benevole, le telephone, le copier-coller dans un traducteur gratuit) ouvre la page dans une bande sombre et resserree, encadree comme une plaque qu'on n'a pas le temps de relire deux fois. La bascule vers la promesse suit dans une bande douce, plus posee. Puis les quatre situations reelles - l'affiche, le formulaire, le message, le premier echange - deviennent les pieces du dossier : une grille en pleine largeur plutot qu'une liste a puces enfouie dans une colonne etroite. Le reste (deja traduit, ce que ce n'est pas, la langue qui manque) redescend ensuite dans une lecture posee, resserree, sans aucun decor : une association qui recoit n'a pas de temps a perdre, la page non plus. Le texte designe lui-meme sa phrase la plus importante ("si une seule chose doit rester") : elle est donc la SEULE .moment-phrase de toute la page, rien ne lui fait concurrence. CE QUE CE FRAGMENT AJOUTE, RIEN DE PLUS - .p-associations__terrain : la scene d'ouverture, cadree d'un filet --dark-line en tete et en pied comme une plaque. Le second paragraphe (le risque pris faute d'autre option) porte .moment-marque, seul accent de ce mouvement ; sa couleur passe en --accent-on-dark parce que le rouge d'identite ne tient que 2,07:1 sur --bg-deep (mesure du skill). - .p-associations__cas : les quatre situations quittent la liste a puces pour une grille fixe a deux colonnes de fiches .apart, chacune cadree d'un filet d'accent en tete comme le fait deja le systeme pour un cadre d'outil. Deux colonnes plutot que le repli automatique du socle : quatre entrees paralleles rangees en carre se lisent d'un coup d'oeil, une troisieme colonne isolerait la quatrieme fiche toute seule sur sa ligne. Aucun numero : ce ne sont pas des etapes, numeroter une suite sans ordre mentirait au lecteur (regle du systeme). - .p-associations__suite : retour a la colonne etroite pour la lecture posee, rythmee par .compo-flux--ample entre les trois sujets et par .compo-flux, plus serre, a l'interieur de chacun. - .p-associations .page-head : la tete de page perd un peu de son air du haut, pour atteindre la scene plus vite. Aucun mot du corps n'a change : seules les classes et les balises d'emballage bougent. ============================================================================ */ .p-associations .page-head { padding-block-start: var(--s-8); } /* --- LA SCENE D'OUVERTURE : la debrouille du quotidien, encadree ---------- */ .p-associations__terrain { border-block: 1px solid var(--dark-line); } .p-associations__terrain .moment-marque { margin-block-start: var(--s-6); border-inline-start-color: var(--accent-on-dark); } /* --- LE COMPTOIR : les quatre situations, a plat, en carre ---------------- */ .p-associations__cas { display: grid; gap: var(--s-6); list-style: none; margin: 0; padding: 0; } @media (min-width: 40rem) { .p-associations__cas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .p-associations__cas .apart { border-block-start: 3px solid var(--accent); } .p-associations__cas .apart strong { display: block; margin-block-end: var(--s-2); font: 600 var(--t-m)/1.3 var(--serif); letter-spacing: -0.01em; } /* --- LA CLOTURE : la phrase qui resume tout, seule sur la page ------------ */ .p-associations__cloture .moment-phrase { margin-block: var(--s-6) var(--s-8); } /* ---- atelier.css --------------------------------------------------- */ /* CETTE PAGE EST UN ETABLI : la consigne de securite est peinte en grand au-dessus du plan de travail avant qu'on touche un seul outil, la commande se prend geste apres geste comme une gamme qu'on repete, et la table des reglages est le panneau d'outils accroche au mur, chaque nom visse a sa place. Rien d'autre ne se decore : un atelier serieux ne peint pas ses murs, il range ses outils. Composition avec les jetons du systeme uniquement. Le seul geste geometrique de ce fragment, le biseau du panneau d'interdiction, est SYMETRIQUE gauche/droite a dessein : une plaque qui se retourne en miroir ne peut pas rater le sens de lecture le jour ou cette page sert l'arabe. */ /* ============================================================================ LE PANNEAU DE LA REGLE — deplace en tete de page, juste apres l'ouverture. Le refus est le point le plus important de cette page ; il n'attend pas d'etre lu jusqu'au milieu de l'article pour apparaitre. ============================================================================ */ .p-atelier .atelier-regle { border-block: 1px solid var(--dark-line); } .p-atelier .atelier-regle h2 { max-width: 22ch; font-size: var(--t-2xl); letter-spacing: -0.015em; } .p-atelier .atelier-regle .etat--alerte { margin-block: var(--s-6) var(--s-5); padding: var(--s-8); border-inline-start-width: 6px; /* La plaque porte son propre fond clair : sans ceci elle heriterait du "color: on-dark" que .bande--profonde pose pour SES enfants directs, et le corps du message deviendrait un texte clair illisible sur son propre fond de plaque, clair lui aussi. Une plaque qui donne son propre fond donne aussi sa propre encre. */ color: var(--ink); /* Le biseau : les DEUX coins de fin de bloc coupes a egale distance. Un miroir horizontal renvoie exactement la meme plaque, donc elle tient en dir="rtl" comme en dir="ltr" sans une seule regle de plus. */ clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px) ); } .p-atelier .atelier-regle .etat--alerte > strong { margin-block-end: var(--s-3); font: 600 var(--t-xl)/1.15 var(--serif); letter-spacing: -0.01em; text-transform: none; } .p-atelier .atelier-regle .etat--alerte p { max-width: 56ch; } /* ============================================================================ LES GESTES — la commande se prend dans l'ordre, comme une gamme d'outils qu'on decroche l'un apres l'autre. Le socle fournit deja le compteur et le filet ; on ne fait ici que donner de l'air entre deux gestes et distinguer l'instruction (le geste a faire) du commentaire qui le suit. ============================================================================ */ .p-atelier .atelier-gestes { margin-block: var(--s-6); border-block-start: 1px solid var(--rule); } .p-atelier .atelier-gestes > li { padding-block: var(--s-6); } .p-atelier .atelier-gestes > li > p:first-child { max-width: none; color: var(--ink-soft); font-weight: 600; } /* ============================================================================ LE TABLEAU D'OUTILS — la table des reglages, presentee comme la planche accrochee au mur : un rail d'accent la distingue de la prose qui l'entoure, exactement comme .card marque deja son propre bord superieur. ============================================================================ */ .p-atelier .atelier-outillage { margin-block: var(--s-6); border-block-start: 3px solid var(--accent); } .p-atelier .atelier-outillage .table-wrap { margin: 0; } /* ============================================================================ LES COMMANDES — chaque bloc pre est l'ecran d'un terminal pose sur l'etabli : fond profond, encre claire, filet d'accent du cote qui commence la ligne. C'est la seule matiere sombre de la page en dehors du panneau de regle, et elle marque un seul et meme repere : « ceci se tape ». ============================================================================ */ .p-atelier main pre { margin-block: var(--s-5); padding: var(--s-4) var(--s-5); border-inline-start: 3px solid var(--accent-on-dark); background: var(--bg-deep); color: var(--on-dark); line-height: 1.6; overflow-x: auto; } .p-atelier main pre code { padding: 0; border: 0; background: none; color: inherit; } /* Le code cite dans la prose est une etiquette d'outil : le meme filet, le meme fond que .kbd du systeme, pour que tout ce qui « se tape » se reconnaisse au meme coup d'oeil, dans une phrase comme dans un tableau. BORNE A main, ET LA NUANCE A ETE PAYEE. Ecrite « .p-atelier code », cette regle atteignait aussi le odersa.org de la banniere de confiance, qui est une piece commune du gabarit : elle y remplacait le fond sombre par --bg-alt tandis que le systeme y garde son encre claire. Mesure au navigateur sur /atelier : 1,02:1, autrement dit le nom du domaine officiel devenait invisible sur la page qui parle de l'atelier. Une composition ne redessine jamais la banniere, l'en-tete ni le pied — le contrat de composition le dit, et « code » sans main l'enfreignait sans qu'aucun verrou ne le voie. */ .p-atelier main code { padding: 0.1em 0.35em; border: 1px solid var(--rule); background: var(--bg-alt); } /* ---- blog-anglais-pivot-traduction-automatique.css ----------------- */ /* ============================================================================ ARTICLE : L'anglais, pivot de la traduction automatique Parti pris — LE COL. Cette page met en scene l'asymetrie qu'elle raconte. Le corps se lit a la mesure confortable que blog.css donne a toute la revue ; mais au seul endroit ou le texte enonce le fait brut du registre — une langue relie toutes les autres, quatre d'entre elles ne repartant meme jamais dans l'autre sens — la colonne se resserre d'elle-meme, encadree comme un col qu'il faut franchir un par un avant de se rouvrir. Plus loin, la conclusion sur l'addition des erreurs recoit un second repere, plus sobre, en echo au premier. Les trois sections recoivent un numero de dispatch, a la maniere d'un carnet de route. Les sources, elles, ne recoivent aucun de ces traitements : elles restent a la mesure normale et s'ouvrent en plein, parce qu'aller verifier une preuve a sa source ne demande aucun detour. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. LES REPERES DE ROUTE Un numero de dispatch devant chaque section du corps, dans le style des folios que blog.css emploie deja pour le sommaire et pour les sources : la meme famille de reperes, au service d'un autre endroit de la page. ---------------------------------------------------------------------------- */ .p-blog-anglais-pivot-traduction-automatique .f-blog__corps { counter-reset: pivot-etape; } .p-blog-anglais-pivot-traduction-automatique .f-blog__corps h2 { counter-increment: pivot-etape; } .p-blog-anglais-pivot-traduction-automatique .f-blog__corps h2::before { content: counter(pivot-etape, decimal-leading-zero); display: block; font: 700 var(--t-xs)/1 var(--sans); letter-spacing: 0.16em; font-variant-numeric: tabular-nums; color: var(--accent); margin-block-end: var(--s-3); } /* ---------------------------------------------------------------------------- 2. LE COL Le deuxieme paragraphe du corps est celui qui enonce le fait brut : le registre Mozilla ne relie jamais deux langues entre elles sans passer par l'anglais. Lui seul se resserre et s'encadre ; tout le reste du corps garde la mesure confortable que blog.css donne a la revue entiere, lecture longue oblige. Un seul col sur tout le trajet, comme un seul point de passage sur tout le registre. ---------------------------------------------------------------------------- */ .p-blog-anglais-pivot-traduction-automatique .f-blog__corps > p:nth-of-type(2) { max-width: 34ch; margin-inline: auto; margin-block: var(--s-12) var(--s-10); padding: var(--s-6); border-block: 1px solid var(--rule); background: var(--accent-bg); } /* ---------------------------------------------------------------------------- 3. LE COUT Le dernier paragraphe du corps est la conclusion : deux traductions imparfaites ne se compensent pas, elles s'additionnent. Un repere plus sobre que le col, en simple filet d'accent, marque ce dernier arret avant que les sources ne s'ouvrent. ---------------------------------------------------------------------------- */ .p-blog-anglais-pivot-traduction-automatique .f-blog__corps > p:last-of-type { margin-block-start: var(--s-8); border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-6); } /* ---- blog-ecritures-du-monde-sur-le-web.css ------------------------ */ /* ============================================================================ ÉCRITURES DU MONDE SUR LE WEB — LA PAGE COMME VITRINE. PARTI PRIS : cette page EST une vitrine d'écritures, donc chaque mot cité dans une autre écriture (arabe, devanagari, bengali, chinois) ne reste pas noyé dans la phrase française : il devient un spécimen sous verre, étiqueté d'un filet d'accent — LE MÊME filet que le système pose déjà sur .note, .pullquote et .moment-marque, ici simplement déplacé dans le corps du texte. La démonstration n'est pas un dessin ajouté : c'est le CSS logique qui la fait. Le filet est posé en border-inline-start, donc il suit le SENS DE CHAQUE MOT. Sur les trois spécimens sans attribut dir (le devanagari, le bengali, le chinois — trois écritures qui, comme le français, se lisent de gauche à droite), il tombe à gauche. Sur l'arabe, qui porte dir="rtl" dans le balisage existant, il tombe tout seul à droite : c'est le seul mot de toute la page dont le filet change de bord, et il change parce que le mot lui-même dit dans quel sens il se lit — exactement ce que l'article raconte en prose au premier paragraphe. Rien n'est simulé : c'est la propriété logique qui répond à l'attribut dir déjà présent dans le HTML. Un second fil, plus discret, numérote les trois temps de la démonstration (le sens, les lettres liées, le compte des mots) comme on compte les pages d'un même carnet. Aucune couleur, aucun effet, aucune propriété physique neuve : tout compose avec odersa-systeme.css et le socle commun. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. LE FIL DES TROIS TEMPS — un folio discret devant chaque intertitre ---------------------------------------------------------------------------- */ .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps { counter-reset: partie; } .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps h2 { counter-increment: partie; } .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps h2::before { content: counter(partie, decimal-leading-zero); display: block; margin-block-end: var(--s-3); border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); font: 700 var(--t-xs)/1 var(--sans); letter-spacing: 0.16em; color: var(--ink-mid); } /* ---------------------------------------------------------------------------- 2. LES SPÉCIMENS — chaque écriture citée, sous verre, dans son sens propre ---------------------------------------------------------------------------- */ /* Le serif du système est déjà celui des citations (jetons.md) : un mot cité dans une autre écriture en hérite tout naturellement. La famille embarquée ne couvre que le latin, donc le navigateur retombe sur la police du système d'exploitation pour l'arabe, le devanagari, le bengali et le chinois — c'est le comportement normal et correct d'une page qui ne ment pas sur ce qu'elle embarque. font-style reste "normal" : aucune de ces quatre écritures ne connaît l'italique à la façon du latin. */ .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps [lang] { display: inline-block; font-family: var(--serif); font-style: normal; font-size: var(--t-l); background: var(--bg-alt); border-inline-start: 3px solid var(--accent); padding-inline: var(--s-3); padding-block: var(--s-1); margin-inline: var(--s-1); } /* Le devanagari et le bengali empilent des signes voyelles au-dessus et au-dessous de la lettre de base : une conjonction a besoin d'un peu plus de champ vertical que le latin pour ne jamais paraître rognée. L'interligne du corps (1.62, hérité) fait déjà l'essentiel ; ce supplément de padding est la seule différence entre les quatre spécimens. */ .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps [lang="hi"], .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps [lang="bn"] { padding-block: var(--s-2); } /* ---------------------------------------------------------------------------- 3. LA CHUTE — la phrase qui dit que la règle est invisible se voit, elle ---------------------------------------------------------------------------- */ /* Le dernier paragraphe du corps ferme l'article sur son idée la plus générale. Reprise à l'identique de la recette .moment-phrase du socle, posée ici sous sa propre classe puisque le gabarit n'ajoute pas la classe du socle à un paragraphe engendré par l'outil. */ .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps > p:last-child { font: 500 var(--t-xl)/1.25 var(--serif); max-width: 34ch; letter-spacing: -0.015em; margin-block-start: var(--s-12); } /* ---------------------------------------------------------------------------- 4. AJUSTEMENTS — l'étroit, et l'encre ---------------------------------------------------------------------------- */ /* Sous 26rem, comme la lettrine de blog.css : le spécimen reprend un cran d'échelle en moins pour ne jamais dépasser une colonne déjà resserrée. */ @media (max-width: 26rem) { .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps [lang] { font-size: var(--t-m); padding-inline: var(--s-2); } } /* À l'impression, comme .note et .etat déjà dans le système : le fond disparaît, le filet d'accent et le texte suffisent sur le papier. */ @media print { .p-blog-ecritures-du-monde-sur-le-web .f-blog__corps [lang] { background: none; } } /* ---- blog-langues-peu-dotees.css ----------------------------------- */ /* ============================================================================ BLOG · LANGUES PEU DOTÉES — PARTI PRIS : LA BASCULE. blog.css tient déjà le gabarit commun de revue (lettrine, mesure resserrée, sources numérotées) : cette feuille ne le répète pas, elle pose ce qui est propre à CET article, et seulement à lui. Cet article EST une bascule : ce qu'il mesure ne pèse pas pareil dans les deux sens, et rien ne permet de deviner à l'avance quel plateau penchera. La page le montre plutôt que de se contenter de l'affirmer. Le corps décrit trois cas dans le même mouvement. Pour le hindi (deuxième paragraphe) puis pour le bengali (troisième), traduire VERS l'anglais l'emporte sur traduire DEPUIS l'anglais : deux paragraphes qui penchent donc du même côté, ancrés à leur bord d'attaque par un filet neutre. Le paragraphe suivant retourne le résultat pour le chinois — c'est le seul endroit du texte qui dit explicitement « c'est l'inverse » — et lui seul penche de l'autre côté, ancré par un filet d'accent plutôt que neutre, seul aussi à porter le petit repère en losange qui marque le pivot exact, à l'angle où le filet du haut et celui du bord se rencontrent. Passé ce paragraphe, le texte change de sujet : l'instrument qui a rendu l'écart mesurable, puis la leçon qu'on en tire. La page se redresse d'elle-même, sans qu'il faille une règle de plus pour le dire. Deux endroits ne reçoivent délibérément aucun de ces traitements. Le premier paragraphe garde la seule lettrine que blog.css lui donne déjà : il pose la question, il ne pèse encore rien. Le dernier généralise à toute langue peu dotée un fait démographique — le poids d'une langue ne dit rien de sa dotation — qui est une idée différente de celle du balancement des scores : lui donner le même relief que le pivot brouillerait les deux idées au lieu d'en marquer une. Les sources, enfin, restent à la mesure normale : une preuve se vérifie sans détour. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. LE PLATEAU ÉTABLI — hindi puis bengali penchent du même côté ---------------------------------------------------------------------------- */ .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(2), .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(3) { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-5); } @media (min-width: 30rem) { .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(2), .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(3) { margin-inline-end: var(--s-10); } } /* ---------------------------------------------------------------------------- 2. LE POINT DE BASCULE — le chinois retourne le résultat, seul des trois : filet d'accent, bord opposé, et le repère qui marque le pivot exact. ---------------------------------------------------------------------------- */ .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(4) { margin-block-start: var(--s-8); border-block-start: 3px solid var(--accent); border-inline-end: 1px solid var(--accent); padding-block-start: var(--s-4); padding-inline-end: var(--s-5); } /* Le repère du pivot : un losange, pas un mot — rien à faire lire de plus qu'une prose qui dit déjà tout. content vide, donc rien qu'un lecteur d'écran ait à annoncer. */ .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(4)::before { content: ""; display: block; inline-size: var(--s-3); block-size: var(--s-3); margin-inline: auto 0; margin-block-end: var(--s-3); background: var(--accent); transform: rotate(45deg); } @media (min-width: 30rem) { .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(4) { margin-inline-start: var(--s-10); } } /* Une bascule qu'on coupe entre deux pages ne se lit plus : le paragraphe marqué reste entier, comme la piece scellee d'un autre article de la meme revue. */ @media print { .p-blog-langues-peu-dotees .f-blog__corps p:nth-of-type(4) { break-inside: avoid; } } /* ---------------------------------------------------------------------------- 3. LE RETOUR D'APLOMB — l'intertitre suivant se rapproche : la page se redresse aussitôt le pivot passé, sans vide sous un paragraphe penché. ---------------------------------------------------------------------------- */ .p-blog-langues-peu-dotees .f-blog__corps h2:nth-of-type(2) { margin-block-start: var(--s-10); } /* ---- blog-tatoeba-chaque-phrase-son-auteur.css --------------------- */ /* ============================================================================ BLOG - TATOEBA : LE NOM AU BOUT DE LA LIGNE Parti pris : CETTE PAGE EST UN REGISTRE OU RIEN NE SE REPREND SANS NOM. Le systeme pose son filet d'accent en tete, toujours du meme cote : sur .note, .pullquote et .badge, le bord d'ATTAQUE (border-inline-start) porte la marque. Sur cet article precisement - celui qui explique que Tatoeba attache le nom de l'auteur APRES la phrase, jamais avant, puisque l'identifiant d'auteur suit le texte dans le corpus exporte, et que la mention suit le titre dans une bibliographie ("Titre, Auteur.") - le filet se renverse. Il ne bouge qu'aux trois endroits ou lire quelque chose oblige a repeter qui l'a ecrit : la phrase-regle elle-meme, les sources qui la suivent, et la licence qui referme l'article en exigeant a son tour qu'on cite l'ODERSA. Partout ailleurs dans le corps, rien ne change : blog.css tient deja la lecture longue (mesure, lettrine, rythme des intertitres) et cette feuille ne la retouche pas. Le registre des sources recoit un traitement different, parce qu'il n'est pas une regle enoncee mais une regle deja appliquee : chaque reference que cet article cite est elle-meme un couple titre-auteur. Le folio bascule du sans-serif accentue du systeme vers un chiffre serif italique, comme un numero porte a la main dans la marge d'un manuscrit ; et le survol n'eclaire jamais le seul lien, il eclaire la ligne entiere - le titre ET le nom qui le suit - parce que separer les deux est justement ce que cet article dit qu'on n'a pas le droit de faire. L'accent reste rare : il ne sert plus qu'aux deux moments ou une regle se dit, pas au registre qui la montre deja tenue. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. LE REGISTRE DES SOURCES Un filet separe chaque entree comme une ligne d'un vrai registre. Le folio quitte le sans-serif accentue du systeme pour un chiffre serif italique - l'accent devient rare, reserve aux deux moments ou une regle se dit, plus bas. Le survol (et le focus clavier sur le lien qu'elle contient) eclaire toute la ligne, jamais le seul lien : le titre et le nom qui le suit s'allument ensemble, ou pas du tout. ---------------------------------------------------------------------------- */ .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li { padding-block: var(--s-3); border-block-end: 1px solid var(--rule); transition: background-color 180ms var(--easing); } .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li:last-child { border-block-end: 0; } .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li:hover, .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li:focus-within { background: var(--bg-alt); } .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li::before { content: counter(source, decimal-leading-zero); font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--t-s); line-height: 1.6; font-variant-numeric: tabular-nums; color: var(--ink-mid); } /* ---------------------------------------------------------------------------- 2. LA REGLE, RENVERSEE La phrase qui enonce la regle de Tatoeba - citer le nom de l'auteur pour avoir le droit de reprendre une phrase - est le seul .pullquote du site dont le filet ne mene pas la lecture mais la suit. Le lavis --accent-bg lui donne le poids du moment unique de cette page ; l'echo du point 3, plus bas, reste sans fond pour que ce moment-ci demeure celui qu'on retient. ---------------------------------------------------------------------------- */ .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__corps .pullquote { border-inline-start: 0; border-inline-end: 3px solid var(--accent); background: var(--accent-bg); padding-block: var(--s-5); padding-inline: var(--s-5) var(--s-6); margin-block: var(--s-10); } /* ---------------------------------------------------------------------------- 3. LA NOTE, EN ECHO La note finale applique a l'article lui-meme ce que l'article raconte de Tatoeba : le reprendre oblige a citer l'ODERSA. Meme renversement du filet qu'au point 2, sans le lavis - un echo plus sobre que la regle enoncee, pas une seconde version d'elle. ---------------------------------------------------------------------------- */ .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__fin .note { border-inline-start: 1px solid var(--rule); border-inline-end: 3px solid var(--accent); } /* ---------------------------------------------------------------------------- 4. IMPRESSION Le lavis du point 2 ne sert qu'a l'ecran : sur le papier, le filet et le texte suffisent, comme le systeme le fait deja pour .note. Ni la regle ni le registre ne se coupent a cheval sur un saut de page. ---------------------------------------------------------------------------- */ @media print { .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__corps .pullquote { background: none; } .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__corps .pullquote, .p-blog-tatoeba-chaque-phrase-son-auteur .f-blog__sources li { break-inside: avoid; } } /* ---- blog-traduire-dans-le-navigateur.css -------------------------- */ /* ============================================================================ BLOG — TRADUIRE DANS LE NAVIGATEUR Parti pris : CET ARTICLE EST UN DOSSIER D'INSTRUCTION, PAS UN BILLET. Il n'avance rien sans preuve datee : un fait documente (2017, la fuite Statoil / Translate.com racontee par Slator), une reponse d'architecture (2019, le projet Bergamot), puis une portee pour un texte sensible. La composition rend ce squelette visible sans toucher au HTML engendre : chacune des trois sections du corps devient une piece de dossier, foliotee par un compteur CSS (01, 02, 03) plutot que par une puce. La piece 02, celle ou l'architecture « retire la question » comme le dit le texte lui-meme, porte le meme filet d'encre de 3 px que le bloc Sources plus bas : c'est la charniere de l'article, et elle est marquee comme telle, seule des trois. La phrase de bascule (le pullquote, qui resume la these) cesse d'etre un simple trait d'accent : elle est encadree comme la piece qu'on verse au dossier et qu'on referme. Tout ce qui suit COMPOSE avec .f-blog (blog.css) : aucune regle n'y repete une propriete a l'identique, chacune ajoute un trait absent de la revue commune ou la remplace a une specificite superieure assumee, jamais au hasard de l'ordre des fragments. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. LA DATE, EN TAMPON DE DOSSIER Le seul repere temporel prouve d'emblee (la publication) prend l'allure d'une piece qu'on tamponne, avant meme d'entrer dans le fil. Le petit trait du .kicker du systeme reste devant, intact : on n'encadre que la date. ---------------------------------------------------------------------------- */ .p-blog-traduire-dans-le-navigateur .page-head .kicker time { border: 1px solid var(--rule); padding: 0.3em 0.75em; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------------------- 2. LES TROIS PIECES DU DOSSIER Un folio propre a cet article, distinct de la numerotation du sommaire du blog (.p-blog__sommaire) : celle-la classe des articles entre eux, celle-ci classe les mouvements a l'interieur d'un seul. Compteur CSS, pas une puce inventee, dans l'esprit deja tenu par .compo-etapes du socle. ---------------------------------------------------------------------------- */ .p-blog-traduire-dans-le-navigateur .f-blog__corps { counter-reset: piece; } .p-blog-traduire-dans-le-navigateur .f-blog__corps h2 { counter-increment: piece; } .p-blog-traduire-dans-le-navigateur .f-blog__corps h2::before { content: counter(piece, decimal-leading-zero); display: block; margin-block-end: var(--s-2); font: 600 var(--t-s)/1 var(--serif); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--ink-mid); } /* La piece 02 est la charniere du dossier : avant elle, un risque prouve ; a partir d'elle, une architecture qui « retire la question » — le texte le dit dans ses propres mots. Elle reprend, seule des trois, le filet d'encre de 3 px deja pose sur .f-blog__sources par blog.css : un repere existant, jamais une couleur neuve. Le selecteur porte un nth-of-type, donc une specificite superieure a celle de blog.css : la regle tient quel que soit l'ordre d'assemblage des fragments. */ .p-blog-traduire-dans-le-navigateur .f-blog__corps h2:nth-of-type(2) { border-block-start: 3px solid var(--ink); } .p-blog-traduire-dans-le-navigateur .f-blog__corps h2:nth-of-type(2)::before { color: var(--accent); } /* ---------------------------------------------------------------------------- 3. LA PIECE SCELLEE Le pullquote du systeme n'est qu'un trait d'accent sur son bord d'attaque ; celui-ci porte la these de l'article (« il n'existe pas de serveur ou le texte pourrait fuiter ») et clot le dossier plutot que de seulement le souligner. Le cadre complet reprend exactement la recette deja tenue par .note dans le systeme (filet fin sur les quatre cotes, bord d'attaque en accent) : rien n'est invente, la piece est simplement fermee des trois cotes qui manquaient. ---------------------------------------------------------------------------- */ .p-blog-traduire-dans-le-navigateur .f-blog__corps .pullquote { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); padding: var(--s-6); margin-block: var(--s-10); } /* ---------------------------------------------------------------------------- 4. IMPRESSION Une piece de dossier ne se coupe pas au milieu par un saut de page. ---------------------------------------------------------------------------- */ @media print { .p-blog-traduire-dans-le-navigateur .f-blog__corps h2, .p-blog-traduire-dans-le-navigateur .f-blog__corps .pullquote { break-inside: avoid; } } /* ---- blog.css ------------------------------------------------------ */ /* ============================================================================ BLOG — parti pris : LA REVUE. .p-blog (l'index) EST un sommaire de revue : une liste numerotee, dense, sans boite ni carte, ou chaque entree porte son numero de folio, sa date, son titre et sa description entiere, pour donner envie avant de cliquer. .f-blog (les cinq articles engendres) EST une page de lecture longue, la seule du site pensee pour etre lue en entier : colonne resserree a la mesure d'une revue imprimee, lettrine d'ouverture, respirations entre les sections, et des sources qui se consultent a part sans faire perdre le fil du texte. Les deux portees vivent dans ce seul fragment : CONTRAT-COMPOSITION.md les admet toutes les deux ici, parce que "blog" est le domicile naturel du sujet. Rien ci-dessous ne declare de jeton, de couleur, d'ombre ou d'arrondi : tout compose avec odersa-systeme.css et le socle commun. ============================================================================ */ /* ---------------------------------------------------------------------------- 1. L'INDEX — .p-blog ---------------------------------------------------------------------------- */ /* Le masthead : un surtitre institutionnel discret, un grand titre de revue, un chapeau qui tient sur une ligne de plus qu'ailleurs. */ .p-blog .page-head { padding-block: var(--s-16) var(--s-10); } .p-blog .page-head .kicker { margin-block-end: var(--s-5); } .p-blog .page-head h1 { font-size: var(--t-3xl); max-width: 16ch; letter-spacing: -0.024em; } .p-blog .page-head .lead { font-size: var(--t-l); max-width: 50ch; color: var(--ink-soft); } /* Le label "Sommaire" : un running head de revue, pas un titre de section ordinaire. Cible precise : seul le h2 du sommaire est enfant direct de son .wrap ; le h2 de l'etat vide, lui, est niche dans .vide et n'est pas touche. */ .p-blog .wrap > h2 { font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mid); border-block-end: 1px solid var(--rule); padding-block-end: var(--s-4); margin: 0 0 var(--s-2); } /* Le sommaire lui-meme : une liste ordonnee et numerotee (compteur CSS, pas une puce inventee), chaque entree pleine largeur, separee par un filet. Le numero vit sur le , le lien de contenu occupe le reste : deux items de flux seulement, aucun souci de placement automatique en grille. */ .p-blog__sommaire { list-style: none; margin: 0; padding: 0; counter-reset: entree; } .p-blog__sommaire > li { counter-increment: entree; display: flex; align-items: start; column-gap: var(--s-6); padding-block: var(--s-8); border-block-end: 1px solid var(--rule); transition: background-color 180ms var(--easing); } .p-blog__sommaire > li:first-child { border-block-start: 1px solid var(--rule); } .p-blog__sommaire > li:hover { background: var(--bg-alt); } .p-blog__sommaire > li::before { content: counter(entree, decimal-leading-zero); flex: none; inline-size: 2.75rem; font: 500 var(--t-2xl)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--rule-soft); transition: color 180ms var(--easing); } .p-blog__sommaire > li:hover::before { color: var(--accent); } .p-blog__entree { flex: 1 1 auto; min-inline-size: 0; display: block; text-decoration: none; color: var(--ink); } .p-blog__entree > p:first-child { margin: 0; } .p-blog__entree h3 { margin: var(--s-2) 0 0; font-size: var(--t-xl); max-width: 30ch; } .p-blog__entree > p:last-of-type { margin: var(--s-3) 0 0; color: var(--ink-mid); max-width: 62ch; } .p-blog__entree .card__go { display: inline-block; margin-block-start: var(--s-4); } /* La pagination, si le blog depasse un jour dix articles : un simple filet au-dessus, la matiere reste celle du socle (.toolbar, .btn--ghost). */ .p-blog nav[aria-label="Pagination du blog"] { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-6); margin-block-start: var(--s-4); } /* ---------------------------------------------------------------------------- 2. LES ARTICLES ENGENDRES — .f-blog ---------------------------------------------------------------------------- */ /* Une colonne de lecture tenue, nettement plus etroite que les 55rem des autres pages du site : c'est la mesure d'une revue imprimee, pas d'un gabarit de contenu generique. */ .f-blog article.wrap--narrow { max-width: 40rem; } .f-blog .page-head { padding-block: var(--s-16) var(--s-8); } .f-blog .page-head h1 { font-size: var(--t-3xl); letter-spacing: -0.024em; max-width: 20ch; } .f-blog .page-head .kicker { margin-block-end: var(--s-6); } .f-blog .page-head .lead { font-size: var(--t-l); color: var(--ink-soft); max-width: none; } /* Les mots-cles ferment le masthead et le separent du corps par un filet : la derniere respiration avant la lecture. */ .f-blog__motscles { margin: 0 0 var(--s-10); padding-block-end: var(--s-8); border-block-end: 1px solid var(--rule); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* Le corps : une taille de lecture dediee (le jeton --t-m du systeme, prevu pour le confort, jamais une valeur inventee), une lettrine d'ouverture a la maniere d'une revue imprimee, des intertitres qui respirent et se separent du texte par un filet plutot que par la seule taille. */ .f-blog__corps { font-size: var(--t-m); } .f-blog__corps > p { margin-block-end: 1.35em; } .f-blog__corps > p:first-child::first-letter { float: inline-start; font-family: var(--serif); font-weight: 600; font-size: 3.2em; line-height: 0.85; padding-inline-end: var(--s-2); color: var(--accent); } .f-blog__corps h2 { margin-block-start: var(--s-16); padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule); max-width: 30ch; } .f-blog__corps h3 { max-width: 34ch; } .f-blog__corps .pullquote { font-size: var(--t-l); } /* Les sources : un bloc qu'on consulte a part, sans perdre le fil du texte qui precede. Filet epais en tete comme un bas de page savant, references numerotees par compteur CSS plutot que par une puce plate. */ .f-blog__sources { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 3px solid var(--ink); } .f-blog__sources h2 { margin: 0 0 var(--s-5); font: 700 var(--t-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); } .f-blog__sources ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: source; } .f-blog__sources li { counter-increment: source; position: relative; padding-inline-start: var(--s-8); font-size: var(--t-s); color: var(--ink-mid); } .f-blog__sources li::before { content: counter(source); position: absolute; inset-inline-start: 0; color: var(--accent); font: 600 var(--t-xs)/1.6 var(--sans); font-variant-numeric: tabular-nums; } .f-blog__sources a { color: var(--ink); } .f-blog__sources a:hover { color: var(--accent); } .f-blog__fin { margin-block-start: var(--s-10); } /* Sous 26rem (environ 416 px), la lettrine se fait plus discrete pour ne pas ecraser une colonne deja etroite. */ @media (max-width: 26rem) { .f-blog__corps > p:first-child::first-letter { font-size: 2.4em; } } /* ---- client.css ---------------------------------------------------- */ /* Cette page est une notice de montage : elle numérote ses chapitres, encadre chaque exemple de code comme une pièce détachée, et pose l'installation en deux faces vis-à-vis - navigateur, puis Node - pour que la double vie du fichier se voie d'un coup d'oeil plutôt que de se lire à plat. */ /* ---- Les chapitres : même numérotation sur le sommaire et sur les h2 ------ */ .p-client main { counter-reset: toc chapitre; } .p-client nav[aria-label="Sommaire"] { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-6); margin-block: var(--s-8); } .p-client nav[aria-label="Sommaire"] ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3) var(--s-8); } @media (min-width: 40rem) { .p-client nav[aria-label="Sommaire"] ul { grid-template-columns: 1fr 1fr; } } .p-client nav[aria-label="Sommaire"] li { counter-increment: toc; display: flex; align-items: baseline; gap: var(--s-3); } .p-client nav[aria-label="Sommaire"] li::before { content: counter(toc, decimal-leading-zero); flex: none; font: 600 var(--t-xs)/1.4 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; } .p-client nav[aria-label="Sommaire"] a { flex: 1; color: var(--ink); text-decoration: none; border-block-end: 1px dotted var(--rule); padding-block-end: 0.2em; } .p-client nav[aria-label="Sommaire"] a:hover { color: var(--accent); border-block-end-color: var(--accent); } .p-client main h2 { counter-increment: chapitre; display: flex; align-items: baseline; gap: var(--s-4); padding-block-end: var(--s-3); border-block-end: 1px solid var(--rule); margin-block-end: var(--s-5); } .p-client main h2::before { content: counter(chapitre, decimal-leading-zero); flex: none; font: 600 var(--t-m)/1 var(--sans); color: var(--accent); border: 1px solid var(--rule); padding: 0.1em var(--s-2); font-variant-numeric: tabular-nums; } /* ---- La couverture : un cadre à reperes d'angle, comme un plan ----------- */ .p-client .page-head { position: relative; border: 1px solid var(--rule); padding: var(--s-8); margin-block-end: var(--s-10); } .p-client .page-head::before, .p-client .page-head::after { content: ""; position: absolute; inline-size: 18px; block-size: 18px; } .p-client .page-head::before { inset-block-start: -1px; inset-inline-start: -1px; border-block-start: 3px solid var(--accent); border-inline-start: 3px solid var(--accent); } .p-client .page-head::after { inset-block-end: -1px; inset-inline-end: -1px; border-block-end: 3px solid var(--accent); border-inline-end: 3px solid var(--accent); } /* ---- Le code, en piece detachee sous verre ------------------------------- */ .p-client main code { font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", Menlo, monospace; } .p-client main :not(pre) > code { font-size: 0.92em; background: var(--bg-alt); border: 1px solid var(--rule-soft); padding: 0.1em 0.35em; } .p-client .table-wrap:has(> pre) { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); background: var(--bg-alt); margin-block: var(--s-6); } .p-client .table-wrap:has(> pre) pre { margin: 0; padding: var(--s-5) var(--s-6); font-size: 0.9em; line-height: 1.6; color: var(--ink); } /* ---- Les tableaux, en liste de pieces numerotee -------------------------- */ .p-client .table-wrap:has(> table) { border: 1px solid var(--rule); margin-block: var(--s-6); } .p-client .table-wrap:has(> table) table { margin: 0; } .p-client .table-wrap:has(> table) tbody { counter-reset: rangee; } .p-client .table-wrap:has(> table) tbody tr { counter-increment: rangee; } .p-client .table-wrap:has(> table) tbody th[scope="row"]::before { content: counter(rangee, decimal-leading-zero); display: inline-block; inline-size: 1.7em; margin-inline-end: var(--s-2); font: 600 0.85em/1 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; } /* ---- L'installation, en deux faces vis-a-vis : meme piece, deux usages --- */ .p-client .faces { display: grid; gap: var(--s-8); counter-reset: face; margin-block: var(--s-8); } @media (min-width: 40rem) { .p-client .faces { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .p-client .face { position: relative; counter-increment: face; min-inline-size: 0; border: 1px solid var(--rule); padding: var(--s-6); } @media (min-width: 40rem) { .p-client .face + .face { border-inline-start: 1px solid var(--rule); } } .p-client .face::before { content: counter(face); position: absolute; inset-block-start: 0; inset-inline-end: 0; font: 600 var(--t-xs)/1 var(--sans); color: var(--accent); border-inline-start: 1px solid var(--rule); border-block-end: 1px solid var(--rule); padding: var(--s-1) var(--s-3); font-variant-numeric: tabular-nums; } .p-client .face h3 { margin-block-start: 0; } .p-client .face .table-wrap:has(> pre) { border: 0; border-inline-start: 3px solid var(--rule); background: transparent; margin-block: var(--s-5); } .p-client .face .table-wrap:has(> pre) pre { padding-block: var(--s-2); padding-inline-start: var(--s-5); padding-inline-end: 0; } .p-client .face > *:last-child { margin-block-end: 0; } /* ---- Les fiches de demonstration : un avant, un apres, sous cadre -------- */ .p-client .fiche { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); background: var(--bg); padding: var(--s-6); margin-block: var(--s-8); } .p-client .fiche h3 { margin-block-start: 0; } .p-client .fiche .table-wrap:has(> pre) { border: 0; border-inline-start: 3px solid var(--rule); background: transparent; margin-block: var(--s-5); } .p-client .fiche .table-wrap:has(> pre) pre { padding-block: var(--s-2); padding-inline-start: var(--s-5); padding-inline-end: 0; } .p-client .fiche > *:last-child { margin-block-end: 0; } /* ---- contact.css --------------------------------------------------- */ /* ============================================================================ CONTACT — la plaque. PARTI PRIS : cette page EST une plaque apposee pres d'une porte, pas un formulaire de contact. Une seule adresse, gravee en grand et seule dans son cadre ; en dessous d'elle, cinq motifs tenus en repertoire sec, chacun sa ligne. Autour du cadre, en petits caracteres, les portes moins pressantes, ce qui n'obtient pas de reponse, et ce qu'on ne promet pas. Rien ne defile qu'on n'ait pas deja lu au premier ecran. Aucune bande, aucun fond, aucun filet d'accent : le rouge du systeme n'apparait que sur ce qui se clique, jamais en decor, et c'est la seule couleur de toute la page. C'est la page la plus nue du site, et ca doit se voir comme un choix, pas comme un manque : a l'oppose de la page des credits, qui deborde. CE QUE CE FRAGMENT AJOUTE, RIEN DE PLUS QUE CELA - .page-head se resserre : le sujet est court, l'air au-dessus doit l'etre aussi. - .plaque : le cadre lui-meme. Un filet fin sur les quatre cotes, un trait de 3 px en tete pour lui donner une face, comme .card ou le cadre a filet du gabarit outil le font deja ailleurs dans le systeme. - .plaque-tete (avec .center du systeme) : l'adresse et sa legende, groupees et centrees comme la ligne gravee d'une plaque. - .plaque-adresse a : la seule ligne que l'oeil doit trouver en arrivant. Plus grande, en serif ; le lien du systeme reste sinon inchange, ni souligne davantage ni retire. - .plaque-note : la legende sous l'adresse, tenue dans une colonne etroite pour rester une legende et non un paragraphe. - le tableau du repertoire perd un peu de sa respiration verticale : cinq motifs, pas un inventaire. Les deux autres portes du site (contribuer, questions) restent liees plus bas, en petits caracteres : rien n'est supprime, tout n'a simplement pas le meme poids. ============================================================================ */ .p-contact .page-head { padding-block: var(--s-8) var(--s-5); } /* --- LE CADRE ---------------------------------------------------------- */ .p-contact .plaque { border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); padding: var(--s-8); margin-block-end: var(--s-10); } .p-contact .plaque-tete { margin-block-end: var(--s-6); } .p-contact .plaque-adresse { margin-block-end: var(--s-2); } .p-contact .plaque-adresse a { display: inline-block; font: 600 var(--t-xl)/1.2 var(--serif); letter-spacing: -0.01em; overflow-wrap: anywhere; padding-block: var(--s-2); } .p-contact .plaque-note { margin-block: 0; margin-inline: auto; max-width: 46ch; } /* --- LE REPERTOIRE : cinq lignes, pas un inventaire --------------------- */ .p-contact .plaque th, .p-contact .plaque td { padding-block: var(--s-2); } /* ---- contribuer.css ------------------------------------------------ */ /* ============================================================================ .p-contribuer — LE BORDEREAU Cette page EST un guichet de dépôt : chaque façon de contribuer qui passe par courriel devient un bordereau numéroté — sa case Destinataire, sa case Objet déjà lisibles en clair, puis ses champs à recopier dans l'ordre où il faut les écrire, chacun posé sur sa ligne à servir en pointillés, comme sur un formulaire papier qu'on remplit à la main. Rien de tout cela n'est un : aucun champ ne s'envoie depuis cette page, et c'est le point même du dispositif. Sous une ligne perforée qui figure le talon détachable vient le seul geste actif du bordereau : un lien qui ouvre le logiciel de courriel avec exactement ce contenu déjà rempli — on peut vérifier que le talon dit la même adresse que la case Destinataire juste au-dessus. Un cinquième chemin, proposer une phrase pour le dictionnaire, n'a délibérément AUCUN bordereau : il ne passe pas par nous, il passe par Tatoeba. Le classer comme les autres mentirait sur le fonctionnement du site ; sa section porte donc un filet simple et le dit avant même de l'expliquer, là où les quatre autres portent la marque à trois épaisseurs du bordereau. ============================================================================ */ /* --- L'OUVERTURE : un bord d'accent en tête de page, la même signature que celle des bordereaux plus bas, pour que l'oeil la reconnaisse avant même d'en lire un premier. ------------------------------------------------------ */ .p-contribuer .page-head { border-block-start: 3px solid var(--accent); padding-block-start: var(--s-6); } /* --- LE BORDEREAU ------------------------------------------------------------ Le cadre : filet fin sur les quatre côtés, marque d'accent en tête — la même façon de signaler « ceci est une pièce à part » que le cadre d'outil du système, appliquée ici à un bordereau plutôt qu'à un outil. */ .p-contribuer .bordereau { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); margin-block: var(--s-10); } /* L'entête : la case numéro, carrée, à côté de la case destinataire/objet — le coin d'un formulaire administratif. Se replie en pile sous 360 px. */ .p-contribuer .bordereau__entete { display: flex; flex-wrap: wrap; gap: var(--s-6); padding: var(--s-6); background: var(--bg-alt); border-block-end: 1px solid var(--rule); } .p-contribuer .bordereau__num { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-1); inline-size: var(--s-16); block-size: var(--s-16); margin: 0; border: 1px solid var(--rule); text-align: center; } .p-contribuer .bordereau__num-chiffre { font: 600 var(--t-xl)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--accent); } .p-contribuer .bordereau__num-mot { font: 600 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mid); } .p-contribuer .bordereau__meta { flex: 1 1 16rem; min-inline-size: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--s-2); margin: 0; } .p-contribuer .bordereau__meta > div { display: grid; grid-template-columns: minmax(var(--s-16), auto) 1fr; gap: var(--s-2) var(--s-4); align-items: baseline; } .p-contribuer .bordereau__meta dt { margin: 0; font: 600 var(--t-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); } .p-contribuer .bordereau__meta dd { margin: 0; font: 600 var(--t-s)/1.4 var(--sans); } /* L'intitulé du bloc de champs — la phrase même du texte source, en repère. */ .p-contribuer .bordereau__intitule { margin: 0; padding-inline: var(--s-6); padding-block: var(--s-6) 0; font: 600 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); } /* Les champs : la numérotation et le filet séparateur viennent de .compo-etapes, posé par le socle et employé tel quel dans le gabarit. Cette page n'y ajoute que le libellé, l'aide, et la ligne à servir en pointillés — la seule pièce vraiment neuve du bordereau. */ .p-contribuer .bordereau__champs { padding-inline: var(--s-6); padding-block: var(--s-2); } .p-contribuer .bordereau__libelle { margin: 0; font: 600 var(--t-s)/1.4 var(--sans); } .p-contribuer .bordereau__aide { margin: 0.2em 0 0; font-size: var(--t-xs); color: var(--ink-mid); } .p-contribuer .bordereau__champs > li::after { content: ""; display: block; block-size: 1.4em; margin-block-start: var(--s-2); border-block-end: 1px dotted var(--rule); } /* Le talon : la perforation, puis le seul geste actif du bordereau — le lien qui l'envoie tel quel, déjà rempli. */ .p-contribuer .bordereau__talon { border-block-start: 1px dashed var(--rule); margin-inline: var(--s-6); margin-block: var(--s-2) 0; padding-block: var(--s-6); } /* --- LE HORS-BORDEREAU ------------------------------------------------------- La proposition de phrase ne passe pas par ce circuit-là : un filet simple, pas la marque à trois épaisseurs, pour que l'oeil sente la différence avant même de lire pourquoi. */ .p-contribuer .renvoi { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-6); margin-block: var(--s-6) var(--s-8); } /* ---- credits.css --------------------------------------------------- */ /* ============================================================================ .p-credits — LE CARTEL DE MUSEE PARTI PRIS : cette page EST une salle de musee, pas une page de mentions legales. Un credit n'y est jamais une politesse en petits caracteres : c'est un cartel affiche a cote de la piece, aussi visible que la piece elle-meme. Le parcours s'ouvre sur un plan des salles, traverse des salles de reference (le socle des donnees, les polices, l'avis Unicode, le systeme visuel), puis debouche sur la seule galerie du site ou l'image EST le sujet : huit oeuvres patrimoniales, chacune avec son cartel complet — auteur, annee, institution, licence, preuve — et casse volontairement la colonne etroite pour occuper toute la largeur, parce qu'une reproduction qu'on regarde vraiment ne tient pas dans une marge de texte. La visite se ferme sur une salle sombre, comme une sortie, avec un seul geste possible : signaler une erreur. Rien ici n'invente une couleur, une police ou un effet : tout compose avec les jetons du systeme et les primitives de _socle.css, sous la seule portee .p-credits. Les regles qui touchent des balises nues (h2, table-wrap) sont systematiquement retenues a l'interieur de « main » : la banniere, l'en-tete et le pied de page partagent le meme et le pied porte lui-meme des , qui ne doivent herite aucune mise en scene d'ici. ============================================================================ */ /* --- LE COMPTEUR DE SALLES, POSE UNE SEULE FOIS ----------------------------- Un compteur unique traverse tous les conteneurs de section, qu'ils soient une colonne etroite ou une bande pleine largeur : le compteur ne connait pas les balises, seulement l'ordre d'apparition des dans le document. */ .p-credits { counter-reset: salle; } .p-credits main h2 { counter-increment: salle; } .p-credits main h2::before { content: "Salle " counter(salle, decimal-leading-zero); display: block; margin-block-end: var(--s-3); font: 700 var(--t-xs)/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); } /* La salle de sortie est un bloc sombre (bande--profonde) : --ink-mid y est pense pour un fond clair et n'y tient pas 4,5:1. Le socle bascule deja le corps du texte en --on-dark via « color: inherit », mais ce kicker fixe sa propre couleur et doit recevoir la meme correction que le systeme prevoit pour un texte secondaire pose sur une surface sombre. */ .p-credits main .bande--profonde h2::before { color: var(--on-dark-muted); } /* --- LES SALLES DE REFERENCE ------------------------------------------------- Un filet et un grand blanc annoncent une salle neuve, comme un seuil qu'on franchit. La premiere salle suit directement l'entree : pas de second seuil juste apres le premier. */ .p-credits .credits-section { margin-block-start: var(--s-20); padding-block-start: var(--s-10); border-block-start: 1px solid var(--rule); } .p-credits .credits-section--premiere { margin-block-start: var(--s-12); padding-block-start: 0; border-block-start: 0; } /* --- L'ENTREE ---------------------------------------------------------------- Le titre, le chapeau, puis le cartel de l'exposition elle-meme : la meme grammaire de notice que chaque piece portera plus bas, appliquee ici a la collection entiere avant qu'on y entre. */ .p-credits .credits-entree .credits-cartel--somme { margin-block: var(--s-8) 0; } .p-credits .credits-cartel--somme .credits-cartel__notice dt { flex-basis: 12em; } /* --- LE PLAN DES SALLES ------------------------------------------------------- Un bandeau de nom, pas une carte : chaque salle est un mot separe par un filet vertical, comme une plaque directionnelle a l'entree d'une aile de musee. Sept portes, sept destinations, aucun numero redondant avec celui deja porte par chaque . */ .p-credits .credits-plan { margin-block: var(--s-10) 0; } .p-credits .credits-plan ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-block: 1px solid var(--rule); } .p-credits .credits-plan li { border-inline-start: 1px solid var(--rule); } .p-credits .credits-plan li:first-child { border-inline-start: 0; } .p-credits .credits-plan a { display: flex; align-items: center; min-block-size: 44px; padding-inline: var(--s-4); font: 600 var(--t-xs)/1.3 var(--sans); color: var(--ink-soft); text-decoration: none; } .p-credits .credits-plan a:hover, .p-credits .credits-plan a:focus-visible { color: var(--accent); text-decoration: underline; } /* --- LE CARTEL, GRAMMAIRE COMMUNE -------------------------------------------- La meme notice sert pour le cartel de l'exposition (l'entree) et pour le cartel de chaque piece (la galerie) : un intitule en petites capitales, une valeur a cote, une ligne par fait. C'est un registre pose a plat, pas une phrase qui coule. */ .p-credits .credits-cartel__notice { margin: var(--s-4) 0 0; border-block-start: 1px solid var(--rule); } .p-credits .credits-cartel__notice > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-4); row-gap: var(--s-1); padding-block: var(--s-2); border-block-end: 1px solid var(--rule-soft); } .p-credits .credits-cartel__notice dt { flex: 0 0 8em; font: 600 var(--t-xs)/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); } .p-credits .credits-cartel__notice dd { flex: 1 1 14em; margin: 0; font-size: var(--t-s); } /* --- LA GALERIE : LA SEULE PORTION PLEINE LARGEUR DU CORPS ------------------- Le fond doux marque le seuil de la salle avant meme que l'oeil lise un mot : c'est la seule bande teintee du corps de page, reservee a l'endroit ou l'image est le sujet. Le sommaire et la sortie n'en recoivent pas : une teinte partout ne marquerait plus rien. */ .p-credits .credits-galerie-bande { padding-block: var(--s-14) var(--s-16); } .p-credits .credits-galerie { counter-reset: piece; padding-block-start: var(--s-6); } /* --- CHAQUE PIECE : L'OEUVRE PORTE, LE CARTEL ACCOMPAGNE --------------------- L'oeuvre est la colonne large (compo-asym par defaut, 3 contre 2) : c'est le sujet, pas une vignette. Le cartel est la colonne etroite, a cote, jamais en dessous d'un dépliant qu'il faudrait ouvrir. Un filet plein large separe deux pieces consecutives, comme le mur nu entre deux tableaux. */ .p-credits .credits-piece { counter-increment: piece; margin: 0; } .p-credits .credits-piece + .credits-piece { margin-block-start: var(--s-16); padding-block-start: var(--s-16); border-block-start: 1px solid var(--rule); } .p-credits .credits-piece__visuel, .p-credits .credits-piece figcaption { align-self: start; } .p-credits .credits-cartel__num { margin-block-end: var(--s-3); } .p-credits .credits-cartel__num::after { content: "Pi\00e8ce " counter(piece, decimal-leading-zero); } .p-credits .credits-cartel__legende { font-size: var(--t-m); max-width: none; margin-block-end: var(--s-3); } .p-credits .credits-cartel__titre { margin-block: 0 var(--s-4); font-size: var(--t-s); color: var(--ink-soft); } /* --- LE RELEVE, EN REGISTRE --------------------------------------------------- Tous les tableaux de reference (le socle, le module, les rejets, les sources internes, les polices, le releve des images) partagent le meme cadre sobre : un fond pose, un filet, comme un registre qu'on feuillette apres la visite. Le socle, cite partout ailleurs sur le site, recoit seul le filet d'accent en tete : un seul repere, pas un de plus. */ .p-credits main .table-wrap { border: 1px solid var(--rule); background: var(--bg-alt); padding: var(--s-5); margin-block: var(--s-6); } .p-credits main .table-wrap table { margin: 0; } .p-credits main .table-wrap--cle { border-block-start: 3px solid var(--accent); } /* Les sources internes : cinq projets de la flotte, puis deux composants partages. Le filet median separe les deux familles sans un mot de plus. */ .p-credits main .credits-internes tbody tr:nth-child(5) th, .p-credits main .credits-internes tbody tr:nth-child(5) td { border-block-end: 2px solid var(--rule); } /* Les polices se montrent elles-memes : le nom de chaque famille est ecrit dans sa propre police, au lieu de rester en texte de tableau neutre. */ .p-credits main .credits-polices tbody tr:nth-child(1) th { font: 500 var(--t-l)/1.3 var(--serif); } .p-credits main .credits-polices tbody tr:nth-child(2) th { font: 600 var(--t-m)/1.3 var(--sans); } /* --- LES CITATIONS OBLIGEES --------------------------------------------------- Un avis de licence recopie mot pour mot n'est pas de la prose : c'est une piece a conviction. Le filet d'accent du systeme (moment-marque) l'isole du texte qui explique autour, en italique, comme une inscription qu'on releve plutot qu'on ne redige. */ .p-credits main .credits-citation { margin-block: var(--s-5) var(--s-6); font-style: italic; color: var(--ink-soft); } /* --- LA SORTIE : BANDE SOMBRE, UN SEUL GESTE POSSIBLE ------------------------ */ .p-credits .credits-sortie { text-align: center; } .p-credits .credits-sortie .toolbar { justify-content: center; margin-block-start: var(--s-6); } /* ---- dans-votre-navigateur.css ------------------------------------- */ /* ============================================================================ CE QUI SE PASSE DANS VOTRE NAVIGATEUR Parti pris : cette page est un poste-frontiere. Elle ne raconte pas la promesse, elle la met en scene comme une ligne qu'on peut regarder : d'un cote ce que ce site sert et qui a le droit d'entrer chez vous, de l'autre votre texte, a qui il n'est jamais permis d'en sortir. Rien que des filets, des blocs et un silence exactement la ou la ligne s'arrete. Le schema qui porte cette idee est un pur decor : la classe .p- du gabarit le scope, aria-hidden le retire de l'arbre d'accessibilite, et tout ce qu'il dit est deja dit en mots, avant et apres lui, dans le corps de la page. Il ne peut donc rien affirmer de faux a personne : il ne s'adresse qu'a l'oeil. ============================================================================ */ /* --- LA SCENE : la seule chose de la page qui prend la pleine largeur ------ Le reste du texte reste a la mesure de lecture ; le schema, lui, respire : c'est la mise en scene qui distingue une demonstration d'un paragraphe. */ .p-dans-votre-navigateur .frontiere { margin-block: var(--s-10) var(--s-16); display: flex; flex-direction: column; gap: var(--s-10); } /* Le panneau du haut : tout ce qui a le droit d'entrer. Un cadre complet, comme un registre qu'on peut refermer. */ .p-dans-votre-navigateur .frontiere__bloc { border: 1px solid var(--rule); } .p-dans-votre-navigateur .frontiere__ligne { display: grid; grid-template-columns: 1fr 1fr; border-block-end: 1px solid var(--rule); } .p-dans-votre-navigateur .frontiere__bloc > .frontiere__ligne:last-child { border-block-end: 0; } .p-dans-votre-navigateur .frontiere__entete { background: var(--bg-alt); } .p-dans-votre-navigateur .frontiere__dehors, .p-dans-votre-navigateur .frontiere__ici { display: flex; flex-direction: column; justify-content: center; padding: var(--s-4) var(--s-5); font: 600 var(--t-s)/1.35 var(--sans); } .p-dans-votre-navigateur .frontiere__dehors { color: var(--ink-soft); } /* La ligne verticale elle-meme : la limite de l'appareil. Chaque rangee ne dessine que son propre segment ; empilees, elles font un seul filet continu, du premier mot au dernier. C'est la SEULE frontiere du schema. */ .p-dans-votre-navigateur .frontiere__ici { color: var(--ink-mid); border-inline-start: 1px solid var(--ink); } /* La condition d'une ligne du registre. Deux des quatre choses que nous servons ne partent que si le navigateur n'a pas son propre traducteur : le schema serait faux s'il les donnait pour acquises, et lourd s'il en faisait une colonne de plus. Une seconde ligne en second plan, sous l'intitule, dans la meme cellule. Rien de neuf : la graisse et la couleur du texte secondaire du systeme, deja employees deux fois dans ce fichier. */ .p-dans-votre-navigateur .frontiere__condition { display: block; margin-block-start: var(--s-1); font: 400 var(--t-xs)/1.35 var(--sans); color: var(--ink-mid); } .p-dans-votre-navigateur .frontiere__zone { font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); } /* Le panneau du bas : une seule ligne, seule, sans cadre. Ce qui la distingue du registre au-dessus n'est pas une couleur neuve : c'est son isolement, et le fait qu'elle ne remplit que la moitie de son propre panneau. Une ligne qui n'a nulle part ou aller ne traverse pas la page pour le dire. */ .p-dans-votre-navigateur .frontiere__bloc--jamais { border: 0; max-width: 22rem; margin-inline-start: auto; } .p-dans-votre-navigateur .frontiere__bloc--jamais .frontiere__ligne { border-block-end: 0; } .p-dans-votre-navigateur .frontiere__bloc--jamais .frontiere__ici { border-inline-start: 3px solid var(--accent); color: var(--ink); font-weight: 700; } .p-dans-votre-navigateur .frontiere__jamais { display: block; margin-block-start: var(--s-1); font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } @media (min-width: 56rem) { .p-dans-votre-navigateur .frontiere { margin-block: var(--s-16) var(--s-20); } .p-dans-votre-navigateur .frontiere__dehors, .p-dans-votre-navigateur .frontiere__ici { padding: var(--s-5) var(--s-6); } } @media print { .p-dans-votre-navigateur .frontiere__bloc { break-inside: avoid; } } /* --- LA PREUVE LA PLUS COURTE ----------------------------------------------- Le controle a l'avion : une seule bande d'accent, la meme que celle deja posee par .note et .badge dans le systeme. Rien d'invente, une reprise. */ .p-dans-votre-navigateur .moment-marque { margin-block: var(--s-6); } /* ---- dictionnaire.css ---------------------------------------------- */ /* ============================================================================ .p-dictionnaire — LE DICTIONNAIRE DE PHRASES HUMAINES PARTI PRIS : cette page EST un fonds de bibliotheque qu'on parcourt rayon par rayon, pas un instrument. Le fonds se compte avant de se lire : quatre chiffres cote a cote des l'ouverture. Chaque section porte ensuite son repere de classement, comme une etiquette de rayonnage. Les fiches, qu'elles soient montrees en exemple ou trouvees par la recherche, ont l'air de cartes de catalogue plutot que de lignes perdues dans un tableau. Densite assumee, reperes partout : l'exact contraire de la boite de traduction, qui est un instrument nu ou rien ne doit se mettre devant le champ. Rien ici n'invente une couleur, une police ou un effet : tout compose avec les jetons du systeme et les primitives de _socle.css, sous la seule portee .p-dictionnaire. ============================================================================ */ /* --- LE CORPS : le conteneur general, et son compteur de rayons ----------- */ .p-dictionnaire .dico-corps { counter-reset: rayon; } /* --- LE RELEVE, EN OUVERTURE ------------------------------------------------ Quatre chiffres repris tels quels de la phrase qui les explique plus bas (memes cles data-chiffre), mais mis en avant des l'ouverture : c'est ce qui doit se voir avant toute lecture, comme le compteur d'une bibliotheque qu'on affiche a l'entree. En dessous de 36rem les quatre valeurs empilent avec un simple filet horizontal ; au-dela elles se rangent en compartiments separes par un filet vertical, comme des tiroirs de catalogue. */ .p-dictionnaire .dico-releve { margin-block: var(--s-10) var(--s-8); } .p-dictionnaire .dico-releve__grille { border-block: 1px solid var(--rule); padding-block: var(--s-6); } .p-dictionnaire .dico-releve__grille > .moment-chiffre { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-4); } .p-dictionnaire .dico-releve__grille > .moment-chiffre:first-child { border-block-start: 0; padding-block-start: 0; } @media (min-width: 36rem) { .p-dictionnaire .dico-releve__grille > .moment-chiffre { border-block-start: 0; padding-block-start: 0; border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-6); } .p-dictionnaire .dico-releve__grille > .moment-chiffre:first-child { border-inline-start: 0; padding-inline-start: 0; } } /* --- LE COMPTOIR DE RECHERCHE ------------------------------------------------ Le meme cadre que l'outil des pages qui calculent : un filet et un trait d'accent en tete. Ce qui change ici, c'est ce qu'il encadre : un fichier qu'on consulte, pas un calcul qu'on lance. */ .p-dictionnaire .dico-comptoir { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); padding: var(--s-6); } /* --- LES RAYONS -------------------------------------------------------------- Chaque section du fonds est un rayon : un filet la separe de la precedente, un repere discret la numerote avant son titre. Le repere est purement visuel (aria-hidden) : le titre qui suit porte deja le vrai nom de la section pour qui l'ecoute, la numerotation n'ajoute rien au sens, juste au reperage de qui parcourt l'ecran des yeux. */ .p-dictionnaire .dico-rayon { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); } .p-dictionnaire .dico-rayon__repere { counter-increment: rayon; font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-mid); margin-block-end: var(--s-3); } .p-dictionnaire .dico-rayon__repere::before { content: "Rayon " counter(rayon, decimal-leading-zero); } /* --- LES FICHES, EN CARTES DE CATALOGUE -------------------------------------- .dictionnaire-fiche est le nom que site\assets\js\dictionnaire-recherche.js donne DEJA a chaque resultat qu'il construit : en l'employant aussi pour les trois specimens ecrits ici, une fiche trouvee par la recherche a exactement l'air d'une fiche montree en exemple, parce que c'est le meme fonds. Le filet d'ink en tete reprend le langage des .card de l'accueil : un objet physique qu'on pourrait tenir. */ .p-dictionnaire .dictionnaire-fiche { border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); padding: var(--s-5); } .p-dictionnaire .dictionnaire-fiche + .dictionnaire-fiche { margin-block-start: var(--s-6); } .p-dictionnaire .dictionnaire-fiche caption { color: var(--ink-soft); } .p-dictionnaire .dictionnaire-fiche td { font-variant-numeric: tabular-nums; } /* --- LE RELEVE PAR LANGUE, EN REGISTRE --------------------------------------- Une langue, un compte : le chiffre pese plus lourd que le reste de la ligne, comme un total souligne dans un registre tenu a la main plutot qu'une colonne parmi d'autres. */ .p-dictionnaire .dico-langues td:last-child { font: 600 var(--t-l)/1 var(--serif); font-variant-numeric: tabular-nums; } /* ---- donnees.css --------------------------------------------------- */ /* ============================================================================ .p-donnees — LE GUICHET DE RETRAIT Cette page EST un guichet de retrait : chaque famille de données y est un comptoir numéroté, étiqueté adresse / format / licence, prêt à emporter. Toute la mise en scène sert une seule mesure : le temps qu'il faut à quelqu'un pour repartir avec ce qu'il cherchait. Rien n'est là pour se faire admirer ; tout est là pour se faire prendre. Trois gestes portent ce parti pris, uniquement composés depuis le socle et le système, aucune matière neuve : 1. Un comptoir d'index en pleine largeur, en tickets numérotés, juste après l'ouverture : on y lit d'un coup d'œil les 15 comptoirs de la page. 2. Le corps reprend la même numérotation sur chaque h2 : le repère du comptoir et celui de la section sont le même chiffre. 3. Chaque adresse et chaque bloc de commande porte sa propre étiquette (fond, filet), et les tableaux-catalogues débordent de la colonne de lecture pour se donner la place d'un vrai comptoir ; les tableaux qui expliquent plutôt qu'ils ne listent restent, eux, dans la colonne. ============================================================================ */ /* --- L'OUVERTURE : on entre vite, rien ne retarde le comptoir. ------------- */ .p-donnees .page-head { padding-block: var(--s-8) var(--s-6); } /* --- LE COMPTOIR D'INDEX ---------------------------------------------------- Le sommaire n'est plus une liste à puces : c'est un mur de guichets numérotés, posé en pleine largeur avant que la lecture ne commence. Chaque étiquette est une cible tactile entière, pas seulement son texte. */ .p-donnees .comptoir-grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); counter-reset: guichet; } .p-donnees .comptoir-grille > li { counter-increment: guichet; position: relative; outline: 1px solid var(--rule); outline-offset: -1px; } .p-donnees .comptoir-grille > li::before { content: counter(guichet, decimal-leading-zero); position: absolute; inset-inline-start: var(--s-4); inset-block-start: var(--s-4); font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; } .p-donnees .comptoir-grille a { display: flex; align-items: flex-end; min-height: 84px; padding: var(--s-8) var(--s-4) var(--s-3); font: 600 var(--t-s)/1.35 var(--sans); color: var(--ink); text-decoration: none; } .p-donnees .comptoir-grille a:hover, .p-donnees .comptoir-grille a:focus-visible { color: var(--accent); } /* --- LE CATALOGUE : le corps de la page ------------------------------------ Une grille à trois pistes : une colonne de lecture au centre, deux marges qui ne servent qu'à une chose, laisser un tableau-catalogue déborder jusqu'à la largeur du système. Rien d'autre n'y touche : les paragraphes, titres, notes et états restent dans la piste centrale par défaut. */ .p-donnees .catalogue { display: grid; grid-template-columns: minmax(0, 1fr) min(55rem, 100%) minmax(0, 1fr); column-gap: clamp(var(--s-6), 4vw, var(--s-10)); counter-reset: guichet; } .p-donnees .catalogue > * { grid-column: 2; } /* Chaque h2 reprend le chiffre de son guichet au comptoir : le même repère des deux côtés, pour qu'on sache qu'on est au bon endroit. */ .p-donnees .catalogue > h2 { counter-increment: guichet; position: relative; padding-inline-start: var(--s-12); margin-block-start: var(--s-16); } .p-donnees .catalogue > h2:first-child { margin-block-start: 0; } .p-donnees .catalogue > h2::before { content: counter(guichet, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.04em; color: var(--accent); font-variant-numeric: tabular-nums; } @media (max-width: 39.99rem) { .p-donnees .catalogue > h2 { padding-inline-start: 0; } .p-donnees .catalogue > h2::before { position: static; display: block; margin-block-end: var(--s-2); } } /* Le tableau ou le bloc de commande déborde jusqu'à la largeur du système : c'est le comptoir qui s'ouvre. Un seul tableau reste dans la colonne de lecture, celui qui explique un barème plutôt qu'il ne liste des adresses : voir .table-lecture, posée à la main sur ce tableau-là seulement. */ .p-donnees .catalogue > .table-wrap { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: var(--wrap); } .p-donnees .catalogue > .table-wrap.table-lecture { grid-column: 2; max-width: none; width: auto; } /* Le tableau qui liste des adresses porte l'étiquette de la donnée en tête de ligne dans la police des titres : une plaque, pas un intitulé de colonne. */ .p-donnees .catalogue .table-wrap tbody th { font-family: var(--serif); } /* --- LES ÉTIQUETTES À EMPORTER ---------------------------------------------- Une adresse ou une commande, posée comme un objet qu'on décroche du mur : fond, filet, jamais nue dans le paragraphe. */ .p-donnees .catalogue code { font: 400 0.92em var(--sans); background: var(--bg-alt); border: 1px solid var(--rule); padding: 0.1em 0.45em; } /* UN SEUL ASCENSEUR PAR CAISSON. Ces vivent tous dans une .table-wrap, qui porte deja overflow-x:auto du systeme et recoit le tabindex qui la rend defilable au clavier. Un second overflow sur le lui-meme absorbait le debordement : l'enveloppe ne bougeait plus, et la zone qui defilait vraiment n'etait atteignable par personne sans souris. Mesure a 360 px : 377 px de code hors de vue sur /donnees. */ .p-donnees .catalogue pre { margin: 0; font: 400 0.9em/1.7 var(--sans); } .p-donnees .catalogue pre code { background: none; border: 0; padding: 0; font-size: 1em; } .p-donnees .catalogue > .table-wrap:has(pre) { background: var(--bg-alt); border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); padding: var(--s-5) var(--s-6); } /* --- LES TROIS FORMULES DE CITATION ----------------------------------------- Trois étiquettes rangées côte à côte plutôt qu'empilées : elles se comparent d'un regard, on décroche celle qui sert. Le rythme est celui de .compo-trio, posé par le socle ; cette règle n'ajoute que la présentation de chaque étiquette elle-même. */ .p-donnees .etiquettes > div { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-5) var(--s-6); } .p-donnees .etiquettes h3 { margin-block-start: 0; font-size: var(--t-m); } .p-donnees .etiquettes p:last-child { margin-block-end: 0; } /* ---- education.css ------------------------------------------------- */ /* ============================================================================ PARTI PRIS — education.css Cette page EST une fiche de préparation, celle qu'un enseignant garde ouverte à côté de son cahier de textes avant une séance : un bandeau d'ouverture qui referme sur un filet, à côté d'une plaque « en bref » qui répond tout de suite aux questions qu'on se pose avant d'amener un outil en classe (compte, réseau, avis juridique, hors connexion) ; un cadre où le consentement des mineurs est réglé une bonne fois ; un déroulé NUMÉROTÉ qui suit l'ordre réel d'une heure de cours ; deux repères posés côte à côte parce qu'ils se lisent ensemble ; une rubrique matériel à part, parce que c'est elle qu'on relit la veille ; et une sortie de fiche, cadrée de noir, qui ne cède rien sur ce que l'outil ne remplace pas. Six mouvements sont numérotés par un compteur CSS pose sur les h2 (01 à 06, jamais un chiffre écrit dans le contenu) ; Sources reste hors compte, en annexe — une fiche numérote ses étapes, pas ses références. Composé entièrement avec le socle (compo-asym, compo-etapes, compo-duo, compo-trio, moment-chiffre, moment-phrase, apart) : aucun jeton, aucune couleur, aucun arrondi n'est ajouté ici. ============================================================================ */ /* --- L'OUVERTURE : le bandeau et sa plaque « en bref », deux colonnes à partir de 56rem par .compo-asym du socle, refermées par un même filet. */ .p-education .cartouche { border-block-end: 1px solid var(--rule); padding-block-end: var(--s-8); } .p-education .releve-liste { display: flex; flex-direction: column; margin-block-start: var(--s-4); } .p-education .releve-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--rule); font-size: var(--t-s); } .p-education .releve-ligne:last-child { border-block-end: 0; } .p-education .releve-ligne dt { color: var(--ink-mid); } .p-education .releve-ligne dd { margin: 0; font-weight: 600; text-align: end; } /* --- LES SIX MOUVEMENTS : un compteur CSS sur les h2, en retrait, jamais un numéro écrit dans le contenu. Sources n'en fait pas partie : une fiche numérote ce qu'on traverse, pas ce qu'on cite. */ .p-education { counter-reset: mouvement; } .p-education h2.mouvement { counter-increment: mouvement; position: relative; padding-inline-start: var(--s-12); } .p-education h2.mouvement::before { content: counter(mouvement, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 0.15em; font: 600 var(--t-s)/1 var(--sans); color: var(--accent); font-variant-numeric: tabular-nums; } /* Sur fond noir, le rouge d'identité seul n'a plus l'écart requis : sa variante claire, déjà prévue par le système pour cette surface précise. */ .p-education .limite h2.mouvement::before { color: var(--accent-on-dark); } /* --- LE DÉROULÉ : compo-etapes du socle, ouvert par le chiffre qui en dit la portée avant le détail — la même figure que reprend LE MATÉRIEL plus bas. */ .p-education .chiffre-cle { margin-block-end: var(--s-8); padding-block-end: var(--s-6); border-block-end: 1px solid var(--rule); } .p-education .deroule > li h3 { margin-block-start: 0; font-size: var(--t-l); } /* --- LES REPÈRES : deux sections qui se lisent ensemble, côte à côte à partir de 56rem, séparées par un filet plutôt que par une bande. */ @media (min-width: 56rem) { .p-education .reperes .compo-duo > * + * { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-8); } } /* --- LE MATÉRIEL : la rubrique qu'on relit la veille, marquée d'un filet d'accent en tête ; ses trois champs à plat, comme une liste de réglages. */ .p-education .materiel { border-block-start: 3px solid var(--accent); } .p-education .materiel-champs > div { border-block-start: 3px solid var(--ink-soft); padding-block-start: var(--s-4); } .p-education .materiel-champs h3 { margin-block-start: 0; } /* --- LA LIMITE : la seule bande profonde de la page, cadrée des deux côtés comme un encart qu'on n'a pas le droit de sauter en le lisant en diagonale. */ .p-education .limite { border-block: 3px solid var(--accent-on-dark); } /* --- LA SORTIE DE FICHE : sources et geste suivant, hors mouvement compté. */ .p-education .sortie-fiche { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-10); } /* ---- glossaires.css ------------------------------------------------ */ /* .p-glossaires — LA FICHE DE TERMINOLOGIE. Ce que cette page EST : un glossaire n'est pas un texte qui se lit au fil, c'est un appareil de reference qu'on consulte. Chaque entree aligne donc les memes champs a la meme place d'une fois sur l'autre — le terme, ses rendus par langue, sa nuance, son piege, sa source — et la prose qui explique reste dans sa colonne etroite pendant que l'appareil qui recense prend toute la largeur pour respirer. Le regard doit reconnaitre la meme architecture en passant d'une entree a l'autre, comme sur une fiche de bibliotheque. Deux niveaux de density assumes : le terme « Erreur » recoit la demonstration complete (fiche a liseré rouge, les sept rendus, la nuance, le piège, la source) parce que c'est ce que les donnees permettent ; les trois autres, la source elle-meme les donne « en bref », donc ils restent un tableau dense a liseré noir plutot qu'une fiche complete qui feindrait une exhaustivite que la matiere n'a pas. */ /* --- LA FICHE VEDETTE : le terme demontre en entier. ---------------------- Meme grammaire que les cadres du systeme (filet + accent en tete), posee en instrument de consultation : le terme et son intro restent en prose hors cadre, le cadre ne porte que ce qui se consulte (rendus, champs). */ .p-glossaires .fiche-terme { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); background: var(--bg); padding: var(--s-6) clamp(var(--s-5), 4vw, var(--s-8)); margin-block: var(--s-8); } .p-glossaires .fiche-terme > .table-wrap { margin-block-end: var(--s-2); } /* La liste de champs : le terme, sa nuance, son piège, sa source, toujours dans cet ordre et toujours au meme endroit. A l'etroit, l'etiquette domine son champ en petite capitale ; des qu'il y a la place, les deux s'alignent en deux colonnes rigoureuses, l'etiquette a largeur fixe, la valeur au fil. */ .p-glossaires .dl-fiche { margin: 0; padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule); } .p-glossaires .dl-fiche dt { font: 700 var(--t-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); } .p-glossaires .dl-fiche dd { margin: 0 0 var(--s-5); max-width: 68ch; } .p-glossaires .dl-fiche dd:last-child { margin-block-end: 0; } @media (min-width: 46rem) { .p-glossaires .dl-fiche { display: grid; grid-template-columns: 8.5rem 1fr; column-gap: var(--s-6); row-gap: var(--s-4); } .p-glossaires .dl-fiche dt { padding-block-start: 0.2em; } .p-glossaires .dl-fiche dd { margin: 0; } .p-glossaires .dl-fiche > :nth-child(n+3) { padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-soft); } } /* --- LE CADRE DENSE : les entrees condensees, sans carte complete -------- Meme famille de cadre, liseré d'encre plutot que d'accent : c'est une reference dense, pas la demonstration vedette. */ .p-glossaires .cadre-reference { border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); background: var(--bg); padding: var(--s-5); margin-block: var(--s-8); } .p-glossaires .cadre-reference .table-wrap { margin: 0; } /* --- LES DEUX MOITIES DU PERIMETRE ---------------------------------------- Ce qui entre dans les cinq domaines, ce qui en sort : deux blocs egaux qui se lisent cote a cote des que la largeur le permet, l'un sous l'autre sinon. .compo-duo du socle fait deja tout le travail responsive ; il ne manque que l'espacement au-dessus et au-dessous, propre a cette page. */ .p-glossaires .compo-duo { margin-block: var(--s-8); } /* --- LES CHIFFRES QUI FONT REFERENCE -------------------------------------- Un compte qu'on doit pouvoir reperer d'un regard, sans lui faire quitter la phrase qui le porte : la donnee garde son terrain, seule sa graisse change. */ .p-glossaires [data-chiffre] { font: 700 1.2em/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--accent); } /* ---- hors-connexion.css -------------------------------------------- */ /* ============================================================================ PARTI PRIS — hors-connexion.css Cette page EST un écran de secours : deux plaques posées côte à côte (l’une sous l’autre en dessous de 36rem), sans un mot de plus que nécessaire. La plaque de gauche est pleine et bordée de rouge en tête : ce qui tient encore sans réseau, coché comme le reste du système coche un acquis. La plaque de droite reste nue, bordée d’un simple filet, ses cases jamais cochées : ce qui attend le réseau, sans qu’aucune couleur d’alerte ne vienne dramatiser une simple absence de connexion. La différence se voit dans la structure — remplie contre nue, cochée contre vide — jamais dans une teinte inventée. Composée pour peser le moins possible : cette page est servie depuis la réserve hors ligne, donc rien ici qu’un peu de grille et quelques bordures. Aucune bande, aucun fond profond, aucune police, aucune image : le blanc du système et son rythme le plus serré suffisent à un écran qui doit s’afficher tout de suite, sans réseau, parfois sur une batterie qu’on surveille aussi. ============================================================================ */ /* --- LES DEUX VERSANTS ------------------------------------------------------ Une grille de deux, jamais plus : le regard doit comparer, pas explorer. */ .p-hors-connexion .versants { display: grid; gap: var(--s-6); } @media (min-width: 36rem) { .p-hors-connexion .versants { grid-template-columns: 1fr 1fr; } } .p-hors-connexion .versant { padding: var(--s-5); border-block-start: 1px solid var(--rule); } .p-hors-connexion .versant h2 { margin-block-start: 0; font-size: var(--t-l); } .p-hors-connexion .versant p, .p-hors-connexion .versant ul { margin-block-end: 0; } /* La plaque qui tient : remplie, bordée de rouge en tête, cochée comme un acquis — la même coche que le reste du système emploie déjà. */ .p-hors-connexion .versant--tient { background: var(--bg-alt); border-block-start: 3px solid var(--accent); } /* La plaque qui attend : nue, une case jamais cochée plutôt qu’une couleur d’alerte. Même gabarit de liste que .checklist, un carré vide au lieu du coche et la même épaisseur de trait, pour que les deux versants se lisent comme un seul instrument, pas comme deux styles différents. */ .p-hors-connexion .versant--attend ul { list-style: none; padding: 0; } .p-hors-connexion .versant--attend li { position: relative; padding-inline-start: 1.7em; margin-block-end: 0.45em; color: var(--ink-mid); } .p-hors-connexion .versant--attend li:last-child { margin-block-end: 0; } .p-hors-connexion .versant--attend li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.3em; inline-size: 0.85em; block-size: 0.85em; border: 2.5px solid var(--rule); } /* --- L’IMPRESSION ----------------------------------------------------------- Une instruction de secours doit rester lisible imprimée : une seule colonne, jamais deux plaques côte à côte sur une feuille de papier. */ @media print { .p-hors-connexion .versants { display: block; } .p-hors-connexion .versant + .versant { margin-block-start: var(--s-6); } } /* ---- impact.css ---------------------------------------------------- */ /* ============================================================================ PARTI PRIS — LE TABLEAU DE MESURES. Cette page EST un tableau de mesures accroche au mur d'un service public : chaque chiffre est une plaque relevee sur les fichiers reellement ecrits, posee a plat, alignee sur les autres, jamais une vitrine. Le socle donne .moment-chiffre pour un nombre isole d'une legende courte ; ici la plupart des marqueurs vivent au milieu d'une phrase qui dit deja ce qu'ils comptent, et cette phrase ne se coupe pas pour fabriquer une legende neuve : c'est donc le chiffre qui change d'echelle DANS la phrase, jamais l'inverse. Un changement d'echelle plutot qu'une extraction : ni mot ajoute, ni mot perdu, le HTML ne fait que redistribuer les memes phrases entre des balises. Trois mouvements, trois fonds. Un plateau clair pour les six lectures d'ouverture, chacune sur sa propre graduation, comme des cadrans en ligne. Une bande douce pour les deux nuances qui corrigent une lecture trop rapide. Une bande lavis, la SEULE teintee de tout le gabarit, pour la chose qui n'a pas de plaque : aucune audience, jamais mesuree, jamais publiee. Elle recoit --t-3xl, la plus grande echelle du systeme, plus grande qu'aucun chiffre reel plus haut sur cette page : le vide choisi tient la place du plus gros nombre qu'on n'affichera jamais. Tenue a --accent, mesure a 8,77:1 sur ce fond precis dans jetons.md (la ligne "bande") : rien n'est invente ici, la teinte et le contraste sont ceux deja releves par le skill. ============================================================================ */ /* --- L'OUVERTURE : un filet sous le chapeau, rien de plus. ----------------- */ .p-impact .p-impact__head { border-block-end: 1px solid var(--rule); padding-block-end: var(--s-6); } /* --- LE PLATEAU DE MESURES : six lectures, trois postes. Chaque poste porte sa propre graduation en tete, comme des cadrans alignes sur un mur. */ .p-impact .p-impact__tableau { margin-block-start: var(--s-8); align-items: start; } .p-impact .p-impact__releve { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-5); } .p-impact .p-impact__releve .discret { margin-block-end: var(--s-3); } /* La phrase de lecture reste un texte courant, en petit : c'est le chiffre qu'elle porte qui doit sauter aux yeux, jamais la phrase qui l'explique. */ .p-impact .p-impact__lecture { font-size: var(--t-s); line-height: 1.7; color: var(--ink-mid); margin: 0; } .p-impact .p-impact__lecture [data-chiffre] { font: 700 var(--t-xl)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* La ligne de certification ferme le plateau entier : elle vaut pour les six lectures qui precedent, pas pour la seule troisieme phrase d'ou elle vient dans le contenu d'origine (voir le HTML : elle y a ete deplacee telle quelle, pas un mot change). */ .p-impact .p-impact__certif { margin-block-start: var(--s-8); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); } /* --- LES NUANCES : deux corrections cote a cote, chacune sous la marque d'accent du systeme. Le h3 colle au sommet de sa marque, comme au socle. */ .p-impact .p-impact__nuances h3 { margin-block-start: 0; } /* --- LE SILENCE : la seule bande teintee de la page, et la seule plaque sans chiffre. Un tiret genere en CSS, jamais ecrit dans le HTML comme un mot : c'est un repere visuel, pas une information, donc aria-hidden sur son bloc dans le HTML, exactement comme le socle traite deja une jauge vide. */ .p-impact .p-impact__silence-lecture { margin-block: var(--s-6) var(--s-8); } .p-impact .p-impact__silence-lecture::before { content: "\2014"; display: block; font: 600 var(--t-3xl)/1 var(--serif); color: var(--accent); letter-spacing: -0.02em; } /* --- LA VERIFICATION : le rappel qu'on peut tout recompter soi-meme prend le cadre d'aparte du socle, avant les deux notes qui referment la page. */ .p-impact .p-impact__verif .apart { margin-block: var(--s-6) var(--s-8); } /* ---- index.css ----------------------------------------------------- */ /* ============================================================================ .p-index — L'ACCUEIL PARTI PRIS : cette page est un instrument de mesure, pas une vitrine. Le premier ecran EST le cadran : la boite arrive tout de suite, rien ne se met devant elle, le titre l'annonce en un seul trait tres grand. Tout ce qui suit redescend en paliers de plus en plus calmes, comme les graduations d'un appareil qu'on lit de haut en bas : une bande de demonstration qui finit sur sa piece a conviction, un panneau de portes, un tableau de bord chiffre a filets, une notice de tolerance nettement marquee tout en bas. Rien ne s'anime pour se faire desirer : une mesure se lit, elle ne se joue pas. ============================================================================ */ /* --- LE CADRAN : le premier ecran ------------------------------------------ Moins de respiration que la bande par defaut, dans les deux sens : la boite doit apparaitre le plus tot possible, sans ecran de garde devant elle. */ .p-index .idx-cadran { padding-block: var(--s-8) var(--s-10); } /* Le titre d'accueil prend l'echelle que le systeme lui reserve (--t-3xl, « h1 d'accueil ») : plafonne a 20ch, il se casse sur deux ou trois lignes et pese sur l'ecran comme un cadran, la ou une page interieure garde son h1 en --t-2xl sur une seule ligne. */ .p-index .idx-cadran h1 { font-size: var(--t-3xl); line-height: 1.04; letter-spacing: -0.022em; max-width: 20ch; } /* Le chapeau colle a la boite : plus rien ne s'interpose. */ .p-index .idx-cadran .lead { margin-block-end: 0; } /* --- LA DEMONSTRATION : la piece a conviction ------------------------------- La bande qui prouve la promesse se ferme sur l'image de l'accueil, separee de l'argument par un filet, comme on pose une piece sur l'etabli apres en avoir fini l'explication. */ .p-index .idx-piece { margin-block-start: var(--s-10); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); } /* --- LA LECTURE : le tableau de bord chiffre -------------------------------- Chaque mesure porte sa propre graduation au lieu d'un simple espacement : un filet fin en tete, comme une echelle qu'on lit de haut en bas. */ .p-index .idx-lecture .grid > * { border-block-start: 1px solid var(--dark-line); padding-block-start: var(--s-5); } /* .moment-chiffre porte --ink-mid pour sa legende, juste pour une surface claire : sur le fond sombre de cette bande, c'est --on-dark-muted qui tient le contraste (mesure : 11,7:1 sur --bg-deep). */ .p-index .idx-lecture .moment-chiffre span { color: var(--on-dark-muted); } /* Le marqueur data-chiffre vit DANS le , comme reperage pour recompter.js quand un nombre est suivi d'une unite qui ne doit pas etre remplacee avec lui (« Mo »). Ce n'est pas la legende que .moment-chiffre span habille par defaut : il reprend la taille et la couleur du gros nombre qui le porte. */ .p-index .idx-lecture .moment-chiffre b span { font-size: inherit; color: inherit; max-width: none; } /* ---- langues.css --------------------------------------------------- */ /* ============================================================================ .p-langues — LES SEPT LANGUES PARTI PRIS : cette page est un atlas. Le français en est le foyer, seul publié aujourd'hui ; les six autres sont des planches en préparation qui rayonnent autour de lui — le foyer occupe donc toute la largeur, les six autres suivent en grille. Chaque planche montre sa langue dans SA PROPRE écriture, en grand, comme un blason plutôt qu'une étiquette de formulaire. Un index en tête sert de légende de carte ; le tableau des écarts, en fin de parcours, est l'appendice chiffré qui referme l'atlas. La donnée est dense : la mise en scène l'assume plutôt que de la diluer dans du texte courant. ============================================================================ */ /* --- L'ORIENTATION : le compte qui ouvre l'atlas --------------------------- */ .p-langues .atlas-orientation { padding-block-end: var(--s-10); } .p-langues .atlas-orientation > * + * { margin-block-start: var(--s-5); } /* Le compte du jour, isolé par le socle en moment-phrase : le chiffre lui-même reçoit un poids et un alignement de chiffre supplémentaires. */ .p-langues .moment-phrase [data-chiffre] { font-weight: 700; font-variant-numeric: tabular-nums; } /* --- L'INDEX : la légende de l'atlas, une entrée par langue, dans son écriture */ .p-langues .atlas-index { padding-block-end: var(--s-8); } .p-langues .atlas-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); } .p-langues .atlas-index a { display: inline-flex; align-items: center; min-block-size: 44px; border: 1px solid var(--rule); padding-inline: var(--s-4); font: 500 var(--t-base)/1 var(--serif); text-decoration: none; color: var(--ink); transition: border-color 160ms var(--easing), color 160ms var(--easing); } .p-langues .atlas-index a:hover { border-color: var(--accent); color: var(--accent); } /* --- LES ENTRÉES : une planche par langue, sa propre écriture en évidence -- */ /* La grille elle-même vient du socle, .compo-trio : on ne fait qu'y ajouter le compteur et le foyer. */ .p-langues .atlas-entrees { counter-reset: planche; } .p-langues .atlas-entree { position: relative; counter-increment: planche; background: var(--bg); border: 1px solid var(--rule); padding: var(--s-6); } .p-langues .atlas-entree::before { content: counter(planche, decimal-leading-zero); position: absolute; inset-block-start: var(--s-4); inset-inline-end: var(--s-5); font: 600 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-mid); } .p-langues .atlas-entree > h2 { margin-block-start: 0; padding-inline-end: var(--s-10); } .p-langues .atlas-entree .table-wrap { margin-block-start: var(--s-5); } .p-langues .atlas-entree > p:last-child { margin-block-end: 0; } /* Le foyer : la seule langue déjà publiée sur ce site, elle prend toute la largeur et porte le seul filet d'accent de la page. */ .p-langues .atlas-entree--foyer { grid-column: 1 / -1; border-inline-start: 3px solid var(--accent); } /* Le nom courant en petite capitale, l'écriture propre en grand juste dessous : c'est elle, et non l'exonyme français, qui identifie la planche. */ .p-langues .atlas-entree__label { display: block; font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mid); } .p-langues .atlas-entree__nom { display: block; font: 500 var(--t-2xl)/1.15 var(--serif); letter-spacing: -0.015em; text-align: start; margin-block-start: var(--s-1); } /* --- LA MARGE : les notes qui accompagnent l'atlas sans en être le corps --- */ .p-langues .atlas-marge { padding-block-start: var(--s-10); } .p-langues .atlas-marge > * + * { margin-block-start: var(--s-4); } .p-langues .atlas-marge + .atlas-marge { margin-block-start: var(--s-10); padding-block-start: var(--s-10); border-block-start: 1px solid var(--rule); } /* --- LE LEDGER : l'appendice chiffré qui referme l'atlas ------------------- */ .p-langues .atlas-ledger > * + * { margin-block-start: var(--s-5); } .p-langues .atlas-ledger tbody th { font-family: var(--serif); font-size: var(--t-base); } .p-langues .atlas-ledger tbody td { font: 600 var(--t-l)/1 var(--serif); font-variant-numeric: tabular-nums; text-align: end; } /* ---- licence.css --------------------------------------------------- */ /* ============================================================================ /licence — CE QUE CETTE PAGE EST Un document opposable, pas un article qu'on parcourt. Cette page engage juridiquement l'association : chaque clause doit pouvoir se retrouver et se citer en quelques secondes, comme un contrat qu'on feuillette pour retomber sur LA ligne qui compte. Une seule idee, tenue partout : - le tableau des pieces, en tete, change de fond et de largeur : c'est le REGISTRE, l'index du document. Chacune de ses lignes est un lien direct vers sa clause plus bas — on y retrouve une piece en un clic, jamais en cherchant dans le fil du texte ; - le corps se lit comme un texte de loi : chaque section devient une CLAUSE numerotee par un compteur CSS, jamais une puce inventee. Le numero grossit et prend sa propre marge a partir de 56rem, comme l'article qu'on cite dans un renvoi ; - une clause qui en suit une autre se ferme par un simple filet, jamais par une couleur : la gravite vient du silence et de la ligne, pas d'un accent qui se repeterait huit fois et ne dirait plus rien nulle part ; - les trois formules d'attribution copiables sortent du texte courant dans un encadre net, au meme filet que .moment-marque dans le socle : ce qu'on doit reprendre AU MOT PRES ne se confond jamais avec ce qu'on lit en passant ; - les sources, en cloture, ne sont pas des clauses de plus : ce sont des pieces jointes, lettrees A, B, C comme les annexes d'un contrat, pour qu'on ne les confonde jamais avec ce qui engage l'association. La clause du code, avec son [À COMPLÉTER], reste une clause comme les autres, ni agrandie ni reduite : l'alerte du systeme suffit a la distinguer, la mise en scene n'a pas a en rajouter et ne la deguise pas. ============================================================================ */ /* ---------- LE REGISTRE — le tableau des pieces, sorti du fil, en index ---- .bande et .bande--douce viennent du socle tels quels, poses dans le HTML : rien a ecrire ici pour le fond ni pour la largeur. Le tableau garde son habillage systeme (table-wrap, caption, th/td, lien souligne par defaut) ; la seule chose ajoutee est le trait qui marque l'entree dans le registre, le meme poids que la feuille du systeme reserve deja a thead th. */ .p-licence .registre { border-block-start: 3px solid var(--ink); padding-block-start: var(--s-8); } /* ---------- LES CLAUSES — le corps du document, article par article ------- */ .p-licence .clauses { list-style: none; margin: 0; padding: 0; counter-reset: clause; } .p-licence .clause { counter-increment: clause; position: relative; } .p-licence .clause h2 { margin-block-start: 0; } /* Le numero : un petit intitule au telephone, un chiffre serif installe dans sa propre marge des que la page a la largeur de le porter. Purement generee, comme .compo-etapes le fait deja ailleurs dans la flotte pour une autre suite numerotee : le mecanisme est repris, l'allure ne l'est pas. */ .p-licence .clause::before { content: "Article " counter(clause); display: block; font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mid); margin-block-end: var(--s-3); } @media (min-width: 56rem) { .p-licence .clause { padding-inline-start: 6rem; } .p-licence .clause::before { content: counter(clause); position: absolute; inset-inline-start: 0; inset-block-start: 0.1em; inline-size: 4.5rem; text-align: end; text-transform: none; letter-spacing: -0.01em; margin-block-end: 0; font: 600 var(--t-2xl)/1 var(--serif); color: var(--ink-mid); } } /* Une clause qui en suit une autre est fermee par un filet ; la premiere n'a rien a fermer, elle suit directement le registre. */ .p-licence .clause + .clause { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-8); } /* ---------- LES FORMULES D'ATTRIBUTION — a copier, pas seulement a lire ---- Le meme filet d'accent que .moment-marque dans le socle : un accent par page, pas un de plus pour chaque formule. Le code hors formule reste un mot dans la phrase, juste distingue par un filet fin. */ .p-licence .clause code { border: 1px solid var(--rule); padding-inline: 0.35em; font-size: 0.92em; } .p-licence .formule { border-inline-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-4) var(--s-5); margin-block: var(--s-4) var(--s-6); } .p-licence .formule code { display: block; border: 0; padding-inline: 0; font-size: var(--t-s); } /* ---------- LES PIECES JOINTES — l'annexe, lettree, jamais numerotee ------- Une clause engage, une piece jointe prouve : la lettre distingue la source citee de l'article qui l'engage, exactement comme une annexe A, B, C se distingue des articles d'un contrat qu'elle vient seulement etayer. */ .p-licence .annexe { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-8); margin-block-start: var(--s-16); } .p-licence .annexe h2 { margin-block-start: 0; } .p-licence .justificatifs { list-style: none; margin: 0; padding: 0; counter-reset: piece-jointe; } .p-licence .justificatifs > li { counter-increment: piece-jointe; position: relative; padding-inline-start: var(--s-8); padding-block: var(--s-2); border-block-end: 1px solid var(--rule-soft); } .p-licence .justificatifs > li:last-child { border-block-end: 0; } .p-licence .justificatifs > li::before { content: counter(piece-jointe, upper-alpha) "."; position: absolute; inset-inline-start: 0; font: 600 var(--t-xs)/1.6 var(--sans); color: var(--ink-mid); } /* ---- limites.css --------------------------------------------------- */ /* ============================================================================ LIMITES — l'avertissement. PARTI PRIS : cette page EST un avis qu'on affiche, pas un article qu'on feuillette. Donc une seule colonne, jamais une grille ; un seul motif de seuil (un simple filet plein cadre) repete deux fois et deux fois seulement, aux deux passages qui comptent vraiment ; une seule alerte du systeme, employee une fois et nulle part ailleurs ; et une phrase, une seule dans toute la page, qu'on laisse seule parce qu'elle porte tout le reste. La gravite vient du rythme et de l'air autour des phrases, jamais d'une couleur qu'on repete. CE QUE CE FRAGMENT AJOUTE, RIEN DE PLUS QUE CELA - la tete de page perd son propre padding : la bande qui la porte donne deja l'air, on ne double pas le rythme. - .etat--alerte respire davantage ici : c'est la SEULE alerte de la page, elle a le droit de prendre un peu plus de place que d'ordinaire. - .transition, .dossier : la phrase qui annonce les trois cas reels, puis les trois cas eux-memes, chacun cadre d'un filet NEUTRE en tete de ligne et separe du suivant par un grand vide plutot que par une couleur. Ce sont des pieces versees au dossier, pas des alarmes. - .familles : les sept familles d'erreurs, portees par .compo-etapes du socle. Le numero vient du compteur CSS, jamais d'une puce inventee. - .moment-phrase reçoit un peu d'air propre : c'est la phrase qu'on isole, une seule fois sur toute la page. - .cloture : la page se referme sur un filet discret avant les sources, pas sur un effet. Le rythme entre les grands mouvements de la page et celui, plus fin, entre les sections de la longue suite centrale sont TOUS DEUX pris tels quels a .compo-flux/.compo-flux--ample du socle : aucune valeur d'espace n'est inventee ici, une seule est reprise partout. ============================================================================ */ .p-limites .page-head { padding-block: 0; } .p-limites .etat--alerte { margin-block: var(--s-8); } .p-limites .transition { font: italic 400 var(--t-m)/1.5 var(--serif); color: var(--ink-soft); max-width: 48ch; margin-block-start: var(--s-10); } .p-limites .dossier { margin-block-start: var(--s-6); } .p-limites .dossier p { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-6); margin-block: 0; } .p-limites .dossier p + p { margin-block-start: var(--s-10); } .p-limites .familles > li { padding-block: var(--s-6); } .p-limites .familles h3 { margin-block-start: 0; margin-block-end: var(--s-2); } .p-limites .familles p { margin-block-end: 0; } .p-limites .moment-phrase { margin-block: var(--s-10) var(--s-8); } .p-limites .cloture { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-8); } .p-limites .cloture .discret { margin-block-end: var(--s-4); } /* ---- memoire.css --------------------------------------------------- */ /* ============================================================================ MEMOIRE — parti pris : LES ARCHIVES. Cette page n'est plus la façade du projet, c'est la couche qui vit dessous : elle EST un fonds d'archives classé, pas une brochure. Un bordereau numéroté ouvre le fonds avant le premier dossier ; chaque dossier (un h2) porte sa cote à deux chiffres ; chaque pièce qu'il contient (un h3) porte sa sous-cote, 03.a puis 03.b ; la table des quatre niveaux de provenance — le sujet même de cette page — est la seule à porter le filet d'accent du corps de texte ; et le rayon de 256 seaux, de 00 à ff, se voit avant de se compter. Sérieuse et documentaire : aucun geste qui ne serve pas le classement. ============================================================================ */ /* --- LA RELIURE : une règle de marge tient toute la colonne, comme la marge intérieure d'un registre relié. ------------------------------------------- */ .p-memoire main .wrap--narrow { border-inline-start: 1px solid var(--rule); padding-inline-start: var(--s-5); } /* --- LE BORDEREAU : l'inventaire du fonds, avant le premier dossier. Un coin coupé, comme une fiche de catalogue qu'on a cornée à force de s'en servir. */ .p-memoire main .archives-index { margin-block: var(--s-8) var(--s-12); border: 1px solid var(--rule); background: var(--bg-alt); padding: var(--s-6); clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } .p-memoire main .archives-index__label { margin: 0 0 var(--s-4); font: 600 var(--t-xs)/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mid); } .p-memoire main .archives-index ol { counter-reset: sommaire; list-style: none; margin: 0; padding: 0; columns: 1; column-gap: var(--s-8); } @media (min-width: 40rem) { .p-memoire main .archives-index ol { columns: 2; } } .p-memoire main .archives-index li { counter-increment: sommaire; break-inside: avoid; border-block-end: 1px solid var(--rule-soft); } .p-memoire main .archives-index li::before { content: counter(sommaire, decimal-leading-zero); display: inline-block; margin-inline-end: var(--s-3); font: 600 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-mid); } .p-memoire main .archives-index a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-soft); text-decoration: none; } .p-memoire main .archives-index a:hover, .p-memoire main .archives-index a:focus-visible { color: var(--accent); text-decoration: underline; } /* --- LES DOSSIERS : chaque h2 est une pièce du fonds, cotée à deux chiffres. La cote fait le classement, pas un aplat de couleur derrière le titre. --- */ .p-memoire main { counter-reset: dossier; } .p-memoire main h2 { counter-increment: dossier; counter-reset: piece; margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); } .p-memoire main h2:first-of-type { margin-block-start: var(--s-6); padding-block-start: 0; border-block-start: 0; } .p-memoire main h2::before { content: counter(dossier, decimal-leading-zero); display: inline-block; min-inline-size: 2.2em; margin-inline-end: var(--s-3); padding-block: 0.1em; border: 1px solid var(--rule); border-block-end: 2px solid var(--accent); background: var(--bg-alt); font: 600 var(--t-s)/1.4 var(--sans); letter-spacing: 0.04em; color: var(--ink-soft); text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; } /* --- LES PIECES : un h3 est une sous-cote du dossier qui le porte, 03.a. -- */ .p-memoire main h3 { counter-increment: piece; } .p-memoire main h3::before { content: counter(dossier, decimal-leading-zero) "." counter(piece, lower-alpha); display: inline-block; margin-inline-end: var(--s-3); padding-inline: 0.5em; border: 1px solid var(--rule); font: 600 var(--t-xs)/1.6 var(--sans); color: var(--ink-mid); vertical-align: middle; font-variant-numeric: tabular-nums; } /* --- LA TABLE-CLE : les quatre niveaux de provenance sont le sujet de cette page. Seule table du corps à porter le filet d'accent, comme le cadre de l'outil dans le gabarit du système : un seul repère, pas un de plus. ----- */ .p-memoire main .table-wrap--cle { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); padding: var(--s-5); margin-block: var(--s-6); } .p-memoire main .table-wrap--cle table { margin: 0; } /* --- UNE PIECE VERSEE AU DOSSIER : les deux exemples concrets de divergence sortent du fil, comme une pièce qu'on pose sur la table pour l'examiner. - */ .p-memoire main p.piece { border: 1px solid var(--rule); background: var(--bg-alt); padding: var(--s-5); margin-block: var(--s-6); } /* --- LE RAYON : le decoupage en 256 seaux, de 00 a ff, se voit. Purement decoratif, aria-hidden dans le HTML : le paragraphe qui precede dit deja tout en mots, ce rayon ne fait que le montrer. --------------------------- */ .p-memoire main .archives-rayon { display: flex; flex-wrap: wrap; gap: 1px; margin-block: var(--s-6); border: 1px solid var(--rule); padding: 1px; background: var(--rule); } .p-memoire main .archives-rayon span { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 2.4em; padding-block: 0.35em; background: var(--bg-alt); font: 600 var(--t-xs)/1 var(--sans); color: var(--ink-mid); font-variant-numeric: tabular-nums; } .p-memoire main .archives-rayon__suite { font-weight: 400; } /* --- LES COTES EN LIGNE : un devient une petite étiquette de reference plutot que de laisser passer la police monospace par defaut du navigateur, qui n'appartient a aucune des deux familles du systeme. ------------------ */ .p-memoire main code { font-family: var(--sans); font-size: 0.92em; background: var(--bg-alt); border: 1px solid var(--rule); padding-inline: 0.35em; } /* --- LES CHIFFRES MESURES : tout data-chiffre est une mesure du fonds, elle se distingue du texte courant sans jamais changer de couleur. ----------- */ .p-memoire main [data-chiffre] { font: 700 1em var(--serif); font-variant-numeric: tabular-nums; border-block-end: 1px solid var(--rule); } /* ---- methode.css --------------------------------------------------- */ /* ============================================================================ PARTI PRIS — methode.css Cette page EST une chaine de montage vue de profil : des postes numerotes dans l'ordre de fabrication, relies par un rail continu, et un arret net — hors numerotation, hors rail — a l'endroit precis ou un verrou a deja mordu pour de vrai. La matiere n'avance jamais a rebours ; le controle des neuf verrous se lit comme le dernier poste de la ligne, pas comme une annexe. Quatre fonds se succedent, chacun un mouvement : blanc (l'ouverture), clair (les deux premiers postes), noir (l'arret de chaine, hors serie), clair a nouveau (les postes qui reprennent), lavis (le controle final). Composé entierement avec le socle : compo-etapes prolonge en poste d'atelier, moment-marque pour la sortie de chaine. Aucun jeton, aucune couleur, aucun arrondi n'est ajoute ici. ============================================================================ */ /* --- L'OUVERTURE : la ligne droite avant le premier poste ------------------ */ .p-methode .page-head { border-block-end: 1px solid var(--rule); padding-block-end: var(--s-8); } /* --- LA CHAINE : compo-etapes du socle, mis a l'echelle d'un poste d'atelier et relie par un rail continu qui passe derriere chaque plaque numerotee. */ .p-methode .chaine { position: relative; } .p-methode .chaine > li { padding-inline-start: var(--s-16); padding-block: var(--s-8); } .p-methode .chaine > li h2 { margin-block-start: 0; } .p-methode .chaine > li::before { inset-block-start: var(--s-8); inline-size: var(--s-12); block-size: var(--s-12); padding: 0; display: flex; align-items: center; justify-content: center; font-size: var(--t-base); background: var(--bg); z-index: 1; } .p-methode .chaine::before { content: ""; position: absolute; inset-inline-start: calc(var(--s-12) / 2 - 1px); inset-block: var(--s-4); inline-size: 2px; background: var(--rule); } /* La ligne reprend son compte apres l'arret : le poste 3 ne redemarre pas a 1. */ .p-methode .chaine--suite { counter-reset: etape 2; } /* --- L'ARRET DE CHAINE : hors numerotation, hors rail, le poste qui n'en est pas un. Cadre epais dans les deux tons du systeme qui tiennent sur le noir : le rouge d'identite seul y perd tout contraste, ce n'est jamais un detail. */ .p-methode .incident { border-block: 3px solid var(--accent-on-dark); } .p-methode .incident h2 { margin-block-start: 0; } .p-methode .incident .ironie { border-inline-start: 3px solid var(--accent-on-dark); padding-inline-start: var(--s-5); } /* --- LE CADRAN DE PESEE : les nombres du poste « modeles » se lisent comme un compteur d'atelier, alignes, et le dernier releve se detache en plaque. */ .p-methode [data-chiffre] { font-variant-numeric: tabular-nums; font-weight: 600; } .p-methode .lecture { border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-5) var(--s-6); } /* --- LE CONTROLE FINAL : le poste qui arrete la chaine pour de bon. Pleine largeur, la ou les postes tenaient en colonne etroite : neuf verrous ont besoin d'air, pas d'une mesure de lecture. */ .p-methode .controle { border-block-start: 3px solid var(--accent); } .p-methode .controle tbody { counter-reset: verrou; } .p-methode .controle tbody tr { counter-increment: verrou; } .p-methode .controle tbody th::before { content: counter(verrou, decimal-leading-zero); display: inline-block; min-inline-size: 2.4em; margin-inline-end: var(--s-2); color: var(--accent); font-variant-numeric: tabular-nums; } .p-methode .controle td { max-inline-size: 62ch; } /* --- LA SORTIE : ce qui quitte la ligne, verifiable par n'importe qui. ----- */ .p-methode .sortie { padding-block: var(--s-12) var(--s-16); } /* ---- packs.css ----------------------------------------------------- */ /* ============================================================================ PAGE PACKS — LE COMPTOIR D'ENLEVEMENT Cette page EST un comptoir de retrait de marchandise, pas une notice de format de fichier. Les sept paquets de langue sont des colis prets a emporter, sous licence libre, par quelqu'un d'autre que nous : chacun affiche son contenu et son poids avant qu'on le prenne, comme une etiquette de marchandise. Le manifeste (la table des sept paquets) occupe donc toute la largeur juste apres l'entete, avant la moindre explication : on voit d'abord ce qui est sur le comptoir. Les deux colonnes de chiffres s'y lisent comme une lecture de balance, tabulaires ; les adresses et les codes, eux, comme des etiquettes de reperage, en monospace du systeme d'exploitation. Ce qui manque au depot (les projets non verses, les langues sans traduction source) ferme la page comme une etiquette de rupture de stock : separee par un filet, nommee en clair, jamais reportee en petite note perdue au milieu du texte. ============================================================================ */ /* --- LE MANIFESTE ---------------------------------------------------------- La table des sept paquets, mise en scene comme un registre de depot plutot que comme un tableau de specification technique. */ .p-packs__manifeste { margin-block: var(--s-6) 0; } /* Le nom de la langue porte le meme traitement que le titre d'une etiquette : plus grand, en serif, une reglure d'accent qui le distingue de sa ligne. Au survol, la reglure prend la couleur du systeme et la ligne se detache sur fond plein : la bande qui l'entoure est en fond doux, donc « detacher » veut dire revenir au blanc, pas s'assombrir. */ .p-packs__manifeste tbody th[scope="row"] { font: 600 var(--t-m)/1.25 var(--serif); letter-spacing: -0.01em; border-inline-start: 3px solid var(--rule); padding-inline-start: var(--s-5); transition: border-color 180ms var(--easing); } .p-packs__manifeste tbody tr:hover { background: var(--bg); } .p-packs__manifeste tbody tr:hover th[scope="row"] { border-inline-start-color: var(--accent); } /* Les deux colonnes de chiffres se lisent comme une balance : tabulaires, et le poids (le contenu reel du colis) porte plus de poids visuel que la part, qui n'est qu'un rappel de proportion a cote de lui — jamais l'inverse : un pourcentage ne se dit jamais par une barre seule, il reste ici un chiffre, et le chiffre qu'il commente reste le plus fort des deux. */ .p-packs__poids { font: 600 var(--t-base)/1 var(--sans); font-variant-numeric: tabular-nums; } .p-packs__part { font-variant-numeric: tabular-nums; color: var(--ink-mid); } /* --- LES CODES ET LES ADRESSES --------------------------------------------- Partout sur cette page, un identifiant ou une adresse se lit comme une etiquette de reperage : aucune police a chasse fixe n'est embarquee par le systeme, donc la pile s'appuie sur celle du systeme d'exploitation, jamais sur un appel exterieur. Le fond reste transparent : le filet suffit a detacher le code du texte, avec ou sans bande de couleur derriere lui. BORNE A main : la banniere de confiance et le pied portent eux aussi un (l'adresse odersa.org) et ce sont des pieces communes du gabarit, qu'une composition ne redessine pas. */ .p-packs main code { font-family: ui-monospace, "Cascadia Code", Consolas, "Liberation Mono", monospace; font-size: 0.9em; border: 1px solid var(--rule); padding: 0.05em 0.4em; } .p-packs main pre { background: var(--bg-alt); border: 1px solid var(--rule); border-inline-start: 3px solid var(--accent); padding: var(--s-5); } .p-packs main pre code { border: 0; padding: 0; font-size: 0.85em; line-height: 1.65; } /* --- LA FORMULE DE CITATION ------------------------------------------------- Le texte exact a recopier se presente comme l'etiquette elle-meme, pas comme un exemple parmi d'autres : un encadre net, a la mesure de son texte, plutot qu'un paragraphe de pleine largeur. */ .p-packs__tampon { display: inline-block; border: 1px solid var(--ink); padding: var(--s-3) var(--s-5); } .p-packs__tampon code { border: 0; padding: 0; font-weight: 700; } /* --- LA RUPTURE DE STOCK ----------------------------------------------------- Ce qui manque au depot ferme la page, separe par un filet plutot que noye dans le fil du texte : une etiquette de manque se lit, elle ne se cherche pas. */ .p-packs__rupture { border-block-start: 1px solid var(--rule); padding-block-start: var(--s-8); } /* ---- pieges-ar.css ------------------------------------------------- */ /* ============================================================================ PIEGES / ARABE — LA FORME JUSTE S'AGRANDIT, LA FORME FAUTIVE S'EFFACE. PARTI PRIS : sur cette page, l'ecriture arabe n'est jamais une illustration posee a cote du propos, elle EST la vitrine. Chaque duel Juste / A eviter devient un duel typographique autant qu'un duel de sens : la forme juste grandit en serif, pleine encre, comme une planche de calligraphie qu'on donne enfin a regarder ; la forme fautive retombe en petit texte gris de rapport d'erreur, exactement ce qu'elle est et rien de plus. La meme regle tient le tableau des faux amis, colonne pour colonne. Partout ailleurs sur la page, un mot arabe cite au fil d'une phrase francaise glisse dans sa propre encre serif : il ne se confond jamais avec le corps qui l'entoure. Deux details empruntent directement au sujet de la page. Le numero de planche de chaque specimen s'imprime en chiffres arabo-indiens plutot qu'en chiffres occidentaux : un ecart qui se resout de lui-meme au specimen consacre justement au choix des chiffres, plus bas dans la page. Et le chapitre des registres suit la diglossie qu'il decrit plutot que de la raconter : l'arabe standard, celui dans lequel toute la page est ecrite, y tient la place monumentale ; les dialectes suivent d'un cran ; l'arabe parle soutenu, qui n'a par definition AUCUNE forme ecrite fixee, s'efface au minimum que la lisibilite tolere plutot que de recevoir une vitrine qu'il ne merite pas. PORTEE : un seul selecteur, .p-pieges-ar (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue — cadre des specimens, fond, compteur decimal, h1/h2, tableaux — vit dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur ; ce fragment ne la duplique pas, il vient par-dessus. Une seule regle doit battre sa specificite plutot que la completer : le compteur des planches (section 1). build-compositions.js trie les fragments par ordre alphabetique et "pieges-ar.css" precede "pieges.css" dans cet ordre (le tiret vaut moins que le point) : le socle, charge apres, regagnerait la main sur un simple `.p-pieges-ar .f-pieges__specimen::before` a specificite egale. Cette regle porte donc .p-pieges-ar.f-pieges, pas .p-pieges-ar seul. Les selecteurs `h3 + p + p` de la section 4 ne comptent aucune position dans le fichier : ils lisent une FORME du DOM engendree par build\tools\build-langues.js (chaque registre est un h3 nu suivi de trois p : le contexte, l'exemple, ce que ca change — aucun sous ne les enferme, a la difference des sections plus haut). Le tableau vise en section 3 est repere a la forme de son en-tete (quatre th), pas a sa place non plus : meme technique que pieges-es.css sur ce meme tableau des faux amis. ============================================================================ */ /* --------------------------------------------------------------------------- 0. LA VOIX DE L'ARABE — MEME UN SEUL MOT CITE GARDE SA PROPRE ENCRE --------------------------------------------------------------------------- */ .p-pieges-ar [lang="ar"] { font-family: var(--serif); font-size: 1.1em; } /* --------------------------------------------------------------------------- 1. LE NUMERO DE PLANCHE — EN CHIFFRES ARABO-INDIENS Un style de compteur CSS standard parmi d'autres, aucune matiere neuve. Un moteur qui ne le reconnaitrait pas retombe silencieusement sur le decimal-leading-zero du socle : la declaration invalide est simplement ignoree, jamais toute la regle. --------------------------------------------------------------------------- */ .p-pieges-ar.f-pieges .f-pieges__specimen::before { content: counter(specimen, arabic-indic); } /* --------------------------------------------------------------------------- 2. LE DUEL — CHAQUE SPECIMEN EST UNE PLANCHE DE CALLIGRAPHIE, PAS UN QUIZ --------------------------------------------------------------------------- */ .p-pieges-ar .f-pieges__specimen .etat--succes p[lang="ar"] { font-family: var(--serif); font-size: var(--t-xl); line-height: 1.5; } .p-pieges-ar .f-pieges__specimen .etat--erreur p[lang="ar"] { font-family: var(--sans); font-size: var(--t-s); line-height: 1.5; color: var(--ink-mid); } /* --------------------------------------------------------------------------- 3. LES FAUX AMIS — LE MEME DUEL, EN TABLEAU --------------------------------------------------------------------------- */ .p-pieges-ar .table-wrap:has(thead th:nth-child(4)) td:nth-child(2) { font-family: var(--sans); font-size: var(--t-s); color: var(--ink-mid); } .p-pieges-ar .table-wrap:has(thead th:nth-child(4)) td:nth-child(3) { font-family: var(--serif); font-size: var(--t-l); border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); } /* --------------------------------------------------------------------------- 4. LES REGISTRES — LA MISE EN PAGE SUIT LA DIGLOSSIE QU'ELLE DECRIT L'ordre EST l'echelle : le standard qui porte toute la page, puis les dialectes, puis l'oral soutenu qui n'a pas de forme ecrite et s'efface en consequence ; les deux derniers blocs sont des usages pratiques, pas des degres de formalite, et se stabilisent en bas d'echelle plutot que de prolonger la chute. --------------------------------------------------------------------------- */ .p-pieges-ar .wrap--narrow > h3 { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); } .p-pieges-ar .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-12); } .p-pieges-ar .wrap--narrow > h3 + p { margin-block-start: var(--s-3); max-width: 62ch; color: var(--ink-mid); } .p-pieges-ar .wrap--narrow > h3 + p + p { margin-block-start: var(--s-5); font-family: var(--serif); } .p-pieges-ar .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-4); max-width: 62ch; font-size: var(--t-s); color: var(--ink-mid); } /* L'arabe standard : le registre dans lequel toute la page est ecrite. */ .p-pieges-ar .wrap--narrow > h3:nth-of-type(1) { font-size: var(--t-l); } .p-pieges-ar .wrap--narrow > h3:nth-of-type(1) + p + p { margin-block-start: var(--s-6); padding: var(--s-6) var(--s-8); border-inline-start: 3px solid var(--accent); background: var(--accent-bg); font-size: var(--t-2xl); line-height: 1.4; } /* Les dialectes : un cran sous le standard, jamais a l'ecrit officiel. */ .p-pieges-ar .wrap--narrow > h3:nth-of-type(2) + p + p { padding-inline-start: var(--s-6); border-inline-start: 1px solid var(--rule); font-size: var(--t-l); } /* L'oral soutenu n'a par definition aucune forme ecrite standardisee : la vitrine se refuse a lui plutot que de lui en inventer une. */ .p-pieges-ar .wrap--narrow > h3:nth-of-type(3) { font-size: var(--t-base); color: var(--ink-mid); } .p-pieges-ar .wrap--narrow > h3:nth-of-type(3) + p + p { font-size: var(--t-xs); font-style: italic; color: var(--ink-mid); } /* Les deux derniers : des usages pratiques, pas des degres de formalite. */ .p-pieges-ar .wrap--narrow > h3:nth-of-type(4) { margin-block-start: var(--s-20); border-block-start-color: var(--ink-mid); } .p-pieges-ar .wrap--narrow > h3:nth-of-type(4) + p + p, .p-pieges-ar .wrap--narrow > h3:nth-of-type(5) + p + p { font-size: var(--t-m); } /* ---- pieges-bn.css ------------------------------------------------- */ /* ============================================================================ PIEGES / BENGALI — LE TRAIT NE COURT JAMAIS D'UN BOUT A L'AUTRE. PARTI PRIS : le bengali n'ecrit pas sa ligne de tete comme le devanagari, d'un seul trait continu au-dessus du mot : chaque lettre porte son propre trait, separe du voisin. Cette page reprend ce rythme brise partout ou le systeme pose d'ordinaire un simple filet plein entre deux mouvements de lecture — les titres de chapitre, les registres — et la referme sur le signe qui finit vraiment une phrase bengalie : le danda ( । ), pas le point francais du reste du site. Les VITRINES, elles (specimens, tableaux), gardent leur cadre plein sans retouche : seul ce qui separe la lecture se brise, jamais ce qui protege un specimen sous verre. PORTEE : un seul selecteur, .p-pieges-bn (CONTRAT-COMPOSITION.md). Le fragment commun aux sept pages de langue, build\compositions\pieges.css, pose deja le cadre des specimens, le h1, les h2 et le tableau des sources sous .f-pieges ; ce fichier vient par-dessus, pour le bengali seul, et n'y touche que pour proteger l'ecriture ou reprendre le motif ci-dessus. SPECIFICITE : build-compositions.js assemble le socle puis les pages par ORDRE ALPHABETIQUE — « pieges-bn.css » (le tiret) passe avant « pieges.css » (le point). Le fragment commun est donc charge APRES celui- ci, et une regle d'egale specificite ecrite ici perdrait face a la sienne. Chaque regle qui corrige un reglage de .f-pieges ajoute donc .wrap--narrow ou h1/h2 a sa chaine plutot que de recopier .f-pieges : la specificite grimpe d'elle-meme, la regle tient quel que soit l'ordre d'assemblage, et elle reste en prime a l'ecart du h2 du pied de page, qui vit hors de .wrap--narrow. ============================================================================ */ /* --------------------------------------------------------------------------- 1. PROTEGER L'ECRITURE Deux precautions, pas une decoration. L'interlettrage negatif que le systeme pose sur les titres (-0.018em, et -0.02em de plus sur le mot en grand du h1) est pense pour du latin : resserrer l'espace ENTRE des blocs bengalis peut interferer avec la formation des conjointes que la page elle-meme documente plus bas (le hasant qui redevient visible). On remet donc l'interlettrage a plat partout ou du bengali apparait. La police serif reprend un principe deja pose par le sommaire (.p-pieges .grid .card h3 span[lang]) : le francais reste dans la face utilitaire, l'ecriture citee passe dans la face a chasse plus genereuse — ce qui, sur les titres deja tous en serif par le systeme, ne change rien ; ce qui, dans le corps du texte ou le francais est en sans par defaut, distingue au premier regard la citation de son commentaire. --------------------------------------------------------------------------- */ .p-pieges-bn .wrap--narrow [lang="bn"] { font-family: var(--serif); letter-spacing: normal; } /* Le mot en grand du h1 (.f-pieges h1 span[lang]) fixe deja son propre interlettrage a -0.02em : une regle directe sur ce meme element, a specificite egale a la sienne, perd contre elle une fois assemblee. */ .p-pieges-bn .wrap--narrow h1 span[lang] { letter-spacing: normal; } /* --------------------------------------------------------------------------- 2. LE FIL BRISE — LES RUPTURES DE LECTURE, JAMAIS LES VITRINES Le filet plein du systeme (1px solid var(--rule)) devient un filet brise partout ou la page marque une rupture de lecture : chaque chapitre (h2) et chaque registre (h3, plus bas) ouvre sur son propre trait, comme une lettre bengalie ouvre sur le sien. Le tireté est plus appuye pour un chapitre, plus fin pour un registre : la rupture se voit a l'oeil avant d'etre lue. --------------------------------------------------------------------------- */ .p-pieges-bn .wrap--narrow > h2 { border-block-start: 2px dashed var(--rule); } /* --------------------------------------------------------------------------- 3. LES SPECIMENS — L'EXEMPLE BENGALI PREND LA PLACE QUE LE FRANCAIS LUI CEDE DEJA (JUSTE ET A EVITER, A LA MEME TAILLE) Le fragment commun ne touche pas a la taille de l'exemple dans le couple .etat--succes / .etat--erreur : il herite du corps courant. On lui donne plus de presence, mais LES DEUX COTES A LA FOIS ET A L'IDENTIQUE — un specimen de cette page (les deux lettres ড়/নুক্তা) affiche volontairement deux graphies IDENTIQUES A L'ECRAN pour deux encodages Unicode distincts : agrandir un cote plus que l'autre casserait ce piege precis, qui ne fonctionne que si les deux rendus restent rigoureusement les memes. --------------------------------------------------------------------------- */ .p-pieges-bn .f-pieges__specimen .etat p[lang="bn"] { font-size: var(--t-l); line-height: 1.5; } /* --------------------------------------------------------------------------- 4. LES REGISTRES — CHAQUE FORME REPOSEE A PLAT, PAS SOUS VERRE Comme pour l'espagnol (voir pieges-es.css), build-langues.js livre chaque registre en h3 nu suivi de trois p (le contexte, l'exemple, ce que ca change) : aucun pochoir .f-pieges__specimen ici. La difference avec l'espagnol est deliberee : pas d'italique. Le bengali n'a pas de forme italique — une inclinaison synthetique sur une ecriture qui n'en a pas produit souvent un rendu degrade plutot qu'un style. L'exemple gagne donc sa mise en avant par la face serif (voir §1), une taille et un fond, jamais par une obliquite qui ne lui appartient pas. --------------------------------------------------------------------------- */ .p-pieges-bn .wrap--narrow > h3 { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px dashed var(--rule); font-size: var(--t-l); } .p-pieges-bn .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-12); } /* Le contexte : ou et pour qui ce registre s'emploie. */ .p-pieges-bn .wrap--narrow > h3 + p { margin-block-start: var(--s-3); max-width: 62ch; color: var(--ink-mid); } /* L'exemple bengali : la seule ligne de tout ce chapitre qui merite un fond, parce que c'est elle qu'on vient lire. */ .p-pieges-bn .wrap--narrow > h3 + p + p { margin-block-start: var(--s-5); max-width: 42ch; padding: var(--s-4) var(--s-5); background: var(--accent-bg); font-size: var(--t-m); line-height: 1.6; } /* Pourquoi ca compte : la meme discretion typographique que le contexte. */ .p-pieges-bn .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-5); max-width: 62ch; color: var(--ink-mid); font-size: var(--t-s); } /* --------------------------------------------------------------------------- 5. LES FAUX AMIS — LA REPONSE JUSTE, MARQUEE COMME UN APARTE Meme table a quatre colonnes que sur la page espagnole, meme detection robuste par la FORME du DOM plutot que par une position dans le fichier (voir pieges-es.css). Le piege s'efface en gris ; la reponse juste porte le filet d'accent du systeme (le meme que .moment-marque) — jamais la couleur seule : le filet et le gras portent chacun leur part du signal. --------------------------------------------------------------------------- */ .p-pieges-bn .table-wrap:has(thead th:nth-child(4)) td:nth-child(2) { color: var(--ink-mid); } .p-pieges-bn .table-wrap:has(thead th:nth-child(4)) td:nth-child(3) { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); font-weight: 600; } /* --------------------------------------------------------------------------- 6. LE DANDA DE CLOTURE La toute derniere piece du parcours ferme sur le signe dont la page entiere parle des sa premiere vitrine (« Le danda termine une phrase, pas le point latin ») : un point final bengali, pas francais. .note est le dernier enfant reel de .wrap--narrow (le bloc « ces regles sont servies en donnees ouvertes ») : le signe se pose apres lui, hors de son cadre a filet d'accent, comme un colophon plutot qu'une note de plus. --------------------------------------------------------------------------- */ .p-pieges-bn .wrap--narrow::after { content: "।"; display: block; margin-block-start: var(--s-16); font: 500 var(--t-3xl)/1 var(--serif); text-align: center; color: var(--ink-mid); } /* ---- pieges-en.css ------------------------------------------------- */ /* ============================================================================ PIEGES / ANGLAIS — LA PAGE EST UNE LIGNE, PAS UNE VITRINE DE PLUS. PARTI PRIS : cette page N'EST PAS un huitieme cabinet de curiosites parmi d'autres. L'anglais est le seul relais du moteur de ce site : build\BRIEF-AGENT-PAGE.md l'ecrit sans detour, "il n'existe aucune paire directe entre deux langues autres que l'anglais" — une traduction entre deux langues tierces (l'arabe vers le bengali, disons) passe REELLEMENT par deux modeles dont l'anglais est le point de jonction. Alors cette page ne montre pas ses specimens sous verre, cote a cote, comme les six autres langues : elle les attache a UNE LIGNE, un rail continu qui descend toute la colonne de lecture, avec l'accent pour les grandes stations (chaque h2 : un changement de theme, ecriture, ponctuation, interface...) et une teinte neutre pour les arrets courants (chaque specimen, chaque tableau, chaque registre, chaque source). Le losange pose devant le chapeau, en tete de page, est le point de depart de cette ligne ; celui repris dans le tableau des faux amis marque le meme aiguillage : la ou un reflexe francais bifurque a tort, la bonne direction porte le meme signe. PORTEE : un seul selecteur ici, .p-pieges-en (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue — cadre, fond, numero d'inventaire des specimens, traitement du h1, des h2 et des tableaux — vit deja dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur. Ce fragment n'y touche pas : il pose une seconde couche, par- dessus, faite de filets d'attache en debut de bloc (border-inline-start) plutot que de cadres complets, pour que l'oeil suive un seul fil du haut en bas de la page plutot que des vitrines independantes les unes des autres. CE QUE CE FRAGMENT SUPPOSE DU DOM ENGENDRE PAR build\tools\build-langues.js, et qui tient meme si le contenu change (le meme genre d'hypotheses, deja verifiees, que pose pieges-es.css) : - direct sous .wrap--narrow : un seul , puis une suite de h2 (une "gare" par theme), d' et de ; la section "Les registres" seule livre des h3 NUS suivis chacun de trois (contexte, exemple, portee), jamais empaquetes dans un specimen, a la difference des regles d'ecriture et de ponctuation ; - "Les sources" est toujours le dernier h2 de la page, quelle que soit la donnee ; - le tableau des faux amis est le seul a quatre colonnes d'en-tete, reconnu a sa forme plutot qu'a sa position dans le fichier ; - la liste finale des sources est un NU, direct enfant de .wrap--narrow : le fragment commun prevoit pour elle une classe .f-pieges__provenance que build-langues.js ne pose pas. Plutot que de compter sur une classe absente, ce fragment lui donne sa propre tenue, en bas de la meme ligne. ============================================================================ */ /* --------------------------------------------------------------------------- 1. LE DEPART — LE CHAPEAU DE PAGE, PREMIERE STATION DE LA LIGNE --------------------------------------------------------------------------- */ .p-pieges-en .wrap--narrow > .page-head { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-6); } .p-pieges-en .wrap--narrow > .page-head .kicker { display: flex; align-items: center; gap: var(--s-3); } /* Purement decoratif, comme le "¿" de la page espagnole ou le numero de specimen du fragment commun : aucune information qu'on ne lirait pas sans lui. Le meme losange revient plus bas, dans le tableau des faux amis — deux apparitions du meme signe pour dire la meme chose : "vous etes sur la ligne". */ .p-pieges-en .wrap--narrow > .page-head .kicker::before { content: ""; flex: none; inline-size: var(--s-3); block-size: var(--s-3); background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* --------------------------------------------------------------------------- 2. LES GARES — UN h2 CHANGE DE THEME, LE RAIL S'EPAISSIT ET ROUGIT --------------------------------------------------------------------------- */ .p-pieges-en .wrap--narrow > h2 { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-6); } /* Le terminus : "Les sources" ferme la ligne, elle ne rouvre sur rien apres elle. Un court trait perpendiculaire au rail dit ce point d'arret sans un mot de plus — le meme geste qu'un heurtoir en bout de voie. */ .p-pieges-en .wrap--narrow > h2:last-of-type::after { content: ""; display: block; margin-block-start: var(--s-4); inline-size: var(--s-10); block-size: 3px; background: var(--accent); } /* --------------------------------------------------------------------------- 3. LES ARRETS — SPECIMENS, TABLEAUX, REGISTRES, SOURCES : LE MEME RAIL, EN SOURDINE. Chacun s'attache a la meme ligne que les gares, mais dans la teinte neutre des filets plutot que dans le rouge : la hierarchie se lit au poids et a la place, jamais a la couleur seule. --------------------------------------------------------------------------- */ .p-pieges-en .wrap--narrow > .f-pieges__specimen, .p-pieges-en .wrap--narrow > .table-wrap, .p-pieges-en .wrap--narrow > .note, .p-pieges-en .wrap--narrow > ul { border-inline-start: 3px solid var(--rule); } /* Les specimens et les tableaux tiennent deja leur respiration du fragment commun (padding: var(--s-6) pose par pieges.css) ; le chapeau a recu la sienne au §1. Seuls .note et la liste des sources, nus, en ont besoin ici. */ .p-pieges-en .wrap--narrow > .note { padding-inline-start: var(--s-6); } /* La liste des sources n'a jamais recu sa classe .f-pieges__provenance (voir la note de tete) : elle arriverait donc avec les puces par defaut du navigateur. On lui pose ici la meme tenue a plat que le fragment commun prevoyait pour cette classe, plutot que de laisser le dernier arret de la ligne depareille des six autres. */ .p-pieges-en .wrap--narrow > ul { list-style: none; margin: 0; padding-inline-start: var(--s-6); display: grid; gap: var(--s-1); } .p-pieges-en .wrap--narrow > ul li { padding-block-start: var(--s-2); border-block-start: 1px solid var(--rule-soft); font-size: var(--t-s); color: var(--ink-mid); } .p-pieges-en .wrap--narrow > ul li:first-child { border-block-start: 0; padding-block-start: 0; } /* Les registres : chaque regle de ton vit en h3 nu suivi de trois paragraphes (contexte, exemple, portee), jamais empaquetee dans un .f-pieges__specimen. Les quatre elements recoivent le meme rail que le reste de la ligne — quatre wagons d'un seul arret plutot qu'une vitrine de plus. */ .p-pieges-en .wrap--narrow > h3, .p-pieges-en .wrap--narrow > h3 + p, .p-pieges-en .wrap--narrow > h3 + p + p, .p-pieges-en .wrap--narrow > h3 + p + p + p { border-inline-start: 3px solid var(--rule); padding-inline-start: var(--s-5); } .p-pieges-en .wrap--narrow > h3 { margin-block-start: var(--s-16); padding-block-start: var(--s-6); } .p-pieges-en .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-10); } .p-pieges-en .wrap--narrow > h3 + p { margin-block-start: var(--s-3); max-width: 62ch; color: var(--ink-mid); } /* L'exemple anglais du registre : le wagon qu'on vient lire. */ .p-pieges-en .wrap--narrow > h3 + p + p { margin-block-start: var(--s-4); max-width: 62ch; font-family: var(--serif); font-style: italic; font-size: var(--t-m); } .p-pieges-en .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-4); max-width: 62ch; color: var(--ink-mid); font-size: var(--t-s); } /* --------------------------------------------------------------------------- 4. LE FAUX AMI — UN MAUVAIS AIGUILLAGE, ET LA BONNE DIRECTION PORTE LE MEME SIGNE QU'AU DEPART DE LA LIGNE. Le tableau se reconnait a sa forme (quatre colonnes d'en-tete), jamais a sa position : une entree de donnee qui bouge ne casse pas la regle. --------------------------------------------------------------------------- */ .p-pieges-en .wrap--narrow > .table-wrap:has(thead th:nth-child(4)) td:nth-child(2) { color: var(--ink-mid); font-style: italic; } .p-pieges-en .wrap--narrow > .table-wrap:has(thead th:nth-child(4)) td:nth-child(3) { font-weight: 600; } .p-pieges-en .wrap--narrow > .table-wrap:has(thead th:nth-child(4)) td:nth-child(3)::before { content: ""; display: inline-block; vertical-align: middle; inline-size: var(--s-3); block-size: var(--s-3); margin-inline-end: var(--s-2); background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } /* --------------------------------------------------------------------------- 5. L'IMPRESSION — LE SIGNE DE TETE ET LE HEURTOIR SONT PUREMENT DECORATIFS, ILS N'APPORTENT RIEN SUR PAPIER. --------------------------------------------------------------------------- */ @media print { .p-pieges-en .wrap--narrow > .page-head .kicker::before, .p-pieges-en .wrap--narrow > h2:last-of-type::after, .p-pieges-en .wrap--narrow > .table-wrap:has(thead th:nth-child(4)) td:nth-child(3)::before { display: none; } } /* ---- pieges-es.css ------------------------------------------------- */ /* ============================================================================ PIEGES / ESPAGNOL — LA PAGE SE LIT DANS SES PROPRES SIGNES. PARTI PRIS : cette page EST une phrase espagnole. Elle ouvre son catalogue de specimens sur un ¿ et le referme sur un ¡, exactement comme la langue qu'elle decrit signale le doute avant qu'il commence et l'exclamation avant qu'elle eclate. Et son chapitre le plus dense — les cinq facons de dire « vous » — se lit a plat sur une etagere plutot que sous verre : ce ne sont pas cinq specimens rivaux, ce sont cinq reponses a la meme question, posees cote a cote pour qu'on les compare d'un regard. PORTEE : un seul selecteur ici, .p-pieges-es (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue — cadre, fond, numero d'inventaire des specimens, traitement des h1/h2/tableaux — vit deja dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur. Ce fragment n'y touche pas : il ajoute seulement ce qui est propre a l'espagnol, par-dessus. Les crochets utilises plus bas (h2:first-of-type, > h3 + p + p + p, :has(thead th:nth-child(4))) ne comptent aucune position dans le fichier : ils lisent une FORME du DOM engendree par build\tools\build-langues.js (« Les sources » est toujours le dernier h2 qu'elle qu'en soit la donnee ; le bloc registres est le seul a livrer des h3 nus, hors de .f-pieges__specimen ; le tableau des faux amis est le seul a quatre colonnes). Une donnee qui change ne les casse pas. ============================================================================ */ /* --------------------------------------------------------------------------- 1. L'OUVERTURE ET LA FERMETURE — LE SIGNE AVANT LA CHUTE --------------------------------------------------------------------------- */ /* Purement decoratif : le texte des titres dit deja ou l'on est, le signe n'ajoute aucune information qu'on ne trouverait pas sans lui. */ .p-pieges-es .wrap--narrow > h2:first-of-type::before, .p-pieges-es .wrap--narrow > h2:last-of-type::before { content: "¿"; display: block; margin-block-end: var(--s-3); font: 500 var(--t-2xl)/1 var(--serif); color: var(--rule); } .p-pieges-es .wrap--narrow > h2:last-of-type::before { content: "¡"; } /* --------------------------------------------------------------------------- 2. LES REGISTRES — L'ETAGERE OUVERTE, PAS LA VITRINE build-langues.js livre chaque registre en h3 nu suivi de trois p (le contexte, l'exemple, ce que ca change) : aucun pochoir .f-pieges__specimen ici, a la difference des sections d'ecriture ou de ponctuation. Plutot que de forcer une boite qui n'existe pas dans le balisage, la page assume la difference et pose les cinq entrees a plat, separees par un simple filet, chacune ouvrant sur la phrase qui la distingue des quatre autres. --------------------------------------------------------------------------- */ .p-pieges-es .wrap--narrow > h3 { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); font-size: var(--t-l); } .p-pieges-es .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-12); } /* Le contexte : ou et pour qui ce registre s'emploie. */ .p-pieges-es .wrap--narrow > h3 + p { margin-block-start: var(--s-3); max-width: 62ch; color: var(--ink-mid); } /* L'exemple espagnol : la seule phrase de tout ce chapitre qui merite un fond, parce que c'est elle qu'on vient lire. */ .p-pieges-es .wrap--narrow > h3 + p + p { margin-block-start: var(--s-5); max-width: 42ch; padding: var(--s-4) var(--s-5); background: var(--accent-bg); font-family: var(--serif); font-size: var(--t-m); font-style: italic; line-height: 1.5; } /* Pourquoi ca compte : la meme discretion typographique que le contexte. */ .p-pieges-es .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-5); max-width: 62ch; color: var(--ink-mid); font-size: var(--t-s); } /* --------------------------------------------------------------------------- 3. LES FAUX AMIS — LA REPONSE JUSTE, MARQUEE COMME UN APARTE Quatre colonnes ici contre trois au plus ailleurs sur la page : le tableau se reconnait a la forme de son en-tete, pas a sa place dans le fichier, ce qui tient meme si une entree de donnee bouge un jour. Le piege s'efface un peu ; la reponse juste porte le meme filet d'accent qu'un .note ou qu'un .moment-marque ailleurs dans le systeme — la meme grammaire visuelle pour dire « c'est ici la bonne reponse », jamais la couleur seule : le filet, le gras et l'ecart de gris portent chacun leur part du signal. --------------------------------------------------------------------------- */ .p-pieges-es .table-wrap:has(thead th:nth-child(4)) td:nth-child(2) { color: var(--ink-mid); font-style: italic; } .p-pieges-es .table-wrap:has(thead th:nth-child(4)) td:nth-child(3) { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); font-weight: 600; } /* ---- pieges-fr.css ------------------------------------------------- */ /* ============================================================================ PIEGES / FRANÇAIS — LA PAGE PÈSE SES ESPACES COMME ELLE PARLE DE LES PESER. PARTI PRIS : cette page ne DÉCRIT pas seulement les espaces insécables du français, elle en TIENT UNE, en clair, dans sa propre phrase d'ouverture — une phrase qui se replie dans n'importe quelle largeur d'écran sans jamais laisser un mot se faire seul de son signe de ponctuation. Le reste de la page tient la même discipline : chaque fois que du français est cité pour de vrai (l'ouverture, un exemple de registre plus bas), la citation reçoit le même filet d'accent — la marque de ce qu'on peut vérifier, pas d'un décor gratuit. PORTEE : un seul sélecteur ici, .p-pieges-fr (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue — cadre, fond, numéro d'inventaire des spécimens, tableaux — vit dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur. Ce fragment n'y touche pas : il ajoute ce qui est propre au français, par-dessus, sans redessiner un seul spécimen ni une seule paire Juste / À éviter. CE QUE LA PHRASE D'OUVERTURE MONTRE VRAIMENT (section 1) : son contenu (::after sur .page-head) n'est pas repris du HTML. Ce sont de VRAIS caractères Unicode, posés ici même, dans ce fichier — l'espace insécable (U+00A0) et l'espace fine insécable (U+202F), les deux caractères que la page elle-même décrit en prose plus bas. Ils sont écrits en `\A0` et `\202F` plutôt qu'en clair, et c'est voulu : le sujet de cette page est ce qu'un espace cache, ce fichier ne le cache pas non plus à qui l'ouvre. Conséquence vérifiable, pas décorative : un navigateur qui replie cette phrase, à 360 px comme en grand, ne coupera jamais la ligne juste avant le point-virgule ni entre le dernier mot et son guillemet fermant. C'est la règle en train de s'exécuter, pas une image de la règle. CE QUE LE FRAGMENT NE TOUCHE PAS, ET POURQUOI : les paires Juste / À éviter (.etat) portent déjà leur propre grammaire dans le système — un filet de 4 px coloré selon l'état, un fond teinté — et une seconde marque posée par-dessus les aurait brouillées au lieu de les servir. Le tableau des faux amis reste sous la seule vitrine commune, sans marque de plus : une page qui accentue tout n'accentue plus rien. HYPOTHÈSE STRUCTURELLE (aucune des deux ne compte de position dans le fichier, au sens où build\CONTRAT-COMPOSITION.md le proscrit) : `.wrap--narrow > h3` ne sélectionne QUE les sept entrées de la section Les registres, parce que c'est la seule section à livrer un h3 nu, hors de .f-pieges__specimen — même lecture de forme que celle déjà documentée dans pieges-es.css pour son propre bloc de registres. `.wrap--narrow > h2 + p` ne sélectionne que l'unique paragraphe d'introduction de la section Les pluriels, seul endroit où un suit directement un à la racine de .wrap--narrow. Une donnée qui change ne casse ni l'une ni l'autre tant que ces deux formes restent uniques dans la page. ============================================================================ */ /* --------------------------------------------------------------------------- 1. L'OUVERTURE — UNE PHRASE QUI SE VÉRIFIE ELLE-MÊME --------------------------------------------------------------------------- */ .p-pieges-fr .page-head::after { content: "«" "\A0" "Une ligne peut se couper" "\202F" ";" " l’espace insécable ne cède jamais." "\A0" "»"; display: block; margin-block-start: var(--s-8); max-width: 24ch; border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-5); font: 500 var(--t-l)/1.4 var(--serif); font-style: italic; letter-spacing: -0.01em; color: var(--ink-soft); } /* --------------------------------------------------------------------------- 2. LES REGISTRES — LA PAROLE FRANÇAISE, CITÉE POUR DE VRAI build-langues.js livre chaque registre en h3 nu suivi de trois (le contexte, l'exemple en français, ce que ça change) : aucun pochoir .f-pieges__specimen ici, à la différence des règles d'écriture ou de ponctuation. L'exemple français reçoit le même filet d'accent que la phrase d'ouverture : la même grammaire visuelle pour la même raison, une citation qu'on peut vérifier plutôt qu'un aparté flottant. --------------------------------------------------------------------------- */ .p-pieges-fr .wrap--narrow > h3 { margin-block-start: var(--s-12); padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule); font-size: var(--t-m); } .p-pieges-fr .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-8); } /* Le contexte : où et pour qui ce registre s'emploie. */ .p-pieges-fr .wrap--narrow > h3 + p { margin-block-start: var(--s-2); max-width: 62ch; color: var(--ink-mid); } /* L'exemple français : la citation qu'on vient lire, marquée comme telle. */ .p-pieges-fr .wrap--narrow > h3 + p + p { margin-block-start: var(--s-4); max-width: 50ch; border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-5); font: 500 var(--t-m)/1.5 var(--serif); font-style: italic; color: var(--ink-soft); } /* Pourquoi ça compte : la même discrétion typographique que le contexte. */ .p-pieges-fr .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-4); max-width: 62ch; color: var(--ink-mid); font-size: var(--t-s); } /* --------------------------------------------------------------------------- 3. LA MESURE DES TABLEAUX — LES CHIFFRES S'ALIGNENT POUR SE COMPARER Discret et sans risque : la seule cellule de texte visée hors tableau est l'unique qui suit directement un à la racine (l'introduction des Pluriels, qui compare 0, 1, 2 et 1 000 000 en une phrase) ; les cellules de texte des tableaux sans chiffres ne changent simplement pas d'aspect. --------------------------------------------------------------------------- */ .p-pieges-fr .table-wrap td { font-variant-numeric: tabular-nums; } .p-pieges-fr .wrap--narrow > h2 + p { font-variant-numeric: tabular-nums; } /* ---- pieges-hi.css ------------------------------------------------- */ /* ============================================================================ PIÈGES / HINDI — LE MOT SE LIT COMME IL S'ÉCRIT : SUSPENDU À UN FILET. PARTI PRIS : cette vitrine EST un mot devanagari. Rien n'y flotte seul : le titre de la page, le numéro d'un spécimen, le nom d'un registre pendent chacun d'un filet, exactement comme une lettre devanagari pend du shirorekha — le trait de tête continu qui relie les lettres d'un même mot plutôt que de les isoler. Le geste se répète trois fois, à trois échelles : en grand pour le titre, à la mesure du mot pour chaque registre, en petit pour chaque numéro de spécimen. PORTÉE : un seul sélecteur ici, .p-pieges-hi (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue — cadre, fond, numéro d'inventaire, traitement de base des h1/h2/tableaux — vit déjà dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur. Ce fragment n'y touche pas : il pose la couche hindi PAR-DESSUS. CE QUE CE FRAGMENT SUPPOSE DU DOM, ET POURQUOI CE N'EST PAS FRAGILE : « Les registres » livre cinq h3 NUS (hors de .f-pieges__specimen), chacun suivi de trois p (le contexte, l'exemple en hindi, ce que ça change) — la même forme que build\tools\build-langues.js donne à toutes les langues, et que pieges-es.css lit déjà pour l'espagnol. Le dernier de ces cinq h3 est, à ce jour, आप : le seul registre que l'article retient comme correct dans une interface, après avoir écarté les quatre autres. Le filet d'accent porté par :last-of-type suit donc le sens du texte, pas une position arbitraire — un risque mesuré, accepté à l'identique par pieges-es.css pour repérer « Les sources ». ============================================================================ */ /* --------------------------------------------------------------------------- 1. L'OUVERTURE — LE TITRE PEND DU TRAIT DE TÊTE pieges.css empile déjà « Hindi » au-dessus de « हिन्दी » (h1 en colonne, égal écart entre les deux). On remplace cet écart uniforme par une séquence délibérée : l'étiquette, un blanc, LE filet, un second blanc, puis le mot. Le font-size est redit explicitement : la règle générale du fragment (section 4) touche tout [lang="hi"] de la page et doit trouver ici une taille déjà fixée, pas un blanc qu'elle pourrait remplir. --------------------------------------------------------------------------- */ .p-pieges-hi .f-pieges h1 { gap: 0; } .p-pieges-hi .f-pieges h1 span[lang="hi"] { margin-block-start: var(--s-4); padding-block-start: var(--s-6); border-block-start: 3px solid var(--accent); font-size: var(--t-3xl); } /* --------------------------------------------------------------------------- 2. LES SPÉCIMENS — UNE TRANCHE QUI TIENT LE BLOC, UN NUMÉRO QUI PEND Le socle encadre déjà le numéro d'inventaire dans une petite boîte (.f-pieges__specimen::before). Ici il perd sa boîte : il pend d'un filet ajusté à sa propre largeur, comme le mot du titre pend du sien. Le spécimen entier reçoit la tranche que le système donne déjà à une carte (.card, border-block-start 3px solid --ink) — tournée vers le bord de lecture plutôt que vers le haut : elle tient le bloc d'un seul tenant, comme le virama tient deux consonnes fondues en un seul signe (le spécimen 2 de cette même page). --------------------------------------------------------------------------- */ .p-pieges-hi .f-pieges__specimen { border-inline-start: 3px solid var(--ink); padding-inline-start: var(--s-8); } .p-pieges-hi .f-pieges__specimen::before { border: 0; border-block-start: 2px solid var(--rule); background: none; margin-block-end: var(--s-3); padding-inline: 0; padding-block: var(--s-2) 0; font: 600 var(--t-s)/1 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-mid); } /* --------------------------------------------------------------------------- 3. LES REGISTRES — CINQ MOTS SOUS LEUR FILET, UN SEUL EN ACCENT Chaque registre nomme son mot en hindi dans le h3 : on lui donne la même prééminence typographique qu'au titre de la page (serif, plus grand que le glose français autour), sans toucher à la taille du h3 lui-même. L'exemple qui suit (le second des trois p) pend à son tour d'un filet, mais ajusté à la largeur du mot, pas à celle de la colonne : plus proche de ce qu'est réellement un shirorekha, le trait d'UN mot, pas d'une page. Le dernier registre, आप, est celui que l'article retient : son filet, et lui seul, prend le second et dernier accent de la page — jamais la couleur seule, le texte dit déjà « le seul choix correct », le filet ne fait que le souligner. --------------------------------------------------------------------------- */ .p-pieges-hi .wrap--narrow > h3 { margin-block-start: var(--s-16); padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule); } .p-pieges-hi .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-10); } .p-pieges-hi .wrap--narrow > h3 span[lang="hi"] { font-family: var(--serif); font-size: var(--t-l); } .p-pieges-hi .wrap--narrow > h3 + p + p[lang="hi"] { display: inline-block; margin-block: var(--s-4) var(--s-3); padding-block-start: var(--s-2); border-block-start: 2px solid var(--rule); font-family: var(--serif); font-size: var(--t-m); } .p-pieges-hi .wrap--narrow > h3:last-of-type { border-block-start-width: 2px; border-block-start-color: var(--accent); } .p-pieges-hi .wrap--narrow > h3:last-of-type + p + p[lang="hi"] { border-block-start-color: var(--accent); } /* --------------------------------------------------------------------------- 4. PARTOUT AILLEURS — LE DEVANAGARI PREND LA PLACE QUE LE LATIN LUI REFUSE Un mot ou une lettre hindi cité au fil d'une phrase française, ou seul dans une cellule de tableau, ne mérite ni filet ni encadré : juste assez de place pour qu'une matra ou un bloc conjoint ne se resserre pas contre le texte latin voisin. La page le démontre elle-même dans l'un de ses spécimens (« le devanagari a besoin de plus d'interligne que le latin ») : ce filet de réserve applique tout de suite, à la ligne comme à la cellule, ce que ce spécimen se contente de décrire. Portée à .wrap--narrow, jamais à l'en-tête ni au sélecteur de langues qui vivent hors de lui. --------------------------------------------------------------------------- */ .p-pieges-hi .wrap--narrow [lang="hi"] { font-size: 1.1em; line-height: 1.5; } /* ---- pieges-zh.css ------------------------------------------------- */ /* ============================================================================ PIEGES / CHINOIS SIMPLIFIE — LA FEUILLE QUADRILLEE. PARTI PRIS : cette page EST une feuille de papier quadrille, celle sur laquelle on apprend a tracer les caracteres (le 田字格 des cahiers chinois) : chaque case est pleine — un caractere, un chiffre, un signe de ponctuation s'y logent a egalite, parce qu'aucun n'est plus petit qu'un autre dans cette ecriture. Le chinois ne pose jamais de blanc entre ses mots ; il pose des cases, a la suite, et le seul intervalle qui existe est la case elle-meme. Trois echelles de la meme idee, du mot-titre a la ponctuation citee au fil d'une phrase : 1. le mot-titre, le plus grand mot de la page, vit dans son propre cadre — une case agrandie, au format d'une planche de musee ; 2. une phrase citee en entier se lit sur sa propre reglure, comme une ligne du cahier ; 3. un caractere ou un signe cite seul, au milieu d'une phrase francaise, redevient une case qu'on peut examiner — la virgule d'enumeration autant que le caractere qui compte par dizaines de mille. PORTEE : un seul selecteur ici, .p-pieges-zh (voir build\CONTRAT-COMPOSITION.md). La vitrine commune aux sept pages de langue vit deja dans build\compositions\pieges.css sous .f-pieges, tenue par le constructeur. Ce fragment n'y touche pas : il ajoute seulement ce qui est propre au chinois, par-dessus. CE QUE CE FRAGMENT NE FAIT PAS, ET POURQUOI : build-langues.js pose le meme lang="zh-Hans" sur les trois p de chaque "registre", mais data-brut\pieges\zh.json montre que trois des cinq champs "exemple" sont en realite une prose francaise qui cite un mot chinois au passage, pas une phrase chinoise complete (l'un d'eux, "ton institutionnel...", est meme entierement en francais). Leur poser un traitement pense pour de l'ecriture chinoise continue habillerait du francais comme si c'etait la matiere etudiee. Ce fragment reserve donc la case pleine (section 3) aux endroits ou le contenu est verifiablement chinois — les paires Juste / A eviter, ou juste et faux viennent toujours de zh.json en chinois — et donne aux registres un traitement sobre, valable quel que soit le melange de langue (section 4). ============================================================================ */ /* --------------------------------------------------------------------------- 1. L'OUVERTURE — LE MOT-TITRE DANS SON CADRE Le h1 empile deja "Chinois simplifie" puis, en grand, "简体中文" (pieges.css). On lui donne ici son cadre : la plus grande case de la page, pour le plus important de ses mots. align-self:flex-start l'empeche de s'etirer a la largeur de la colonne : une etiquette de specimen se dimensionne a son mot, elle ne s'etire pas jusqu'au bord. --------------------------------------------------------------------------- */ .p-pieges-zh .f-pieges h1 span[lang] { align-self: flex-start; border: 1px solid var(--rule); padding: var(--s-5) var(--s-8); text-align: center; } /* --------------------------------------------------------------------------- 2. LES CITATIONS ISOLEES — CHAQUE CARACTERE CITE EST UNE CASE Des dizaines de fois sur cette page, une phrase francaise cite un seul caractere ou un mot court — un classificateur, un pronom, une virgule d'enumeration, le caractere qui groupe par dix mille. build-langues.js les marque deja d'un automatique (fonction echLangue) : on leur donne ici la case qui leur manquait. Une bordure sur les quatre cotes, et une marge qui les ecarte du mot francais voisin — le texte source les colle parfois directement, sans espace ("。est un caractere", "annee年mois月jour日"). Aucune largeur forcee, aucun ratio impose : un mot de deux caracteres a simplement une case un peu plus large qu'un mot d'un seul, exactement comme sur une feuille quadrillee. --------------------------------------------------------------------------- */ .p-pieges-zh h3 span[lang="zh-Hans"], .p-pieges-zh p span[lang="zh-Hans"], .p-pieges-zh td span[lang="zh-Hans"] { border: 1px solid var(--rule); background: var(--bg-alt); margin-inline: 0.15em; padding: 0.05em 0.3em; line-height: 1.5; } /* --------------------------------------------------------------------------- 3. LES PHRASES ENTIERES — SUR LEUR PROPRE REGLURE Les paires Juste / A eviter sont les seules phrases chinoises completes et sures de cette page (voir la note de tete). Elles recoivent le traitement le plus marque : une reglure au-dessus, comme le trait d'un cahier, avant que le caractere ne commence ; une taille et un interlignage un peu plus larges, un ajustement courant pour du texte chinois pose a cote de texte latin de meme corps. white-space:pre-line corrige une regle sinon invisible : le specimen "Une ponctuation ne peut pas tomber en tete de ligne" oppose deux versions qui ne different que par la position d'un retour a la ligne, une virgule qui reste en fin de ligne contre une virgule qui commence la suivante. Sans cette regle, le saut de ligne du JSON est un blanc comme un autre et les deux versions s'affichent identiques : la demonstration s'annule elle-meme. --------------------------------------------------------------------------- */ .p-pieges-zh .f-pieges__specimen .etat p[lang="zh-Hans"] { white-space: pre-line; border-block-start: 1px solid var(--rule-soft); margin-block-start: var(--s-3); padding-block-start: var(--s-3); font-size: var(--t-m); line-height: 1.7; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------------- 4. LES REGISTRES — CHACUN SA CASE D'INVENTAIRE build-langues.js livre chaque registre en h3 nu suivi de trois p, hors de .f-pieges__specimen (la meme observation vaut pour pieges-es.css) : ces cinq entrees n'ont donc aucun numero d'inventaire, a la difference des dix-huit specimens plus haut sur la page. On leur en donne un ici, avec un compteur SEPARE (registre, pas specimen) pose sur .p-pieges-zh lui-meme plutot que sur .wrap--narrow : .wrap--narrow porte deja counter-reset:specimen dans pieges.css avec le meme sous-selecteur, et build-compositions.js charge pieges.css APRES ce fragment (ordre alphabetique des pages) — un second counter-reset au meme endroit gagnerait la cascade sans jamais s'appliquer. Le "quand" et le "pourquoi" restent sobres et sans traitement de script : seule leur place dans le flux change. L'"exemple" (deuxieme p) recoit un simple filet d'accent, valable que son contenu soit chinois ou francais, pour la raison ecrite en tete de fichier. --------------------------------------------------------------------------- */ .p-pieges-zh { counter-reset: registre; } .p-pieges-zh .wrap--narrow > h3 { counter-increment: registre; display: flex; align-items: baseline; gap: var(--s-4); margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); font-size: var(--t-l); } .p-pieges-zh .wrap--narrow > h3:first-of-type { margin-block-start: var(--s-12); } .p-pieges-zh .wrap--narrow > h3::before { content: counter(registre, decimal-leading-zero); flex: none; border: 1px solid var(--rule); background: var(--bg); padding: var(--s-1) var(--s-2); font: 700 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--ink-mid); } .p-pieges-zh .wrap--narrow > h3 + p { margin-block-start: var(--s-3); max-width: 62ch; color: var(--ink-mid); } .p-pieges-zh .wrap--narrow > h3 + p + p { margin-block-start: var(--s-5); max-width: 48ch; border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-5); padding-block: var(--s-1); } .p-pieges-zh .wrap--narrow > h3 + p + p + p { margin-block-start: var(--s-5); max-width: 62ch; color: var(--ink-mid); font-size: var(--t-s); } /* --------------------------------------------------------------------------- 5. LES FAUX AMIS — LA CASE DE LA BONNE REPONSE Quatre colonnes ici contre trois au plus ailleurs sur la page : le tableau se reconnait a la forme de son en-tete (thead a quatre th), pas a sa place dans le fichier, ce qui tient meme si une entree de donnee bouge. La colonne "juste" vient toujours de zh.json en chinois pur ; la colonne "le piege" melange souvent une phrase francaise et une courte citation chinoise entre guillemets — elle reste donc sobre. --------------------------------------------------------------------------- */ .p-pieges-zh .table-wrap:has(thead th:nth-child(4)) td:nth-child(2) { color: var(--ink-mid); font-style: italic; } .p-pieges-zh .table-wrap:has(thead th:nth-child(4)) td:nth-child(3) { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); font-weight: 600; } /* --------------------------------------------------------------------------- 6. LES CHIFFRES — MEME CASE POUR TOUS LES CHIFFRES La case pleine ne vaut pas que pour les caracteres : le tableau des pluriels compare 1, 3 et 1000 devant le meme 个, et le tableau des faux amis compare plusieurs comptages. Des chiffres tabulaires, de largeur egale entre eux, sont la version typographique de la meme idee. --------------------------------------------------------------------------- */ .p-pieges-zh td[lang="zh-Hans"] { font-variant-numeric: tabular-nums; } /* ---- pieges.css ---------------------------------------------------- */ /* ============================================================================ PIEGES — LE CABINET DE CURIOSITES. PARTI PRIS : cette page, et les sept qu'elle ouvre, SONT un cabinet de curiosites linguistique. Un piege n'est jamais noye dans une liste : il est un specimen presente seul, sous verre, avec son etiquette et sa source. Le sommaire (.p-pieges) est la salle d'entree qui montre les vitrines ; les sept pages de langue (.f-pieges) sont les vitrines elles-memes. DEUX PORTEES DANS CE FRAGMENT, ET C'EST VOULU (CONTRAT-COMPOSITION.md) : .p-pieges pour le sommaire, .f-pieges pour les sept pages engendrees par build\tools\build-langues.js. Ce generateur a ete complete de trois classes pour porter la mise en scene : `.f-pieges__specimen` autour de chaque regle et de chaque registre, `.f-pieges__provenance` sur la liste des sources. Aucun mot n'a change, aucune source n'a bouge, aucun marqueur data-chiffre n'a ete touche. AUCUN NUMERO NE CLASSE. Les sept portes du sommaire n'ont pas de rang entre elles : pas de numero pose dessus. Le compteur des specimens de langue est un numero D'INVENTAIRE, comme une planche de musee — jamais un ordre a suivre : c'est pour cela qu'il est purement decoratif (::before, un chiffre nu) et jamais un texte invente. ============================================================================ */ /* --------------------------------------------------------------------------- 1. LE SOMMAIRE — LA SALLE D'ENTREE (.p-pieges) --------------------------------------------------------------------------- */ /* --- Les deux vitrines : le francais et l'arabe, montres cote a cote --- */ .p-pieges__vitrines { margin-block-start: var(--s-8); } .p-pieges__vitrine { margin: 0; border: 1px solid var(--rule); background: var(--bg); padding: var(--s-6) var(--s-6) var(--s-5); } .p-pieges__vitrine h3 { margin-block-start: 0; font-size: var(--t-m); padding-block-end: var(--s-3); border-block-end: 1px solid var(--rule-soft); } .p-pieges__vitrine .grid { margin-block-start: var(--s-5); } .p-pieges__vitrine figcaption { display: block; margin-block-start: var(--s-5); padding-block-start: var(--s-3); border-block-start: 1px solid var(--rule-soft); } /* --- Les pieces transversales : quatre petits specimens dans une salle nue, sur l'appui deja donne par .apart (filet et fond du socle systeme). --- */ .p-pieges__piece h3 { margin-block-start: 0; font-size: var(--t-base); } .p-pieges__piece p:last-child { margin-block-end: 0; } /* --- Les sept portes : chaque carte montre d'abord l'ecriture du pays d'origine, en grand ; le nom francais devient l'etiquette au-dessus, petite et tracee — jamais un drapeau. Aucun ordre n'est affirme entre les sept : pas de numero, pas de card__num, qui mentirait sur un rang qui n'existe pas. */ .p-pieges .grid .card { padding-block: var(--s-8) var(--s-6); } .p-pieges .grid .card h3 { display: flex; flex-direction: column; gap: var(--s-1); margin-block: 0 var(--s-2); font: 700 var(--t-xs)/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mid); } .p-pieges .grid .card h3 span[lang] { font-family: var(--serif); font-size: var(--t-xl); font-weight: 500; letter-spacing: -0.01em; text-transform: none; color: var(--ink); } /* --- Le protocole de chaque vitrine tient sur une suite dont l'ORDRE est affirme par le texte lui-meme (« dans cet ordre ») : le compteur numerote du socle est donc juste ici, contrairement aux sept portes plus haut. --- */ .p-pieges .compo-etapes { margin-block-start: var(--s-6); } /* --- La salle de sortie : bande sombre, derniere piece du parcours. Le systeme donne deja a .bande--profonde une encre claire et des liens repris en --accent-on-dark ; la puce du .checklist, elle, reste dessinee avec --accent tout court (le rouge pense pour un fond clair) et doit recevoir la meme correction, sous peine d'un rouge sombre sur fond quasi noir — un ecart deja mesure a 2,07:1 dans les jetons du systeme. */ .p-pieges .bande--profonde .checklist li::before { border-color: var(--accent-on-dark); } /* --------------------------------------------------------------------------- 2. LES SEPT VITRINES — LES PAGES DE LANGUE (.f-pieges) --------------------------------------------------------------------------- */ /* Le nom de la langue, dans sa PROPRE ecriture, est le plus grand mot de sa page : le francais glisse au-dessus comme une etiquette de tiroir. Aucune contrainte de largeur : un mot ecrit dans une autre ecriture ne doit pas casser contre une mesure pensee pour le latin. */ .f-pieges h1 { display: flex; flex-direction: column; gap: var(--s-2); margin-block-start: 0; max-width: none; font: 700 var(--t-l)/1.3 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-mid); } .f-pieges h1 span[lang] { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 500; letter-spacing: -0.02em; text-transform: none; color: var(--ink); } /* Chaque section (l'ecriture, la ponctuation, traduire une interface...) est une salle neuve de la meme galerie : un filet et un grand blanc l'annoncent. */ .f-pieges h2 { margin-block-start: var(--s-20); padding-block-start: var(--s-10); border-block-start: 1px solid var(--rule); } .f-pieges h2:first-of-type { margin-block-start: var(--s-12); } /* Les tableaux de faits (faits de base, pluriels, nombres, dates, faux amis) sont deja des vitrines completes : leur legende est leur etiquette, pas besoin d'un numero de plus. */ .f-pieges .table-wrap { border: 1px solid var(--rule); background: var(--bg-alt); padding: var(--s-5) var(--s-6); margin-block: var(--s-8); } /* --- Le specimen : une regle ou un registre, sous verre, avec son numero d'inventaire. Le compteur repart au premier specimen de chaque page. --- */ .f-pieges .wrap--narrow { counter-reset: specimen; } .f-pieges__specimen { counter-increment: specimen; border: 1px solid var(--rule); background: var(--bg-alt); padding: var(--s-6); margin-block: var(--s-8); } .f-pieges__specimen::before { content: counter(specimen, decimal-leading-zero); display: inline-block; margin-block-end: var(--s-4); border: 1px solid var(--rule); background: var(--bg); padding: var(--s-1) var(--s-3); font: 700 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; color: var(--ink-mid); } .f-pieges__specimen h3 { margin-block-start: 0; } .f-pieges__specimen .grid { margin-block-start: var(--s-5); } .f-pieges__specimen p.small.muted { margin-block-start: var(--s-5); padding-block-start: var(--s-3); border-block-start: 1px solid var(--rule-soft); } /* --- La liste des sources, en fin de page : un registre pose a plat, pas une liste a puces. Chaque ligne sur un filet fin, la premiere nue. --- */ .f-pieges__provenance { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); } .f-pieges__provenance li { padding-block-start: var(--s-2); border-block-start: 1px solid var(--rule-soft); font-size: var(--t-s); color: var(--ink-mid); } .f-pieges__provenance li:first-child { border-block-start: 0; padding-block-start: 0; } /* ---- plan-du-site.css ---------------------------------------------- */ /* ============================================================================ .p-plan-du-site — LE PLAN DU SITE, EN CARTE PARTI PRIS : cette page n'est pas un sommaire qui se lit du haut vers le bas, c'est une carte qui se balaie d'un regard. Le territoire du site tient en cinq secteurs — pas des paragraphes empilés, des boîtes posées côte à côte, pleine largeur, dont la hauteur RÉELLE (jamais choisie à la main) dit combien chacun pèse. Une légende ouvre la carte : le total qui donne l'échelle, puis l'index des cinq secteurs et leur compte — pour qu'on repère la RUBRIQUE avant la page, exactement l'ordre de lecture d'une vraie carte, jamais l'inverse. Deux secteurs portent une famille entière sous une seule de leurs pages (les sept langues des pièges, les articles du blog) : elle apparaît en essaim de points satellites, plus petits, moins appuyés — le hameau autour du bourg, jamais confondu avec lui. C'est cette page, plus qu'aucune autre, qui doit donner à voir l'AMPLEUR du site : elle est la seule dont le sujet est le site entier plutôt qu'une de ses parties. ============================================================================ */ /* --- LA LÉGENDE : l'échelle, puis l'index des cinq secteurs ---------------- */ .p-plan-du-site .plan-legende { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); } .p-plan-du-site .plan-legende__index { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3); flex: 1 1 20rem; } .p-plan-du-site .plan-legende__index a { display: inline-flex; align-items: center; gap: var(--s-3); min-block-size: 44px; border: 1px solid var(--rule); padding-inline: var(--s-4); background: var(--bg); font: 600 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); text-decoration: none; transition: border-color 160ms var(--easing), color 160ms var(--easing); } .p-plan-du-site .plan-legende__index a:hover, .p-plan-du-site .plan-legende__index a:focus-visible { border-color: var(--accent); color: var(--accent); } .p-plan-du-site .plan-legende__index b { font: 700 var(--t-s)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--accent); } /* --- LES SECTEURS : cinq territoires, pleine largeur, hauteur naturelle ---- */ /* La grille elle-même vient du socle, .compo-trio, posée dans le HTML à côté de cette classe : ce fragment n'ajoute que ce qu'il ne fournit pas déjà — que chaque secteur garde SA hauteur plutôt que de s'étirer sur celle du plus grand, seule façon de laisser VOIR que les cinq territoires n'ont pas le même poids, sans écrire un seul chiffre de mise en page à la main. */ .p-plan-du-site .plan-secteurs { counter-reset: secteur; align-items: start; } .p-plan-du-site .plan-secteur { counter-increment: secteur; border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); background: var(--bg); padding: var(--s-6); } .p-plan-du-site .plan-secteur__titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); margin-block-start: 0; } .p-plan-du-site .plan-secteur__titre::before { content: counter(secteur, decimal-leading-zero); font: 600 var(--t-s)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); border: 1px solid var(--rule); padding: var(--s-1) var(--s-2); } .p-plan-du-site .plan-secteur__compte { margin-inline-start: auto; font: 600 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); white-space: nowrap; } /* --- LES PAGES DU SECTEUR : compactes, la description tenue en lisière ---- */ .p-plan-du-site .plan-secteur__pages { list-style: none; margin: var(--s-5) 0 0; padding: 0; } .p-plan-du-site .plan-secteur__entree { padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-soft); } .p-plan-du-site .plan-secteur__entree:first-child { padding-block-start: 0; border-block-start: 0; } .p-plan-du-site .plan-secteur__lien { display: flex; align-items: center; min-block-size: 44px; font: 600 var(--t-s)/1.3 var(--sans); color: var(--ink); text-decoration: none; transition: color 160ms var(--easing); } .p-plan-du-site .plan-secteur__lien:hover, .p-plan-du-site .plan-secteur__lien:focus-visible { color: var(--accent); } /* LE RESUME SE LIT EN ENTIER, ET LA COUPE A ETE RETIREE. Il tenait dans deux lignes par -webkit-line-clamp, avec l'idee que « le texte complet reste dans le HTML, donc pour tout lecteur d'écran ». C'est vrai d'un lecteur d'écran et faux de tous les autres : la sonde navigateur a mesuré de 23 à 114 px de texte coupés sur cette page, soit jusqu'à cinq lignes de notice qu'aucune personne voyante ne pouvait atteindre — ni à la souris, ni au clavier, ni en sélectionnant. Et la coupe se resserre justement quand on agrandit le texte : à 200 % de zoom, ou avec le réglage « Très grande » du panneau de lecture, deux lignes portent deux fois moins de mots. C'est un manquement au 1.4.4. La colonne courte reste, elle : c'est max-width qui la tient, pas la coupe. */ .p-plan-du-site .plan-secteur__resume { display: block; max-width: 48ch; margin-block-start: 0; } /* --- LES SATELLITES : le hameau autour du bourg ---------------------------- */ .p-plan-du-site .plan-secteur__souslabel { margin: var(--s-4) 0 var(--s-2); font: 600 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); } .p-plan-du-site .plan-secteur__satellites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); } .p-plan-du-site .plan-secteur__satellites a { display: inline-flex; align-items: center; min-block-size: 44px; max-width: 16rem; border: 1px solid var(--rule-soft); padding: var(--s-2) var(--s-3); font: 500 var(--t-xs)/1.25 var(--sans); color: var(--ink-mid); text-decoration: none; transition: border-color 160ms var(--easing), color 160ms var(--easing); } .p-plan-du-site .plan-secteur__satellites a:hover, .p-plan-du-site .plan-secteur__satellites a:focus-visible { border-color: var(--accent); color: var(--accent); } /* --- L'ANNEXE : les fichiers de service, en registre mineur ---------------- */ .p-plan-du-site .plan-annexe { margin-block-start: var(--s-16); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule); } .p-plan-du-site .plan-annexe h2 { font-size: var(--t-m); } .p-plan-du-site .plan-annexe ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-8); } .p-plan-du-site .plan-annexe a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-mid); font-size: var(--t-s); transition: color 160ms var(--easing); } .p-plan-du-site .plan-annexe a:hover, .p-plan-du-site .plan-annexe a:focus-visible { color: var(--accent); } /* ---- qualite.css --------------------------------------------------- */ /* ============================================================================ PARTI PRIS — LE BANC DE MESURE. Cette page EST un banc de mesure : elle aligne des lectures sur des echelles graduees, colonne contre colonne, pour que l'ecart entre deux paires se lise d'un coup d'oeil. Chaque jauge reste MUETTE seule : le chiffre exact vit toujours a cote d'elle, en toutes lettres, jamais remplace par elle. Deux instruments cohabitent et ne se confondent jamais : le relevé de notre propre registre (echelle 0 a 1, bande douce) et la page de comparaison publiee par Mozilla (echelle sur 100, bande simple, jeux de test differents). Chacun garde sa bande, son sur-titre et sa legende ; aucune jauge ne saute de l'un a l'autre. La derniere partie, « ce qu'un bon score ne prouve pas », quitte deliberement la regle graduee : bande inversee, plus une seule jauge, plus une seule colonne alignee. C'est le point ou l'instrument avoue ce qu'il ne mesure pas, et il devait se voir sans qu'on ait besoin de le lire. ============================================================================ */ /* --- LA PLAQUE SIGNALETIQUE : les reperes de l'instrument COMET22, a cote de la prose qui l'explique, jamais a la place. */ .p-qualite .p-qualite__plaque h3 { margin-block-start: 0; } .p-qualite .p-qualite__releve { display: flex; flex-direction: column; margin-block-start: var(--s-4); } .p-qualite .p-qualite__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); padding-block: var(--s-2); border-block-end: 1px solid var(--rule); font-size: var(--t-s); } .p-qualite .p-qualite__ligne:last-child { border-block-end: 0; } .p-qualite .p-qualite__ligne dt { color: var(--ink-mid); font-weight: 600; } .p-qualite .p-qualite__ligne dd { margin: 0; text-align: end; } /* --- LA JAUGE : un filet et un fond du systeme, rien de plus. Le chiffre reste au-dessus, en texte ; la jauge n'est qu'un repere visuel, donc aria-hidden. */ .p-qualite .jauge { display: block; font-variant-numeric: tabular-nums; } .p-qualite .jauge__piste { display: block; position: relative; inline-size: 100%; block-size: 0.4rem; margin-block-start: 0.4em; background: var(--bg-alt); border: 1px solid var(--rule); } .p-qualite .jauge__valeur { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ink); } .p-qualite .jauge__valeur--accent { background: var(--accent); } /* Un emplacement SANS lecture : le pointille dit « aucune mesure », jamais un zero qui laisserait croire a une valeur mesuree tres basse. */ .p-qualite .jauge__piste--vide { border-style: dashed; background: none; } /* Le relevé de notre registre repose une ligne par paire dans une table : la jauge s'y ajoute sans rien retirer, aucun scope ni caption ne bouge. */ .p-qualite table .jauge { margin-block-start: 0.15em; } /* La ligne de notre propre moteur, dans la table Mozilla : le meme filet d'accent que .moment-marque, applique a un en-tete de ligne plutot qu'a un bloc de texte. */ .p-qualite .ligne-notre-moteur th { border-inline-start: 3px solid var(--accent); padding-inline-start: var(--s-3); } /* --- LES TROIS REPERES : meilleure paire, moins bien notee, et l'emplacement sans aucune lecture — trois cartes de meme gabarit, pour que l'absence de chiffre se voie exactement a la place ou un chiffre est attendu. */ .p-qualite .p-qualite__reperes { margin-block-start: var(--s-8); } .p-qualite .p-qualite__repere { border: 1px solid var(--rule); border-block-start: 3px solid var(--ink); padding: var(--s-5); } .p-qualite .p-qualite__repere b { display: block; font: 600 var(--t-2xl)/1.05 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-block-start: var(--s-1); } .p-qualite .p-qualite__repere .jauge__piste { margin-block-start: var(--s-3); } .p-qualite .p-qualite__repere--vide { border-block-start-color: var(--rule); } .p-qualite .p-qualite__repere--vide b { font: 600 var(--t-l)/1.2 var(--serif); color: var(--ink-mid); letter-spacing: 0; } /* --- LA CHAINE DU PIVOT : compo-etapes du socle, avec un troisieme pas qui n'en est pas un — jamais mesure, donc jamais numerote comme les deux autres. */ .p-qualite .p-qualite__chaine { max-width: 42rem; } .p-qualite .p-qualite__chaine li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4); } .p-qualite .p-qualite__chaine .p-qualite__pas-mesure::before { content: "?"; border-style: dashed; color: var(--ink-mid); } /* --- LA BANDE INVERSEE : « ce qu'un bon score ne prouve pas » quitte la regle graduee. Le systeme donne deja --accent-on-dark pour un lien sur fond noir ; le checklist du systeme, lui, ne prevoit pas ce cas, donc on lui donne la meme teinte plutot que d'en inventer une. */ .p-qualite .bande--profonde .checklist li::before { border-color: var(--accent-on-dark); } /* ---- questions.css ------------------------------------------------- */ /* ============================================================================ PARTI PRIS — questions.css Cette page EST un guichet d'accueil : un annuaire mural qui reste sous les yeux pendant qu'on traverse la salle, cinq comptoirs numerotes, et a chaque poste une question qui s'affiche comme un appel — nue, en grand — suivie d'une reponse qui se prend comme un ticket a la fenetre : encadree, posee sur un fond distinct. Le seul critere : trouver SA question en trois secondes, jamais lire la page de haut en bas. Le numero d'un poste est le meme dans l'annuaire et au comptoir, comme un ticket qu'on retrouve dans la file : les deux se comptent sur la meme suite de onze questions, dans le meme ordre. Composé avec le socle : compo-colle tient l'annuaire en place au defilement, le reste est ecrit ici parce qu'aucune primitive du socle ne fait un annuaire groupe ni un poste a ticket. Aucun jeton, aucune couleur, aucun arrondi n'est ajoute. ============================================================================ */ /* --- L'OUVERTURE : compacte, la salle commence tout de suite dessous. ----- */ .p-questions .page-head { padding-block-end: var(--s-6); border-block-end: 1px solid var(--rule); } /* --- LA SALLE : l'annuaire et les comptoirs cote a cote des que la largeur le permet. Sous 56rem, ordre de lecture inchange : l'annuaire d'abord, les comptoirs ensuite, comme la page d'origine. */ .p-questions .guichet { margin-block-start: var(--s-10); } @media (min-width: 56rem) { .p-questions .guichet { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-10); align-items: start; } } /* --- L'ANNUAIRE : le panneau qu'on lit avant de choisir sa file. Meme grammaire de cadre que les autres pages de reference de la maison (filet + liseré d'accent en tete). compo-colle, pose dans le HTML, le garde en vue. */ .p-questions .annuaire { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); background: var(--bg-alt); padding: var(--s-6); margin-block-end: var(--s-8); counter-reset: poste; } .p-questions .annuaire__groupe + .annuaire__groupe { margin-block-start: var(--s-6); padding-block-start: var(--s-6); border-block-start: 1px solid var(--rule-soft); } .p-questions .annuaire__repere { margin: 0 0 var(--s-3); font: 700 var(--t-xs)/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-mid); } .p-questions .annuaire ul { list-style: none; margin: 0; padding: 0; } .p-questions .annuaire li { counter-increment: poste; } .p-questions .annuaire li + li { margin-block-start: var(--s-1); } /* La cible tactile de 44 px, tenue par le lien entier plutot que par le mot : la ligne complete se prend au clic, du numero jusqu'a la fin du texte. */ .p-questions .annuaire a { display: flex; align-items: baseline; gap: var(--s-3); padding-block: var(--s-2); min-block-size: 44px; font: 600 var(--t-s)/1.35 var(--sans); } .p-questions .annuaire a::before { content: counter(poste, decimal-leading-zero); flex: none; font: 700 var(--t-xs)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); } /* Le texte de la question peut retomber sur plusieurs lignes sans pousser le numero hors de sa colonne. */ .p-questions .annuaire a > span { min-inline-size: 0; } /* --- LES COMPTOIRS : cinq sections, chacune un mouvement. ------------------ */ .p-questions .comptoirs { counter-reset: comptoir; } .p-questions .comptoir { counter-increment: comptoir; } .p-questions .comptoir + .comptoir { margin-block-start: var(--s-12); } .p-questions .comptoir h2 { display: flex; align-items: baseline; gap: var(--s-3); margin-block-start: 0; padding-block-start: var(--s-4); border-block-start: 3px solid var(--accent); } .p-questions .comptoir h2::before { content: counter(comptoir, decimal-leading-zero); font: 600 var(--t-base)/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--accent); } .p-questions .comptoir > h2 + .poste { margin-block-start: var(--s-6); } /* --- LE POSTE : l'appel nu, le ticket encadre. Grille a deux colonnes, le numero occupe la premiere sur toute la hauteur du poste, l'appel et le ticket se succedent dans la seconde. La reponse garde ainsi son ancre et reste un couple hXX + p directement voisin, lisible poste par poste. */ .p-questions .poste { display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-5); counter-increment: poste; } .p-questions .poste + .poste { margin-block-start: var(--s-8); padding-block-start: var(--s-8); border-block-start: 1px solid var(--rule-soft); } .p-questions .poste::before { content: counter(poste, decimal-leading-zero); grid-row: 1 / -1; grid-column: 1; align-self: start; padding-block-start: 0.1em; font: 600 var(--t-l)/1 var(--serif); font-variant-numeric: tabular-nums; color: var(--ink-mid); } /* L'APPEL : nu, sans cadre, il ne se confond jamais avec ce qu'on repond. */ .p-questions .poste h3 { grid-column: 2; margin-block: 0; font-size: var(--t-l); line-height: 1.2; } /* LE TICKET : encadre, pose sur un fond distinct, c'est ce qu'on remet a la personne. La transition ne joue qu'a l'arrivee par ancre, un etat provoque par la personne — jamais au chargement de la page. */ .p-questions .poste p { grid-column: 2; margin-block-start: var(--s-3); max-width: 62ch; border-inline-start: 3px solid var(--rule); background: var(--bg-alt); padding: var(--s-4) var(--s-5); transition: background-color 200ms var(--easing), border-color 200ms var(--easing); } /* --- L'ARRIVEE PAR ANCRE : la fenetre qui repond s'allume. D'autres pages du site pointent vers une question precise ; sans script, :target signale au premier regard que c'est bien la reponse attendue. Etat provoque par la personne, le budget du contrat l'autorise nommement. */ .p-questions h3:target { color: var(--accent); } .p-questions h3:target + p { background: var(--accent-bg); border-inline-start-color: var(--accent); } /* --- L'IMPRESSION : un ticket ne se coupe pas entre deux pages de papier, et l'annuaire, qui n'a plus de fenetre a suivre, n'a plus de raison de rester colle. --------------------------------------------------------------- */ @media print { .p-questions .guichet { display: block; } .p-questions .annuaire { position: static; } .p-questions .poste { break-inside: avoid; } } /* ---- signaler-une-erreur.css --------------------------------------- */ /* Cette page n'est pas un formulaire de contact suivi d'une liste : c'est un guichet de quatre bons d'incident. Une traduction fausse, un lien mort, un chiffre faux, un problème d'accessibilité ne s'instruisent pas pareil, donc chacun a sa fiche, complète par elle-même : qui a trouvé une seule chose lit une seule fiche, la pièce à joindre et la suite donnée posées ensemble, sans renvoi ailleurs sur la page. Aucun numéro sur les quatre fiches. Elles n'ont pas de rang entre elles, et un badge 01/02/03/04 laisserait croire à un ordre à suivre qui n'existe pas : on lit celle qui correspond à ce qu'on a trouvé, pas les quatre à la file. La quatrième fiche (accessibilité) n'est pas un guichet ouvert : ce courriel ne la traite pas. Elle perd le filet rouge réservé aux trois fiches que cette adresse instruit réellement, prend un fond plus sourd, et n'a pas de champ « Pièces à joindre » puisque rien ne se collecte ici. La distinction tient à la structure et au contenu, pas à la seule couleur. */ /* ---- Le guichet : quatre fiches, deux par deux dès que la largeur le permet */ .p-signaler-une-erreur .guichet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); } @media (min-width: 40rem) { .p-signaler-une-erreur .guichet { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- La fiche : un filet, une tranche d'accent en tête pour dire « instruite ici ». La quatrième perd cette tranche : voir le commentaire de tête. ----- */ .p-signaler-une-erreur .bon { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); background: var(--bg); padding: var(--s-6); } .p-signaler-une-erreur .bon--hors { border-block-start-color: var(--rule); background: var(--bg-alt); } .p-signaler-une-erreur .bon h3 { margin-block: 0 var(--s-5); font-size: var(--t-m); } /* ---- Les champs de la fiche : l'intitulé en petites capitales, la réponse juste dessous, comme sur un vrai formulaire. Un filet fin sépare deux champs quand il y en a deux ; la quatrième fiche n'en a qu'un, le :first-child lui retire un filet qui n'aurait rien à séparer. ------------------------------ */ .p-signaler-une-erreur .bon dl { margin: 0; display: grid; gap: var(--s-4); } .p-signaler-une-erreur .champ { padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule-soft); } .p-signaler-une-erreur .champ:first-child { padding-block-start: 0; border-block-start: 0; } .p-signaler-une-erreur .champ dt { font: 600 var(--t-xs)/1.3 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mid); margin-block-end: var(--s-1); } .p-signaler-une-erreur .champ dd { margin: 0; } /* ---- Le dépôt : le filet pointillé figure la ligne de détachement du bon, juste avant l'unique geste de la page, le lien de courriel. -------------- */ .p-signaler-une-erreur .depot { border-block-start: 1px dashed var(--rule); padding-block-start: var(--s-8); } /* ---- traduire.css -------------------------------------------------- */ /* ============================================================================ TRADUIRE — l'établi de travail. Ce que cette page EST : pas une vitrine de l'outil comme l'accueil, mais le poste de travail de quelqu'un qui a un vrai texte à traduire. Une seule table de travail en pleine largeur, encadrée d'un bandeau de réglages en tête et d'un bandeau d'action en pied ; au centre, deux zones qui se répondent à hauteur d'œil, le texte source et sa traduction, comme un cahier ouvert. En dessous, ce qu'il faut savoir avant de s'en servir se lit en fiches numérotées, posées comme des notes au-dessus du plan de travail. Aucune bande de couleur pleine page ici, à la différence de l'accueil : une seule surface continue du haut en bas de la page, pour que le contraste avec la vitrine soit sensible avant même de lire un mot. ============================================================================ */ /* --- LE CADRE DE L'ÉTABLI --------------------------------------------------- */ .p-traduire .etabli { border: 1px solid var(--rule); border-block-start: 3px solid var(--accent); background: var(--bg); } /* --- LE BANDEAU DE RÉGLAGES : à portée, sans encombrer la surface ---------- */ .p-traduire .etabli__reglages { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4) var(--s-6); background: var(--bg-alt); border-block-end: 1px solid var(--rule); padding: var(--s-5) var(--s-6); } .p-traduire .etabli__champ { flex: 1 1 14rem; max-width: 18rem; margin-block-end: 0; } .p-traduire .etabli__echanger { flex: none; } /* --- LA SURFACE : deux zones qui se répondent ------------------------------ */ .p-traduire .etabli__surface { display: grid; } .p-traduire .etabli__zone { display: flex; flex-direction: column; padding: var(--s-6); } .p-traduire .etabli__zone--source { border-block-end: 1px solid var(--rule); } .p-traduire .etabli__zone--sortie { background: var(--bg-alt); } .p-traduire .etabli__zone-label { display: block; font: 700 var(--t-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mid); margin-block-end: var(--s-3); } .p-traduire .etabli__zone .champ__aide { margin-block-end: var(--s-3); } .p-traduire #boite-source { flex: 1; inline-size: 100%; min-block-size: 14rem; border: 0; padding: 0; background: transparent; color: var(--ink); font: 400 var(--t-base)/1.62 var(--sans); resize: vertical; } .p-traduire #boite-source:focus-visible { outline-offset: 4px; } .p-traduire #boite-sortie { flex: 1; min-block-size: 14rem; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 var(--t-base)/1.62 var(--sans); color: var(--ink); } @media (min-width: 56rem) { .p-traduire .etabli__surface { grid-template-columns: 1fr 1fr; } .p-traduire .etabli__zone--source { border-block-end: 0; border-inline-end: 1px solid var(--rule); } .p-traduire #boite-source, .p-traduire #boite-sortie { min-block-size: 22rem; } } /* --- LE BANDEAU D'ACTION : la seule commande, au bord de la surface -------- */ .p-traduire .etabli__action { display: flex; justify-content: flex-end; background: var(--bg-alt); border-block-start: 1px solid var(--rule); padding: var(--s-5) var(--s-6) var(--s-3); } /* --- LE PIED : la jauge, l'état, le poids, dans le prolongement de l'action */ .p-traduire .etabli__pied { background: var(--bg-alt); padding: 0 var(--s-6) var(--s-6); } .p-traduire .etabli__pied progress { inline-size: 100%; margin-block-start: var(--s-3); } .p-traduire #boite-etat { margin-block: var(--s-3) 0; min-block-size: 1.5em; } .p-traduire #boite-poids { margin-block: var(--s-2) 0; } /* --- LE MODE D'EMPLOI, EN FICHES NUMÉROTÉES -------------------------------- */ .p-traduire .etabli-manuel h2 { margin-block-start: 0; } .p-traduire .etabli-manuel .table-wrap { margin-block: var(--s-5); }