/* Test DA local sur dashboardAdmin: application complète de la DA validée Miroir de frameworkAdmin-da-test.css, adapté au layout dashboard (3 colonnes + panneau Suivi + panneau Promesses). */ body.dashboard-admin-page.da-bg-lab { /* Fond DA harmonisé via la variable utilisée par modulePrograms.css */ --mp-bg: radial-gradient(980px 520px at -8% 12%, rgba(111, 110, 160, 0.2), rgba(111, 110, 160, 0) 62%), radial-gradient(860px 460px at 108% -6%, rgba(255, 201, 174, 0.2), rgba(255, 201, 174, 0) 58%), linear-gradient(180deg, #fff7f3 0%, #fff3ec 42%, #fff8f3 100%); --theme-b-bg: #fff7f3; --theme-b-surface: #fffbf8; --theme-b-subtle: #fbf1eb; --theme-b-border: #efdfd6; --theme-b-border-strong: #e1cbc0; --theme-b-text: #382c34; --theme-b-text-muted: #806b74; --theme-b-primary: #745764; --theme-b-action: #5f4350; --theme-b-action-hover: #543845; --theme-b-on-action: #fffaf8; --theme-b-accent-sage: #8a4fa0; --theme-b-tag-border: #ecd7cd; --da-cta-from: #6f6ea0; --da-cta-to: #615f8c; --da-accent-sage: #8a4fa0; --da-accent-wood: #6d688f; --shell-z-rail: 50000; --shell-z-mobile-backdrop: 50010; --shell-z-mobile-toggle: 50020; --shell-z-modal-backdrop: 50030; --shell-z-modal: 50040; position: relative; isolation: isolate; /* Aligné desktop : hauteur = contenu, pas de réserve viewport (override da-bg-lab min-height). */ height: auto; max-height: none; min-height: 0; overflow-x: hidden; overflow-y: visible; } /* On force le même fond que frameworkAdmin (cohérence visuelle) */ body.dashboard-admin-page.da-bg-lab { background: var(--mp-bg) !important; /* fixed + calques `.bg-layer` animés recouvraient progressivement la gouttière de scroll du viewport */ background-attachment: scroll; } /* Couches DA strictement en fond */ body.dashboard-admin-page.da-bg-lab .bg-layer, body.dashboard-admin-page.da-bg-lab .bg-cursor-halo { z-index: 0 !important; pointer-events: none; } /* * da-background-lab : `.bg-layer { inset: -12vmax }` + blobs `58vmax` débordent énormément du viewport. * Sur le dashboard on borne au cadre visible pour réduire l’étendue peinte / l’effet « très haut ». */ body.dashboard-admin-page.da-bg-lab .bg-layer { inset: 0; overflow: hidden; } /* * da-background-lab anime `.bg-layer--base` (transform + scale) sur ~22s. * Sur une page scrollable, ce calque fixe « grandit » et peut masquer la barre * de défilement ou la gouttière tout en laissant le scroll actif — d’où l’effet * « le fond se referme sur la scrollbar ». Même logique pour les blobs lava. */ body.dashboard-admin-page.da-bg-lab .bg-layer--base, body.dashboard-admin-page.da-bg-lab .bg-layer--lava::before, body.dashboard-admin-page.da-bg-lab .bg-layer--lava::after { animation: none !important; } body.dashboard-admin-page.da-bg-lab .bg-layer--lava::before, body.dashboard-admin-page.da-bg-lab .bg-layer--lava::after { width: min(48vmin, 280px); height: min(48vmin, 280px); } /* Si `da-global-background` est encore présent (ancienne session / autre script) : neutraliser tout le bloc controlbar (150% + fixed = scroll fantôme). */ body.dashboard-admin-page.da-bg-lab.da-global-background { animation: none !important; background: var(--mp-bg) !important; background-size: auto !important; background-attachment: scroll !important; } /* Contenu applicatif au-dessus du fond — main uniquement (les modales restent position:fixed hors flux). */ body.dashboard-admin-page.da-bg-lab .dashboardAdminContainer { position: relative; z-index: 2; } body.dashboard-admin-page .adminConfirmModal, body.dashboard-admin-page .videoModal, body.dashboard-admin-page .dashboardExoEditorModal { position: fixed !important; } /* Rail à gauche sur le body ; scroll sur main = barre au bord droit du viewport. */ body.dashboard-admin-page.da-bg-lab { padding-left: calc(var(--shell-rail-w, 64px) + 8px); padding-right: 0; } body.dashboard-admin-page.da-bg-lab .dashboardAdminContainer { padding: 0; width: 100%; max-width: none; margin: 0; min-width: 0; background: transparent; } body.dashboard-admin-page.da-bg-lab .dashboardAdminScrollInner { box-sizing: border-box; width: 100%; max-width: 1680px; margin: 1.25rem auto 0; padding: 1.5rem 1.75rem clamp(1rem, 2vh, 1.75rem); min-width: 0; } @media (max-width: 1200px) { body.dashboard-admin-page.da-bg-lab { padding-left: calc(var(--shell-rail-w, 64px) + 8px); } body.dashboard-admin-page.da-bg-lab .dashboardAdminScrollInner { padding: 1rem 1.25rem 2rem; } } @media (max-width: 980px) { body.dashboard-admin-page.da-bg-lab { padding-left: calc(var(--shell-rail-w, 64px)); } body.dashboard-admin-page.da-bg-lab .dashboardAdminScrollInner { padding: 0.85rem 1rem 1.5rem; } } /* Espacements verticaux et grid plus aérés (gap calé sur framework). row-gap volontairement compact entre la barre d'actions (row 2) et la grille des panneaux (row 3) : la barre sticky doit rester proche de son contenu, comme dans le lobby programmsTrainning. */ @media (min-width: 981px) { body.dashboard-admin-page.da-bg-lab .dashboardAdminScrollInner { row-gap: 0.6rem; } body.dashboard-admin-page.da-bg-lab .dashboardGrid { gap: 1.25rem; } } /* ───────────────────────────────────────────────────────────────── Typographies des titres — inspirées de .moduleTitle (framework) ───────────────────────────────────────────────────────────────── */ body.dashboard-admin-page.da-bg-lab .dashboardHeader h1 { margin: 0.25rem 0 0; font-family: var(--da-font-serif, "Source Serif 4", Georgia, serif); font-style: italic; font-weight: 700; font-size: clamp(1.55rem, 3.6vw, 2rem); letter-spacing: -0.025em; line-height: 1.2; color: color-mix(in srgb, var(--da-text, #3a322b) 95%, #2b211a); } body.dashboard-admin-page.da-bg-lab .panel h2, body.dashboard-admin-page.da-bg-lab .adminPromisesCarnetBlock__title, body.dashboard-admin-page.da-bg-lab .adminConfirmTitle { font-family: var(--da-font-sans, "DM Sans", "Outfit", "Nunito", system-ui, sans-serif); font-weight: 700; letter-spacing: -0.012em; color: var(--da-text, #3a322b); } body.dashboard-admin-page.da-bg-lab .panel h2 { font-size: 1.1rem; } body.dashboard-admin-page.da-bg-lab .moduleCard h3, body.dashboard-admin-page.da-bg-lab .moduleDetailsTitle, body.dashboard-admin-page.da-bg-lab .userName { font-family: var(--da-font-sans, "DM Sans", "Outfit", "Nunito", system-ui, sans-serif); letter-spacing: -0.005em; color: var(--da-text, #3a322b); } /* ───────────────────────────────────────────────────────────────── Surfaces semi-transparentes — laissent respirer le fond DA ───────────────────────────────────────────────────────────────── */ body.dashboard-admin-page.da-bg-lab .panel, body.dashboard-admin-page.da-bg-lab .dashboardGrid > details.adminPromisesCarnetBlock--dashboardCol, body.dashboard-admin-page.da-bg-lab .adminPromisesPanel.adminPromisesPanel--carnet, body.dashboard-admin-page.da-bg-lab .adminTrackingPanel { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 78%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 80%, rgba(255, 255, 255, 0.4)); box-shadow: 0 8px 28px rgba(95, 67, 80, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Panneaux « carte proposition » (même esprit que .faProposalCard dans frameworkAdmin.css) : verre léger, bordure blanche diffuse, ombre en couches + filet gauche neutre (dégradé blanc), sans bandeau coloré sage / warm. Remplace les border-left accent du desktop. */ body.dashboard-admin-page.da-bg-lab .panel.panelLeft.adminDashboardDetails, body.dashboard-admin-page.da-bg-lab .panel.panelRight.adminDashboardDetails, body.dashboard-admin-page.da-bg-lab .dashboardGrid > details.adminPromisesCarnetBlock--dashboardCol.admin-dashboard-promise-entry, body.dashboard-admin-page.da-bg-lab #promesses.panel.adminPromisesPanel--carnet, body.dashboard-admin-page.da-bg-lab .panel.adminTrackingPanel { position: relative; overflow: hidden; border-radius: var(--da-radius-card, 18px); border: 1px solid rgba(255, 255, 255, 0.34); background: linear-gradient( 160deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.09) 100% ); box-shadow: 0 14px 30px rgba(67, 42, 58, 0.1), 0 3px 10px rgba(67, 42, 58, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.52); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); } body.dashboard-admin-page.da-bg-lab .panel.panelLeft.adminDashboardDetails::before, body.dashboard-admin-page.da-bg-lab .panel.panelRight.adminDashboardDetails::before, body.dashboard-admin-page.da-bg-lab .dashboardGrid > details.adminPromisesCarnetBlock--dashboardCol.admin-dashboard-promise-entry::before, body.dashboard-admin-page.da-bg-lab #promesses.panel.adminPromisesPanel--carnet::before, body.dashboard-admin-page.da-bg-lab .panel.adminTrackingPanel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--da-radius-card, 18px) 0 0 var(--da-radius-card, 18px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.28) 100%); box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.22); pointer-events: none; z-index: 0; } body.dashboard-admin-page.da-bg-lab .panel.panelLeft.adminDashboardDetails > *, body.dashboard-admin-page.da-bg-lab .panel.panelRight.adminDashboardDetails > *, body.dashboard-admin-page.da-bg-lab .dashboardGrid > details.adminPromisesCarnetBlock--dashboardCol.admin-dashboard-promise-entry > *, body.dashboard-admin-page.da-bg-lab #promesses.panel.adminPromisesPanel--carnet > *, body.dashboard-admin-page.da-bg-lab .panel.adminTrackingPanel > * { position: relative; z-index: 1; } /* ───────────────────────────────────────────────────────────────── Promesses — surface plus aérienne : on baisse fortement l'opacité de l'enveloppe (~38%) pour laisser transpirer le fond DA, on renforce le flou pour garder la lisibilité, et on adoucit l'ombre. Le contenu repose sur un bloc blanc plein (cf. règle suivante) qui crée le contraste de lecture. Override la règle générique "78%" posée plus haut sur les `.panel` et sur `.adminPromisesPanel--carnet`. ───────────────────────────────────────────────────────────────── */ body.dashboard-admin-page.da-bg-lab .adminPromisesPanel.adminPromisesPanel--carnet { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 38%, transparent); border-color: color-mix(in srgb, var(--da-border, #e8e2d8) 55%, rgba(255, 255, 255, 0.5)); box-shadow: 0 6px 22px rgba(95, 67, 80, 0.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } /* Barre d’actions admin : le verre est sur .trainingTabsNav (sticky, flux sous le titre), pas sur le wrapper */ body.dashboard-admin-page.da-bg-lab .adminDashboardTabsSkin { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } body.dashboard-admin-page.da-bg-lab .adminDashboardTabsSkin .trainingTabsNav { margin: 0 0 1rem; overflow-x: auto; overflow-y: hidden; background: color-mix(in srgb, #ffffff 65%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 70%, rgba(255, 255, 255, 0.4)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Cartes (modules / utilisateurs) — transparence douce + halo au survol */ body.dashboard-admin-page.da-bg-lab .moduleCard, body.dashboard-admin-page.da-bg-lab .userCard { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 72%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 72%, rgba(255, 255, 255, 0.35)); } body.dashboard-admin-page.da-bg-lab .moduleCard:hover, body.dashboard-admin-page.da-bg-lab .userCard:hover { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 90%, transparent); box-shadow: 0 12px 28px rgba(95, 67, 80, 0.12); } /* ───────────────────────────────────────────────────────────────── Carte sélectionnée — signature visuelle marquée : - bandeau gauche coloré + double-anneau (border + outer-ring) - léger lift (translateY) + ombre dirigée vers le bas - le tout reste dominant même sur :hover (règle .active:hover dédiée) La spécificité (4 classes) bat l'override :hover voisin (3 classes + 1 pseudo) qui ne touche plus aux cartes sélectionnées. ───────────────────────────────────────────────────────────────── */ body.dashboard-admin-page.da-bg-lab .moduleCard.active, body.dashboard-admin-page.da-bg-lab .userCard.active { background: color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 18%, var(--da-surface-elevated, #ffffff)); border: 1.5px solid color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 70%, var(--da-cta-to, #615f8c)); box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 88%, var(--da-cta-from, #6f6ea0)), 0 0 0 3px color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 28%, transparent), 0 10px 26px rgba(95, 67, 80, 0.18); transform: translateY(-1px); } body.dashboard-admin-page.da-bg-lab .moduleCard.active:hover, body.dashboard-admin-page.da-bg-lab .userCard.active:hover { /* Au survol d'une carte déjà sélectionnée : on RENFORCE la sélection plutôt que de basculer sur le rendu :hover neutre (qui perdrait la teinte d'accent et donnerait l'impression que la sélection a sauté). */ background: color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 26%, var(--da-surface-elevated, #ffffff)); border-color: color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 82%, var(--da-cta-to, #615f8c)); box-shadow: inset 4px 0 0 0 color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 95%, var(--da-cta-from, #6f6ea0)), 0 0 0 4px color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 38%, transparent), 0 14px 32px rgba(95, 67, 80, 0.22); transform: translateY(-2px) scale(1.006); } /* Avatar utilisateur sélectionné : on accentue aussi la pastille pour redoubler le signal visuel sur la carte élève. */ body.dashboard-admin-page.da-bg-lab .userCard.active .userAvatar { background: linear-gradient( 145deg, color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 30%, #ffffff), color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 65%, var(--da-cta-from, #6f6ea0)) ); box-shadow: 0 0 0 2px color-mix(in srgb, var(--da-accent-sage, #8a4fa0) 32%, transparent), 0 2px 8px rgba(95, 67, 80, 0.12); transform: scale(1.08); } /* Texte (titre) plus marqué sur la carte sélectionnée — meilleur poids visuel. */ body.dashboard-admin-page.da-bg-lab .moduleCard.active h3, body.dashboard-admin-page.da-bg-lab .userCard.active .userName { color: color-mix(in srgb, var(--da-text, #3a322b) 95%, var(--da-accent-sage, #8a4fa0)); } /* ───────────────────────────────────────────────────────────────── Sélection en haut de liste — les cartes .active sont remontées visuellement via `order` (flexbox), tout en gardant leur position d'origine dans le DOM. Conséquences : - aucune mutation JS nécessaire, le changement est instantané dès que la classe .active est posée / retirée ; - l'ordre logique (lecture d'écran, navigation tab, ordre des id pour les promesses, etc.) reste celui défini par renderModules / renderUsers ; - quand plusieurs cartes sont sélectionnées, elles se présentent en haut dans leur ordre DOM (donc même tri qu'avant). .modulesList et .usersList sont déjà en flex column dans dashboardAdmin.desktop.css → la règle s'applique sans config. ───────────────────────────────────────────────────────────────── */ body.dashboard-admin-page.da-bg-lab .modulesList .moduleCard.active, body.dashboard-admin-page.da-bg-lab .usersList .userCard.active { order: -1; } /* Inputs de recherche — glass léger sur fond DA */ body.dashboard-admin-page.da-bg-lab .searchInput, body.dashboard-admin-page.da-bg-lab .adminFieldInput { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 90%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 78%, rgba(255, 255, 255, 0.35)); color: var(--da-text, #3a322b); } body.dashboard-admin-page.da-bg-lab .searchInput:focus, body.dashboard-admin-page.da-bg-lab .adminFieldInput:focus { border-color: color-mix(in srgb, var(--da-cta-from, #6f6ea0) 60%, var(--da-border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--da-cta-from, #6f6ea0) 18%, transparent); } /* CTA primaires : palette DA carnet (CTA wood) plus chaude */ body.dashboard-admin-page.da-bg-lab .primaryBtn { background: linear-gradient(135deg, var(--da-cta-from, #6f6ea0), var(--da-cta-to, #615f8c)); color: var(--da-on-cta, #fffefb); box-shadow: 0 8px 18px color-mix(in srgb, var(--da-cta-from, #6f6ea0) 28%, transparent); } body.dashboard-admin-page.da-bg-lab .ghostBtn { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 88%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 80%, rgba(255, 255, 255, 0.35)); color: var(--da-text, #3a322b); } /* Modale confirm : papier élégant, légèrement transparent */ body.dashboard-admin-page.da-bg-lab .adminConfirmCard { background: color-mix(in srgb, var(--da-surface-elevated, #ffffff) 94%, transparent); border: 1px solid color-mix(in srgb, var(--da-border, #e8e2d8) 84%, rgba(255, 255, 255, 0.4)); box-shadow: 0 18px 42px rgba(95, 67, 80, 0.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ───────────────────────────────────────────────────────────────── adminDashboardTabsSkin — réplique exacte de .trainingTabsNav du lobby programmsTrainning (variante F « glass / flou »). Référence : frontend/css/programmsTrainning.css l. 170-239. On garde le wrapper .adminDashboardTabsSkin pour le placement grid, mais on lui retire son rendu : tout le visuel est porté par le