/* ========================================================================== AGENSLAB — LE DÉCOR « SCÈNE p1 » (porté dans le plugin le 19.08.2026) Ashi, 19.08 : « classique = épuré, écran = visuel ». C’est LA différence entre les deux habillages — et sans ce fichier elle n’existait pas : le mode écran n’était qu’une télé sur fond de page, à peine distinct du mode classique. Le décor lui rend son sens. Cette feuille se charge APRÈS agenslab.css et ne fait que REDÉPLACER les pièces : la coque n’est plus la seule télé (1033 x 1073) mais toute la pièce (1923 x 1082) — mur, bureau, fleurs, tableau, pastille lapin, sonnette posée. Aucune règle de comportement, que de la géométrie. ── D’OÙ ELLE VIENT ──────────────────────────────────────────────────── Du banc d’essai (banc-essai/projets/chatbot/scene-p1.css), dont l’en-tête annonçait déjà : « ce fichier est destiné à rejoindre le plugin tel quel ». Toutes les valeurs y sont MESURÉES dans la planche d’Ashi puis divisées par 1923 (x) ou 1082 (y) — rien n’est estimé à l’œil. ── CE QU’ON N’A PAS EMPORTÉ ─────────────────────────────────────────── 32 règles qui appartiennent au banc et à lui seul : · .aglab-nav — les chevrons ‹ › de navigation. Ashi : « sans les petites flèches ». Ils menaient aux panneaux voisins (l’équipe, infos & contact), qui n’existent pas dans le plugin. · .aglab-scroller — le panorama coulissant du banc. Inutile ici : la coque .aglab centre déjà son contenu. · .aglab-p0 / .aglab-p2 — les panneaux voisins eux-mêmes. · .aglab-calepin — le mode classique AVEC décor. Renversé par Ashi le 19.08 : en classique, tout le visuel s’en va. · .vue-mobile — la simulation de téléphone du banc. Le plugin a ses vraies media queries. ========================================================================== */ /* ========================================================================== AGENSLAB v3 — enveloppe « scène p1 » Se charge APRÈS agenslab.css et ne fait que redéplacer les pièces : le décor n'est plus la seule télé (1033 x 1073) mais toute la pièce (1923 x 1082) — mur, bureau, fleurs, pastille lapin, sonnette. TOUTES les valeurs ci-dessous sont mesurées dans 90-Inbox/ChatBot-v2-HUMAN-VERSION-NEW-DesignUX/SVG/p1-principal-chatbot-v2-ref.svg puis divisées par 1923 (x) ou 1082 (y). Rien n'est estimé à l'œil. Ce fichier est destiné à rejoindre le plugin tel quel. ========================================================================== */ /* Poppins en LOCAL — jamais de Google Fonts : aucun appel externe (nLPD). Le plugin prévoyait déjà 'Poppins' dans son mode « lisible » ; il ne lui manquait que le fichier. Le bouton tT de la coque devient donc un vrai choix : Matrix → Matrix Video → Poppins. */ @font-face{ font-family:'Poppins'; src:url('polices/Poppins-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Poppins'; src:url('polices/Poppins-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; } .aglab{ --sc-cyan:#17bebb; --sc-red:#ef3e36; --sc-navy:#003049; --sc-jaune:#fcbf49; /* le jaune de la sonnette */ --sc-texte:'Poppins',Helvetica,Arial,sans-serif; --sc-w:1923; --sc-h:1082; } /* ---------- la scène remplace la télé ---------- */ /* ══ LA PIÈCE PREND TOUTE LA PAGE ═══════════════════════════════════════════ Ashi, 19.08 : « le fond mur avec les oiseaux origami et le bureau devraient recouvrir TOUT le fond de la page », puis « sur PC j'aimerais que ça apparaisse à 100 % de mes proportions de maquette ». Les deux demandes n'en font qu'une, et elles se règlent d'un seul geste. La scène était bornée à `min(122rem, 100%)` — donc, en pratique, à la largeur de la COLONNE DE CONTENU du site. D'où les deux bandes blanches sur les côtés, et un écran plus petit que la maquette. J'avais d'abord préparé un fond rapporté derrière la scène. Mauvaise piste : il aurait fallu extraire le motif en tuile, recaler l'horizon, et faire coïncider deux échelles de papier peint — une couture visible à la moindre erreur. Sortir la scène de la colonne fait le même travail sans aucune couture, ET rend à l'écran sa taille de maquette. C'était la demande. La technique est classique : on s'échappe de la colonne par une marge négative calculée. `aspect-ratio` fait le reste — sur un écran de 1920, la pièce mesure 1920 x 1080, c'est-à-dire la planche au pixel près. `container-type:inline-size` reste : tous les boutons sont posés en `cqw`, ils suivent donc la largeur sans qu'on touche à une seule valeur. */ /* ⚠️ PAS `100vw` TOUT SEUL. `100vw` compte la barre de défilement : sur un Windows où elle occupe 7 à 17 px, la scène dépasse d'autant et fait apparaître une barre HORIZONTALE sur toute la page. Mesuré dans l'aperçu : document 1259 px, scène 1266. On ne parie donc pas sur un `overflow-x:hidden` que le thème du site aurait peut-être. `--aglab-vw` porte la largeur utile réelle, mesurée par `chat.js` et remise à jour au redimensionnement ; `100vw` reste en repli si le script n'a pas encore tourné. */ /* ══ LE FOND BORDE LA PAGE, LA SCÈNE RESTE À TAILLE HUMAINE ═════════════════ Trois demandes d'Ashi, le 19.08, qui se sont précisées l'une après l'autre : ① « le mur et le bureau devraient recouvrir TOUT le fond de la page » ② « sur PC, à 100 % de mes proportions de maquette » ③ « c'est un peu trop grand, même sur mon grand écran c'est surprenant — on veut au contraire quelque chose de visuellement chill » J'avais d'abord tout étiré à 100vw : ① et ② étaient servies, ③ non — sur un écran de 1920, la pièce fait 1920 x 1080 et écrase la page. La seule façon de tenir les trois : SÉPARER le fond de la scène. · le FOND (mur + motif + bureau) borde la page, de bord à bord ; · la SCÈNE (télé, fleurs, sonnette, pastille) garde ses proportions et se borne en HAUTEUR, pour ne jamais dominer le premier écran. ⚠️ ET SANS AUCUNE COUTURE. C'est le piège qui m'avait fait renoncer : deux papiers peints à deux échelles laissent une ligne visible au bord de la scène. On l'évite en ÉTEIGNANT le mur et le bureau DANS la planche (`#sc-mur`, `#sc-motif`, `#sc-bureau` — nommés pour ça) : il n'y a plus qu'un seul fond, celui de la bande. Rien n'est redessiné, rien n'est déformé — le motif est la tuile extraite de la planche d'Ashi. L'horizon tombe juste tout seul : la bande et la scène ont exactement la même hauteur (`top:0; bottom:0`), et le bureau commence à 653/1082 dans les deux. La télé pose donc ses pieds sur le bureau, au pixel près. POUR RÉGLER LA TAILLE : une seule valeur, `--aglab-scene-h`. */ .aglab{ --aglab-scene-h: 68vh; /* hauteur max de la pièce */ --aglab-scene-w: min(var(--aglab-vw, 100vw), calc(var(--aglab-scene-h) * 1923 / 1082)); } /* ⚠️ `:not(.aglab--classic)` AJOUTÉ LE 19.08 AU SOIR — la règle la plus chère du fichier, et elle manquait depuis le portage du décor. Cette feuille était scellée à `:not(.aglab-win)` seulement. Or la carte du mode CLASSIQUE demande, dans `agenslab.css`, `aspect-ratio:auto` et `width:min(34rem,100%)` — deux classes, contre trois ici. Le décor gagnait donc sur un habillage qu'il n'a jamais eu vocation à toucher : Ashi a tranché le 19.08 qu'en classique « tout le visuel s'en va ». Mesuré sur agensis.ch en v2.9.29, habillage classique : · PC 1280 — la carte fait 963 px de large au lieu de 544 · téléphone — la boîte est bornée à 211 px de haut (le 1923/1082 de la planche) alors que son contenu en fait 480 : la conversation débordait DERRIÈRE la barre de boutons et la mention nLPD, qui se retrouvaient posées par-dessus. C'est le « tous les boutons se mettent par-dessus les uns sur les autres » d'Ashi — ce n'était pas la barre, c'était la boîte qui mentait sur sa taille. Le classique redevient donc ce qu'il était avant le décor. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-viewport{ position:relative; width:var(--aglab-scene-w); max-width:var(--aglab-vw, 100vw); margin-left:calc(50% - var(--aglab-scene-w) / 2); margin-right:calc(50% - var(--aglab-scene-w) / 2); aspect-ratio:1923/1082; container-type:inline-size; /* 1cqw = 19.23 unités de la planche */ overflow:visible; /* la bande de fond déborde volontairement */ background:transparent; } /* Le mur et le bureau quittent la planche : la bande les redessine, seule. */ #sc-mur, #sc-motif, #sc-bureau{ display:none } /* LA BANDE — pleine page, derrière la scène, même hauteur qu'elle. L'ordre des couches compte : le bureau (dégradé opaque) recouvre le papier peint sous l'horizon, le papier peint couvre le mur au-dessus. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-viewport::before{ content:''; position:absolute; z-index:0; top:0; bottom:0; left:50%; transform:translateX(-50%); width:var(--aglab-vw, 100vw); background: linear-gradient(to bottom, transparent 0 60.351%, #24518d 60.351% 100%), url('svg/fond-mur.svg') top left / 5.018% auto repeat, #edb88b; } /* ── L'ORDRE DES PLANS, ET IL N'EST PAS FACULTATIF ────────────────────────── Trois calques se superposent dans la même boîte : 0 · la bande de fond (mur + bureau), qui déborde de la page 1 · la planche (télé, fleurs, sonnette, pastille) 2 · l'ÉCRAN et ses commandes, qui vivent DANS la télé Le `z-index:1` de la planche est ce qui la sort de la bande. Sans le `2` qui suit, il la faisait aussi passer par-dessus la conversation : écran noir, contenu présent mais recouvert. Constaté à l'écran, pas déduit. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-frame-tv{ z-index:1 } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-content{ z-index:2 } /* ---------- l'écran vivant, calé sur #sc-screen (628,139,766,576) ---------- avec la même marge intérieure que la version en production. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-content{ left:33.333%; top:14.047%; width:38.377%; height:51.386%; font-size:clamp(.58rem,1.06cqw,1.06rem); } /* l'écran d'accueil cuit dans la planche ne sert pas ici : c'est le VRAI boot du moteur (oiseau + wordmark animés) qui joue. */ #sc-screen-art{display:none} /* ---------- rangée de commandes sur la coque ---------- Alignée sur le centre du bouton on/off (y 812.8), à droite de l'oiseau origami (qui finit à x 617). Boutons de 50 x 50, écart de 14. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-font-btn{ left:33.125%; top:72.828%; width:2.600%; height:4.621%; right:auto; bottom:auto; border-radius:.35cqw; border-width:.09cqw; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-ch-btns{ left:36.453%; top:72.828%; width:5.928%; height:4.621%; gap:.728%; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-ch-btn{ flex:1 1 0; width:auto; height:100%; min-width:0; border-radius:.35cqw; border-width:.09cqw; } /* Les icônes sont des SANS viewBox propre : sans taille explicite, le navigateur leur donne 300x150 et l'élément flex refuse de rétrécir. D'où des tailles en cqw — 1cqw = 19,23 unités de la planche. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-font-btn .aglab-font-ico{width:1.15cqw; height:1.45cqw} .aglab:not(.aglab--classic):not(.aglab-win) .aglab-font-btn .aglab-font-ico svg{width:100%; height:100%} .aglab:not(.aglab--classic):not(.aglab-win) .aglab-ch-btn svg{width:1.35cqw; height:1.65cqw} /* ---------- 4e commande : la clochette au menu ---------- Même gabarit que ses voisines : 50 x 50, à 14 unités des chaînes. x = 829 (les boutons de chaîne finissent à 815). */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell-btn{ position:absolute; z-index:7; left:43.110%; top:72.828%; width:2.600%; height:4.621%; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#1b3a4b; border:.09cqw solid #1b3a4b; border-radius:.35cqw; cursor:pointer; } .aglab-bell-btn{overflow:visible} .aglab-bell-btn:hover{background:var(--sc-cyan)} .aglab-bell-btn:focus-visible{outline:3px solid var(--aglab-orange); outline-offset:2px} /* la cloche est plus large que haute (157 x 147) : on l'agrandit un peu pour qu'elle pèse le même poids visuel que le lapin et le bonhomme */ /* On cale la cloche sur sa HAUTEUR, pas sa largeur. Le dessin actif est plus large (les rayons) mais a peu pres aussi haut : a largeur egale, la cloche rapetissait en sonnant. A hauteur egale, elle garde sa taille et ce sont les rayons qui debordent — ce qui est exactement le geste voulu. */ .aglab-bell-btn svg{height:1.63cqw; width:auto} .aglab-bell-btn .aglab-ico-cloche-on{display:none; height:1.72cqw; width:auto} /* --- la cloche est JAUNE, comme sa grande sœur sur le bureau --- Le corps de l'icône est en currentColor (voir _build.js) : on le pilote donc depuis le bouton. Les propriétés héritées sont le SEUL moyen d'atteindre l'intérieur d'un — un sélecteur CSS n'y entre jamais. Le jaune seul sur la coque beige ne tiendrait pas la route (rapport ~1,5:1, il en faut 3 pour une icône). On lui rend donc son cerne marine : le dessin reste celui d'Ashi, et il se lit. */ .aglab-bell-btn svg{ color:var(--sc-jaune); stroke:var(--sc-navy); stroke-width:5; paint-order:stroke; } .aglab-bell-btn:hover svg{stroke-width:6.5} .aglab.bell-ring .aglab-bell-btn{background:var(--sc-cyan)} .aglab.bell-ring .aglab-bell-btn .aglab-ico-cloche{display:none} .aglab.bell-ring .aglab-bell-btn .aglab-ico-cloche-on{display:block} .aglab.bell-locked .aglab-bell-btn{opacity:.45; cursor:not-allowed} /* (Le banc masquait ici le BOUTON sonnette en classique, parce que son mode classique gardait le decor et sa clochette dessinee. Le notre non : Ashi, 19.08 — « la sonnette VISUELLE disparait du mode classique, mais le bouton et le fonctionnel restent ». La regle est donc retiree, et agenslab.css rallume le bouton dans la rangee des poignees.) */ /* en fenêtré, la clochette du menu de coque disparaît — mais elle réapparaît dans la barre de fenêtre, à côté de 🐇/👤 (injectée par sonnette.js) */ .aglab-win .aglab-bell-btn{display:none!important} /* --- la clochette dans la barre de fenêtre --- */ /* la barre de fenêtre est sombre : le jaune y brille sans cerne */ .aglab-winch-bell svg{ width:1.15em; height:1.08em; display:block; filter:none!important; color:#fcbf49; } .aglab-winch-bell .aglab-ico-cloche-on{display:none} .aglab-win.bell-ring .aglab-winch-bell .aglab-ico-cloche{display:none} .aglab-win.bell-ring .aglab-winch-bell .aglab-ico-cloche-on{display:block} .aglab-win.bell-locked .aglab-winch-bell{opacity:.45; cursor:not-allowed} /* ---------- LE BOUTON ON/OFF ---------- C'était le défaut : right:12% / top:70% posait la cible 53 px trop à droite et 25 px trop haut. La vraie place, mesurée : 1275.7, 787.7, 61.9 x 50.2. Plus jamais d'à-peu-près. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-power-btn{ left:66.339%; top:72.800%; width:3.219%; height:4.640%; right:auto; bottom:auto; } /* confort de clic : la cible déborde, le repère visuel non */ .aglab-power-btn::before{content:''; position:absolute; inset:-.5cqw} .aglab-power-btn:hover{outline:none} .aglab-power-btn:hover ~ .aglab-frame-tv #sc-power, .aglab-power-btn:hover #sc-power{filter:none} #sc-power{transition:transform .09s ease} .aglab-power-btn:active ~ .aglab-frame-tv #sc-power{transform:translate(0,3px)} /* ---------- LE TÉMOIN LUMINEUX ---------- cyan quand l'écran vit, rouge quand il dort. */ #sc-led{transition:fill .25s ease} .aglab-led-halo{opacity:.2; transition:fill .25s ease; fill:var(--sc-cyan)} .aglab:not(.is-screen-off) #sc-led{fill:var(--sc-cyan)} .aglab:not(.is-screen-off) .aglab-led-halo{fill:var(--sc-cyan); animation:sc-breathe 3.4s ease-in-out infinite} .aglab.is-screen-off #sc-led{fill:var(--sc-red)} .aglab.is-screen-off .aglab-led-halo{fill:var(--sc-red); opacity:.4; animation:none} @keyframes sc-breathe{0%,100%{opacity:.14} 50%{opacity:.4}} /* ---------- LA SONNETTE ---------- Zone mesurée : x 1584 -> 1813, y 832 -> 1022 (pommeau compris). */ .aglab-bell{ position:absolute; z-index:7; left:82.371%; top:76.895%; width:11.909%; height:17.560%; padding:0; margin:0; background:transparent; border:0; border-radius:50%; cursor:pointer; } .aglab-bell:focus-visible{outline:3px solid var(--aglab-orange); outline-offset:4px} /* La sonnette du bureau reste en mode calepin : c'est le chemin vers un humain, il ne disparaît jamais. (Elle était masquée ici par un !important qui écrasait la règle plus bas — dessin visible, bouton mort. Trouvé par Patrick, 04.08.) Seule la fenêtre flottante s'en passe : elle a la sienne dans sa barre de titre. */ /* La zone cliquable suit son DESSIN : en classique le decor s en va, donc elle aussi — sinon c est un bouton pose sur rien, atteignable au clavier, qui sonne sans que rien ne l explique. Le bouton du menu, lui, reste. */ .aglab--classic .aglab-bell{display:none!important} .aglab-win .aglab-bell{display:none!important} /* (Le masquage sous 640 px est LEVÉ depuis le 19.08.2026 au soir : le décor revient sur téléphone, donc la clochette dessinée aussi. Elle n'y sonne pas — elle OUVRE. Voir le bloc « LE TÉLÉPHONE » en fin de fichier.) */ .aglab-bell-fx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; } .aglab-win .aglab-bell-fx, .aglab--classic .aglab-bell-fx{display:none!important} /* seul le pommeau s'enfonce — exactement les 9 unités de la planche d'Ashi */ #sc-bell{transform-box:fill-box; transform-origin:50% 100%} #sc-bell-knob{transition:transform .12s ease} .aglab.bell-hover #sc-bell-knob{transform:translate(0,-3px)} .aglab.bell-ring #sc-bell-knob{transform:translate(0,9px)} .aglab.bell-ring #sc-bell{animation:sc-bell-shake .42s ease-out} @keyframes sc-bell-shake{ 0%{transform:translate(0,0) rotate(0)} 22%{transform:translate(-3px,1px) rotate(-1.1deg)} 48%{transform:translate(3px,0) rotate(1deg)} 74%{transform:translate(-2px,0) rotate(-.5deg)} 100%{transform:translate(0,0) rotate(0)} } .aglab.bell-locked .aglab-bell{cursor:not-allowed} .aglab.bell-locked #sc-bell{opacity:.55; transition:opacity .3s ease} .aglab.bell-refus #sc-bell{animation:sc-bell-non .3s ease-out} @keyframes sc-bell-non{0%,100%{transform:translate(0,0)} 33%{transform:translate(-5px,0)} 66%{transform:translate(5px,0)}} /* L'opacité est portée par la CLASSE, pas par l'animation : si le visiteur a désactivé les animations dans son système (Windows le fait sans prévenir), il voit quand même les rayons et la note. L'animation n'est qu'un bonus, et `forwards` la fait tenir sur sa dernière image. */ #fx-rays,#fx-note{opacity:0; transform-box:fill-box; transform-origin:50% 90%} .aglab.bell-ring #fx-rays, .aglab.bell-ring #fx-note{opacity:1} .aglab.bell-ring #fx-rays{animation:sc-rays .62s ease-out forwards} .aglab.bell-ring #fx-note{animation:sc-note 1.15s ease-out forwards} @keyframes sc-rays{ 0%{opacity:0; transform:scale(.6)} 30%{opacity:1; transform:scale(1.06)} 100%{opacity:0; transform:scale(1.14)} } @keyframes sc-note{ 0%{opacity:0; transform:translate(0,6px) scale(.7) rotate(-8deg)} 25%{opacity:1; transform:translate(-6px,-10px) scale(1) rotate(-4deg)} 100%{opacity:0; transform:translate(-26px,-64px) scale(1.05) rotate(8deg)} } /* ---------- décor réactif ---------- */ /* ---------- chevrons de navigation ---------- */ /* Les chevrons ne disparaissent jamais en mode calepin — décision d'Ashi, trahie ici par un !important. Mêmes symptômes : flèche dessinée, bouton mort. Seule la fenêtre flottante n'a pas de voisins à visiter. */ /* ---------- panneau p2 : « qui est Agensis » ---------- Le glissement doit être doux : on prévient le navigateur (will-change), on ne touche JAMAIS à visibility/display pendant le mouvement (c'est ce qui faisait sauter la transition), et on ferme l'accès au clavier et à la souris par pointer-events + inert plutôt qu'en cachant. */ /* --- LE DÉPLACEMENT D'UNE PIÈCE À L'AUTRE --- Ce n'est pas un calque qui recouvre : les deux pièces défilent ENSEMBLE, à la même vitesse. À mi-chemin on voit la moitié de chacune. Entre elles, un vide (--sc-vide). Sans lui, comme les deux planches partagent exactement le même papier peint et le même bureau, les deux images se recollent et plus rien ne semble bouger. Le vide est l'angle du mur : c'est lui qui rend le déplacement lisible. */ /* La course est en `cqw` — 1 % de la largeur de la scène — et surtout PAS en `%` : un pourcentage de transform se calcule sur la taille de l'élément lui-même, donc l'écran, les boutons et le décor partaient à des vitesses différentes et la pièce se déchirait en route. En cqw, tout le monde parcourt exactement la même distance. */ .aglab{--sc-vide:6cqw; --sc-glisse:.72s cubic-bezier(.32,.72,.28,1)} /* ⚠️ `:not(.aglab--classic)` AJOUTÉ LE 19.08 AU SOIR — ce n'est pas un détail. Sans lui, ce navy peignait AUSSI la carte de l'habillage classique, qui attend un fond blanc. Mesuré sur agensis.ch en v2.9.29 : carte #04202e, texte #26292c, soit 1,19:1. Le minimum est 4,5:1 — le mode « épuré » d'Ashi était illisible en ligne, sur téléphone comme sur PC. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-viewport{background:#04202e} /* ce qu'on aperçoit dans l'angle */ /* la pièce de gauche sort entièrement — même course, même courbe */ .aglab-frame-tv, .aglab-content, .aglab-font-btn, .aglab-ch-btns, .aglab-bell-btn, .aglab-power-btn, .aglab-bell, .aglab-bell-fx{ transition:transform var(--sc-glisse); will-change:transform; } .aglab.p2-open .aglab-frame-tv, .aglab.p2-open .aglab-content, .aglab.p2-open .aglab-font-btn, .aglab.p2-open .aglab-ch-btns, .aglab.p2-open .aglab-bell-btn, .aglab.p2-open .aglab-power-btn, .aglab.p2-open .aglab-bell, .aglab.p2-open .aglab-bell-fx{ transform:translate3d(calc(-100cqw - var(--sc-vide)),0,0); } /* les bords s'assombrissent : l'angle du mur prend du volume */ /* --- les cadres, reconstruits --- Mesures dans p2-...-ref.svg (viewBox 1925 x 1081) : cadre 1 : 277,114,377x479 cadre 2 : 736,114,377x479 vue intérieure : 16 de marge, 22 du haut, 345 x 400 C'est le FOND du passe-partout qui vire au cyan — pas une bordure : une bordure barrait le cartel. */ /* Le point d interrogation d Ashi : un dessin, pas un caractère. Il garde ses proportions et son bleu, centré dans le cadre. */ /* --- le virage cyan : c'est le fond qui change, le cartel suit --- */ /* ══════════════════════════════════════════════════════════════════════════ AJOUTS DU PORTAGE ══════════════════════════════════════════════════════════════════════════ */ /* LES CHEVRONS SONT DESSINÉS DANS LA PLANCHE, pas seulement posés en CSS. Retirer les boutons .aglab-nav ne suffisait donc pas : les deux flèches ‹ › du décor seraient restées à l’écran, cliquables sur rien. On les efface en `visibility`, pas en `display` — la géométrie du SVG ne bouge pas d’un pixel. */ #sc-chev-left, #sc-chev-right{ visibility:hidden } /* Le décor ne s’affiche QUE dans l’habillage écran. En classique il disparaît entièrement — règle d’Ashi du 19.08 — et c’est déjà ce que fait `.aglab--classic .aglab-frame{display:none!important}` dans agenslab.css. On ne la double pas ici : une seule règle par décision. */ /* LA SONNETTE DE LA COQUE, EN CLASSIQUE. Le banc la masquait (`.aglab--classic .aglab-bell-btn{display:none!important}`) parce que son mode classique gardait le décor et sa clochette dessinée. Le nôtre non : ici, le bouton est le SEUL chemin qui reste. Ashi, 19.08 : « le seul bouton qui change entre mode écran et mode classique, c’est le bouton Police-Texte ». La rangée de agenslab.css le rallume déjà en 0,3,0 ; on ne remet donc surtout pas une règle contraire ici. */ /* ══════════════════════════════════════════════════════════════════════════ BLOC REPRIS DU BANC EN SECOND TEMPS — la rangee accueille le formulaire. Il vivait a la FIN de scene-p1.css, hors du bloc « scene » que j avais filtre (lignes 1-356). Consequence, vue a l ecran : le bouton ✉ gardait les coordonnees de la TELE (19,5 %/69 %) et flottait a gauche du decor, hors de la rangee. Lecon : un fichier decoupe par blocs se porte par blocs, jamais par un intervalle de lignes. ══════════════════════════════════════════════════════════════════════════ */ /* ========================================================================== v2.9.22 — LA RANGÉE ACCUEILLE LE FORMULAIRE, ET ELLE REMONTE Ashi, 05.08, deux demandes en une : « les croix étaient les emplacements » (le formulaire entre le tT et le lapin) et « décale tout vers le haut, que ce soit pas collé au bord tout en bas mais une jolie rangée de boutons ». GABARIT — on ne touche à rien : 2,600 % de large, 4,621 % de haut, écart de 0,728 % (50 et 14 unités de la planche). Le nouveau venu prend exactement la boîte de ses voisins. PLACES — chacun glisse d'un cran vers la droite : tT 33,125 · FORMULAIRE 36,453 · chaînes 39,781 · clochette 46,437 L'écran finit à 65,4 % et le on/off vit à 66,3 % de large : il reste de la marge, la rangée ne bouscule personne. HAUTEUR — 72,828 % → 70,200 %, pour les CINQ commandes (le on/off compris, sinon il resterait seul en bas et la rangée perdrait sa ligne). ========================================================================== */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-form-btn{ position:absolute; z-index:7; left:36.453%; top:70.200%; width:2.600%; height:4.621%; right:auto; bottom:auto; transform:none; padding:0; display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#1b3a4b; border:.09cqw solid #1b3a4b; border-radius:.35cqw; cursor:pointer; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-form-btn .aglab-form-ico{ font-size:1.45cqw; line-height:1; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-form-btn:hover{background:var(--sc-cyan)} .aglab:not(.aglab--classic):not(.aglab-win) .aglab-ch-btns{ left:39.781%; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell-btn{ left:46.437%; } /* toute la rangée remonte, d'une seule ligne */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-font-btn, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-form-btn, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-ch-btns, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell-btn, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-power-btn{ top:70.200%; } /* ========================================================================== LE TÉLÉPHONE — LE MÊME DÉCOR, RECADRÉ (19.08.2026, en soirée) Ashi : « clairement le décor comme sur PC mais au format vertical, et tu transformes TOUT le PC en zone cliquable pour lancer le mode fenêtré ». Puis : « DONC le même décor avec une légère revue UX prévue pour le petit écran smartphone ». ── CE QUI N'ALLAIT PAS, ET C'ÉTAIT UNE SEULE CAUSE ──────────────────── Cette feuille n'avait AUCUNE media query. Ses sélecteurs pèsent quatre classes (`.aglab:not(.aglab--classic):not(.aglab-win) .aglab-content`) ; la règle mobile d'`agenslab.css` (`.aglab-content` dans `@media 640px`) n'en pèse qu'une. Le décor écrasait donc, en silence, toute la mise en page mobile qui existait avant lui — et la rejouait au 1/5e. Mesuré sur agensis.ch le 19.08 en v2.9.29, à 375 px : écran de la télé 144 x 108 px (la media query en prévoyait 347), texte à 9,3 px, boutons tT et ✉ à 10 x 10 px. Le décor avait été posé POUR le PC ; il n'avait jamais été BORNÉ au PC. ── LE GESTE : ON AGRANDIT LA PLANCHE ET ON LA RECADRE ───────────────── Aucune coordonnée ne change. Pas une. La planche garde son ratio 1923/1082 et TOUTES les pièces gardent leurs pourcentages — on rend simplement la planche plus large que le téléphone, et on la fait glisser pour montrer sa partie utile. C'est un cadrage, pas une refonte : le jour où Ashi bouge un bouton dans la planche, il bouge ici aussi, tout seul. ── LES DEUX SEULES VALEURS À RÉGLER ─────────────────────────────────── Elles se LISENT dans la planche, elles ne s'estiment pas (mesuré au `getBoundingClientRect` sur le site, en % de la planche) : la télé `#sc-shell` 26,3 % -> 78,9 % la sonnette `#sc-bell` 82,4 % -> 94,3 % la pastille lapin 89,6 % -> 97,3 % Il faut donc montrer AU MOINS de 26,3 % à 97,3 %. On montre 26 % -> 100 % : le bord droit de la planche tombe pile sur le bord droit de l'écran, et tout le débordement part à GAUCHE — où il ne crée jamais de barre de défilement horizontale. C'est ce qui permet de se passer de tout `overflow:clip` : la bande de fond, elle, doit border la page. --sc-part : la part de la planche qu'on montre. .74 = 26 % -> 100 % --sc-visee : le point de la planche mis au milieu. (part / 2 + reste) POUR UNE TÉLÉ PLUS GRANDE : baisser `--sc-part`. Mais en dessous de .74 la télé se fait couper à gauche, et vers .55 la sonnette sort du cadre — or Ashi en a fait un déclencheur. C'est le seul arbitrage du fichier. ========================================================================== */ @media (max-width:640px){ .aglab{ --sc-part:.74; --sc-visee:.63; --sc-large:calc(var(--aglab-vw, 100vw) / var(--sc-part)); /* de combien la planche glisse vers la gauche pour amener `--sc-visee` au milieu de l'écran. La bande de fond doit reculer d'autant. */ --sc-decal:calc(var(--sc-large) * (var(--sc-visee) - .5)); } /* ① LE DÉCOR REVIENT. `agenslab.css` l'éteignait sous 640 px au profit du cadre cyan « only-screen » — c'était la bonne réponse quand il n'y avait pas de pièce. Il y en a une. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-frame-tv{ display:block } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-frame-popup{ display:none } /* ② LE RECADRAGE. `margin-right:0` : la règle de bureau en pose un symétrique, et sur une boîte à largeur définie il rendrait la marge de gauche inopérante. `align-self:flex-start` : `.aglab` est un `flex` en colonne avec `align-items:center`. Une boîte plus LARGE que sa mère y est recentrée d'office, marges comprises — le décalage mesuré était de 12 px de plus que le calcul, et il aurait changé avec la largeur de la colonne du thème. On sort donc du centrage automatique : la marge gauche redevient la seule chose qui place la planche, et elle se lit. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-viewport{ width:var(--sc-large); max-width:none; align-self:flex-start; margin-left:calc(50% - var(--sc-large) / 2 - var(--sc-decal)); margin-right:0; } /* la bande mur+bureau, elle, borde toujours la PAGE : elle annule le glissement de sa mère, sinon elle laisserait une bande blanche à droite. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-viewport::before{ transform:translateX(calc(-50% + var(--sc-decal))); } /* ③ LA CLOCHETTE DESSINÉE REVIENT — mais elle n'appelle personne ici. Ashi : « la clochette dans le décor ne fonctionne pas sur smartphone [...] le PC ou la clochette ont la même action : déclencher le mode fenêtré ». On sonne DANS la fenêtre, où `sonnette.js` pose déjà sa clochette à côté de 🐇/👤. Le détournement du geste est dans `chat.js` — le CSS ne fait que la rendre visible. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell{ display:block } /* ④ PLUS UNE SEULE MICRO-COMMANDE SUR LA COQUE. Ashi : « une interface plus minimaliste, exactement pareille à l'exception des boutons d'activation qui changent ». À cette échelle le tT et le ✉ mesuraient 10 px de côté : ce n'étaient plus des boutons, c'étaient des grains de poussière. Le ✉ existe dans la barre de la fenêtre ; le tT n'existe sur téléphone ni avant ni après ce correctif (la coque n'y était jamais visible) — sa place, le jour où on le voudra, est à côté du ✉ dans la barre de fenêtre. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-font-btn, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-form-btn{ display:none !important } /* ⑤ L'ÉCRAN DE LA COQUE EST UNE VITRINE, PLUS UN POSTE DE TRAVAIL. À 202 x 152 px, la saisie, les raccourcis et le plan des lieux ne se lisent pas et débordent. Ils vivent dans la fenêtre, en grand. Ce qui reste : le boot, le réveil, et le mot d'accueil de Mr. White — c'est exactement ce que le PC montre en premier, lui aussi. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-inputrow, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-typing, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-raccourcis, .aglab:not(.aglab--classic):not(.aglab-win) .aglab-canal-badge{ display:none !important } /* Le mot d'accueil est SEUL sur l'écran : il n'a plus à partager la place avec la saisie et les raccourcis, donc il peut grandir (9,3 px -> 10,1 px) tout en cessant de déborder. Mesuré dans l'aperçu à 375 px : le message tient en 126 px dans une boîte de 147. Un accueil plus bavard défilerait — c'est un écran de vitrine, pas un contrat de mise en page. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-log{ padding:3.5% 6%; } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-content{ font-size:clamp(.6rem, 2cqw, .8rem); } /* ⑥ TOUTE LA PIÈCE EST LE BOUTON. `agenslab.css` posait déjà le curseur main sur la coque et le rendait normal sur l'écran — c'était vrai du temps du cadre cyan, où l'écran était la zone de saisie. Ici l'écran est une vitrine : il se touche comme le reste. */ .aglab:not(.aglab-win) .aglab-content{ cursor:pointer } .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell{ cursor:pointer } /* La zone de la sonnette suit son DESSIN — donc à 320 px elle tombe à 51 x 43, un cheveu sous le plancher de cible tactile (44 px, WCAG 2.5.5). On élargit la CIBLE sans toucher au repère visuel, exactement comme le bouton on/off le fait déjà plus haut. */ .aglab:not(.aglab--classic):not(.aglab-win) .aglab-bell::before{ content:''; position:absolute; inset:-6px; } }