/* ════════════════════════════════════════════════════════════════ EDUCATED — PORTAIL APPRENANT : PASSE VISUELLE Fichier additif, chargé en dernier. Ne modifie aucun sélecteur existant : il ne fait que gagner par l'ordre de cascade. Contenu, dans l'ordre de la maquette : 1 · Ruban — actions d'administration retirées à l'apprenant 2 · Barre du haut et onglets de vues 3 · Navigation — repère actif et compteurs 4 · Alertes — compteurs lisibles et sévérité visible 5 · Bandeau — il domine, et ses deux actions 6 · Ma journée — le temps se voit 7 · Raccourcis — une ligne au lieu d'une vignette 8 · Repères de la coquille — initiales et compteurs 9 · Hauteur — la page tient dans l'écran, quel qu'il soit Couleurs : uniquement des variables de design-tokens.css, plus la seconde couleur de la marque reprise du logo original. ════════════════════════════════════════════════════════════════ */ :root { /* Seconde couleur de la marque — le dégradé de la boucle du logo (EducatedLogo.svg : #FFA800 → #FF5D25). Réservée à quelques repères : point de date, pastille « prochain », badges de raccourcis et compteurs de navigation. Le rouge reste au critique, sinon plus rien n'est critique. */ --mark-1: #FFA800; --mark-2: #FF5D25; --gradient-mark: linear-gradient(135deg, #FFA800 0%, #FF5D25 100%); } /* ╔══════════════════════════════════════════════════════════════╗ ║ 1 · RUBAN ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Tout ce bloc est conditionné à l'absence de la classe `edu-admin` sur . C'est l'échappatoire : le concepteur de dashboard, l'import et l'export XML vivent dans ce ruban, et ce sont les seuls moyens de remanier la page de démarrage. Les masquer sans laisser de porte fermait la porte sur soi. educatedRibbon() → ruban et actions rendus, pour la session educatedRibbon(false) → on referme Le choix tient jusqu'à la fermeture de l'onglet, rechargements compris, pour qu'un import suivi d'un rechargement ne le perde pas. */ /* Sur la page de démarrage, le ruban n'a aucune action utile à l'apprenant : on le retire entièrement. Ailleurs — stage, dépôt de document, demandes — il reste avec ses actions métier. ───────────────────────────────────────────────────────────────────── 29/09 — LA RÈGLE AVAIT CESSÉ DE MATCHER, ET LE RUBAN ÉTAIT REVENU. Elle s'écrivait : .app:has(.dxbl-tabs-content.dxbl-active .dx-dashboard-viewer) .xaf-ribbon Mesuré dans la page : `.app` → 1, `.dxbl-tabs-content.dxbl-active` → 1, `.dx-dashboard-viewer` → 1, et pourtant le sélecteur complet → **0**. Chaque morceau existait ; c'est la PARENTÉ qui avait disparu. Le visualiseur n'est plus dans aucun `.dxbl-tabs-content` (`viewer.closest('.dxbl-tabs-content')` rend null), si bien que la condition `:has()` ne pouvait plus être vraie, jamais. La leçon est celle du piège 4, appliquée au CSS : on ne s'accroche pas à un CHEMIN dans un arbre que DevExpress réarrange. On s'accroche à ce qui caractérise l'écran — ici, la présence d'un visualiseur de dashboard dans l'application. C'est ce qui définit la page de démarrage, et cela ne dépend d'aucun conteneur intermédiaire. Contrepartie assumée : si un jour un second dashboard cohabite dans un onglet inactif, le ruban serait masqué alors que l'onglet visible n'est pas la page de démarrage. Dans un portail apprenant, le dashboard d'accueil est le seul — et un ruban masqué à tort se rouvre par `educatedRibbon()`, alors qu'un chemin qui ne matche plus ne se voit pas. ───────────────────────────────────────────────────────────────────── */ html:not(.edu-admin) .app:has(.dx-dashboard-viewer) .xaf-ribbon { display: none !important; } /* Partout : les actions d'administration disparaissent. ⚠ À vérifier après coup dans l'inspecteur — les data-action-name réels peuvent différer ; le filtre par sous-chaîne couvre les variantes usuelles. */ html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="Xml"], html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="XML"], html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="Export"], html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="Import"], html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="Design"], html:not(.edu-admin) .xaf-ribbon .dxbl-ribbon-button[data-action-name*="Conception"] { display: none !important; } /* Le ruban rouvert se signale, pour qu'on ne le laisse pas ouvert sans s'en rendre compte. */ html.edu-admin .xaf-ribbon { box-shadow: inset 0 3px 0 var(--mark-2, #FF5D25); } /* ╔══════════════════════════════════════════════════════════════╗ ║ 2 · BARRE DU HAUT ET ONGLETS DE VUES ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Un onglet unique, avec une croix pour fermer la seule vue ouverte, n'apporte rien. Il réapparaît dès qu'une deuxième vue s'ouvre. */ .xaf-tabbed-mdi .dxbl-tabs-tablist:has(.dxbl-tabs-item:only-child) { display: none !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 3 · NAVIGATION ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Repère actif franc : un liseré plutôt qu'un simple fond teinté. */ .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content, .xaf-sidebar .dxbl-accordion-item-content.dxbl-active, .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--brand) !important; } /* L'icône de la rubrique active devient pleine. */ .xaf-sidebar .dxbl-accordion-item.dxbl-active .educated-nav-ico, .xaf-sidebar .dxbl-accordion-item-content.dxbl-active .educated-nav-ico { background: var(--brand) !important; color: #fff !important; } .xaf-sidebar .dxbl-accordion-item.dxbl-active .educated-nav-ico svg, .xaf-sidebar .dxbl-accordion-item-content.dxbl-active .educated-nav-ico svg { color: #fff !important; stroke: #fff !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 4 · ALERTES ║ ║ Le chiffre le plus actionnable de la page était le moins ║ ║ lisible : orange pâle ou bleu très clair sur blanc. ║ ╚══════════════════════════════════════════════════════════════╝ */ .educated-alerts-host .ap-item { position: relative; padding-left: 12px !important; } /* Liseré de sévérité, dans la couleur même de l'alerte. alerts-panel.js pose trois variables sur la ligne : --ap-fg la teinte configurée, soutenue pour tenir en aplat --ap-tint la teinte telle qu'elle est en configuration --ap-bg sa version pâle (AlertBgColor) Sans configuration, la palette cyclique du JS les remplit ; et si le JS est d'une version antérieure, le repli est la couleur de la marque — jamais de bloc incolore. */ .educated-alerts-host .ap-item::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--ap-fg, var(--brand)); } .educated-alerts-host .ap-item--zero::before { display: none; } /* Initiales lisibles : pastille pleine dans la couleur de l'alerte, plus la version pâle en halo. Le pastel seul, sur blanc, ne se voyait pas. */ .educated-alerts-host .ap-avatar { background: var(--ap-fg, var(--brand)) !important; color: #fff !important; font-weight: 700 !important; letter-spacing: .02em; box-shadow: 0 0 0 3px var(--ap-bg, var(--brand-soft, #EEEAFF)); } /* Compteur en pastille pleine, même couleur que l'avatar : sur une ligne d'alerte, le chiffre et les initiales disent la même chose. */ .educated-alerts-host .ap-count { min-width: 30px; height: 26px; padding: 0 9px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700 !important; font-size: 13px !important; color: #fff !important; background: var(--ap-fg, var(--brand)); } /* Une alerte à zéro, si elle est affichée, reste discrète. */ .educated-alerts-host .ap-item--zero .ap-count { background: var(--surface-3, #F3F5F9) !important; color: var(--ink-3, #94A3B8) !important; } .educated-alerts-host .ap-item--zero .ap-avatar { background: var(--surface-3, #F3F5F9) !important; color: var(--ink-3, #94A3B8) !important; box-shadow: none; } /* « Voir tout » débordait de la carte, et la poignée de l'item dashboard — le bouton à six points qui apparaît au survol, en haut à droite — vient se poser dessus. On lui laisse sa place. */ .educated-alerts-host .ap-header { min-width: 0; padding-right: 34px; } .educated-alerts-host .ap-voir-tout { flex: none; white-space: nowrap; margin-left: auto; max-width: none !important; overflow: visible !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 5 · BANDEAU ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Le bandeau est la carte d'entrée : il doit se détacher des autres. */ .dx-dashboard-item:has(.educated-welcome-host) .d5-welcome, .educated-welcome-host .d5-welcome { box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 24px 48px -24px rgba(31,27,90,.35) !important; border-color: var(--brand-soft-2, #DAD4FF) !important; } /* Le prochain cours passe en dégradé : c'est l'information de tête. */ .educated-welcome-host .ew-next { background: var(--gradient-brand) !important; border-color: transparent !important; } .educated-welcome-host .ew-next .ew-next-title { color: #fff !important; } .educated-welcome-host .ew-next .ew-next-meta { color: rgba(255,255,255,.84) !important; } .educated-welcome-host .ew-next .ew-next-when { background: rgba(255,255,255,.2) !important; } /* Le point de la ligne de date reprend la seconde couleur. */ .educated-welcome-host .ew-dot { background: var(--gradient-mark) !important; } /* La classe de l'apprenant, posée à côté du prénom. */ .educated-welcome-host .ew-klass { display: inline-block; vertical-align: 4px; margin-left: 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: .04em; padding: 4px 9px; border-radius: 20px; background: var(--surface-3, #F3F5F9); border: 1px solid var(--line, #E5E7EB); color: var(--ink-2, #475569); } /* Les deux actions du bandeau. */ .educated-welcome-host .ew-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; } .educated-welcome-host .ew-act { display: inline-flex; align-items: center; gap: 9px; font-family: "Geist", system-ui, sans-serif; font-size: 13.5px; font-weight: 600; line-height: 1; padding: 12px 16px; border-radius: 11px; border: 1px solid var(--line, #E5E7EB); background: var(--surface-2, #FAFBFD); color: var(--ink-1, #1E293B); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; } .educated-welcome-host .ew-act:hover { box-shadow: 0 6px 16px -10px rgba(31,27,90,.5); } .educated-welcome-host .ew-act:active { transform: translateY(1px); } .educated-welcome-host .ew-act.primary { background: var(--gradient-brand); border-color: transparent; color: #fff; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 6 · MA JOURNÉE ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Barre d'état épaissie : 3 px en gris clair ne disait rien. */ .educated-day-host .eh-slot-bar { width: 4px; } /* L'heure de fin redevient lisible. */ .educated-day-host .eh-slot-end { color: var(--ink-3, #94A3B8); } /* Le repère de la séance — « en cours » ou « prochain » — est écrit par student-home.js, qui sait laquelle des lignes le porte. Une seule à la fois : tant qu'une séance est en cours, elle garde le repère. Ici, on ne fait que le rendre visible. ⚠ Ce bloc remplace un ::after posé depuis le CSS : les deux ensemble affichaient deux fois « EN COURS » sur la même ligne. */ .educated-day-host .eh-slot-now { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 9.5px !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase; color: #fff !important; background: var(--gradient-brand) !important; border-radius: 20px; padding: 4px 8px !important; } /* La séance à venir prend la seconde couleur de la marque : elle attend, elle ne se passe pas. */ .educated-day-host .eh-slot-now--next { background: var(--gradient-mark) !important; } /* La barre d'état de la ligne repérée suit la même couleur que son badge : l'œil trouve la séance du moment sans lire une seule ligne de texte. */ .educated-day-host .eh-slot:has(.eh-slot-now--next) .eh-slot-bar { background: var(--gradient-mark) !important; } .educated-day-host .eh-slot--live .eh-slot-bar { background: var(--gradient-brand) !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 7 · RACCOURCIS ║ ║ Cinq vignettes pour cinq mots : icône, libellé et badge ║ ║ tiennent sur une ligne. ║ ╚══════════════════════════════════════════════════════════════╝ */ /* La tuile s'appelle .d6-tile-v6, et elle est en deux étages : .d6-tile-top → icône + badge .d6-tile-body → libellé + méta Pour tout mettre sur une ligne sans toucher au JS, les deux étages passent en display:contents : leurs enfants deviennent enfants directs de la tuile, qui les range en flex. L'ordre d'affichage est ensuite repris par `order`, puisque le badge arrive avant le libellé dans le DOM. Une méta, quand il y en a une, passe à la ligne suivante. */ .educated-cue-host .d6-tile-v6 { display: flex !important; /* custom-items.css pose flex-direction: column sur la carte. Sans cette ligne, tout le reste s'empile malgré le display:contents. */ flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; /* Surtout pas de retour à la ligne : le badge passerait sous le libellé, hors de l'emplacement, et serait coupé par le bord de la tuile. */ flex-wrap: nowrap !important; gap: 10px !important; padding: 10px 12px !important; text-align: left !important; } /* Seul l'étage du haut s'efface, pour que l'icône et le badge deviennent enfants directs de la tuile. Le corps reste une colonne : il peut porter une méta sous le libellé. */ .educated-cue-host .d6-tile-top { display: contents !important; } .educated-cue-host .d6-tile-body { order: 2; flex: 1 1 auto !important; min-width: 0 !important; } .educated-cue-host .d6-tile-ico { order: 1; margin: 0 !important; width: 28px !important; height: 28px !important; flex: none !important; } /* Un libellé trop long passe sur deux lignes plutôt que de s'abréger. « Boite de réce… » ne dit plus rien, et la hauteur de la tuile permet deux lignes sans rien pousser. Au-delà de deux, là oui, on coupe. */ .educated-cue-host .d6-tile-label { font-size: 12.5px !important; line-height: 1.2 !important; color: var(--ink-0, #0F172A) !important; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Le badge passe à droite, en pastille pleine de la seconde couleur. */ .educated-cue-host .d6-tile-badge { order: 3; position: static !important; margin-left: auto !important; flex: none; background: var(--gradient-mark) !important; color: #fff !important; font-weight: 700 !important; } /* L'ancien menu déroulant reste dans le DOM pour ne pas casser son initialisation, mais il ne s'affiche plus : les deux boutons le remplacent. */ .educated-welcome-host .ew-btn-row { display: none !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 8 · LES REPÈRES DE LA COQUILLE ║ ║ Posés par shell-badges.js, hors du dashboard. ║ ╚══════════════════════════════════════════════════════════════╝ */ /* Le compte : les initiales de l'apprenant plutôt qu'un personnage générique. C'est son espace — autant qu'il s'y reconnaisse. */ .account-container .account-button.edu-has-initials .xaf-image { display: none !important; } .account-container .account-button .edu-initials { font-family: "Geist", system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; line-height: 1; color: #fff; pointer-events: none; } /* Le compteur d'alertes reporté sur la rubrique. Il reprend la seconde couleur de la marque : le rouge reste réservé au critique, dans le panneau d'alertes, sinon plus rien n'est critique. */ .xaf-sidebar .edu-nav-count { margin-left: auto; margin-right: 2px; order: 99; flex: none; min-width: 19px; height: 19px; padding: 0 6px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; font-weight: 700; line-height: 1; color: #fff; background: var(--gradient-mark); } /* Ni l'en-tête de groupe ni la sous-rubrique n'étaient prévus pour porter un élément de plus : sans cette ligne, le compteur pousse le chevron hors de la rangée. */ .xaf-sidebar .dxbl-accordion-group-header:has(.edu-nav-count), .xaf-sidebar .dxbl-accordion-item-content:has(.edu-nav-count) { display: flex; align-items: center; } /* Sur une sous-rubrique, le compteur est plus discret : le chiffre du groupe a déjà attiré l'œil, celui-ci ne fait que dire lequel des deux. */ .xaf-sidebar .dxbl-accordion-item-content .edu-nav-count { font-size: 10px; min-width: 17px; height: 17px; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 9 · LA HAUTEUR ║ ║ « Tous les blocs visibles, à n'importe quelle ║ ║ résolution. » ║ ╚══════════════════════════════════════════════════════════════╝ Trois mécanismes se relaient, du plus grand écran au plus petit. 1 · La répartition. La mise en page du dashboard donne à chaque bloc une part de la hauteur disponible — 0,95 au bandeau, 1,05 à la journée, et ainsi de suite. Ces parts sont des proportions, pas des pixels : elles suivent déjà l'écran. Encore faut-il que la hauteur disponible soit définie, ce que fait la chaîne rétablie dans student-home.css. 2 · Le contenu qui déborde défile dans son bloc. Les listes le font déjà (.eh-list, .ap-list, .educated-cue-host). Un bloc n'est donc jamais coupé : c'est son contenu qui se parcourt. 3 · Ce qui ne peut ni se réduire ni défiler — le bandeau, les en-têtes — se resserre quand l'écran est bas. C'est l'objet de ce qui suit. Les paliers sont en hauteur de fenêtre, pas en largeur : c'est bien la hauteur qui manque. Sous 560 px de haut, plus rien de sensé n'est possible sur cinq blocs : la page redevient défilante. Mieux vaut un écran qui défile que cinq blocs illisibles. */ /* ── Palier 1 : ordinateur portable, ~1366 × 768 ─────────────── */ @media (max-height: 880px) { /* Le bandeau : le même contenu, plus serré. */ .educated-welcome-host .d5-welcome-inner { padding: 15px 18px 16px !important; } /* La taille du bonjour n'est plus décidée ici : voir la section 13. Ce palier ne règle que les espacements. */ .educated-welcome-host .ew-next { margin-top: 9px; padding: 9px 12px; } .educated-welcome-host .ew-actions { margin-top: 10px; gap: 8px; } .educated-welcome-host .ew-act { padding: 10px 14px; font-size: 13px; } /* Les en-têtes de panneau rendent quelques pixels chacun. */ .eh-header, .educated-alerts-host .ap-header { padding-top: 12px !important; padding-bottom: 8px !important; } /* Les lignes de liste aussi — c'est là qu'il y en a le plus. */ .educated-day-host .eh-slot, .educated-supports-host .eh-doc, .educated-alerts-host .ap-item { padding-top: 9px !important; padding-bottom: 9px !important; } } /* ── Palier 2 : écran bas, ~1280 × 720 et en dessous ─────────── */ @media (max-height: 760px) { /* La phrase « 3 points d'attention aujourd'hui… » : raccourcie, pas supprimée. Elle disparaissait complètement, au motif que le panneau d'alertes dit la même chose en détail et en chiffres. C'était vrai mais mal jugé : un texte qui s'évapore quand on change le zoom se remarque — et l'apprenant, lui, ne sait pas qu'il a franchi un palier ; il croit avoir cassé quelque chose. Sur une seule ligne elle occupe 19 px au lieu de 48. Les vingt-neuf pixels rendus suffisent : les boutons gardent leur place, vérifié dans le navigateur. Le début de la phrase — le nombre de points d'attention — est justement ce qui compte ; la fin n'en est que l'énumération, et elle est à droite. La TAILLE n'est pas réglée ici : voir la section 13. Sur ce palier on ne décide que de la mise en page. */ .educated-welcome-host .d5-sub { line-height: 1.4 !important; margin-top: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Le retrait se resserre, mais l'horizontal reste à 18 px : c'est lui qui aligne le bandeau sur « Ma journée », et il ne doit pas bouger d'un palier à l'autre. */ .educated-welcome-host .d5-welcome-inner { padding: 13px 18px 14px !important; } .educated-day-host .eh-slot, .educated-supports-host .eh-doc, .educated-alerts-host .ap-item { padding-top: 8px !important; padding-bottom: 8px !important; } .eh-header, .educated-alerts-host .ap-header { padding-top: 10px !important; padding-bottom: 6px !important; } } /* ── Palier 3 : la page redevient défilante ──────────────────── */ @media (max-height: 560px) { .detail-view-content:has(.xaf-dashboard-container), .xaf-dashboard-container, .dx-dashboard-widget-container, .dx-dashboard-surface { height: auto !important; min-height: 560px !important; overflow: visible !important; } /* Ici, et seulement ici, la phrase part vraiment. À cette hauteur on ne choisit plus entre deux conforts : il s'agit de ne pas couper les deux boutons, qui sont les seules actions de la page. */ .educated-welcome-host .d5-sub { display: none !important; } } /* ── Le fond des blocs ─────────────────────────────────────────── Un bloc ne se laisse jamais dépasser par son contenu : ce qui ne tient pas se parcourt à l'intérieur. Sans cette limite, un item trop plein repousse ses voisins hors de l'écran, et les parts de la mise en page ne veulent plus rien dire. */ .educated-day-host, .educated-supports-host, .educated-alerts-host { max-height: 100%; min-height: 0; } .educated-day-host .eh-panel, .educated-supports-host .eh-panel, .educated-alerts-host .ap-panel { min-height: 0; } .eh-list, .educated-alerts-host .ap-list { min-height: 0; } /* ── Le bandeau ne se fait pas couper ──────────────────────────── Son contenu est de hauteur fixe — date, titre, phrase, prochain cours, deux boutons — alors que celui des listes est élastique : elles défilent, lui non. Quand la part qu'il reçoit tombe sous ce qu'il lui faut, ce sont les deux boutons qui sautent, c'est-à-dire les deux seules actions de la page. Deux précautions : quelques pixels rendus sur les marges internes, et le contenu ancré en haut plutôt qu'étiré. Le reste se règle par les parts de la mise en page, où la journée absorbe la variation. */ .educated-welcome-host .ew-next { margin-top: 9px; } .educated-welcome-host .ew-actions { margin-top: 11px; } .educated-welcome-host .d5-sub { margin-top: 6px !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 10 · NAVIGATION — DES RANGÉES, PAS DES LIENS ║ ╚══════════════════════════════════════════════════════════════╝ Trois choses brouillaient la barre latérale. Le souligné bleu sous les sous-rubriques : l'apparence d'un lien hypertexte au milieu d'un texte. Dans une barre de navigation, tout est cliquable — le souligné ne distingue rien, il ajoute du bruit sous chaque libellé et casse l'alignement de la colonne. Le fond teinté de tout groupe ouvert : trois rubriques ouvertes, trois fonds gris, plus celui de la rubrique courante. Quatre rangées se signalaient, une seule comptait. Et une rangée sans icône — « Accueil » —, dont le libellé se décalait dans la colonne des autres (réglé côté sidebar-icons.js). Ce qui dit qu'une rangée réagit, c'est le survol ; ce qui dit où l'on est, c'est le fond teinté et le liseré. Deux signaux, pas quatre. Les !important ne sont pas décoratifs : shell.css pose les siens sur les mêmes propriétés. Sans eux, rien de ce bloc ne s'applique. */ /* Plus aucun souligné, dans aucun état. */ .xaf-sidebar a, .xaf-sidebar a:hover, .xaf-sidebar a:focus, .xaf-sidebar .dxbl-accordion-item-content, .xaf-sidebar .dxbl-accordion-item-content:hover, .xaf-sidebar .xaf-nav-link, .xaf-sidebar .xaf-nav-link:hover, .xaf-sidebar .xaf-nav-link span { text-decoration: none !important; } /* ── Le rythme vertical ────────────────────────────────────────── Une cible de clic de 26 px se rate ; une de 38 px délaye une barre qui ne porte que cinq rubriques, et l'écran se remplit de blanc. 32 et 28 px : confortable au doigt comme à la souris, et la liste se lit d'un seul coup d'œil au lieu de s'étaler. Les marges suivent — c'est là que se gagne le plus de place, un interligne se répétant autant de fois qu'il y a de rangées. */ .xaf-sidebar .dxbl-accordion-group-header { min-height: 32px !important; border-radius: 9px !important; margin: 1px 6px !important; /* Rangée en flex : le libellé se cale contre l'icône au lieu de flotter au milieu quand la rubrique n'en a pas, et le compteur trouve sa place à droite. */ display: flex !important; align-items: center; gap: 8px; } /* ⚠ .dxbl-accordion-item-content n'est PAS réservé aux sous-rubriques : l'en-tête de groupe en contient un lui aussi, et le groupe porte en plus la classe .dxbl-accordion-item. Une règle écrite pour « les sous-rubriques » décale donc aussi la rubrique elle-même — c'est ce qui repoussait l'icône loin de son chevron. Le seul discriminant fiable est le parent : celui d'une sous-rubrique n'est pas un en-tête de groupe. */ .xaf-sidebar *:not(.dxbl-group-header) > .dxbl-accordion-item-content { min-height: 28px !important; border-radius: 8px !important; margin: 1px 6px !important; /* Le texte d'une sous-rubrique commence là où commence l'icône de sa rubrique : une colonne de plus, pas deux. */ padding-left: 45px !important; } /* Le contenu de l'en-tête, lui, ne se décale pas : il EST la rubrique. */ .xaf-sidebar .dxbl-group-header > .dxbl-accordion-item-content { padding-left: 0 !important; margin: 0 !important; min-height: 0 !important; flex: 1 1 auto; min-width: 0; } /* Le conteneur de texte ajoutait 6 px de tous côtés, donc 12 px de hauteur par rangée — multipliés par le nombre de rubriques. */ .xaf-sidebar .dxbl-accordion-item-text-container { padding: 0 !important; } /* En mode compact, la colonne est plus étroite : le retrait suit. */ .xaf-sidebar .xaf-navmenu.dxbl-sm *:not(.dxbl-group-header) > .dxbl-accordion-item-content { min-height: 24px !important; padding-left: 36px !important; } /* La hauteur d'une rangée ne vient pas que de son min-height : le lien qu'elle contient a ses propres marges verticales, et ce sont elles qui décidaient. On les neutralise, et min-height reprend la main. */ .xaf-sidebar .dxbl-accordion-group-header, .xaf-sidebar .dxbl-accordion-item-content { padding-top: 0 !important; padding-bottom: 0 !important; } .xaf-sidebar .xaf-nav-link { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; min-width: 0; } /* Le groupe et ses sous-rubriques forment un bloc : pas d'interligne entre eux, un peu d'air entre deux rubriques. */ .xaf-sidebar .dxbl-accordion-group { margin-bottom: 2px; } .xaf-sidebar .dxbl-accordion-group .dxbl-accordion-item:first-child .dxbl-accordion-item-content { margin-top: 0 !important; } /* ── Les signaux ─────────────────────────────────────────────────── */ /* Un groupe ouvert n'est pas un groupe actif : son chevron le dit déjà. */ .xaf-sidebar .dxbl-accordion-group.expanded > .dxbl-accordion-group-header { background: transparent !important; } /* Le survol — le seul signal d'interactivité nécessaire. */ .xaf-sidebar .dxbl-accordion-group-header:hover, .xaf-sidebar .dxbl-accordion-group.expanded > .dxbl-accordion-group-header:hover, .xaf-sidebar .clickable-xaf-nav-item .dxbl-accordion-item-content:hover, .xaf-sidebar .dxbl-accordion-item-content:hover { background: var(--surface-3, #F3F5F9) !important; } /* La rubrique active garde sa teinte au survol, au lieu de clignoter. */ .xaf-sidebar .dxbl-accordion-item-content.dxbl-active:hover, .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"]:hover, .xaf-sidebar .dxbl-accordion-item.dxbl-active > .dxbl-accordion-item-content:hover { background: var(--brand-soft, #EEEAFF) !important; } /* ── Les libellés ──────────────────────────────────────────────── Un seul écart entre un groupe et ses sous-rubriques. Le retrait dit déjà la hiérarchie ; la redire par la graisse ET la couleur la fait paraître plus profonde qu'elle n'est. Le :not() protège le compteur, qui est aussi un span. */ .xaf-sidebar .dxbl-accordion-group-header span:not(.edu-nav-count):not(.educated-nav-ico) { font-size: 13px !important; font-weight: 600 !important; color: var(--ink-0, #0F172A) !important; } .xaf-sidebar *:not(.dxbl-group-header) > .dxbl-accordion-item-content span:not(.edu-nav-count):not(.educated-nav-ico) { font-size: 12.5px !important; font-weight: 500 !important; color: var(--ink-2, #475569) !important; } /* Sauf la rubrique courante, qui reste en couleur de marque. */ .xaf-sidebar .dxbl-accordion-item-content.dxbl-active span:not(.edu-nav-count):not(.educated-nav-ico), .xaf-sidebar .dxbl-accordion-item-content[aria-selected="true"] span:not(.edu-nav-count):not(.educated-nav-ico) { color: var(--brand, #4F46E5) !important; font-weight: 600 !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 11 · LA PASTILLE DE FORMAT ║ ╚══════════════════════════════════════════════════════════════╝ Elle affichait « PDF » pour tout le monde alors que la plupart des supports sont des .docx ou des .pptx. Une pastille qui ment sur le format fait ouvrir un fichier pour rien — et pas forcément avec l'application qu'il faut, sur un téléphone. L'extension vient maintenant du fichier lui-même. La couleur suit la famille : le rouge au PDF, le bleu aux documents, l'orange aux présentations, le vert aux tableurs. */ .educated-supports-host .eh-doc-ico { font-size: 9px !important; letter-spacing: 0; } .educated-supports-host .eh-doc-ico[data-ext="PDF"] { background: var(--danger-soft, #FCDCE5) !important; color: var(--danger, #E11D48) !important; } .educated-supports-host .eh-doc-ico[data-ext="DOC"], .educated-supports-host .eh-doc-ico[data-ext="DOCX"], .educated-supports-host .eh-doc-ico[data-ext="ODT"], .educated-supports-host .eh-doc-ico[data-ext="TXT"] { background: var(--info-soft, #DCEAFE) !important; color: var(--info, #2563EB) !important; } .educated-supports-host .eh-doc-ico[data-ext="PPT"], .educated-supports-host .eh-doc-ico[data-ext="PPTX"] { background: var(--warning-soft, #FBE9CC) !important; color: var(--warning, #B45309) !important; } .educated-supports-host .eh-doc-ico[data-ext="XLS"], .educated-supports-host .eh-doc-ico[data-ext="XLSX"], .educated-supports-host .eh-doc-ico[data-ext="CSV"] { background: var(--success-soft, #D0F4E2) !important; color: var(--success, #059669) !important; } .educated-supports-host .eh-doc-ico[data-ext="ZIP"], .educated-supports-host .eh-doc-ico[data-ext="RAR"], .educated-supports-host .eh-doc-ico[data-ext="7Z"] { background: var(--surface-3, #F3F5F9) !important; color: var(--ink-2, #475569) !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 12 · L'ÉCHELLE DE LECTURE ║ ╚══════════════════════════════════════════════════════════════╝ Tout le tableau de bord tenait entre 10 et 14 px. Sur un écran de bureau, à la distance où l'on consulte une page d'accueil, c'est en dessous du confort — et ça se paie deux fois : l'apprenant lit mal, et la page paraît dense alors qu'elle est en réalité à moitié vide. Le bandeau en était l'exemple : 296 px de haut pour 129 px de texte. L'espace était là, la taille ne le prenait pas. Ce qui monte, et ce qui ne monte pas. Montent les choses qu'on LIT : le bonjour, la phrase de synthèse, le prochain cours, les intitulés d'alerte, les cours de la journée, les libellés de raccourcis. Ne montent pas les choses qu'on REPÈRE : les titres de bloc en capitales, les heures secondaires, les compteurs. Ce sont des repères, pas du texte ; les grossir les ferait concurrencer ce qu'ils annoncent. Les valeurs restent modestes — deux à trois points. Il ne s'agit pas d'agrandir mais de sortir du plancher. */ /* ── Le bandeau ─────────────────────────────────────────────── */ .educated-welcome-host .ew-meta { font-size: 12.5px !important; } .educated-welcome-host .d5-title, .educated-welcome-host .d5-name { font-size: 30px !important; line-height: 1.15 !important; } .educated-welcome-host .ew-klass { font-size: 12px !important; } .educated-welcome-host .d5-sub { font-size: 16px !important; line-height: 1.5 !important; } .educated-welcome-host .ew-next, .educated-welcome-host .ew-next-empty { font-size: 15.5px !important; } /* Sans cours à venir, le cadre bordé se lisait comme un champ de saisie vide et désactivé — l'apprenant cherchait quoi y taper. Un aplat sans bordure, et la phrase redevient une phrase. */ .educated-welcome-host .ew-next-empty { border: 0 !important; background: var(--surface-3, #F3F5F9) !important; color: var(--ink-2, #475569) !important; border-radius: 12px !important; } .educated-welcome-host .ew-act { font-size: 14.5px !important; padding: 11px 18px !important; } /* ── Les alertes ────────────────────────────────────────────── */ .ap-item-label { font-size: 14px !important; } .ap-item-sub { font-size: 12px !important; } .ap-count { font-size: 14px !important; } /* ── La journée ─────────────────────────────────────────────── */ .eh-slot-title { font-size: 15px !important; } .eh-slot-meta { font-size: 13px !important; } .eh-slot-start { font-size: 13.5px !important; } /* ── Les raccourcis ─────────────────────────────────────────── */ .d6-tile-label { font-size: 13.5px !important; } /* ── L'aplomb de la colonne ───────────────────────────────────── Le bandeau et « Ma journée » sont deux cartes empilées dans la même colonne : leurs bords extérieurs coïncident déjà (282 → 1000), mais leur TEXTE ne commençait pas au même endroit — 327 px pour le bandeau, 301 px pour la journée. Deux cartes l'une sur l'autre avec un retrait différent, l'œil le lit comme un défaut d'assemblage, même sans savoir le nommer. La cause n'était pas une marge mais deux, empilées : .d5-welcome posait 26 px, et .d5-welcome-inner en remettait 18. Quarante-quatre au lieu des dix-huit qu'utilisent la journée et le panneau d'alertes. On retire donc la marge EXTÉRIEURE plutôt que l'intérieure : le fond du bandeau est un calque absolu, il ne bouge pas avec elle, et le retrait interne reste celui que partagent tous les autres blocs. Le vertical n'y touche pas — la hauteur du bandeau est calculée ailleurs, et la réduire ferait sauter les deux boutons. */ .educated-welcome-host .d5-welcome { padding-left: 0 !important; padding-right: 0 !important; } /* Et le retrait interne ne doit plus dépendre de la hauteur de l'écran. Le bandeau tenait debout par accident : .d5-welcome-inner n'a AUCUN retrait horizontal en propre — ses 18 px ne lui venaient que des paliers de hauteur (@media max-height), et c'est la marge extérieure de 26 px, qu'on vient de retirer, qui masquait le trou. Sur un écran plus haut que 880 px de CSS — ce qui arrive dès qu'on dézoome à 90 %, puisque dézoomer AGRANDIT la hauteur en pixels CSS — aucun palier ne s'applique, le retrait tombe à zéro et le texte va toucher le bord de la carte. On le pose donc à la base, hors de toute condition. Sans !important : les paliers, eux, en ont un, et gardent la main quand l'écran est court et qu'il faut resserrer. */ .educated-welcome-host .d5-welcome-inner { padding-left: 18px; padding-right: 18px; } /* ╔══════════════════════════════════════════════════════════════╗ ║ 13 · LE BANDEAU TIENT PAR SA MISE EN PAGE, PAS PAR SA TAILLE ║ ╚══════════════════════════════════════════════════════════════╝ La première réponse au manque de place avait été de rapetisser : à chaque palier de hauteur, le bonjour et la ligne de date perdaient des points. Deux défauts. Le texte redevenait illisible, ce qu'on venait justement de corriger. Et surtout, l'apprenant qui change de zoom voyait sa page se reconfigurer sans comprendre pourquoi. La bonne réponse est structurelle : la carte est de hauteur fixe, donc on répartit son contenu au lieu de le comprimer. La colonne occupe toute la hauteur, les deux boutons se calent EN BAS, et tout l'espace disponible revient au milieu — c'est-à-dire à la place du prochain cours, qui est la seule ligne dont la hauteur varie selon qu'il y a une séance ou non. Les boutons restent alors au même endroit d'une page à l'autre et d'un écran à l'autre. Un bouton qui ne bouge pas se retrouve sans le chercher ; c'est la seule chose que l'œil apprend par cœur. */ .educated-welcome-host .d5-welcome { flex-direction: column !important; } .educated-welcome-host .d5-welcome-inner { flex: 1 1 auto !important; display: flex !important; flex-direction: column !important; } /* La marge automatique pousse les boutons au bas de la colonne, et cède le reste à ce qui les précède. */ .educated-welcome-host .ew-actions { margin-top: auto !important; } /* Les tailles, une fois pour toutes, quelle que soit la hauteur de l'écran. Vérifié à la simulation d'un écran court : le contenu occupe 216 px pour 217 disponibles — ça tient, avec les boutons en bas et la phrase sur une ligne. */ .educated-welcome-host .d5-title, .educated-welcome-host .d5-name { font-size: 26px !important; line-height: 1.15 !important; } .educated-welcome-host .ew-meta { font-size: 11.5px !important; } .educated-welcome-host .d5-sub { font-size: 14.5px !important; } .educated-welcome-host .ew-next, .educated-welcome-host .ew-next-empty { font-size: 14.5px !important; } .educated-welcome-host .ew-act { font-size: 13.5px !important; padding: 10px 16px !important; }