/* /public_html/assets/css/dashboard/dashboard-member-widgets.css */
/*
* Composant commun des widgets du Dashboard V2 sur ordinateur.
*
* Cette feuille est volontairement chargée après tous les styles historiques.
* Elle ne modifie pas les panels d'origine : elle normalise uniquement les
* widgets rendus dans les mosaïques membre et administration.
*/
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-pc-mosaic--member, .dashboard-v2-pc-mosaic--admin) {
--dashboard-v2-member-card-height: 28rem;
grid-auto-rows: var(--dashboard-v2-member-card-height);
align-items: stretch;
}
/* Coquille commune ------------------------------------------------------ */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-pc-mosaic--member, .dashboard-v2-pc-mosaic--admin) > .dashboard-v2-member-widget {
--dashboard-v2-role-color: var(--dashboard-v2-panel-color, var(--dashboard-v2-blue));
box-sizing: border-box;
display: grid !important;
grid-template-rows: 2.55rem minmax(0, 1fr) !important;
grid-template-columns: minmax(0, 1fr) !important;
align-content: stretch;
gap: 0 !important;
width: 100%;
min-width: 0;
height: var(--dashboard-v2-member-card-height) !important;
min-height: var(--dashboard-v2-member-card-height) !important;
max-height: var(--dashboard-v2-member-card-height) !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-role-color) 30%, var(--dashboard-v2-border-soft) 70%);
border-radius: var(--dashboard-v2-pc-panel-radius, 1.35rem);
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dashboard-v2-role-color) 13%, transparent), transparent 42%),
color-mix(in srgb, var(--dashboard-v2-surface) 92%, transparent);
box-shadow: 0 18px 48px rgba(2, 6, 23, .14);
isolation: isolate;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-pc-mosaic--member, .dashboard-v2-pc-mosaic--admin) > .dashboard-v2-member-widget::before,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-pc-mosaic--member, .dashboard-v2-pc-mosaic--admin) > .dashboard-v2-member-widget::after,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget .ui-accent-card__rail,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget .dashboard-v2-feed-item::before,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget .dashboard-v2-feed-item::after {
content: none !important;
display: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--clickable {
cursor: pointer;
transform: none !important;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
@media (hover: hover) and (pointer: fine) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--clickable:hover,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--clickable:focus-visible {
border-color: color-mix(in srgb, var(--dashboard-v2-role-color) 58%, transparent);
background:
radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--dashboard-v2-role-color) 18%, transparent), transparent 46%),
color-mix(in srgb, var(--dashboard-v2-surface) 94%, transparent);
box-shadow:
0 24px 58px color-mix(in srgb, var(--dashboard-v2-role-color) 13%, rgba(2, 6, 23, .18)),
0 0 28px color-mix(in srgb, var(--dashboard-v2-role-color) 10%, transparent);
transform: none !important;
}
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--clickable:focus-visible {
outline: 2px solid color-mix(in srgb, var(--dashboard-v2-role-color) 78%, white 10%);
outline-offset: 3px;
}
/* Bandeau commun ------------------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__header {
grid-row: 1;
grid-column: 1;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: .46rem;
width: 100% !important;
max-width: none !important;
min-width: 0;
min-height: 2.55rem;
margin: 0 !important;
padding: .58rem 1rem;
border: 0;
border-bottom: 1px solid color-mix(in srgb, var(--dashboard-v2-role-color) 34%, transparent);
border-radius: 0 !important;
color: color-mix(in srgb, var(--dashboard-v2-role-color) 86%, white 14%);
background: linear-gradient(180deg, rgba(2, 6, 23, .88), rgba(2, 6, 23, .64));
box-shadow: 0 10px 28px rgba(2, 6, 23, .18);
text-align: center;
backdrop-filter: blur(12px) saturate(1.08);
-webkit-backdrop-filter: blur(12px) saturate(1.08);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__icon {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: auto;
height: auto;
color: currentColor;
font-size: .82rem;
line-height: 1;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__header h2 {
min-width: 0;
margin: 0;
overflow: hidden;
color: currentColor;
font-size: .78rem;
font-weight: 950;
letter-spacing: .07em;
line-height: 1;
text-overflow: ellipsis;
text-transform: uppercase;
white-space: nowrap;
}
/* Surface commune ------------------------------------------------------ */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__body {
grid-row: 2;
grid-column: 1;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 0 var(--dashboard-v2-pc-panel-radius, 1.35rem) var(--dashboard-v2-pc-panel-radius, 1.35rem) !important;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 42%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__empty {
box-sizing: border-box;
display: grid;
place-content: center;
justify-items: center;
gap: .58rem;
width: 100%;
height: 100%;
min-height: 0;
margin: 0;
padding: 1.2rem;
border: 0;
border-radius: inherit;
color: var(--dashboard-v2-muted);
background: transparent;
text-align: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__empty .dashboard-v2-member-card__empty-icon {
display: grid;
width: 3rem;
height: 3rem;
place-items: center;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-role-color) 34%, transparent);
border-radius: 1rem;
color: var(--dashboard-v2-role-color);
background: color-mix(in srgb, var(--dashboard-v2-role-color) 13%, transparent);
font-size: 1.2rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__empty strong {
color: var(--dashboard-v2-text);
font-size: 1.2rem;
font-weight: 950;
letter-spacing: -.03em;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__empty > span:last-child {
max-width: 30ch;
font-size: .8rem;
font-weight: 720;
line-height: 1.45;
}
/* Cours et évènements immersifs --------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-pc-mosaic--member, .dashboard-v2-pc-mosaic--admin) > :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) {
position: relative !important;
display: block !important;
overflow: hidden !important;
background: #020617 !important;
}
/* Le bandeau flotte sur la photo, qui occupe désormais toute la carte. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) > .dashboard-v2-member-widget__header {
position: absolute !important;
inset: 0 0 auto !important;
z-index: 70 !important;
min-height: 2.55rem !important;
border-bottom-color: color-mix(in srgb, var(--dashboard-v2-role-color) 42%, rgba(255,255,255,.08)) !important;
background: linear-gradient(180deg, rgba(2, 6, 23, .56), rgba(2, 6, 23, .30)) !important;
box-shadow: 0 10px 26px rgba(2, 6, 23, .16) !important;
pointer-events: none !important;
backdrop-filter: blur(14px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) > .dashboard-v2-member-widget__body,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-daily-carousel-shell,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__viewport,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__track {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) > .dashboard-v2-member-widget__body {
position: absolute !important;
inset: 0 !important;
overflow: hidden !important;
border-radius: inherit !important;
background: #020617 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel {
position: relative !important;
display: block !important;
overflow: hidden !important;
border-radius: inherit !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__track {
display: flex !important;
align-items: stretch !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__slide {
position: relative !important;
box-sizing: border-box !important;
flex: 0 0 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: inherit !important;
background: #020617 !important;
box-shadow: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__slide.ui-accent-card > .ui-accent-card__body {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: inherit !important;
}
/* Photo ou visuel plein cadre. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .event-card-media {
position: absolute !important;
inset: 0 !important;
z-index: 0 !important;
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 100% !important;
margin: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: inherit !important;
background: #020617;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .event-card-media::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, rgba(2, 6, 23, .12) 0%, rgba(2, 6, 23, .02) 38%, rgba(2, 6, 23, .38) 65%, rgba(2, 6, 23, .72) 100%),
linear-gradient(90deg, rgba(2, 6, 23, .10), transparent 24%, transparent 76%, rgba(2, 6, 23, .10));
pointer-events: none;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .event-card-media > img {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
}
/* Panneau d'informations translucide posé sur le bas de la photo. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay {
position: absolute !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 20 !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: .4rem !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 42% !important;
max-height: 66% !important;
margin: 0 !important;
padding: .78rem .86rem 2rem !important;
overflow: hidden !important;
border-top: 1px solid rgba(255, 255, 255, .12);
border-radius: 0 0 var(--dashboard-v2-pc-panel-radius, 1.35rem) var(--dashboard-v2-pc-panel-radius, 1.35rem) !important;
color: #f8fafc !important;
background: linear-gradient(180deg, rgba(2, 6, 23, .36), rgba(2, 6, 23, .70) 18%, rgba(2, 6, 23, .88) 100%) !important;
box-shadow: 0 -18px 42px rgba(2, 6, 23, .18);
text-shadow: 0 1px 2px rgba(2, 6, 23, .58);
backdrop-filter: blur(12px) saturate(1.12) !important;
-webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--courses .dashboard-v2-immersive-card__overlay {
min-height: 52% !important;
max-height: 74% !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay :is(.event-card-header, .event-card-meta, .event-card-links, .event-card-description, .event-card-meta-note, .dashboard-v2-course-card__countdown, .dashboard-v2-course-card__vote, .dashboard-v2-course-alert) {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-header {
display: flex !important;
flex: 0 0 auto !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: .58rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-type {
margin: 0 0 .12rem !important;
color: rgba(226, 232, 240, .78) !important;
font-size: .66rem !important;
font-weight: 850 !important;
letter-spacing: .09em !important;
text-transform: uppercase !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-title {
display: -webkit-box !important;
overflow: hidden !important;
margin: 0 !important;
color: #fff !important;
font-size: 1.02rem !important;
font-weight: 950 !important;
line-height: 1.08 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay :is(.event-card-flags, .event-card-pill, .dashboard-v2-course-status-pill) {
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-pill {
background: color-mix(in srgb, var(--ui-accent-card-color) 26%, rgba(2, 6, 23, .72)) !important;
box-shadow: 0 6px 18px rgba(2, 6, 23, .24);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-meta {
display: grid !important;
flex: 0 0 auto !important;
gap: .2rem !important;
color: rgba(241, 245, 249, .88) !important;
font-size: .74rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-meta-line {
min-width: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-meta-icon {
color: color-mix(in srgb, var(--ui-accent-card-color) 74%, white 26%) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-links {
display: flex !important;
flex-wrap: wrap !important;
gap: .34rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-links a {
color: #f8fafc !important;
background: rgba(15, 23, 42, .48) !important;
border-color: color-mix(in srgb, var(--ui-accent-card-color) 42%, rgba(255,255,255,.16)) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-immersive-card__overlay .event-card-description {
display: -webkit-box !important;
overflow: hidden !important;
margin-top: auto !important;
color: rgba(248, 250, 252, .9) !important;
font-size: .74rem !important;
line-height: 1.34 !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/* Visuel Cours : avatar plein cadre ou composition colorée si absent. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__media {
display: grid !important;
place-items: center !important;
color: white;
background:
radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--dashboard-v2-course-card-color) 62%, transparent), transparent 46%),
linear-gradient(145deg, color-mix(in srgb, var(--dashboard-v2-course-card-color) 46%, #020617), #020617 74%) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__media.has-photo > img {
object-position: center 28% !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__media-icon {
position: relative;
z-index: 3;
display: grid;
place-items: center;
width: 5.2rem;
height: 5.2rem;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-course-card-color) 72%, white 18%);
border-radius: 1.55rem;
color: color-mix(in srgb, var(--dashboard-v2-course-card-color) 82%, white 18%);
background: rgba(2, 6, 23, .42);
box-shadow: 0 18px 42px color-mix(in srgb, var(--dashboard-v2-course-card-color) 30%, transparent);
font-size: 2.2rem;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__media-label {
display: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__countdown {
display: flex !important;
flex: 0 0 auto !important;
align-items: center !important;
justify-content: space-between !important;
gap: .55rem !important;
padding: .4rem .54rem !important;
border: 1px solid color-mix(in srgb, var(--ui-accent-card-color) 32%, rgba(255,255,255,.12)) !important;
border-radius: .72rem !important;
color: #f8fafc !important;
background: rgba(15, 23, 42, .42) !important;
font-size: .68rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__vote,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-alert {
flex: 0 0 auto !important;
margin-top: auto !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__vote .my-courses-next-carousel__vote-status {
margin-bottom: .38rem;
color: #f8fafc;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__vote .my-courses-next-carousel__vote-actions {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: .32rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-course-card__vote button {
background: rgba(15, 23, 42, .52) !important;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
/* Navigation du carrousel au-dessus des deux couches translucides. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__nav {
z-index: 82 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__dots {
position: absolute !important;
right: auto !important;
bottom: .46rem !important;
left: 50% !important;
z-index: 84 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .36rem !important;
width: max-content !important;
max-width: calc(100% - 1rem) !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
transform: translateX(-50%) !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-member-widget--courses, .dashboard-v2-member-widget--events) .dashboard-v2-carousel__dot {
width: .46rem !important;
min-width: .46rem !important;
height: .46rem !important;
padding: 0 !important;
border-radius: 999px !important;
box-shadow: 0 1px 6px rgba(2, 6, 23, .65);
}
/* Galerie, planning et calendrier ------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__body--flush > :is(.dashboard-v2-gallery-preview, .dashboard-v2-planning-preview, .dashboard-v2-calendar-preview) {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 0 var(--dashboard-v2-pc-panel-radius, 1.35rem) var(--dashboard-v2-pc-panel-radius, 1.35rem) !important;
box-shadow: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--gallery .dashboard-v2-gallery-preview img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--gallery .dashboard-v2-gallery-preview--empty {
display: grid;
place-content: center;
justify-items: center;
gap: .62rem;
padding: 1.2rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-preview,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-preview {
padding: .86rem .72rem .92rem !important;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 42%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-preview {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: .36rem !important;
padding: .78rem .72rem .72rem !important;
}
/* Les jours ne sont plus enfermés dans cinq sous-cartes. Chaque colonne
partage exactement la même échelle verticale, ce qui aligne les cours
commençant à la même heure sur toute la semaine. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-column {
box-sizing: border-box !important;
display: grid !important;
grid-template-rows: 1.45rem minmax(0, 1fr) !important;
align-items: stretch !important;
gap: .34rem !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 .12rem !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-column__head {
align-self: start !important;
min-height: 1.45rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-column__courses {
position: relative !important;
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-time-row {
position: absolute !important;
top: var(--dashboard-v2-planning-time-position, 50%) !important;
left: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .24rem !important;
width: 100% !important;
min-width: 0 !important;
min-height: .9rem !important;
transform: translate(-50%, -50%) !important;
pointer-events: none;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-time-row > i {
display: block !important;
flex: 0 0 auto !important;
width: .88rem !important;
min-width: .88rem !important;
height: .88rem !important;
margin: 0 !important;
border: 0 !important;
border-radius: 999px !important;
background: var(--dashboard-v2-course-color, #38bdf8) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 56%, transparent),
0 5px 13px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 28%, transparent) !important;
transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-time-row > i:hover {
filter: brightness(1.16) saturate(1.12);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 42%, transparent),
0 0 18px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 72%, transparent) !important;
transform: scale(1.12);
}
}
/* Messages et notifications ------------------------------------------ */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget > .dashboard-v2-member-widget__body--feed {
position: relative !important;
display: block !important;
padding: 0 !important;
overflow: hidden !important;
}
/* La marge est portée par un véritable viewport interne. Elle ne dépend
donc plus des anciens paddings des flux Messages / Notifications. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__body--feed > .dashboard-v2-member-widget__feed-inset {
position: absolute !important;
inset: .88rem !important;
box-sizing: border-box !important;
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border-radius: 1rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__feed-inset > .dashboard-v2-member-widget__feed {
position: relative !important;
box-sizing: border-box !important;
display: grid !important;
grid-auto-rows: max-content;
align-content: start !important;
gap: .68rem !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: auto !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__feed > :is(.dashboard-v2-feed-item, .dashboard-v2-daily-empty) {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__feed > .dashboard-v2-daily-empty {
min-height: 7.25rem !important;
padding: .9rem !important;
}
/* Informations de l'école -------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget > .dashboard-v2-member-widget__body--info {
position: relative !important;
display: block !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Structure dédiée au widget PC. Aucun style du footer mobile ne peut
désormais réduire sa largeur ou sa hauteur. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info {
position: absolute !important;
inset: 0 !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: max-content;
align-content: center !important;
justify-content: stretch !important;
justify-items: stretch !important;
gap: .72rem !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 1.05rem 1.08rem !important;
overflow: hidden !important;
border: 0 !important;
border-radius: 0 0 var(--dashboard-v2-pc-panel-radius, 1.35rem) var(--dashboard-v2-pc-panel-radius, 1.35rem) !important;
background: transparent !important;
text-align: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info > * {
box-sizing: border-box !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__logo {
display: grid !important;
place-items: center !important;
height: 4.35rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__logo-mark {
display: block;
width: min(15rem, 72%);
height: 100%;
color: var(--dashboard-v2-role-color, var(--dashboard-v2-cyan));
background: linear-gradient(135deg, currentColor, color-mix(in srgb, currentColor 72%, white 22%));
-webkit-mask: url('../../img/logo.svg') center / contain no-repeat;
mask: url('../../img/logo.svg') center / contain no-repeat;
filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--dashboard-v2-role-color, #38bdf8) 20%, transparent));
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__subtitle {
color: var(--dashboard-v2-muted);
font-size: .76rem;
line-height: 1.35;
text-align: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__contacts {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: .5rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__contact {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__socials {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .84rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 2.45rem;
height: 2.45rem;
border-radius: 999px;
color: var(--dashboard-v2-role-color, var(--dashboard-v2-cyan));
background: color-mix(in srgb, currentColor 12%, transparent);
font-size: 1.18rem;
text-decoration: none;
transition: filter .16s ease, box-shadow .16s ease, transform .16s ease;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social--facebook { color: #60a5fa; }
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social--instagram { color: #f472b6; }
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social--tiktok { color: #f8fafc; }
@media (hover: hover) and (pointer: fine) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social:hover,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__social:focus-visible {
filter: brightness(1.12) saturate(1.08);
box-shadow: 0 0 20px color-mix(in srgb, currentColor 28%, transparent);
transform: scale(1.06);
outline: none;
}
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__links {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: .34rem .72rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__links a {
color: color-mix(in srgb, var(--dashboard-v2-role-color, var(--dashboard-v2-cyan)) 82%, white 10%);
font-size: .68rem;
font-weight: 850;
line-height: 1.25;
text-decoration: none;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__links a:hover,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-info__links a:focus-visible {
text-decoration: underline;
outline: none;
}
/* Menu des coordonnées sur ordinateur -------------------------------- */
.dashboard-mobile-footer-menu {
position: fixed;
z-index: 5200;
display: grid;
gap: .42rem;
width: min(21rem, calc(100vw - 2rem));
padding: .55rem;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-role-color, #38bdf8) 44%, rgba(148, 163, 184, .28));
border-radius: 1.05rem;
color: var(--dashboard-v2-text, #f8fafc);
background: color-mix(in srgb, #020617 84%, var(--dashboard-v2-role-color, #38bdf8) 8%);
box-shadow: 0 22px 48px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .04) inset;
opacity: 0;
transform: translateY(6px) scale(.985);
transform-origin: top center;
transition: opacity 140ms ease, transform 140ms ease;
backdrop-filter: blur(20px) saturate(1.2);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
}
.dashboard-mobile-footer-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
}
.dashboard-mobile-footer-menu__header {
display: grid;
gap: .14rem;
padding: .3rem .34rem .42rem;
}
.dashboard-mobile-footer-menu__header span {
color: var(--dashboard-v2-role-color, #38bdf8);
font-size: .68rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.dashboard-mobile-footer-menu__header strong {
overflow: hidden;
color: var(--dashboard-v2-text, #f8fafc);
font-size: .84rem;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-mobile-footer-menu__actions {
display: grid;
gap: .28rem;
}
.dashboard-mobile-footer-menu__item {
display: flex;
align-items: center;
gap: .62rem;
min-height: 2.65rem;
padding: .52rem .64rem;
border: 1px solid rgba(148, 163, 184, .16);
border-radius: .78rem;
color: var(--dashboard-v2-text, #f8fafc);
background: rgba(255, 255, 255, .055);
font: inherit;
font-size: .78rem;
font-weight: 850;
text-align: left;
cursor: pointer;
}
.dashboard-mobile-footer-menu__item:hover,
.dashboard-mobile-footer-menu__item:focus-visible {
border-color: color-mix(in srgb, var(--dashboard-v2-role-color, #38bdf8) 46%, rgba(148, 163, 184, .16));
background: color-mix(in srgb, var(--dashboard-v2-role-color, #38bdf8) 10%, rgba(255, 255, 255, .06));
outline: none;
}
.dashboard-mobile-footer-menu__item i {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 2rem;
height: 2rem;
border-radius: .68rem;
color: var(--dashboard-v2-role-color, #38bdf8);
background: color-mix(in srgb, var(--dashboard-v2-role-color, #38bdf8) 14%, transparent);
font-size: 1rem;
}
/* Thème clair ---------------------------------------------------------- */
html[data-theme="light"] body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__header,
body[data-theme="light"].is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget__header {
color: color-mix(in srgb, var(--dashboard-v2-role-color) 76%, #1e293b 24%);
background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .78));
box-shadow: 0 10px 28px rgba(15, 23, 42, .12);
}
html[data-theme="light"] .dashboard-mobile-footer-menu,
body[data-theme="light"] .dashboard-mobile-footer-menu {
color: #0f172a;
background: rgba(255, 255, 255, .96);
box-shadow: 0 22px 48px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .04) inset;
}
html[data-theme="light"] .dashboard-mobile-footer-menu__header strong,
body[data-theme="light"] .dashboard-mobile-footer-menu__header strong,
html[data-theme="light"] .dashboard-mobile-footer-menu__item,
body[data-theme="light"] .dashboard-mobile-footer-menu__item {
color: #0f172a;
}
html[data-theme="light"] .dashboard-mobile-footer-menu__item,
body[data-theme="light"] .dashboard-mobile-footer-menu__item {
background: rgba(15, 23, 42, .035);
}
/* Le cadrage Dashboard est exporté en 5:4. Le visuel net conserve toujours
* ce ratio, quelle que soit la largeur de la grille (2 ou 3 colonnes).
* Une seconde copie floutée prolonge naturellement l'image jusqu'aux bords
* de la carte sans recadrer une nouvelle fois le fichier validé. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--events .event-card-media--preserve-crop {
isolation: isolate;
background: #020617 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--events .event-card-media--preserve-crop > .event-card-media__backdrop {
position: absolute !important;
inset: -8% !important;
z-index: 0 !important;
display: block !important;
width: 116% !important;
height: 116% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
opacity: .74;
filter: blur(24px) saturate(1.04);
transform: scale(1.04);
pointer-events: none;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--events .event-card-media--preserve-crop > .event-card-media__image {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: contain !important;
object-position: center !important;
pointer-events: none;
}
}
/* =========================================================
V49.4.42 — Mini planning : matrice horaire commune
========================================================= */
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-preview {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 1.55rem minmax(0, 1fr) !important;
align-items: stretch !important;
gap: .34rem !important;
min-height: 0 !important;
padding: .78rem .72rem .72rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-heads {
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
align-items: center !important;
gap: .36rem !important;
min-width: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-head {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .3rem !important;
min-width: 0 !important;
color: var(--dashboard-v2-text, #f8fafc) !important;
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-head strong,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-head em {
margin: 0 !important;
font: inherit !important;
font-style: normal !important;
white-space: nowrap !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-head em {
display: inline-grid !important;
place-items: center !important;
min-width: 1.18rem !important;
height: 1.18rem !important;
padding: 0 .28rem !important;
border-radius: 999px !important;
color: #67e8f9 !important;
background: rgba(8, 145, 178, .2) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-timeline {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
grid-template-rows: repeat(var(--dashboard-v2-planning-row-count, 96), minmax(0, 1fr)) !important;
align-items: stretch !important;
gap: 0 .36rem !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: .16rem 0 .18rem !important;
overflow: visible !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-time-row {
position: relative !important;
inset: auto !important;
top: auto !important;
left: auto !important;
align-self: center !important;
justify-self: center !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: .24rem !important;
width: 100% !important;
min-width: 0 !important;
min-height: .9rem !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
pointer-events: none !important;
z-index: 2 !important;
}
}
/* =========================================================
V49.4.43 — Bulles interactives, mini-cartes et cours en cours
========================================================= */
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot {
position: relative !important;
display: block !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
width: .92rem !important;
min-width: .92rem !important;
height: .92rem !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px !important;
appearance: none !important;
color: transparent !important;
background: var(--dashboard-v2-course-color, #38bdf8) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 56%, transparent),
0 5px 13px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 28%, transparent) !important;
cursor: help !important;
pointer-events: auto !important;
transition: filter .16s ease, box-shadow .16s ease, transform .16s ease !important;
z-index: 2 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot:focus-visible {
outline: 2px solid color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 72%, white) !important;
outline-offset: 4px !important;
}
@media (hover: hover) and (pointer: fine) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot:hover {
filter: brightness(1.16) saturate(1.12) !important;
box-shadow:
0 0 0 2px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 42%, transparent),
0 0 18px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 72%, transparent) !important;
transform: scale(1.12) !important;
z-index: 5 !important;
}
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live {
z-index: 6 !important;
animation: dashboard-planning-live-breathe 1.65s ease-in-out infinite !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::before,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::after {
content: '';
position: absolute;
inset: -.2rem;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 72%, white 8%);
border-radius: inherit;
opacity: 0;
pointer-events: none;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::before {
animation: dashboard-planning-live-ring 1.65s ease-out infinite !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::after {
animation: dashboard-planning-live-ring 1.65s .52s ease-out infinite !important;
}
}
@keyframes dashboard-planning-live-breathe {
0%, 100% {
filter: brightness(1) saturate(1);
transform: scale(1);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 62%, transparent),
0 0 12px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 42%, transparent);
}
50% {
filter: brightness(1.22) saturate(1.18);
transform: scale(1.14);
box-shadow:
0 0 0 2px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 78%, transparent),
0 0 24px color-mix(in srgb, var(--dashboard-v2-course-color, #38bdf8) 82%, transparent);
}
}
@keyframes dashboard-planning-live-ring {
0% {
opacity: .72;
transform: scale(.8);
}
72%, 100% {
opacity: 0;
transform: scale(2.3);
}
}
@media (prefers-reduced-motion: reduce) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::before,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--planning .dashboard-v2-planning-course-dot.is-live::after {
animation: none !important;
}
}
/* =========================================================
V49.4.46 — Dashboard V2 PC Administration : ossature commune
V49.4.47 — Hiérarchie métier et suppression des doublons
========================================================= */
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-pc-mosaic--admin {
--dashboard-v2-member-card-height: clamp(23rem, 26vw, 25rem);
grid-auto-flow: row dense;
grid-auto-rows: var(--dashboard-v2-member-card-height);
align-items: stretch;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-pc-mosaic--admin > .dashboard-v2-member-widget {
height: var(--dashboard-v2-member-card-height) !important;
min-height: var(--dashboard-v2-member-card-height) !important;
max-height: var(--dashboard-v2-member-card-height) !important;
}
/* Les contenus métier reposent dans la surface commune, sans recréer de
carte globale ni de deuxième header. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__body {
position: relative !important;
box-sizing: border-box !important;
display: block !important;
min-height: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__section {
box-sizing: border-box;
display: grid;
gap: .78rem;
width: 100%;
height: 100%;
min-height: 0;
padding: .88rem;
overflow: hidden;
}
/* À surveiller ------------------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__section--focus {
grid-template-rows: minmax(0, 1fr);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget--focus .dashboard-v2-daily-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .55rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget--focus .dashboard-v2-daily-stat {
min-height: 3.75rem;
padding: .62rem;
border-color: color-mix(in srgb, var(--dashboard-v2-role-color) 24%, var(--dashboard-v2-border-soft) 76%);
border-radius: .95rem;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 62%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget--focus .dashboard-v2-daily-stat span {
width: 1.9rem;
height: 1.9rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget--focus .dashboard-v2-daily-stat strong {
font-size: 1.16rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__priority-list {
box-sizing: border-box;
display: grid;
grid-auto-rows: max-content;
align-content: start;
gap: .58rem;
min-height: 0;
overflow: auto;
scrollbar-width: thin;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__priority-list .dashboard-v2-priority {
min-height: 4rem;
border-radius: 1rem;
background:
radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--dashboard-v2-role-color) 12%, transparent), transparent 44%),
color-mix(in srgb, var(--dashboard-v2-surface-strong) 62%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__priority-list .dashboard-v2-priority__action {
display: none !important;
}
/* Pilotage association ---------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__section--pilotage {
align-content: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__admin-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: center;
gap: .7rem;
width: 100%;
min-height: 0;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__admin-grid .dashboard-v2-admin-item {
min-height: 6.25rem;
padding: .8rem;
border-radius: 1.05rem;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 64%, transparent);
}
/* Prochain cours école ---------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course {
box-sizing: border-box;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
align-content: center;
gap: .82rem;
width: 100%;
height: 100%;
padding: .92rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__card {
min-height: 5.1rem;
margin: 0;
border-radius: 1.05rem;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 64%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__stats {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-self: center;
gap: .48rem;
margin: 0;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__stats .dashboard-v2-school-course-stat {
min-width: 0;
min-height: 4rem;
padding: .58rem .34rem;
border-radius: .92rem;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 62%, transparent);
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__stats .dashboard-v2-school-course-stat strong {
font-size: 1.12rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__stats .dashboard-v2-school-course-stat em {
overflow: hidden;
font-size: .62rem;
line-height: 1.12;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Gala --------------------------------------------------------------- */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala {
box-sizing: border-box;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-content: center;
gap: .88rem;
width: 100%;
height: 100%;
padding: .95rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala__intro {
display: grid;
place-content: center;
justify-items: center;
gap: .52rem;
min-height: 0;
text-align: center;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala__icon {
display: grid;
place-items: center;
width: 3.25rem;
height: 3.25rem;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-role-color) 38%, transparent);
border-radius: 1rem;
color: var(--dashboard-v2-role-color);
background: color-mix(in srgb, var(--dashboard-v2-role-color) 14%, transparent);
box-shadow: 0 14px 30px color-mix(in srgb, var(--dashboard-v2-role-color) 18%, transparent);
font-size: 1.3rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala__intro strong {
color: var(--dashboard-v2-text);
font-size: 1.35rem;
font-weight: 950;
letter-spacing: -.035em;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala__intro > span:last-child {
max-width: 34ch;
color: var(--dashboard-v2-muted);
font-size: .78rem;
font-weight: 720;
line-height: 1.42;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-gala__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5.6rem, 1fr));
gap: .52rem;
margin: 0;
}
/* Les cartes immersives et les flux utilisent déjà leurs composants
communs. Les variantes administration n'ajoutent aucune marge locale. */
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop :is(.dashboard-v2-admin-widget--courses, .dashboard-v2-admin-widget--events) > .dashboard-v2-member-widget__body {
padding: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-pc-mosaic--admin .dashboard-v2-action {
display: none !important;
}
}
@media (min-width: 1024px) and (max-width: 1180px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget--focus .dashboard-v2-daily-stats,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-widget__admin-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-admin-school-course__stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* =========================================================
V49.4.48 — Calendrier miniature vivant + votes évènements admin
========================================================= */
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-preview {
display: grid !important;
grid-template-rows: auto minmax(0, 1fr) auto !important;
align-content: stretch !important;
gap: clamp(.22rem, .42vw, .42rem) !important;
height: 100% !important;
min-height: 0 !important;
padding: clamp(.52rem, .7vw, .78rem) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-weekdays,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-grid {
display: grid !important;
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
gap: clamp(.16rem, .28vw, .3rem) !important;
min-width: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-grid {
grid-template-rows: repeat(var(--dashboard-v2-calendar-weeks, 5), minmax(0, 1fr)) !important;
height: 100% !important;
min-height: 0 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-weekdays span {
font-size: clamp(.54rem, .52vw, .65rem) !important;
line-height: 1 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day {
position: relative !important;
box-sizing: border-box !important;
display: grid !important;
width: 100% !important;
min-width: 0 !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
place-items: center !important;
padding: 0 !important;
overflow: hidden !important;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-border-soft) 82%, transparent) !important;
border-radius: clamp(.42rem, .72vw, .78rem) !important;
color: var(--dashboard-v2-muted) !important;
background: color-mix(in srgb, var(--dashboard-v2-surface-strong) 62%, transparent) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
cursor: pointer !important;
transform: none !important;
transition:
border-color .16s ease,
color .16s ease,
background-color .16s ease,
box-shadow .16s ease !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day:hover,
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day:focus-visible {
z-index: 2;
border-color: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 72%, rgba(255, 255, 255, .22)) !important;
color: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 82%, white 18%) !important;
background: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 14%, var(--dashboard-v2-surface-strong)) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 24%, transparent),
0 0 18px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 22%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .07) !important;
outline: none !important;
transform: none !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day strong {
font-size: clamp(.58rem, .68vw, .77rem) !important;
line-height: 1 !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day.is-today {
overflow: visible !important;
border-color: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 74%, transparent) !important;
color: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 88%, white 12%) !important;
background: color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 17%, var(--dashboard-v2-surface-strong)) !important;
animation: dashboard-v2-calendar-today-breathe 3.2s ease-in-out infinite !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-day__marks {
inset: auto clamp(.12rem, .22vw, .22rem) clamp(.1rem, .2vw, .18rem) !important;
gap: clamp(.08rem, .12vw, .14rem) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-day__marks i {
width: clamp(.22rem, .32vw, .34rem) !important;
height: clamp(.22rem, .32vw, .34rem) !important;
box-shadow: 0 0 7px currentColor;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-legend {
gap: clamp(.52rem, .82vw, .9rem) !important;
font-size: clamp(.54rem, .52vw, .64rem) !important;
line-height: 1 !important;
}
@keyframes dashboard-v2-calendar-today-breathe {
0%, 100% {
box-shadow:
0 0 0 1px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 26%, transparent),
0 0 10px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 18%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .06);
}
50% {
box-shadow:
0 0 0 2px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 34%, transparent),
0 0 24px color-mix(in srgb, var(--dashboard-v2-panel-color, #60a5fa) 32%, transparent),
inset 0 1px 0 rgba(255, 255, 255, .09);
}
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-votes {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: .42rem !important;
width: 100% !important;
margin-top: .18rem !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote {
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
gap: .46rem !important;
min-width: 0 !important;
padding: .42rem .52rem !important;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-event-vote-color) 46%, rgba(255,255,255,.12)) !important;
border-radius: .72rem !important;
color: color-mix(in srgb, var(--dashboard-v2-event-vote-color) 82%, white 18%) !important;
background: color-mix(in srgb, var(--dashboard-v2-event-vote-color) 13%, rgba(2, 6, 23, .62)) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote--present {
--dashboard-v2-event-vote-color: #34d399;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote--interested {
--dashboard-v2-event-vote-color: #fbbf24;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote > i {
flex: 0 0 auto;
font-size: .92rem;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote > span {
display: grid;
min-width: 0;
line-height: 1;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote strong {
color: #fff;
font-size: .86rem;
font-weight: 950;
}
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-event-admin-vote em {
margin-top: .12rem;
color: rgba(226, 232, 240, .82);
font-size: .58rem;
font-style: normal;
font-weight: 800;
letter-spacing: .025em;
text-transform: uppercase;
}
}
.dashboard-v2-calendar-hover__list {
display: grid;
gap: .42rem;
}
.dashboard-v2-calendar-hover__item {
--dashboard-v2-calendar-item-accent: #38bdf8;
display: grid;
grid-template-columns: 1.8rem minmax(0, 1fr);
align-items: center;
gap: .52rem;
min-width: 0;
padding: .42rem .46rem;
border: 1px solid color-mix(in srgb, var(--dashboard-v2-calendar-item-accent) 28%, rgba(255,255,255,.08));
border-radius: .72rem;
background: color-mix(in srgb, var(--dashboard-v2-calendar-item-accent) 9%, rgba(2,6,23,.36));
}
.dashboard-v2-calendar-hover__item-icon {
display: grid;
width: 1.8rem;
height: 1.8rem;
place-items: center;
border-radius: .58rem;
color: color-mix(in srgb, var(--dashboard-v2-calendar-item-accent) 82%, white 18%);
background: color-mix(in srgb, var(--dashboard-v2-calendar-item-accent) 17%, transparent);
}
.dashboard-v2-calendar-hover__item-copy {
display: grid;
min-width: 0;
gap: .12rem;
}
.dashboard-v2-calendar-hover__item-copy strong {
min-width: 0;
overflow: hidden;
color: #f8fafc;
font-size: .79rem;
font-weight: 850;
line-height: 1.16;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-v2-calendar-hover__item-copy strong small {
margin-left: .28rem;
color: color-mix(in srgb, var(--dashboard-v2-calendar-item-accent) 76%, white 24%);
font-size: .58rem;
font-weight: 850;
text-transform: uppercase;
}
.dashboard-v2-calendar-hover__item-copy em {
min-width: 0;
overflow: hidden;
color: rgba(203, 213, 225, .78);
font-size: .66rem;
font-style: normal;
font-weight: 700;
line-height: 1.18;
text-overflow: ellipsis;
white-space: nowrap;
}
.dashboard-v2-calendar-hover__summary,
.dashboard-v2-calendar-hover__hint {
display: flex;
align-items: center;
gap: .38rem;
margin-top: .5rem;
color: rgba(203, 213, 225, .82);
font-size: .67rem;
font-weight: 760;
}
.dashboard-v2-calendar-hover__summary {
padding-top: .5rem;
border-top: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 22%, rgba(255,255,255,.08));
}
.dashboard-v2-calendar-hover__hint {
color: color-mix(in srgb, var(--ui-hover-card-accent) 74%, white 26%);
}
@media (prefers-reduced-motion: reduce) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar button.dashboard-v2-calendar-day.is-today {
animation: none !important;
}
}
@media (min-width: 1024px) {
body.is-dashboard-shell-visible #dashboard-view > .dashboard-v2--desktop .dashboard-v2-member-widget--calendar .dashboard-v2-calendar-day.is-empty {
box-sizing: border-box !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
aspect-ratio: auto !important;
}
}