/* ── Refonte des optimiseurs Mission Locale — habillage ───────────────── Compagnon de /shared/optimiseur-ml-ui.js. Les fenêtres (`.optui-*`) sont celles de /shared/optimiseur-ui.css, chargée elle aussi : les deux optimiseurs parlent ainsi le même langage visuel. Tout est suspendu à la classe « opt-ml-pret », posée sur une fois le bandeau d'origine et le tiroir trouvés. Si le navigateur sert un ancien bundle gardé en cache, rien ne se déclenche. ───────────────────────────────────────────────────────────────────── */ :root { --optml-menu-h: 48px; --optml-accent: #667eea; --optml-sur-accent: #fff; } /* Le bandeau coloré d'origine et le tiroir « ☰ Outils » : conservés dans la page — c'est eux qu'on clique — mais retirés de la vue. */ html.opt-ml-pret .opt-ml-entete { display: none !important; } /* ── La page coule, elle ne remplit plus l'écran ──────────────────────── L'application était bâtie comme une messagerie : hauteur exacte de la fenêtre, conversation défilante au milieu, saisie collée en bas. Quand la conversation est vide — c'est-à-dire au moment où l'on arrive — cela donne un vide de deux cents pixels au milieu de l'écran, et un champ de saisie ratatiné tout en bas. On lui rend la forme des généralistes : un document qui coule de haut en bas. Le message d'accueil, puis les documents, les réglages et un vrai champ de saisie, à la suite. La page grandit avec la conversation. Trois réglages suffisent : l'application n'impose plus sa hauteur, le fil ne défile plus sur lui-même, et la zone de texte reprend de l'ampleur. */ html.opt-ml-pret .opt-ml-app { height: auto !important; min-height: calc(100dvh - var(--optml-menu-h)); margin-top: var(--optml-menu-h); } html.opt-ml-pret .opt-ml-fil { flex: none !important; overflow: visible !important; } /* ── Le blanc au-dessus de la saisie ──────────────────────────────────── Cinquante-trois pixels séparaient le dernier message du champ de texte : vingt de marge basse du message, vingt de rembourrage sous le fil, douze au-dessus de la rangée de saisie, plus le trait. Les vingt du fil datent du temps où il défilait sur lui-même — ils donnaient de l'air au dernier message avant le bord de la lucarne. La lucarne a disparu, le rembourrage est resté. La marge du dernier message sert de la même façon : entre deux messages elle est utile, sous le dernier elle ne fait que pousser la saisie vers le bas. On retire les deux ; restent les douze pixels de la rangée, qui sont sa respiration. Le dernier enfant du fil est un repère de défilement de hauteur nulle (`ref={sr}`) : c'est donc l'avant-dernier qu'il faut viser. */ html.opt-ml-pret .opt-ml-fil { padding-bottom: 0 !important; } html.opt-ml-pret .opt-ml-fil > div:nth-last-child(2) { margin-bottom: 0 !important; } /* La zone de texte n'est pas dans le bloc des réglages : c'est une rangée à elle, sœur de celui-ci sous la racine de l'application. Deux niveaux, pas trois. */ html.opt-ml-pret .opt-ml-app > div > textarea { min-height: 132px !important; border-radius: 12px !important; padding: 12px 14px !important; } html.opt-ml-pret .opt-ml-app > div:has(> textarea) { align-items: flex-end; } /* Le panneau d'actions du site n'a pas besoin d'être déplacé ici : la page a déjà son propre calcul, qui le pose sous la zone haute de l'application. Comme celle-ci est maintenant décalée de la hauteur du menu, la valeur qu'il trouve est déjà la bonne — une règle de plus ne ferait que casser son ajustement quand la barre de rubriques se déplie. */ /* ── L'ordre du bloc de composition ───────────────────────────────────── Le généraliste écrit d'abord, joint ensuite : zone de texte, puis « 📄 Ajouter un document », puis « ⚙️ Réglages ». Ici l'application monte ses blocs dans l'autre sens — documents et réglages ensemble au-dessus, la zone de texte en rangée à part en dessous. Les déplacer dans l'arbre demanderait de découper le rendu de React. On s'en dispense : la racine de l'application est déjà une colonne flex, il suffit donc de numéroter ses rangées. Le fil, la saisie, le bloc blanc ; tout le reste (l'en-tête masqué, le talon de bas de page, les fenêtres en position fixe) part au bout, où il ne gêne pas. Le trait de séparation suit : il marquait le haut du bloc blanc, qui était le haut du composeur ; il passe donc sur la rangée de saisie, qui l'est devenue. */ html.opt-ml-pret .opt-ml-app > div { order: 9; } html.opt-ml-pret .opt-ml-app > .opt-ml-fil { order: 1; } html.opt-ml-pret .opt-ml-app > div:has(> textarea) { order: 2; } html.opt-ml-pret .opt-ml-app > .opt-ml-saisie { order: 3; } html.opt-ml-pret .opt-ml-app > div:has(> textarea) { border-top: 1px solid #e0e0e0; } html.opt-ml-pret .opt-ml-saisie { border-top: none !important; } /* ── « 📎 Ajouter des documents » ─────────────────────────────────────── Le bloc est posé en tête du bloc blanc (voir scripts/patch-optimiseurs.mjs), lequel vient maintenant sous la zone de texte : plus rien à déplacer ici, on ne fait qu'ôter la marge que le composant se donnait pour flotter dans le fil. */ html.opt-ml-pret .opt-ml-docs > div { margin: 0 !important; } /* ── Le prompt généré ─────────────────────────────────────────────────── Le généraliste le montre en monospace : c'est un texte à copier, pas une phrase à lire, et la chasse fixe fait voir sa structure — les balises, les listes, l'indentation. Le bundle ne pose plus de `fontFamily` sur ce bloc (voir scripts/patch-optimiseurs.mjs), la règle vit donc ici. `min-height:0` parce que la feuille de l'application impose 44 px à tous les `textarea` : sans cela, un prompt d'une ligne occuperait la place de trois. Le nombre de lignes est déjà donné par l'attribut `rows`. */ html.opt-ml-pret textarea.opt-ml-prompt { min-height: 0 !important; font-family: 'SF Mono', 'Cascadia Mono', 'Fira Mono', Consolas, monospace; } /* ── L'écran d'accueil « Qui êtes-vous ? » ─────────────────────────────── */ /* Sa rangée de quatorze boutons est reprise par le menu, rubrique par rubrique. Elle reste dans la page — c'est elle qu'on clique — mais elle disparaît de la vue, et l'écran retrouve sa respiration. */ html.opt-ml-pret .opt-ml-accueil-actions { display: none !important; } /* Son « ← Accueil » flottant fait double emploi avec le 🏠 du menu. */ html.opt-ml-pret .opt-ml-accueil-lien { display: none !important; } html.opt-ml-pret .opt-ml-accueil { padding-top: calc(var(--optml-menu-h) + 20px) !important; min-height: calc(100vh - var(--optml-menu-h)) !important; margin-top: var(--optml-menu-h); } /* ── La barre ──────────────────────────────────────────────────────────── */ #optml-menu { position: fixed; top: 0; left: 0; right: 0; z-index: 950; background: var(--optml-accent); color: var(--optml-sur-accent); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; transition: background 0.25s ease; } #optml-menu .optml-rail { display: flex; align-items: center; gap: 6px; padding: 7px 12px; width: 100%; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; } #optml-menu .optml-rail::-webkit-scrollbar { display: none; } /* Les flèches du menu (voir /shared/opt-menu-fleches.js) : mêmes règles que sur les généralistes, aux couleurs d'ici — le fond de la barre suit la rubrique en cours, le dégradé doit suivre avec lui. */ #optml-menu .opt-menu-fleche { color: var(--optml-sur-accent); background: linear-gradient(to right, var(--optml-accent) 58%, transparent); } #optml-menu .opt-menu-fleche-droite { background: linear-gradient(to left, var(--optml-accent) 58%, transparent); } #optml-menu.a-fleches .optml-rail { padding-left: 38px; padding-right: 38px; } /* Même bump tactile que sur les généralistes (la largeur des flèches est posée là-bas, elle vaut pour les deux barres). */ @media (pointer: coarse) { #optml-menu.a-fleches .optml-rail { padding-left: 46px; padding-right: 46px; } } #optml-menu button, #optml-menu a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; min-height: 34px; border-radius: 8px; border: none; background: rgba(255, 255, 255, 0.2); color: inherit; font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background 0.15s; } #optml-menu button:hover, #optml-menu a:hover { background: rgba(255, 255, 255, 0.36); } #optml-menu .optml-accueil { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); font-size: 14px; padding: 6px 11px; } /* Le libellé de la rubrique en cours : un repère, pas un bouton. */ #optml-menu .optml-chip { flex: 0 1 auto; min-width: 0; padding: 4px 2px 4px 6px; font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.95; } #optml-menu .optml-sep { flex: 0 0 auto; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); margin: 0 3px; } @media (max-width: 640px) { #optml-menu .optml-rail { padding: 6px 9px; gap: 5px; } #optml-menu button, #optml-menu a { padding: 6px 10px; font-size: 12px; } #optml-menu .optml-chip { max-width: 34vw; font-size: 12px; } } /* ── Les fenêtres, aux couleurs de cette application ───────────────────── */ /* optimiseur-ui.css les dessine ; on ne remplace ici que les couleurs, cette application n'ayant ni thème sombre ni palette cuivre. */ html.opt-ml-pret { --opt-bg: #f5f5f7; --opt-fg: #1f1f24; --opt-muted: #6b6b73; --opt-line: rgba(0, 0, 0, 0.12); --opt-carte: #ffffff; --opt-accent: var(--optml-accent); --opt-accent-soft: rgba(102, 126, 234, 0.12); } /* La feuille de l'application impose `min-height:44px` à TOUS les boutons — bonne idée pour le doigt, désastreuse pour nos pastilles de progression, qui devenaient des ovales de 8 × 44 px. On les en dispense, elles seules. */ html.opt-ml-pret .opt-qcm-point { min-height: 0 !important; height: 8px !important; width: 8px !important; padding: 0 !important; font-size: 0 !important; } html.opt-ml-pret .optui-fermer { min-height: 0 !important; } .optui-carte.est-hors-service { opacity: 0.45; cursor: not-allowed; } .optui-carte.est-hors-service:hover { transform: none; background: transparent; border-color: var(--opt-line); }