@import url("../design/tokens.cf68e2506a35.css");

.desktop-workspace-switcher,
.desktop-breadcrumb,
.desktop-menu-label,
.desktop-account-label {
  display: none;
}

.account-name {
  display: block;
  padding: var(--space-2) 10px 0;
  font-size: .95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* #929 — les états grace/restricted sont des avertissements globaux serveur.
   Ils gardent tout leur contenu et leur action, mais disposent enfin d'une
   primitive visuelle de base au lieu de retomber en texte brut. */
main > .notice--warning {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 var(--space-3);
  border: var(--border-width-default) solid var(--color-danger);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  background: var(--color-danger-soft);
  color: var(--color-ink);
  font-size: var(--typography-size-meta);
  line-height: 1.35;
}

main > .notice--warning strong {
  color: var(--color-danger);
  font-weight: var(--typography-weight-bold);
}

main > .notice--warning a {
  min-height: var(--control-height-default);
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-1);
}

@media (min-width: 901px) {
  .primary-nav.has-workspace {
    justify-content: flex-start;
    gap: 14px;
  }

  .desktop-workspace-switcher {
    position: relative;
    display: block;
    flex: 0 1 340px;
    min-width: 220px;
    max-width: 340px;
  }

  .desktop-workspace-switcher > summary {
    min-height: var(--control-height-default);
    display: grid;
    align-content: center;
    gap: 1px;
    border: var(--border-width-default) solid var(--color-line);
    border-radius: var(--radius-control);
    padding: 6px 34px 6px 11px;
    background: var(--color-canvas);
    color: var(--color-ink);
    cursor: pointer;
    list-style-position: inside;
  }

  .desktop-workspace-switcher > summary:hover,
  .desktop-workspace-switcher > summary:focus-visible {
    border-color: var(--color-line-strong);
    background: var(--color-brand-soft);
  }

  .desktop-workspace-switcher__label {
    color: var(--color-muted);
    font-size: .7rem;
    font-weight: var(--typography-weight-bold);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  .desktop-workspace-switcher__name {
    overflow: hidden;
    font-size: .92rem;
    font-weight: var(--typography-weight-bold);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop-workspace-switcher .nav-popover {
    right: auto;
    left: 0;
    min-width: 320px;
  }

  .workspace-option-form {
    margin: 0;
  }

  .workspace-option-form button {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: var(--radius-control);
    padding: var(--space-2) 10px;
    background: transparent;
    color: var(--color-ink);
    font: inherit;
    font-weight: var(--typography-weight-semibold);
    text-align: left;
  }

  .workspace-option-form button:hover,
  .workspace-option-form button:focus-visible {
    background: var(--color-canvas);
  }

  .desktop-menu-label {
    display: inline;
  }

  .desktop-account-label {
    /* R6 — un nom d'affichage ou une adresse très longue ne doit pas pousser les
       menus du shell hors de la barre : le libellé est borné et ellipsé, le nom
       entier restant lisible dans le popover du compte. */
    display: inline-block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .mobile-menu-label,
  .mobile-account-label {
    display: none;
  }

  .nav-menu .nav-popover a:has(.mobile-menu-label) {
    display: none;
  }

  .daily-nav a[aria-current="page"],
  .nav-menu summary[aria-current="page"] {
    background: var(--color-brand-soft);
    color: var(--color-brand-hover);
  }

  .desktop-breadcrumb {
    width: min(var(--layout-shell-max), calc(100% - var(--space-8)));
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: calc(-1 * var(--space-1)) auto 0;
    padding: 0 0 10px;
    color: var(--color-muted);
    font-size: var(--typography-size-meta);
  }

  .desktop-breadcrumb a {
    color: inherit;
    text-decoration: none;
  }

  .desktop-breadcrumb a:hover,
  .desktop-breadcrumb a:focus-visible {
    color: var(--color-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .desktop-breadcrumb [aria-current="page"] {
    color: var(--color-ink);
    font-weight: var(--typography-weight-bold);
  }
}

.workspace-switcher-current {
  display: grid;
  gap: 2px;
  padding: var(--space-2) 10px;
  border-bottom: 1px solid var(--line);
}

.workspace-switcher-current__label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.workspace-switcher-current__name {
  font-size: .95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

/* #821 recette humaine — la shell desktop est une barre pleine largeur en
   trois zones : identité/contexte à gauche, destinations quotidiennes centrées
   sur le viewport, administration/compte à droite. Les règles mobiles restent
   intégralement hors de ce bloc. */
@media (min-width: 901px) {
  html body > header > .bar:has(.primary-nav.has-workspace) {
    position: relative;
    width: 100%;
    max-width: none;
    min-height: 62px;
    margin: 0;
    padding-inline: clamp(18px, 2vw, 32px);
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.2vw, 18px);
  }

  html body > header > .bar:has(.primary-nav.has-workspace) > .brand {
    flex: 0 0 auto;
  }

  html body > header > .bar:has(.primary-nav.has-workspace) > .primary-nav.has-workspace {
    width: clamp(150px, 14vw, 260px);
    min-width: 0;
    max-width: 260px;
    flex: 0 1 clamp(150px, 14vw, 260px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
  }

  html body > header > .bar:has(.primary-nav.has-workspace)
    > .primary-nav.has-workspace
    > .desktop-workspace-switcher {
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  html body > header > .bar:has(.primary-nav.has-workspace)
    > .primary-nav.has-workspace
    > .scope-navigation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 520px);
    transform: translate(-50%, -50%);
    justify-content: center;
    flex-wrap: nowrap;
    z-index: 1;
  }

  html body > header > .bar:has(.primary-nav.has-workspace) > .shell-utilities {
    min-width: 0;
    margin-left: auto;
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  html body > header > .bar:has(.primary-nav.has-workspace) .desktop-account-label {
    max-width: clamp(110px, 13vw, 200px);
  }
}

/* #825 F2-B — sur desktop, le trial reste visible sans concurrencer chaque
   tâche quotidienne. Les surfaces d'administration gardent la notice complète,
   la page Abonnement porte son propre état sans doublon global, et le mobile
   reste strictement inchangé dans ce lot. */
@media (min-width: 901px) {
  body:not(:has(.workspace-management-menu > summary[aria-current="page"]))
    main > .notice:not(.notice--warning) {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-control);
    padding: var(--space-1) var(--space-2);
    background: transparent;
    box-shadow: none;
    color: var(--color-muted);
    font-size: var(--typography-size-meta);
    line-height: 1.35;
  }

  body:not(:has(.workspace-management-menu > summary[aria-current="page"]))
    main > .notice:not(.notice--warning) strong {
    color: var(--color-ink);
    font-weight: var(--typography-weight-semibold);
  }

  body:has(.subscription-page) main > .notice:not(.notice--warning) {
    display: none;
  }
}