/* COPIE AUTOMATIQUE DE public/base/mode-guide.css -- NE PAS EDITER ICI. La source est au banc ; `python tools/base/porter_reprise.py` refait cette copie, et son mode `verifier` signale toute divergence. */ /* ========================================================================= LE MODE GUIDE — l'aide sur la page, dans l'espace qui l'attendait ========================================================================= DEUX MODES, UN REGLAGE. En mode EXPERT (ce que le produit fait aujourd'hui), les blocs se suivent nus : celui qui connait la methode n'a pas a relire comment on lit une echelle qu'il lit depuis deux ans. En mode GUIDE, chaque bloc porte, sous le filet de son titre, trois phrases au plus : ce que le bloc montre, comment on le lit, ce qu'on en fait. POURQUOI SOUS LE TITRE ET PAS AILLEURS. L'aide en tiroir demande un clic et se lit hors du bloc qu'elle explique ; l'infobulle demande un survol et disparait. Entre le filet du titre et la premiere donnee, il y a une bande vide sur toutes les pages : c'est le seul endroit ou l'explication se lit AVANT la donnee, sans rien recouvrir. LE MODE EST L'ATTRIBUT `data-mode` DE ``. Sans attribut, on est en expert : un produit qui perd son script ne se met pas a cacher ses blocs. ========================================================================= */ /* Rien ne s'affiche hors du mode guide : le bandeau existe dans le balisage, il ne se montre que si on le demande. */ .guide-bandeau { display: none; } /* LA CLASSE REDITE, parce que les pages ont leurs propres regles de paragraphe. Sur `client-journey`, une regle de `journey.css` pese plus que la classe nue et repeignait le bandeau : encre 100 116 139 mesuree, la notre jetee. Le bandeau est un texte qu'on lit, pas une mention ; il doit gagner sur la couleur de paragraphe de la page qui l'accueille. */ html[data-mode="guide"] .guide-bandeau.guide-bandeau { display: block; /* IL SE RANGE SOUS LE FILET DU TITRE, pas contre la donnee : plus d'air en dessous qu'au-dessus, pour qu'il appartienne au titre. */ margin: 10px 0 16px; padding: 0 0 0 12px; border-left: 2px solid rgba(var(--accent-surface-rgb), 0.45); max-width: 96ch; /* L ENCRE COURANTE, PAS L ENCRE CALME. Le bandeau est un texte qu'on lit, pas une mention : sur les cartes claires du parcours, l'encre calme tombait a 4,2 (mesure). */ /* UN REPLI, PARCE QUE LE BANDEAU VA PLUS LOIN QUE LE SOCLE. Le mode guide vit aussi sur des pages qui ne chargent pas les couches retenues, `client-journey` en tete. La `var()` y tombe dans le vide, la declaration est jetee, et le bandeau herite d'une encre plus pale : mesure au pixel, 100 116 139 sur un sol a 230 227 216, soit 3,8. Le repli lit une primitive du niveau 1 que le theme clair deplace deja, donc il bascule comme le role qu'il remplace. */ color: var(--texte-plein, rgb(var(--ink-200-rgb))); font-size: 13px; line-height: 1.55; } /* LE NOM DU LECTEUR, quand deux versions coexistent. Sur les pages partagees, le praticien et le client ne lisent pas la meme chose du meme bloc ; la mention dit laquelle on lit, en un mot, sans occuper une ligne. */ .guide-bandeau__pour.guide-bandeau__pour { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: var(--rayon-gelule, 999px); background: rgba(var(--accent-surface-rgb, var(--portal-accent-rgb)), var(--voile-5, 0.14)); /* SUR UN VOILE D ACCENT, L ENCRE CALME NE TIENT PAS : 2,80 en clair, 3,22 en sombre. La mention est courte et en capitales, elle a besoin de l'encre vive. */ color: var(--texte-vif, rgb(var(--ink-50-rgb))); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; } /* L INTERRUPTEUR, dans la barre du haut a cote du theme. Il porte son mot : une icone seule ne dit pas « guide » (essaye, mesure, abandonne). */ .lk-top-bar__mode { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: var(--filet-epaisseur) solid transparent; border-radius: var(--rayon-controle); background: rgba(var(--white-rgb), var(--voile-5)); color: var(--texte-calme); font: inherit; font-size: 12px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .16s ease, color .16s ease; } .lk-top-bar__mode:hover { background: rgba(var(--white-rgb), var(--voile-6)); color: var(--texte-vif); } .lk-top-bar__mode:active { background: rgba(var(--white-rgb), var(--voile-7)); color: var(--texte-vif); } /* Allume, il porte l'accent : c'est un etat, pas une action. */ .lk-top-bar__mode[aria-pressed="true"] { background: rgba(var(--accent-surface-rgb), var(--voile-6)); border-color: rgba(var(--accent-surface-rgb), var(--voile-9)); color: var(--texte-vif); } .lk-top-bar__mode svg { width: 14px; height: 14px; flex: none; }