/* ========================================================= CONTEXT BAR — barre sticky générique (fil d'Ariane + actions) ========================================================= Tronc commun réutilisable par toute page qui a besoin de la barre "fil d'Ariane + actions" sous la navbar. Reprend les dimensions/règles de .dp-context-bar (sheet_detail.css, page Feuille) pour rester visuel- lement identique — mais volontairement dépouillé de tout ce qui est spécifique à la mise en page 3 colonnes de sheet_detail (sommaire/PDF, container queries, breakout admin) : ce fichier est le socle générique, sheet_detail.css garde sa propre implémentation (page non modifiée). Utilisation : étendre thomaths/_context_bar_page.html (qui charge ce CSS et fournit les blocs `breadcrumb` / `ctx_bar_extra` / `ctx_bar_class` / `page_body`) plutôt que d'écrire ce balisage à la main. */ /* --ctx-bar-height (44px) est définie dans nav.css, pas ici : sheet_detail.css (page Feuille) a sa propre implémentation de la context bar (.dp-context- bar-inner) et lit cette même variable sans charger context_bar.css. */ /* Casse la marge/largeur générique de
(base.css : margin:30px auto, max-width:900px) — même convention que main:has(.doc-page-scroll)/ .planning-page/.import-page (doc.css/planning.css/imports.css) : toute page à layout propre annule ce socle hérité plutôt que de le laisser ouvrir un vide de 30px au-dessus de la barre sticky (elle doit toucher la navbar, top:0, cf. .ctx-bar plus bas). */ main:has(> .ctx-bar) { margin: 0 auto; max-width: 1180px; padding: 0 24px; box-sizing: border-box; } .ctx-bar { /* Fixed sous la navbar (pas sticky) : #app-body est désormais redimen- sionné pour EXCLURE la hauteur de cette barre (margin-top/height, cf. --doc-topbar-h dans nav.css) plutôt que de la contenir en sticky dans son propre scroll. Conséquence recherchée : la scrollbar native d'#app-body ne couvre plus jamais la zone de la context bar, elle démarre juste en dessous — avant (sticky), elle courait sur toute la hauteur d'#app-body, context bar comprise. position:fixed s'affranchit de tout ancêtre centré (plus besoin du breakout width:100vw + marges négatives qu'exigeait le sticky). */ position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 35; /* Opaque (pas transparent) : la barre est position:fixed AU-DESSUS du contenu qui défile dans #app-body (z-index 35, cf. plus haut) — un fond transparent laissait ce contenu visible en transparence pendant le scroll, donnant l'impression que la page "passait sous" la barre au lieu de s'arrêter net dessous (constaté sur Devoirs/Colles/Cours & TD/Imports/Planning, toutes bâties sur ce socle générique). Même teinte que .dp-context-bar (sheet_detail.css, page Feuille) pour rester visuellement cohérent site entier. */ background: var(--surface-2, #12161d); border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.07)); } .ctx-bar-inner { /* Ne porte plus le fil d'Ariane NI ctx_bar_extra dans son flux (les deux sont position:absolute, ancrés sur .ctx-bar, PAS ici — pas de position:relative sur cette boîte, sinon elle intercepterait cet ancrage) : cette boîte ne sert plus qu'à réserver la hauteur de la barre. --ctx-max-width reste disponible pour une page qui voudrait un élément aligné sur son propre contenu (ex. .planning-tabs, centré — mathématiquement identique à un centrage sur .ctx-bar, cf. plus bas), mais rien n'est plus contraint par défaut : la barre peut déborder du contenu des deux côtés, fil d'Ariane à gauche ET actions à droite. */ max-width: var(--ctx-max-width, 1180px); margin: 0 auto; padding: 0 24px; min-height: var(--ctx-bar-height); box-sizing: border-box; } .ctx-breadcrumb { /* Positionné en absolu depuis .ctx-bar (bord réel de la fenêtre, pas la boîte centrée .ctx-bar-inner) : la barre peut déborder sur les côtés sans que le fil d'Ariane ne soit contraint par la largeur du contenu en dessous. 44px et non 49px : .ctx-bar est position:fixed ancrée directement sur le bord réel de la fenêtre (left:0, sans breakout 100vw), donc sans le décalage scrollbar-gutter de 5px que .dp-breadcrumb doit compenser en mode élève (cf. sheet_detail.css) — même valeur finale (44px) que .dp-breadcrumb et la page d'import. */ position: absolute; left: 44px; top: 50%; transform: translateY(-50%); max-width: calc(100vw - 44px - 320px); display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx-breadcrumb-link { display: inline-flex; align-items: center; gap: 5px; color: #fff; text-decoration: none; flex-shrink: 0; white-space: nowrap; } .ctx-breadcrumb-link:hover { color: var(--text); text-decoration: underline; } /* Maillon ancêtre qui porte la couleur de la page (--page-accent, cf. nav.css) plutôt que le blanc par défaut : à utiliser quand c'est LUI qui nomme la section thématique, et non le maillon courant — typiquement une page de correction, dont le maillon courant est le titre du DS/DM et doit rester neutre. */ .ctx-breadcrumb-link-accent { color: var(--page-accent, var(--text)); } /* L'accent ayant été donné à un ancêtre, le maillon courant repasse au blanc neutre : les deux ne doivent jamais porter la couleur de page en même temps (le fil d'Ariane n'a qu'un seul point d'emphase). */ .ctx-breadcrumb:has(.ctx-breadcrumb-link-accent) .ctx-breadcrumb-current { color: #fff; } .ctx-breadcrumb-sep { color: #fff; opacity: 0.55; flex-shrink: 0; } /* Même --page-accent que le Σ et l'onglet nav (cf. nav.css) : les trois sont solidaires par construction. Sans thème de page, --text. */ .ctx-breadcrumb-current { color: var(--page-accent, var(--text)); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 1; } .ctx-bar-center { /* Centré sur TOUTE la barre (ancré sur .ctx-bar, position:sticky) — vide par défaut (pas de largeur/contenu), donc invisible tant qu'une page ne remplit pas le bloc ctx_bar_center. */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .ctx-bar-extra { /* Ancré sur .ctx-bar (bord réel de fenêtre), symétrique du fil d'Ariane : pas limité par la largeur du contenu de la page (cf. .ctx-breadcrumb plus haut — même raisonnement, même décalage de 44px). */ position: absolute; right: 44px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: var(--space-3); max-width: calc(100vw - 44px - 320px); } /* Menu Classe (bascule d'EvalAssignment) : même gabarit que .button-outline pour s'aligner visuellement avec "Resynchroniser"/"Normalisation" juste à côté, mais un