/* 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. ========================================================================= */ /* LE RAPPORT N'EST PAS SOUS L'INTERRUPTEUR, LE COMMENTAIRE OUI. Le bandeau entier etait masque hors du mode guide. Le praticien qui le coupait perdait donc aussi le RAPPORT -- le texte que son client lit -- et pas seulement ses propres cles de seance. Or les deux ne jouent pas le meme role. Le rapport est le resultat, adresse au lecteur, avec ses conclusions exploitables : il fait partie de la page. Le commentaire praticien est une ADDITION, ce qui dirige la lecture et donne des cles pour la seance : c'est lui, et lui seul, que l'interrupteur allume. Cote client la question ne se pose pas : le mode est force a `guide` par le gabarit, et l'interrupteur ne lui est pas montre -- il n'a rien a allumer. */ .guide-bandeau__commentaire { display: none; } html[data-mode="guide"] .guide-bandeau__commentaire { display: block; } /* 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. */ .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 BANDEAU QUI N'A QUE SON COMMENTAIRE SUIT LE MODE, LUI AUSSI. Certains blocs n'ont rien d'ecrit pour le lecteur : ce qui existe est une note de conduite, ecrite pour le praticien. Elle descend alors tout entiere du cote du commentaire, et son paragraphe n'a plus rien d'autre a porter. Masquer le seul commentaire laisserait ce paragraphe vide, avec sa marge : un blanc sans cause entre deux blocs. On masque donc le bandeau lui-meme. APRES `.guide-bandeau.guide-bandeau`, ET AVEC DEUX CLASSES : la regle du dessus redouble sa classe pour gagner sur les feuilles de page, et une classe seule pese moins qu'elle. Ecrite plus haut avec une seule classe, celle-ci ne masquait rien. */ .guide-bandeau.guide-bandeau--commentaire-seul { display: none; } html[data-mode="guide"] .guide-bandeau.guide-bandeau--commentaire-seul { display: block; } /* LES DEUX VOIX : COTE A COTE QUAND LA PLACE EXISTE, EMPILEES SINON. Le bouton « Partager » est sur chaque bloc : au moment ou le praticien decide de pousser ce bloc a l'ecran du client, ce qu'il a besoin de savoir c'est ce que le client va y lire. D'ou deux voix sur le meme bandeau. ELLES ETAIENT EMPILEES PARTOUT, parce qu'en deux colonnes les cartes de demi-largeur tombaient a 260 px par voix. C'est vrai de ces cartes-la, et faux des blocs qui tiennent la ligne entiere : mesure du 18/09/2026, un bandeau de bloc large s'arretait a 686 px dans un conteneur de 1206, sur neuf lignes de haut, avec 520 px inutilises a cote. LE SEUIL N'EST PAS ECRIT, IL SE DEDUIT. `flex-wrap` avec une base de 30rem par voix : deux voix tiennent cote a cote a partir d'environ 1000 px et passent l'une sous l'autre en dessous. Aucune largeur de bloc a maintenir, aucun point de rupture a tenir a jour, et une carte de demi-largeur retombe d'elle-meme sur l'empilement. LE PLAFOND DE LECTURE PASSE DU BANDEAU A LA VOIX. Le bandeau le portait (`max-width: 96ch`) et c'est lui qui empechait les colonnes de s'ouvrir. Chaque voix le garde : en deux colonnes elle fait environ 590 px, soit 82 signes, exactement la lecture d'avant sur la moitie de la hauteur. LA CLASSE EST REDITE, comme au-dessus et pour la meme raison : la regle qui allume le bandeau porte `html[data-mode="guide"] .guide-bandeau.guide-bandeau`, et une classe seule pese moins qu'elle. Ecrit d'abord dans `lk.css`, le duo ne s'ouvrait pas : cette feuille-ci est chargee APRES et gagnait en silence. */ html[data-mode="guide"] .guide-bandeau.guide-bandeau--duo { display: flex; flex-wrap: wrap; gap: 10px 28px; max-width: none; } html[data-mode="guide"] .guide-bandeau.guide-bandeau--duo .guide-bandeau__voix { flex: 1 1 30rem; min-width: 0; max-width: 96ch; } /* 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; }