/* La coquille de l'espace MMI · EM, dans l'univers Dream Pastry.
   Même disposition et même typographie que l'app conseillères
   (conseillers.dream-pastry.fr) : en-tête et rail sur la prune, bandeau
   violet, cartes blanches sur le crème, Manrope pour les titres et les
   grands chiffres, General Sans pour le reste.
   Limité à l'espace équipe : connexion et réservation élèves gardent leur
   mise en page. Chargé en dernier, il prime sur style.css et workspace.css. */

@font-face{font-family:"General Sans";src:url('/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url('/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:"General Sans";src:url('/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-800.woff2') format('woff2');font-weight:800;font-display:swap}

#workspace, .workspace-dialog, #mobile-menu {
  --font-ui: "General Sans", system-ui, sans-serif;
  --font-heading: Manrope, "General Sans", sans-serif;
  --entete: 76px;
  --rail: 248px;
  --prune-fond: radial-gradient(ellipse at 0% 0%, #6a2380 0%, transparent 60%), linear-gradient(165deg, #4d1760 0%, #3b0f4a 45%, #2c0b38 100%);
  font-family: var(--font-ui);
  font-size: 15px;
}
#workspace :is(p, span, a, button, small, strong, time, label, input, select, textarea, summary, li, td, th, i, b, em, div),
.workspace-dialog :is(p, span, a, button, small, strong, time, label, input, select, textarea, summary, li, td, th, div),
#mobile-menu :is(span, button) {
  font-family: var(--font-ui);
}
#workspace :is(h1, h2, h3, h4), .workspace-dialog :is(h1, h2, h3, h4), #mobile-menu h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -.03em;
}
body:has(#workspace:not([hidden])) { background: #fdfbf7; }

/* ---- L'en-tête ---- */
#workspace .topbar {
  position: fixed; inset: 0 0 auto; z-index: 45;
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr);
  height: var(--entete); margin: 0; padding: 0; border: 0;
  color: #fff; font-size: 14px;
  background-color: #3b0f4a;
  background-image: radial-gradient(ellipse at 0% 0%, #7b2d8e 0%, #4d1760 26%, #3b0f4a 62%);
  box-shadow: 0 6px 24px #3b0f4a1f;
}
#workspace .topbar .brand { display: flex; align-items: center; justify-content: center; width: auto; padding: 12px 24px; }
#workspace .topbar .brand img { width: auto; height: 60px; }
#workspace .topbar-corps { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; padding: 0 28px; }
#workspace .topbar-fil { display: flex; align-items: center; gap: 14px; min-width: 0; }
#workspace .topbar-monde { font-size: 13px; font-weight: 500; color: #e6d2ee; white-space: nowrap; }
#workspace .topbar-fil svg { width: 16px; height: 16px; flex-shrink: 0; color: #c9a4d8; }
#workspace #breadcrumb { font: 700 17px/1.25 var(--font-heading); letter-spacing: -.025em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#workspace .topbar-actions { gap: 12px; flex-wrap: nowrap; }
#workspace .topbar-actions > button {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 12px;
  border: 0; border-radius: 8px; background: none; color: #f1e6f5; font-size: 14px; font-weight: 600;
}
#workspace .topbar-actions > button:hover { background: #ffffff14; color: #fff; }
/* #refresh porte un fond blanc par son id dans workspace.css. */
#workspace .topbar #refresh { padding: 0 12px; background: none; color: #f1e6f5; font-size: 14px; }
#workspace .topbar #refresh:hover { background: #ffffff14; color: #fff; }
#workspace .topbar-actions svg { width: 18px; height: 18px; }
#workspace .topbar .private { color: #e6d2ee; font-size: 14px; }
#workspace .topbar :focus-visible { outline-color: #fff; }

/* ---- Le rail ---- */
#workspace .sidebar {
  position: fixed; top: var(--entete); bottom: 0; left: 0; width: var(--rail);
  padding: 0; display: flex; flex-direction: column; overflow: hidden;
  color: #f6ecf9; border-right: 1px solid #ffffff14;
  background-color: #3b0f4a; background-image: var(--prune-fond);
}
#workspace .sidebar nav { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 0 14px 24px; scrollbar-color: #ffffff33 transparent; }
#workspace .side-caption {
  margin: 24px 14px 12px; padding-top: 24px; border-top: 1px solid #ffffff14;
  color: #e2c9ec; font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
#workspace .absence-nav + .side-caption { margin-top: 0; padding-top: 0; border: 0; }
#workspace .sidebar .nav {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-top: 4px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 11px; background: none;
  color: #f6ecf9; font-size: 14px; font-weight: 500; line-height: 1.4; text-align: left;
}
#workspace .sidebar .nav > svg, #mobile-menu .nav > svg {
  box-sizing: content-box; width: 18px; height: 18px; padding: 6px;
  border: 1px solid #d3abe633; border-radius: 8px;
  background: linear-gradient(145deg, #ffffff14, #ffffff05); color: #d3abe6;
}
#workspace .sidebar .nav:hover { background: #ffffff12; border-color: #ffffff24; color: #fff; }
#workspace .sidebar .nav.active, #mobile-menu .nav.active {
  background: linear-gradient(105deg, #9240a8, #6a2380); border-color: #d3abe666;
  color: #fff; font-weight: 600; box-shadow: 0 5px 16px #14041a4d, inset 0 1px #ffffff26;
}
#workspace .sidebar .nav.active > svg, #mobile-menu .nav.active > svg { background: #ffffff22; border-color: #ffffff40; color: #fff; }
#workspace .sidebar .nav i { display: none; }
/* Le geste de tête, blanc sur la prune, comme « Déclarer une vente ». */
#workspace .sidebar .absence-nav {
  min-height: 52px; margin: 24px 0 30px; width: 100%; padding: 10px 12px; gap: 10px; white-space: nowrap;
  border: 1px solid #fff; border-radius: 12px; background: #fff;
  color: #5b1a6e; font-weight: 600; box-shadow: 0 6px 20px #14041a40;
}
#workspace .sidebar .absence-nav:hover { background: #f8f0fb; color: #5b1a6e; }
#workspace .sidebar .absence-nav > svg { border-color: #d3c2dc; background: #f8f0fb; color: #7b2d8e; }
#workspace .sidebar .absence-nav.active { background: #f8f0fb; color: #5b1a6e; box-shadow: 0 0 0 2px #d3abe6; }
#workspace .sidebar .absence-nav.active > svg { background: #7b2d8e; color: #fff; }
#workspace #msg-badge:not([hidden]) { margin-left: auto; background: #c9a24a; color: #3b0f4a; }
#workspace .sidebar-bottom { margin: 0; padding: 16px 20px; border-top: 1px solid #ffffff14; font-size: 13px; }
#workspace .sidebar-bottom p, #workspace .sidebar-bottom button, #workspace .source-label { color: #e2c9ec; }
#workspace .sidebar-bottom a { color: #fff; }
#workspace .sidebar-bottom .dot { background: #c9a24a; }
#workspace .sidebar :focus-visible { outline-color: #fff; }

/* ---- La zone de travail : 1200 px au plus, comme EM ---- */
#workspace main {
  margin-left: var(--rail);
  padding: calc(var(--entete) + 32px) max(36px, calc((100% - var(--rail) - 1200px) / 2)) 64px;
}
#workspace .skip-link { left: calc(var(--rail) + 16px); }

/* ---- Le bandeau ---- */
#workspace .page-heading {
  position: relative; min-height: 128px; margin-bottom: 0; padding: 22px 26px; gap: 24px; align-items: center;
  border: 1px solid #5b1a6e; border-radius: 16px; overflow: hidden;
  background: linear-gradient(112deg, #9240a8 0%, #7b2d8e 32%, #5b1a6e 63%, #3b0f4a 100%);
  box-shadow: 0 4px 14px #7b2d8e47;
}
#workspace .page-heading::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, #d3abe6, #c9a24a, #d3abe6); }
#workspace .page-heading h1 { font-size: 36px; font-weight: 800; line-height: 1.18; letter-spacing: -.045em; color: #fff; }
#workspace .page-heading p { margin-top: 8px; font-size: 15px; color: #fff; }
#workspace .page-heading #new-meeting {
  min-height: 44px; padding: 9px 16px; border-radius: 8px; background: #fff; color: #5b1a6e;
  font-size: 14px; font-weight: 600;
}
#workspace .page-heading #new-meeting:hover { background: #f8f0fb; }
#workspace .syncbar { margin: 16px 0 24px; font-size: 13px; color: #6a6279; }

/* ---- Les indicateurs : les cartes de priorité d'EM ---- */
#workspace .metrics { gap: 16px; margin: 0 0 24px; }
#workspace .metric-action {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 20px 24px;
  border: 1px solid #e6dceb; border-top: 2px solid #d3c2dc; border-radius: 12px;
  background: linear-gradient(145deg, #fff 0%, #fdfaff 70%); box-shadow: 0 1px 2px #3b0f4a0a, 0 6px 20px #3b0f4a0d;
  color: #1f1a2b; text-align: left;
}
#workspace .metric-action span { order: 1; font-size: 15px; font-weight: 600; color: #1f1a2b; }
#workspace .metric-action strong { order: 2; font: 800 38px/46px var(--font-heading); letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: #1f1a2b; }
#workspace .metric-action small { order: 3; font-size: 15px; color: #5e5670; }
#workspace .metric-action:hover { border-color: #7b2d8e; background: #fff; }
#workspace .metric-action.needs-attention { border-top-color: #96590a; background: linear-gradient(145deg, #fff 0%, #fdfaff 70%); }
#workspace .metric-action.needs-attention strong, #workspace .metric-action.needs-attention small { color: #80500b; }

/* ---- La semaine ---- */
#workspace .date-control h2 { font-size: 23px; font-weight: 700; letter-spacing: -.035em; padding: 0 8px; }
#workspace .date-control button, #workspace .filters select, #workspace .segmented { border-color: #d3c2dc; }
#workspace .date-control button { font-size: 15px; }
#workspace .filters select { font-size: 15px; }
#workspace .segmented button { font-size: 14px; font-weight: 600; }
#workspace .calendar { border: 1px solid #e6dceb; border-radius: 12px; box-shadow: 0 1px 2px #3b0f4a0a, 0 6px 20px #3b0f4a0d; }
#workspace .day-heading { padding: 12px 8px; background: #f8f0fb; color: #6a6279; font-size: 12px; font-weight: 600; letter-spacing: .08em; }
#workspace .day-heading strong { font: 800 24px/1.3 var(--font-heading); letter-spacing: -.04em; color: #1f1a2b; }
#workspace .day.today .day-heading { background: linear-gradient(105deg, #7b2d8e, #4a1459); color: #f1e6f5; }
#workspace .day.today .day-heading strong { color: #fff; }
#workspace .event { padding: 12px 10px; border: 1px solid #e6dceb; border-left: 3px solid #7b2d8e; border-radius: 8px; background: #fff; font-size: 13px; }
#workspace .event:hover { border-color: #7b2d8e; background: #fdfaff; }
#workspace .event strong { font: 700 14px/1.3 var(--font-heading); letter-spacing: -.02em; }
#workspace .event time { font-size: 12px; font-variant-numeric: tabular-nums; }
#workspace .event.meeting { border-left-color: #d3abe6; background: #f8f0fb; }
#workspace .calendar-footer { font-size: 13px; }

/* ---- Écrans intermédiaires ---- */
@media (max-width: 1100px) and (min-width: 761px) {
  #workspace, .workspace-dialog, #mobile-menu { --rail: 228px; }
  #workspace .sidebar { width: var(--rail); }
  #workspace main { margin-left: var(--rail); padding-inline: 24px; }
  #workspace .topbar-actions > button span, #workspace .topbar .private { display: none; }
  #workspace .page-heading { flex-direction: column; align-items: flex-start; gap: 16px; }
  #workspace .page-heading #new-meeting { max-width: none; white-space: nowrap; }
  #workspace .metric-action { padding: 20px; }
}
@media (min-width: 761px) and (max-width: 1280px) {
  #workspace .topbar-monde, #workspace .topbar-fil svg { display: none; }
}

/* ---- Téléphone ---- */
@media (max-width: 760px) {
  #workspace, .workspace-dialog, #mobile-menu { --entete: 72px; }
  #workspace .topbar { grid-template-columns: 104px minmax(0, 1fr); }
  #workspace .topbar .brand { padding: 8px; }
  #workspace .topbar .brand img { height: 44px; }
  #workspace .topbar-corps { gap: 12px; padding: 0 16px; }
  #workspace .topbar-fil { flex-direction: column; align-items: flex-start; gap: 4px; }
  #workspace .topbar-fil svg, #workspace .topbar .private, #workspace .topbar-actions > button span { display: none; }
  #workspace #breadcrumb { font-size: 15px; }
  #workspace .topbar-actions { gap: 0; }
  #workspace .topbar-actions > button { padding: 0 10px; }
  #workspace .sidebar { display: none; }
  #workspace main { margin: 0; padding: calc(var(--entete) + 20px) 16px calc(94px + env(safe-area-inset-bottom)); }
  #workspace .skip-link { left: 16px; }
  #workspace .page-heading { flex-direction: column; align-items: stretch; min-height: 0; padding: 20px; gap: 16px; border-radius: 12px; }
  #workspace .page-heading h1 { font-size: 30px; line-height: 36px; }
  #workspace .page-heading #new-meeting { width: 100%; font-size: 16px; }
  /* Les indicateurs passent en ligne : libellé à gauche, chiffre à droite. */
  #workspace .metrics { grid-template-columns: 1fr; gap: 8px; }
  #workspace .metric-action { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 16px; }
  #workspace .metric-action span { grid-column: 1; min-height: 0; font-size: 15px; }
  #workspace .metric-action small { display: block; grid-column: 1; font-size: 14px; }
  #workspace .metric-action strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 38px; }
  #workspace .date-control h2 { font-size: 19px; }
  #workspace .mobile-navigation { grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #e6dceb; box-shadow: 0 -8px 20px #3b0f4a0f; }
  #workspace .mobile-navigation button { position: relative; min-height: 68px; gap: 6px; border-radius: 0; color: #5e5670; font-size: 13px; font-weight: 600; }
  #workspace .mobile-navigation button.active { color: #5b1a6e; background: #7b2d8e17; }
  #workspace .mobile-navigation button.active::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: #7b2d8e; }
}

/* Le menu du téléphone porte la prune du rail. */
#mobile-menu { color: #f6ecf9; background-color: #3b0f4a; background-image: var(--prune-fond); border: 1px solid #ffffff1f; }
#mobile-menu h2 { color: #fff; }
#mobile-menu .nav { color: #f6ecf9; border: 1px solid transparent; border-radius: 11px; min-height: 50px; font-size: 16px; }
#mobile-menu .nav:hover { background: #ffffff12; }
#mobile-menu .close, #mobile-menu #mobile-logout { background: #ffffff1a; color: #fff; border: 1px solid #ffffff40; }
#mobile-menu::backdrop { background: #1f1a2b99; }