Prose et page légale
Une colonne de lecture, des paires clé et valeur, et rien d’autre.
La colonne
Un texte long se lit dans une colonne de 64ch : les intertitres à taille de lecture, les listes au carré vert, les liens soulignés en vert profond. Pour le corps d’une fiche, un sujet d’une page légale, le dispositif CII.
Le problème
Le travail de saisie mangeait les journées. Une demande arrive par mail ou en pièce jointe, quelqu’un la lit, retrouve le client, recopie le lieu, remplit la fiche, puis reconstitue un devis de mémoire. Tous les jours, pour chaque intervention.
Ce qui a été construit
Un assistant qui lit les demandes entrantes, retrouve le client et le lieu dans leur logiciel métier, et sort une fiche d’intervention prête à enregistrer. Il prépare aussi le devis.
Le devis combine trois sources : une recherche documentaire sur les devis déjà réalisés, les prestations enregistrées dans Solitech, et une recherche web sur les prix du marché.
Un opérateur garde la main
Rien ne s’enregistre sans relecture. L’assistant prépare, une personne valide.
<Prose>
<h2>Le problème</h2>
<p>Le travail de saisie mangeait les journées.</p>
<h3>Ce qui a été construit</h3>
<p>Un assistant qui lit les demandes entrantes.</p>
</Prose>| Classe | Zone | Valeur |
|---|---|---|
| .tr-prose | la colonne | 64ch au plus, marge clamp(20px, 3vw, 48px) de chaque côté |
| .tr-prose h2 | un intertitre | Outfit clamp(24px, 2.4vw, 34px), interligne 1,12, approche -0,025em, 1,5em au-dessus ; sans marge en tête de colonne |
| .tr-prose h3 | un sous-titre | Outfit clamp(19px, 1.5vw, 22px), 1,3em au-dessus |
| .tr-prose p | un paragraphe | ink-2, interligne 1,65, 0,9em au-dessus |
| .tr-prose ul, .tr-prose ol | une liste | retrait 1,3em, interligne 1,6 ; un carré vert à 0,7em devant chaque élément d’une liste à puces ; 0,35em entre deux éléments |
| .tr-prose a | un lien | encre, souligné en vert profond, 1 px à .22em ; 2 px au survol |
| .tr-prose strong | un mot appuyé | Inter 600, encre |
Les tailles de corps, de chapô et d’étiquette sont sur la page Texte long, avec le reste de la typographie.
Les paires
Les faits d’une page légale sont des paires : une clé en capitales, une valeur à l’encre, un trait pointillé entre deux. Aucune valeur n’est encore fournie : chaque paire montre sa pastille.
- Éditeur
- à fournir
- Directeur de la publication
- à fournir
- Hébergeur
- à fournir
<Cles paires={[
{ cle: 'Éditeur', valeur: null, attente: 'à fournir' },
{ cle: 'Directeur de la publication', valeur: null, attente: 'à fournir' },
{ cle: 'Hébergeur', valeur: null, attente: 'à fournir' },
]} />Le sommaire d’ancres
Une page légale est une page à rail : le sommaire à gauche, les sujets à droite. Le rail accepte des ancres aussi bien que des pages ; chaque entrée, numérotée, vise l’id d’un sujet.
<EnTetePage fil={[{ href: '/mentions-legales/', libelle: 'Mentions légales' }]} etiquette={ L.etiquette } titre={ L.titre } lead={ L.lead } />
<Section label="Les mentions légales">
<SectionsLegales sections={ L.sections }>
<div class="tr-legal tr-legal__suite" id="ecrire">
<h2>{ L.suite.titre }</h2>
<p class="tr-corps">{ L.suite.texte }</p>
<div class="tr-cta"><Bouton href="/contact/" variante="trait">{ L.suite.bouton }</Bouton></div>
</div>
</SectionsLegales>
</Section>| Classe | Zone | Valeur |
|---|---|---|
| .tr-legal | un sujet | padding vertical clamp(28px, 3.4vw, 48px), trait pointillé au-dessus, scroll-margin-top 96 px ; le premier sans trait ni padding haut |
| .tr-legal h2 | le titre du sujet | Outfit clamp(24px, 2.4vw, 34px), interligne 1,1, approche -0,03em, 24ch |
| .tr-legal .lead | l’entrée du sujet | 60ch, 12 px sous le titre |
| .tr-legal .tr-prose | la prose du sujet | 68ch, sans marge latérale ; h3 à clamp(17px, 1.3vw, 19px), paragraphes à var(--t-small) |
| .tr-legal .tr-cles > div | les paires du sujet | sans marge latérale |
| .tr-legal__suite | la suite | clamp(28px, 3vw, 40px) au-dessus, trait pointillé, padding haut clamp(20px, 2.4vw, 28px) |
Ce qu’une page légale n’a pas
Pas de scène, pas de bande, pas de carte, pas de cellule allumée. Un en-tête de page sans scène, le sommaire, les sujets en prose et en paires, la suite, le pied : la page se lit, et c’est tout ce qu’on lui demande.
- Emploi
- Les mentions légales, la politique de confidentialité, et toute page qui n’existe que pour être lue.
- Moment
- Quand la page n’a rien à vendre et rien à montrer : du texte, des faits, un sommaire.
- Jamais
- Un formulaire dans le corps, une scène pour faire joli, une bande de cellules pour rythmer : la page garde l’en-tête et le pied du site, et rien entre eux que le texte et deux boutons au trait pour la suite.
| Bloc | Composant | Donnée |
|---|---|---|
| L’en-tête sans scène | EnTetePage sans scene : FilAriane, h1, lead | fil Accueil › Mentions légales ; étiquette, titre et chapô de pages-v3 |
| Le sommaire | SectionsLegales : un Rail d’ancres dans une page à rail | une entrée numérotée par sujet, vers son id ; sept sujets aux mentions légales, neuf à la politique |
| Un sujet | section.tr-legal : le numéro en tr-etq, un h2, un lead, parfois un tr-corps, des Cles, une Prose en h3 et paragraphes, une note | les sections de pages-v3 : id, titre, intro, texte, cles, blocs, note |
| La suite | div.tr-legal__suite : un h2, un tr-corps, deux Boutons au trait | écrire par le contact, et le lien vers l’autre page légale |
| Le pied | Pied | MARQUE.groupe.phrase, V3.pied, la ligne légale |
Les deux pages légales sont construites ainsi. Ce qui manque est dans leurs valeurs : l’éditeur, le directeur de la publication, l’hébergeur, les dates de mise à jour, tous marqués « à compléter » dans pages-v3.
RègleUne page légale se lit : une colonne, des paires, un sommaire, et pas un décor.