/* ============================================================ OpenContact — les pages qui se LISENT (confidentialité, aide) Elles ne sont pas des écrans de l'app : elles doivent se lire sans rien installer, par quelqu'un qui n'a peut-être jamais ouvert OpenContact — un étudiant qui hésite, un établissement qui vérifie. D'où une feuille à part, courte, plutôt que de faire porter à `app.css` un usage qui n'est pas le sien. Elles empruntent en revanche TOUS les tokens : mêmes couleurs, mêmes polices, même thème sombre. Une page d'aide qui ne ressemble pas au produit n'inspire pas confiance. Une seule mesure de confort : la colonne de lecture est bornée à 62 caractères (`--doc-mesure`). Au-delà, l'œil perd sa ligne en revenant à la marge — c'est la seule règle typographique qu'une page de texte doit à son lecteur. ============================================================ */ :root{ --doc-mesure:38rem; } body{ margin:0;background:var(--surface-desktop);color:var(--text-body); font-family:var(--font-ui);font-size:var(--text-15);line-height:1.65; } /* le lien d'évitement : invisible tant qu'on ne l'atteint pas au clavier — et il vise un élément focalisable, sinon il ne déplacerait que le défilement (CLAUDE.md §5). MÊME DESSIN QUE DANS L'APP (`app.css`). Il en avait un second ici : même contrôle, deux apparences et deux techniques (un `left:-9999px` qui saute, contre un onglet qui descend). Un produit qui dessine deux fois le même objet apprend deux fois à celui qui s'en sert — §7 le dit des mots, ça vaut autant des contrôles. */ .skip{ /* `translateY(-100%)` et non `top:-48px` : un px ne suit pas la police, et à texte agrandi une bande d'accent restait en haut (app.css). */ position:fixed;top:0;left:10px;z-index:5000;transform:translateY(-100%); display:inline-flex;align-items:center;min-height:var(--control-h-touch); background:var(--accent);color:var(--on-accent); font-weight:var(--weight-bold);font-size:var(--text-13);padding:10px 14px; border:1px solid var(--border-strong);border-top:0;text-decoration:none; transition:transform 120ms; } .skip:focus{transform:none} /* ---- LA FENÊTRE ---- La barre de titre pose le navy du châssis : c'est l'idiome `.modal-h` de l'app, et elle PROMET une fenêtre. Sous elle, le texte était posé à nu sur `--surface-desktop` — le fond qui vit DERRIÈRE les fenêtres, jamais une surface où l'on écrit. Au poste, la colonne flottait donc sur le bureau : une barre de titre sans rien dessous, c'est-à-dire exactement l'endroit où cette feuille manquait son propre but. Le document prend son papier, et le reste est déjà écrit dans les tokens : contour franc, ombre dure, coins droits, aucun flou. · au pouce, la fenêtre est MAXIMISÉE — papier bord à bord, aucun trait sur les côtés : un cadre y volerait de la largeur à la seule chose qui compte, la ligne de texte ; · au poste, le bureau se voit autour, donc le papier prend son contour et son ombre. La géométrie du texte ne bouge pas d'un pixel : la fenêtre fait la largeur que `.dp` avait déjà, et la mesure reste à 61 caractères. */ .dw{ background:var(--surface-window);min-height:100dvh } /* ---- l'en-tête : le châssis, donc le navy ---- */ .dh{ background:var(--titlebar-accent-bg);color:var(--on-navy); border-bottom:1px solid var(--border-strong); padding:10px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap; } .dh h1{ margin:0;font-family:var(--font-pixel);font-size:var(--pixel-16); font-weight:400;text-transform:uppercase;letter-spacing:.1em; } /* Un seul dessin pour les deux : le retour à l'app et la page sœur sont la même chose, une porte posée dans la barre de titre. Elles se tapent au pouce comme n'importe quelle autre — 44 px de haut, et 44 px de large, parce que la HAUTEUR ne suffit pas : « Aide » ne faisait que 31 px. Le mot est court, la cible aussi, et l'exemption des liens en ligne (WCAG 2.5.5) ne couvre pas une porte. On élargit donc la BOÎTE sans déplacer le mot — les pixels gagnés se prennent du côté intérieur, là où il n'y a que du vide. Un `padding` aurait rentré le libellé et cassé l'alignement de la barre. */ .dh-back,.dh-sib{ color:var(--on-navy);text-decoration:none;font-family:var(--font-mono); font-size:var(--text-13);display:inline-flex;align-items:center; min-height:var(--control-h-touch);min-width:var(--control-h-touch); } /* LA PAGE SŒUR EST DANS LA BARRE DE TITRE, pas seulement au pied. Les réglages de l'app n'ont qu'UNE ligne pour les deux pages — « Aide et confidentialité » — et elle ouvre l'aide. Qui venait pour la confidentialité traversait 2 900 px avant de trouver le lien : c'est la définition d'« enterré ». Poussée à droite, elle ne coûte pas un rang de plus tant que la largeur le permet, et se range sous le titre quand elle ne rentre plus. */ .dh-sib{margin-left:auto;justify-content:flex-end} /* `:focus-visible` NE PART PAS avec le survol : ce sont deux états différents, et les envelopper ensemble priverait de repère celui qui tabule sur un appareil tactile. Même leçon que `:active`, §4. */ .dh-back:focus-visible,.dh-sib:focus-visible{text-decoration:underline} @media (hover:hover){ .dh-back:hover,.dh-sib:hover{text-decoration:underline} } /* ---- le corps, et le pied qui partage sa colonne ---- Le pied a QUITTÉ `
` : un `