/* ===================================================================== THOMATHS — PAGE FEUILLE (sheet_detail.html) Refonte de la page de détail cours/TD/résumé (ex-espace de test /design-preview/, fusionné dans la production — cf. sheet_detail.html). Fichier isolé de doc.css (préfixe `dp-` partout) pour ne pas interférer avec les autres pages document (Exercices, Devoirs, Corbeille), qui restent sur doc.css seul. Consomme les tokens de tokens.css comme le reste du site. ===================================================================== */ /* `.spdf-page` (nouvelle page feuille) déclare la MÊME variable de largeur de sommaire : c'est la source unique des deux pages, changer cette valeur les change ensemble. Elle est déclarée sur les deux enveloppes plutôt que sur `:root` — c'est une mesure propre aux pages feuille, pas au site. */ .dp-page, .spdf-page { /* Largeur du sommaire — SOURCE UNIQUE (cf. plus bas). */ --dp-sidebar-w: 216px; } .dp-page { display: flex; flex-direction: column; min-height: 100%; } /* Vert de test pour le type "Cours" : surcharge LOCALE de --kind-cours (défini dans tokens.css, utilisé site entier pour l'icône/logo Cours), uniquement à l'intérieur de cet espace de test — ne touche pas tokens.css, donc aucun effet sur la production. Posée sur (pas .dp-page) : une variable CSS personnalisée n'est visible que dans le sous-arbre où elle est (re)définie — il faut qu'elle englobe aussi la navbar (le Σ du logo, cf. plus bas), qui est un sibling de .dp-page, pas un descendant. */ body.dp-kind-cours { --kind-cours: #1e6d45; /* Vert "texte" unifié : même teinte (hue) que --kind-cours (#1e6d45), mais éclaircie/avivée (HSL, L 50% au lieu de ~27%) pour rester nettement lisible sur le fond très sombre de la barre — le ton médian du dégradé du bouton (#337a56, contraste 3.68:1) et même son stop clair (#478766, 4.42:1) ont été jugés encore trop sombres. Réutilisée pour le nom de la feuille (fil d'Ariane), le Σ du logo et l'accent du sommaire : même famille de vert que les boutons, juste plus lumineuse là où c'est du texte fin plutôt qu'un aplat de bouton. */ --kind-cours-text: #39c687; } .dp-page .doc-chapters-scroll-sheet { padding-bottom: 0; box-sizing: border-box; } /* ---- doc-context-bar : le fond est plein écran (100vw, .dp-context-bar) ; .dp-context-bar-inner reproduit la grille de .doc-page-scroll en dessous (doc.css) — MÊMES pistes (248px sommaire / gap / contenu), MÊME centrage (max-width 1180px, padding 24px) — au lieu d'un pourcentage d'écran arbitraire. Le fil d'Ariane/switch/affichage tombent donc pile sur les bords réels du sommaire et du contenu par construction, sans mesure JS : les deux boîtes ont la même géométrie parce qu'elles utilisent littéralement les mêmes valeurs, pas parce qu'un script les recopie. */ .dp-context-bar { /* Sticky sous la navbar : #app-body (le conteneur qui défile, cf. nav.css) a déjà margin-top:52px pour se caler sous la navbar fixe — le "top" du sticky se mesure DEPUIS le haut d'#app-body, pas depuis le haut de l'écran. top:0 colle donc la barre juste sous la navbar. */ position: sticky; top: 0; z-index: 35; /* Plein écran (fond) : casse le max-width:1180px hérité de
(cf. la règle main:has(.doc-page-scroll) dans doc.css) via l'astuce classique "100vw + marges négatives" — seulement pour le FOND/la bordure, le vrai centrage/padding est reproduit sur .dp-context-bar-inner ci-dessous, pas ici. */ width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-bottom: 20px; background: var(--surface-2, #12161d); /* Séparation avec la navbar juste au-dessus (même fond sinon) : bordure claire, en plus de la bordure basse déjà présente vers le contenu. */ border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid var(--border-soft, rgba(255,255,255,0.08)); } .dp-context-bar-inner { /* Container query (pas @media) : en mode prof, la piste "contenu" (1fr) ne dépend pas QUE de la largeur d'écran mais aussi de la largeur du panneau PDF (--pdf-panel-width, redimensionnable par l'utilisateur, cf. main:has(.doc-page-pdf) dans doc.css) — un PDF élargi rétrécit cette piste sans que le viewport ne change. @media ne voit que la fenêtre ; @container mesure la largeur RÉELLE de cette boîte, donc réagit correctement aux deux causes (fenêtre étroite ET PDF large). */ container-type: inline-size; container-name: dp-bar; display: grid; /* Mêmes 3 pistes que .doc-page-scroll en dessous : --dp-sidebar-w (même variable que .doc-page-sidebar, cf. .dp-page plus haut — PAS 248px, la vraie largeur du sommaire ICI est réduite à 216px, cf. plus bas dans ce fichier), un gap, puis le contenu/page PDF en 1fr. --dp-gap vaut 40px par défaut (mode élève, comme .doc-page-scroll) et 20px en mode admin (cf. body:has(.doc-page-pdf) ci-dessous, même sélecteur/ valeur que doc.css). */ grid-template-columns: var(--dp-sidebar-w) var(--dp-gap, 40px) 1fr; align-items: center; box-sizing: border-box; /* max-width/margin/padding : copie EXACTE de main:has(.doc-page-scroll) (doc.css) — .dp-context-bar a cassé le max-width de
pour son fond plein écran (cf. plus haut), donc cette boîte doit reproduire elle-même ce centrage pour que ses 3 pistes tombent au même endroit que .doc-page-scroll juste en dessous. */ max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* Mode prof : même correctif que doc.css pour .doc-page-scroll (gap réduit à 20px) — cf. body.mode-admin .dp-context-bar plus bas, qui annule le breakout 100vw en même temps : dans ce mode .dp-context-bar occupe déjà exactement la boîte (déjà paddée) de
, donc son padding/margin propre doit s'annuler pour ne pas le doubler. body.mode-admin, PAS body:has(.doc-page-pdf) (copié un peu vite de doc.css) : ICI, contrairement à la page de production, l'aside .doc-page-pdf est TOUJOURS dans le DOM même en mode élève (juste caché/ embedded, cf. sheet_detail.html) — :has() le détectait donc aussi en mode élève et appliquait le gap 20px partout, faisant chuter le switch/ l'affichage hors de leur vraie position (constaté : décalage de 18px). */ body.mode-admin .dp-context-bar-inner { --dp-gap: 20px; } body.mode-admin .dp-context-bar-inner { max-width: none; margin: 0; padding: 0; } /* Le breakout "100vw + marges négatives" (cf. .dp-context-bar plus haut) suppose que
est centré (margin:0 auto), vrai en mode élève (main:has(.doc-page-scroll), max-width:1180px). En mode prof,
(main:has(.doc-page-pdf), cf. doc.css) devient asymétrique — padding-left fixe (8px) à gauche, padding-right réservé pour le panneau PDF fixe à droite — donc pas centré du tout : le calcul 50vw/50% du breakout devient faux et envoie la barre soit trop loin à droite (par-dessus le PDF), soit trop courte. On annule ici le breakout : la barre reprend simplement la largeur de
(déjà correctement dimensionnée pour s'arrêter net au bord du panneau PDF, cf. comment plus haut sur .dp-switch-btn-empty), au lieu de tenter de calculer une largeur écran indépendante. */ body.mode-admin .dp-context-bar { width: auto; margin-left: 0; margin-right: 0; } /* ---- Les 3 éléments de la barre sont maintenant de VRAIS items de la grille ci-dessus, chacun sur la piste qui correspond à ce qu'il doit suivre en dessous — plus de position:absolute, plus de mesure JS, plus de custom properties pilotées en script : - fil d'Ariane : piste 1+2 (sommaire+gap), aligné à gauche — même bord gauche que le sommaire, par construction. - switch Cours/TD/Résumé : piste 3 (contenu/page PDF), centré — même centre que le contenu, par construction. - affichage HTML/PDF : piste 3, aligné à droite — même bord droit que le contenu/la page PDF et que la barre flottante du bas. */ /* grid-row:1 explicite sur les 3 : switch ET affichage ciblent tous les deux la piste 3 (justify-self différent — centre / droite — c'est ce qui les sépare visuellement, pas des cellules différentes) — sans grid-row posé, l'auto-placement considère "piste 3, ligne 1" comme déjà pris par le switch et repousse l'affichage sur une 2e ligne implicite (constaté : affichage passé SOUS le switch au lieu d'à côté). */ .dp-switch { grid-column: 3; grid-row: 1; justify-self: center; } .dp-breadcrumb { /* Positionné en absolu depuis .dp-context-bar (bord RÉEL de la fenêtre, cf. plus haut : 100vw + marges négatives), et non plus placé dans la grille centrée de .dp-context-bar-inner : le sommaire/switch/ affichage doivent rester alignés sur le contenu centré en dessous, mais le fil d'Ariane, lui, doit tomber au même endroit QUEL QUE SOIT le mode (prof/élève) ou la largeur d'écran — exactement comme sur la page de revue d'import (.review-topbar-inner, imports.css : 20px de .review-topbar + 24px de padding propre = 44px depuis le bord de fenêtre). Un item de grille centrée ne peut pas offrir cette garantie (son offset dépend de max-width/margin:auto, donc de la largeur de fenêtre) — l'ancien padding-left différent par mode (12px prof / 0 élève, posé sur des pistes elles-mêmes à des offsets différents) ne tombait donc JAMAIS au même endroit malgré des valeurs ajustées à la main (constaté). 49px et non 44px : en mode élève, .dp-context-bar garde son breakout 100vw (cf. plus bas dans ce fichier), dont le calcul -50vw+50% ne retombe pas pile sur le bord réel de la fenêtre à cause du scrollbar-gutter:stable posé sur #app-body (nav.css) — 5px d'écart mesurés (constaté), compensés ici pour retomber sur les mêmes 44px que le mode prof (qui n'a pas ce breakout, cf. body.mode-admin .dp-breadcrumb plus bas) et que la page d'import. */ position: absolute; left: 49px; /* top:0/bottom:0 (plutôt que top:50%+translateY, comme avant) : donne à .dp-breadcrumb la hauteur RÉELLE de la barre, pas juste celle de son contenu — nécessaire pour que .dp-breadcrumb-doc-wrap (align-self: stretch, cf. plus bas) puisse remplir toute la hauteur de la context bar au survol. Le contenu reste centré verticalement comme avant, via align-items:center ci-dessous (inchangé) : aucun changement visuel, seule la boîte elle-même grandit. AUSSI la raison pour laquelle .dp-breadcrumb-doc-menu doit être déplacé dans plutôt que rester ici (cf. script en bas de sheet_detail.html) : garder un transform sur cet ancêtre en ferait le containing block de tout descendant position:fixed, qui se retrouverait alors découpé par l'overflow:hidden ci-dessous (constaté : menu vide malgré position: fixed). Sans transform ici, ce risque disparaît, mais le déplacement en JS reste la protection robuste si jamais un transform revenait. */ top: 0; bottom: 0; /* Largeur bornée par calc plutôt que par la piste de grille (qui n'existe plus pour cet élément) : laisse la place au switch/ affichage (piste 3) à droite, ~300px suffisant même en libellés complets vu leur largeur mesurée (cf. plus bas dans ce fichier). Les unités cqw visent .dp-context-bar-inner (container-type:inline-size, cf. plus haut), donc réagissent aussi bien à un redimensionnement de fenêtre qu'à l'élargissement du panneau PDF en mode prof. */ max-width: calc(100cqw - 49px - 300px); display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; color: var(--text-muted, #9aa4b2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Mode prof : .dp-context-bar renonce à son breakout 100vw (cf. règle body.mode-admin .dp-context-bar plus bas — le calcul 50vw/50% devient faux à côté du panneau PDF) et reprend donc la largeur de
, qui a lui-même 8px de padding-left (main:has(.doc-page-pdf), doc.css) : le fil d'Ariane, positionné depuis .dp-context-bar, hérite de ces 8px en plus de son propre `left` — il faut les retrancher ici pour retomber exactement sur les mêmes 44px depuis le bord de fenêtre qu'en mode élève et sur la page d'import (constaté : sans ce correctif, 52px au lieu de 44px). */ body.mode-admin .dp-breadcrumb { left: 36px; max-width: calc(100cqw - 36px - 300px); } .dp-display { grid-column: 3; grid-row: 1; justify-self: end; /* Léger espace avec le bord droit de la barre (demande : "ça colle la bordure") — justify-self: end colle sinon le groupe pile contre la piste de grille, qui coïncide avec le bord réel du conteneur. */ margin-right: 6px; } .dp-breadcrumb-link { /* Blanc, pas gris muted : plus lisible sur le fond sombre de la barre. */ color: #fff; text-decoration: none; flex-shrink: 0; white-space: nowrap; } .dp-breadcrumb-link:hover { color: var(--text-primary, #e8ecf1); text-decoration: underline; } .dp-breadcrumb-sep { color: #fff; opacity: 0.55; flex-shrink: 0; } .dp-breadcrumb-current { color: var(--text-primary, #e8ecf1); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* Seul élément qui peut réellement rétrécir (et donc se tronquer en "…" à la fin) : les maillons précédents ne se compressent jamais individuellement, cf. règle de repli plus bas qui les masque tous d'un coup plutôt que de les grignoter lettre par lettre. */ flex-shrink: 1; min-width: 2ch; } /* ---- Dernier maillon cliquable : liste des autres documents du même chapitre (cf. breadcrumb_documents, ordre identique à Cours & TD). Le