/* =========================================================================== LOT 01 — REPLI AUTOMATIQUE DE LA COQUILLE À charger APRÈS rail-lateral.css (donc après easytime-shell.css). CE QUE CE FICHIER CORRIGE Le RAIL, d'abord (voir plus bas) — et depuis le 2026-09-10 le nom du module dans la barre du haut, qui appartient à la même question : ce que la coquille montre quand la fenêtre se resserre. Les deux autres moitiés de ce correctif ne pouvaient pas vivre ici et disent où elles sont. .appgrid fixe « 256px 1fr » (easytime-shell.css:8) et aucune règle de largeur ne touche ces colonnes. Le rail réduit à 52 px existe déjà, mais seulement sur l'attribut data-rail="true", posé à la main. À 390 px le rail prenait donc les deux tiers de l'écran. DEUX PALIERS, PAS TROIS 641–1024 px : rail d'icônes imposé — mêmes règles que data-rail="true", rejouées sur une condition de largeur. ≤ 640 px : le rail sort du flux et se superpose, libellés intacts. D'où la borne min-width:641px du premier palier : rien à défaire dans le second. POURQUOI PAS DE SURCHARGE DE data-rail Un utilisateur qui a déplié son rail sur poste fixe garde son choix : la largeur ne réécrit pas l'attribut, elle impose seulement l'apparence tant que la fenêtre est étroite. Au retour en grande largeur, le choix reprend. =========================================================================== */ /* --- Palier 1 : 641–1024 px, rail d'icônes imposé ------------------------- */ @media (min-width: 641px) and (max-width: 1024px) { .appgrid { grid-template-columns: 52px 1fr; } .appgrid .et-side-rech, .appgrid .et-grouphdr span:not(.ico), .appgrid .et-grouphdr .chev, .appgrid .et-listhdr span:not(.ico), .appgrid .et-navmain .lb, .appgrid .et-star, .appgrid .et-nav-badge, .appgrid .et-pers .nom, .appgrid .et-pers .meta, .appgrid .et-side-pied .soc, .appgrid .et-side-pied .ver, .appgrid .et-side-passerelles { display: none; } .appgrid .et-grouphdr { justify-content: center; background: var(--et-surface-2); border-top-color: var(--et-hairline); } .appgrid .et-listhdr { justify-content: center; } .appgrid .et-navmain { padding-left: 19px; } .appgrid .et-navmain .ic { display: inline-flex; font-size: 12px; } .appgrid .et-navmain .pt-attente { display: block; } .appgrid .et-side-tete { justify-content: center; padding: 8px 6px; } .appgrid .et-side-pied { padding: 8px 6px; } /* Le bouton de repli n'a plus d'objet : le rail est déjà au minimum. */ .appgrid .et-repli { display: none; } /* LA BARRE DU HAUT AUSSI, dans cette bande (ajout du 2026-09-10). Le nom du module y pesait 109 px pour un mot qui ne se clique pas, et c'est ce qui faisait défiler la page horizontalement à 720 px. Il cède ici pour la même raison que les libellés du rail juste au-dessus : la bande n'a pas la place, et l'icône reste. Le lot 02 le retire déjà sous 640 px et le dit mieux que nous (« si rien ne rétrécit, quelque chose doit sortir ») ; cette règle étend sa bande, elle ne la contredit pas. Le lot 02 nommait ce palier de la barre comme un ÉCART ASSUMÉ, « qui reste à faire ». C'est ce qui se fait ici, avec les deux autres moitiés : AppTopbarActions.razor (la pastille de contexte se comprime) et la feuille embarquée de ShellModule.razor (sous 640 px la barre passe à deux rangs). */ .appgrid .et-topbar .shell-marque > span { display: none; } } /* --- Palier 2 : ≤ 640 px, le rail devient un tiroir ----------------------- */ @media (max-width: 640px) { /* Une seule colonne : le contenu prend toute la largeur. */ .appgrid { grid-template-columns: minmax(0, 1fr); } .appgrid > .et-topbar, .appgrid > .et-content, .appgrid > .et-bande { grid-column: 1; } .appgrid > .et-side { position: fixed; z-index: 1050; inset: 0 auto 0 0; width: min(280px, 82vw); max-width: 82vw; grid-row: auto; grid-column: auto; transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--et-ombre-volet); } .appgrid[data-rail-ouvert="true"] > .et-side { transform: none; } /* Voile : posé sur .appgrid, il ne dépend d'aucun élément supplémentaire dans le balisage. Il ferme le tiroir au clic (le gestionnaire est sur la coquille, voir le crochet ci-dessous). */ .appgrid[data-rail-ouvert="true"]::after { content: ""; position: fixed; inset: 0; z-index: 1045; background: rgba(0, 0, 0, .38); } /* Le tiroir ouvert est un rail COMPLET : libellés, recherche et pied restent servis. Rien à réafficher — le palier 1 ne s'applique pas ici. */ /* Le bouton de repli change d'office : il ferme le tiroir. */ .appgrid .et-repli { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .appgrid > .et-side { transition: none; } } /* =========================================================================== CROCHET DE BALISAGE — la seule modification hors CSS Sur ShellModule (docs/PORTAGE_APPLAYOUT_SHELLMODULE.md), la coquille qui rend .appgrid : 1. Ajouter l'attribut data-rail-ouvert="@(_railOuvert ? "true" : "false")" 2. Ajouter dans .et-topbar un bouton, visible sous 640 px seulement, qui bascule _railOuvert (44 × 44 px, aria-expanded, aria-controls). 3. Le clic sur .et-repli et la navigation vers un écran remettent _railOuvert à false — sans quoi le tiroir reste ouvert par-dessus l'écran qu'on vient d'atteindre. RECETTE 390 px : le contenu occupe toute la largeur ; le tiroir s'ouvre et se ferme par le bouton de la barre du haut ; il se referme à la navigation. 768 px : rail d'icônes ; toute entrée reste atteignable par son icône. 1280 px : aucun changement par rapport à aujourd'hui. 1600 px : aucun changement. =========================================================================== */