/* ════════════════════════════════════════════════════════════════ EDUCATED — PORTAIL APPRENANT : ADAPTATION ÉCRAN ÉTROIT Fichier additif : ne modifie aucun sélecteur existant. À charger APRÈS shell.css / topbar.css / ribbon.css / custom-items.css. Deux paliers, alignés sur ceux du framework : ≤ 900 px → la page de démarrage passe en une colonne, le ruban disparaît sur le dashboard, cibles tactiles à 44 px. ≤ 576 px → palier "sm" de Bootstrap, celui où XAF masque déjà la sidebar : on y ajoute le bandeau de rubriques. La mise en page du dashboard est celle de DevExtreme : .dx-dashboard-layout-container (scrollview) └ .dx-layout > .dx-layout-group > .dx-layout-item-wrapper └ dx-layout-item > .dx-dashboard-item-container └ .dx-dashboard-item > .dx-dashboard-item-content Les tailles sont calculées en JS et posées en style inline : on neutralise les hauteurs et on force l'empilement. Aucune couleur en dur : tout vient de design-tokens.css. ════════════════════════════════════════════════════════════════ */ /* ╔══════════════════════════════════════════════════════════════╗ ║ 1 · BANDEAU DE RUBRIQUES — RETIRÉ LE 01/10/2026 ║ ╚══════════════════════════════════════════════════════════════╝ Le bandeau de puces horizontales est supprimé. On revient à la navigation native de XAF : le tiroir, ouvert par le bouton que DevExpress place dans l'onglet application du ruban. POURQUOI — mesuré en production, 375 × 812 : 1. **Il ne naviguait pas.** `mobile-rubrics.js` ramassait tous les `.dxbl-accordion-item-content` de la sidebar. Sur les 9 nœuds trouvés, **3 seulement étaient des liens** (`Ma page d'accueil`, `Reçus`, `Envoyés`). Les six autres — `Accueil`, `Messages`, `Mes demandes`, `Mes cours`, `Mon stage`, `Mes absences` — sont les EN-TÊTES DE GROUPE de l'accordéon : `DIV`, sans `href`. Les taper ne navigue pas, ça replie/déplie un groupe invisible, et la liste des puces change sous le doigt. C'est ce que Nejmi décrivait comme « le clic qui lague ». 2. **Il cachait la vraie navigation.** Le bandeau, en `position: fixed` sous l'en-tête, recouvrait exactement la rangée d'onglets du ruban (56 → 109) — c'est-à-dire le bouton « Show/Hide Navigation Pane », seul accès au menu sur téléphone. 3. **Il coûtait 53 px** en haut de chaque écran, via la réserve de hauteur (voir 3.0 et le piège 38 ci-dessous). Le tiroir natif, lui, fonctionne — vérifié : 270 px, voile (`.sidebar-sm-shadow`) qui ferme au tap, tous les vrais liens, et la rubrique courante surlignée. XAF le gère seul, sans une ligne de notre code. PIÈGE 38 · UNE RÉSERVE D'ESPACE POUR UN ÉLÉMENT FIXE DOIT PORTER SUR CE QU'IL RECOUVRE, PAS SUR CE QU'ON CROIT QU'IL RECOUVRE. La réserve avait été écrite en regardant l'accueil, où elle est juste, puis appliquée partout. Sur les écrans internes un ruban s'intercale : la réserve se retrouvait 97 px sous le bandeau, ne protégeait plus rien et coûtait sa propre hauteur. Un vide blanc ne lève aucune erreur. PIÈGE 39 · AVANT DE REMPLACER UN MÉCANISME NATIF, VÉRIFIER QU'IL EST VRAIMENT ABSENT. Le bandeau a été construit parce que la sidebar est masquée sous 576 px (`d-none d-sm-flex`). Mais XAF fournit bien un tiroir mobile, avec voile — il fallait seulement ne pas recouvrir son bouton. On a passé du code à remplacer ce qui marchait déjà. Les styles du bandeau sont supprimés. La règle ci-dessous reste comme garde-fou, au cas où une version non déployée de mobile-rubrics.js continuerait d'injecter le nœud. */ .edu-rubrics, #edu-rubrics-host { display: none !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 2 · PALIER ≤ 900 px ║ ╚══════════════════════════════════════════════════════════════╝ */ @media (max-width: 900px) { /* ── 2.1 Mise en page du dashboard ─────────────────────────── RETIRÉ. Forcer l'empilement par CSS casse le layout DevExtreme : les tailles sont calculées en JS et posées en style inline, et neutraliser les hauteurs fait disparaître les items. L'empilement passera par le mode mobile natif du DashboardControl, activé côté JS — voir dashboard-events-scripts.js. En attendant, le dashboard garde son défilement horizontal. */ /* ── 2.2 Rien ne dépasse en largeur ────────────────────────── La mise en page mobile empile les items, mais les conteneurs XAF au-dessus gardent une largeur calculée pour le bureau : d'où la barre de défilement horizontale et les cartes coupées à droite. On les borne à la largeur de l'écran. */ .main, .main-content, .detail-view-content, .xaf-dashboard-container, .dx-dashboard-surface, .dx-dashboard-widget-container, .dx-dashboard-viewer, .dx-dashboard-container, .dx-dashboard-layout-container { max-width: 100% !important; overflow-x: hidden !important; } .dx-dashboard-item, .dx-dashboard-item-container { max-width: 100% !important; } /* Nos custom items respirent un peu moins large */ .educated-welcome-host, .educated-alerts-host, .educated-cue-host, .educated-nav-host { max-width: 100% !important; padding-left: 14px !important; padding-right: 14px !important; } /* ── 2.2 bis Pas de cadre autour du cadre ──────────────────── En mise en page mobile, DevExpress dessine sa propre carte autour de chaque item : fond, bordure, ombre. Nos custom items ont déjà la leur (.d6-hero et compagnie), d'où le double cadre. On efface celle de DevExpress, seulement pour nos items. */ .dx-dashboard-item:has(.educated-welcome-host), .dx-dashboard-item:has(.educated-alerts-host), .dx-dashboard-item:has(.educated-cue-host), .dx-dashboard-item:has(.educated-nav-host), .dx-dashboard-item-container:has(.educated-welcome-host), .dx-dashboard-item-container:has(.educated-alerts-host), .dx-dashboard-item-container:has(.educated-cue-host), .dx-dashboard-item-container:has(.educated-nav-host), .dx-dashboard-item-content:has(.educated-welcome-host), .dx-dashboard-item-content:has(.educated-alerts-host), .dx-dashboard-item-content:has(.educated-cue-host), .dx-dashboard-item-content:has(.educated-nav-host), [class*="dx-dashboard-mobile"]:has(.educated-welcome-host), [class*="dx-dashboard-mobile"]:has(.educated-alerts-host), [class*="dx-dashboard-mobile"]:has(.educated-cue-host), [class*="dx-dashboard-mobile"]:has(.educated-nav-host) { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } /* Le texte du bandeau va à la ligne au lieu d'être coupé */ .educated-welcome-host, .educated-welcome-host p, .educated-welcome-host span, .educated-welcome-host h1, .educated-welcome-host h2, .educated-welcome-host h3 { white-space: normal !important; overflow-wrap: break-word !important; } /* ── 2.3 Le ruban disparaît quand l'écran est un dashboard (Exporter/Importer XML, onglet « Vue » : outillage d'admin). Ailleurs il reste : la recherche des listes y vit. ⚠ Corrigé le 30/09/2026. La règle décrivait un CHEMIN : .app:has(.dxbl-tabs-content.dxbl-active .dx-dashboard-viewer) Comptés dans la page ce soir-là : `.app` → 1, `.dxbl-tabs-content.dxbl-active` → 1, `.dx-dashboard-viewer` → 1, et le sélecteur entier → **0**. Chaque morceau existe, c'est la PARENTÉ qui a disparu — le visualiseur n'est plus dans un conteneur d'onglet. C'est exactement le piège 29, déjà payé le 29/09 dans student-polish.css : la correction y avait été faite, et oubliée ici. La règle ne servait donc plus à rien depuis, sans que rien ne le signale. On s'accroche à ce qui CARACTÉRISE l'écran, pas au chemin — et on garde `html:not(.edu-admin)` pour que educatedRibbon() rouvre. */ html:not(.edu-admin) .app:has(.dx-dashboard-viewer) .xaf-ribbon { display: none !important; } /* ── 2.4 Cibles tactiles ─────────────────────────────────── */ .xaf-sidebar .dxbl-accordion-item-content, .xaf-sidebar .dxbl-accordion-group-header { min-height: 44px !important; } /* ── 2.5 Onglets de vues et grilles : défilement horizontal ── */ .dxbl-tabs-container, .dxbl-tabs .dxbl-scroll-viewer-content { overflow-x: auto !important; scrollbar-width: none !important; } .dxbl-grid { max-width: 100% !important; overflow-x: auto !important; } } /* ╔══════════════════════════════════════════════════════════════╗ ║ 3 · PALIER ≤ 576 px — celui où XAF masque déjà la sidebar ║ ╚══════════════════════════════════════════════════════════════╝ */ @media (max-width: 576px) { /* ── 3.0 Plus de réserve de hauteur ────────────────────────── Le bandeau de rubriques ayant disparu (section 1), il n'y a plus rien à réserver. La règle qui posait `padding-top` ici est la cause du vide blanc de 53 px signalé entre le ruban et la grille sur TOUS les écrans internes — voir le piège 38 en section 1. */ .app > .xaf-flex-auto, #main-window-template-component > .xaf-flex-auto { padding-top: 0 !important; } /* ── 3.0 bis Le bouton de navigation sur l'accueil ─────────── Sur téléphone, XAF ne donne AUCUN bouton de menu dans l'en-tête : mesuré, `.btn-hamburger` → 0 élément dans le DOM. Le seul accès au menu est le bouton « Show/Hide Navigation Pane », que DevExpress place dans l'ONGLET APPLICATION du ruban (`.dxbl-ribbon-application-tab`, 40 × 34 à x=30). Sur les écrans internes le ruban est affiché : le bouton est là. Sur l'accueil il est masqué (section 2.3) — l'apprenant se retrouverait donc sans navigation du tout. On rouvre le ruban sur l'accueil, mais RIEN QUE cet onglet : la barre d'outils (qui porte Exporter/Importer XML, de l'outillage d'administration) et les onglets « Home » / « View » restent cachés. Coût : 47 px au lieu de 97. Mesuré après correction — ruban 47 px, bouton atteignable à x=30 y=62 (40 × 34), barre d'outils absente, première tuile à y=103. `.xaf-ribbon.dxbl-ribbon` : deux classes du MÊME élément, pas un chemin (piège 29). Une classe de plus que la règle qui le masque, donc elle passe devant quel que soit l'ordre de chargement des feuilles — et sans dépendre d'aucune parenté. `html:not(.edu-admin)` partout : educatedRibbon() rouvre le ruban entier, vérifié (97 px, 3 onglets, barre d'outils présente). */ html:not(.edu-admin) .app:has(.dx-dashboard-viewer) .xaf-ribbon.dxbl-ribbon { display: block !important; } html:not(.edu-admin) .app:has(.dx-dashboard-viewer) .xaf-ribbon.dxbl-ribbon .dxbl-tabs-content-panel, html:not(.edu-admin) .app:has(.dx-dashboard-viewer) .xaf-ribbon.dxbl-ribbon .dxbl-tabs-item:not(.dxbl-ribbon-application-tab) { display: none !important; } /* En-tête compact : logo, compte, réglages suffisent */ .header.navbar-dark, .header { padding: 0 10px !important; gap: 6px !important; min-height: 56px !important; } .header .btn-hamburger img { width: 34px !important; height: 34px !important; } .header .school-info, .header .view-caption-root { display: none !important; } /* ── 3.1 Le logo reste dans la barre du haut ───────────────── XAF le retire dès qu'on est sur une vue de détail avec bouton retour — c'est écrit dans sa propre feuille : styles.css @media (max-width: 575.98px) .xaf-detail-view-header.xaf-show-navigate-back-action .header-left-side { display: none } Or sur téléphone l'accueil EST une vue de détail (le dashboard) : le logo disparaissait donc sur l'écran le plus consulté, et la barre du haut restait aux trois quarts vide. Quatre classes pour passer devant la règle de XAF. */ .header.xaf-detail-view-header.xaf-show-navigate-back-action .header-left-side { display: flex !important; align-items: center !important; min-width: 0 !important; width: auto !important; padding-left: 4px !important; } /* Le logo est un fond en `contain` sur un bloc de 145 × 34 : il ne doit pas manger la place du bouton retour. */ .header.xaf-detail-view-header .header-left-side .header-logo { margin: 0 6px !important; } /* Le séparateur vertical posé après le logo n'a plus de sens ici. */ .header.xaf-detail-view-header .header-left-side a::after { display: none !important; } /* Plus de marges perdues autour du contenu */ .main-content, .detail-view-content, .dx-dashboard-surface { padding: 0 !important; } /* ── 3.2 Le tiroir de navigation : on ne le touche pas ─────── Il y avait ici une règle qui forçait la sidebar en plein écran : #main-window-template-component .xaf-sidebar.d-flex, .app .xaf-sidebar:not(.d-none) { position: fixed; inset: 56px 0 0 0; … } Comptée dans la page le 01/10/2026 : **0 élément**. Elle n'a jamais rien fait — XAF garde `d-none` sur la sidebar et la montre autrement, donc `:not(.d-none)` ne matche pas. Supprimée plutôt que réparée, parce qu'il n'y a rien à réparer : le tiroir natif de XAF est déjà correct sur téléphone. Mesuré, tiroir ouvert : sidebar 270 px à x=0 sous le ruban, voile `.sidebar-sm-shadow` en `position: fixed` sur le reste, qui ferme au tap. Ouverture et fermeture vérifiées par le bouton et par le voile, sur l'accueil comme sur un écran interne. Le forcer à 100 % de large, essayé puis abandonné : ça masque le voile, donc on perd la fermeture au tap à côté. Le natif fait mieux que nous. */ } /* ╔══════════════════════════════════════════════════════════════╗ ║ 4 · LA PAGE D'ACCUEIL EN MISE EN PAGE MOBILE ║ ╚══════════════════════════════════════════════════════════════╝ Le crochet est `.dx-dashboard-mobile-layout`, la classe que le DashboardControl pose lui-même quand il empile ses items. Ce n'est PAS une largeur : c'est ce qui caractérise l'écran (piège 29). La bascule est décidée dans dashboard-events-scripts.js, bloc 1 bis, par `option('mobileLayoutEnabled','Always')` — jamais par du CSS. Ce que DevExpress rend réellement dans ce mode, mesuré en prod le 30/09/2026 (375 × 812, DevExpress 26.1.4) : .dx-dashboard-mobile-layout (un dxScrollView) └ .dx-list-group-body └ .dx-item.dx-list-item └ .dx-template-wrapper ← le voile et le bouton ├ dashboard-standalone-item « agrandir » sont ICI, │ └ .dx-dashboard-item-container FRÈRES de l'item │ └ .dx-dashboard-item │ └ .educated-*-host ├ .dx-dashboard-mobile-layout-item-shield └ .dx-dashboard-mobile-layout-maximize-icon Trois choses sont posées par DevExpress et nous gênent : · une hauteur de 250 px en style inline sur CHAQUE item ; · un voile transparent (z-index 150) par item, qui capte le doigt ; · `.dx-state-disabled { pointer-events: none }` sur l'item — donc plus rien n'est cliquable dans nos cartes. Les trois sont neutralisés ci-dessous, POUR NOS ITEMS SEULEMENT : un vrai item de BI (graphique, grille) garde son voile et son bouton « agrandir », qui lui servent. */ @media (max-width: 900px) { /* ── 4.1 La tuile prend la hauteur de son contenu ───────────── DevExpress donne 250 px à chaque item, en inline. Sur téléphone ça coupe le bandeau et laisse du vide sous « Ma journée ». La hauteur doit se libérer sur TOUTE la chaîne : le .dx-list-item la fixe aussi, et n'en relâcher qu'une partie fait se chevaucher les tuiles (mesuré : items à 403 px dans des lignes de 262). */ .dx-dashboard-mobile-layout .dx-list-item, .dx-dashboard-mobile-layout .dx-list-item > .dx-template-wrapper, .dx-dashboard-mobile-layout dashboard-standalone-item, .dx-dashboard-mobile-layout .dx-dashboard-item-container, .dx-dashboard-mobile-layout .dx-dashboard-item { height: auto !important; min-height: 0 !important; } /* La bande de 48 px que DevExpress réserve au titre du dashboard est vide ici (mesuré : premier enfant 0 × 0). On la rend. */ .dx-dashboard-viewer > .dx-dashboard-mobile-layout { top: 0 !important; height: 100% !important; } /* ── 4.2 Un seul cadre : le nôtre ───────────────────────────── DevExpress dessine sa propre carte autour de « Ma journée » et « Derniers supports » (fond blanc, rayon 18) alors que .eh-panel en a déjà une (rayon 14) : deux cadres décalés d'un pixel. */ .dx-dashboard-mobile-layout .dx-dashboard-item, .dx-dashboard-mobile-layout .dx-dashboard-item-container { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ── 4.3 La même largeur pour tous ──────────────────────────── C'est le défaut signalé : la carte « Bonjour » était plus étroite que « Ma journée ». Mesuré avant correction, à 375 px : .d5-welcome x=26 w=323 ← padding 0 14px (section 2.2) .eh-panel x=13 w=350 ← pas de padding .ap-panel x=26 w=323 L'emprise des cinq items est pourtant identique (x=12, w=351) : l'écart venait entièrement de ce padding. On le ramène à 2 px pour tout le monde → cartes à x=14, w=347. */ .dx-dashboard-mobile-layout .educated-welcome-host, .dx-dashboard-mobile-layout .educated-alerts-host, .dx-dashboard-mobile-layout .educated-cue-host, .dx-dashboard-mobile-layout .educated-day-host, .dx-dashboard-mobile-layout .educated-supports-host, .dx-dashboard-mobile-layout .educated-nav-host { padding: 0 2px !important; background: transparent !important; overflow: visible !important; } /* ── 4.4 Une seule facture de carte ─────────────────────────── Trois rayons différents cohabitaient (12 / 14 / 16) et l'ombre n'était posée que sur deux cartes sur cinq. Un sélecteur à trois classes pour passer devant les feuilles chargées après celle-ci (mobile.css n'est pas la dernière dans _Host.cshtml). */ .dx-dashboard-mobile-layout .dx-dashboard-item .d5-welcome, .dx-dashboard-mobile-layout .dx-dashboard-item .eh-panel, .dx-dashboard-mobile-layout .dx-dashboard-item .ap-panel, .dx-dashboard-mobile-layout .dx-dashboard-item .educated-cue-host > .dx-accordion-wrapper { width: 100% !important; max-width: 100% !important; border: 1px solid var(--line, #E5E7EB) !important; border-radius: 18px !important; background: var(--surface-1, #FFFFFF) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .18) !important; overflow: hidden !important; } /* ── 4.5 C'est la page qui défile, plus la tuile ────────────── Une liste qui défile DANS une carte de 250 px, sur un téléphone, c'est deux ascenseurs imbriqués et un contenu qu'on ne sait pas là. Les tuiles s'étant libérées en hauteur (4.1), les listes n'ont plus besoin de leur propre ascenseur. */ .dx-dashboard-mobile-layout .eh-list, .dx-dashboard-mobile-layout .ap-list, .dx-dashboard-mobile-layout .educated-cue-host { overflow: visible !important; max-height: none !important; } /* ── 4.6 Le texte va à la ligne au lieu d'être coupé ────────── Tout l'intérieur d'un item de dashboard hérite d'un `white-space: nowrap` de DevExpress : « Architectures logicielles et Design Patterns » sortait de la carte. */ .dx-dashboard-mobile-layout .eh-slot-title, .dx-dashboard-mobile-layout .eh-slot-meta, .dx-dashboard-mobile-layout .eh-doc-title, .dx-dashboard-mobile-layout .eh-doc-meta, .dx-dashboard-mobile-layout .ap-item-label, .dx-dashboard-mobile-layout .ap-item-sub, .dx-dashboard-mobile-layout .d6-tile-label { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere !important; } /* ── 4.7 Rendre le doigt à nos cartes ───────────────────────── Deux mécanismes de DevExpress, cumulés, rendaient l'accueil entièrement inerte sur téléphone : · un voile par item (z-index 150) qui capte le tap pour agrandir la tuile — comportement d'outil de BI, sans objet pour un bandeau de bienvenue ou une liste d'alertes ; · `.dx-state-disabled { pointer-events: none }` sur l'item. Mesure : elementFromPoint au centre d'une alerte rendait `.dx-template-wrapper` — donc rien de notre contenu. On ne touche qu'aux enveloppes qui contiennent un `educated-*-host`. */ .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) > .dx-dashboard-mobile-layout-item-shield { pointer-events: none !important; } .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) > .dx-dashboard-mobile-layout-maximize-icon { display: none !important; } .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) > dashboard-standalone-item.dx-state-disabled, .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) .dx-dashboard-item-container, .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) .dx-dashboard-item { pointer-events: auto !important; } /* `.dx-state-disabled .dx-widget` passe l'opacité à 0.5 : la carte « Raccourcis » (un dxAccordion) sortait délavée. */ .dx-dashboard-mobile-layout .dx-template-wrapper:has([class*="educated-"][class*="-host"]) .dx-widget { opacity: 1 !important; cursor: auto !important; } /* ── 4.8 De l'air en bas de page ──────────────────────────── */ .dx-dashboard-mobile-layout .dx-list-group-body > .dx-list-item:last-child { padding-bottom: 18px !important; } }