/* =====================================================================
   Refonte — en-tête unique (système de design Doudapp Dense).
   Une seule barre : logo, sélecteur d'application, compte + mois de l'application,
   puis historique, avatar en icônes. Chargé après shell.css.
   ===================================================================== */

.topbar {
  height: 46px;
}

#screen-actions-toggle,
.mobile-account-menu { display: none; }
.menu-section-label { padding: 8px 12px 4px; color: var(--muted); font-size: 12px; font-weight: 600; }

@media (max-width: 700px) {
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']) .mobile-account-menu { display: block; }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar .topbar-right :is(#history-toggle, #user-toggle) { display: none !important; }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell #screen-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: none;
    align-self: center;
    border: 1px solid var(--border);
    border-radius: 50%;

  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar .topbar-right {
    gap: 0;
    padding-right: 8px;
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar-right > .topbar-pop { display: contents; }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar > .global-title {
    padding-inline: 8px;
    border-radius: var(--radius);
    background: transparent;
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title > .gt-chevron {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
  @media (hover: hover) {
html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title:hover > .gt-chevron { background: var(--hover-control); }
}
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title:is(:active, [aria-expanded='true']) > .gt-chevron { background: var(--pressed); }
}
/* Bloc logo + sélecteur : même largeur que le menu latéral, fermé par un filet à droite. */
.topbar .topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
  flex: none;
  border-right: 1px solid var(--topbar-line);
}
@media (min-width: 1051px) {
  .topbar .topbar-left {
    width: 210px;
  }
}
@media (min-width: 701px) and (max-width: 1050px) {
  .topbar .topbar-left {
    width: 170px;
  }
}
html .topbar .topbar-left > .topbar-tabs {
  margin-right: 0;
  margin: 0;
}
#history-toggle {
  border-left: 0;
}

/* Sélecteur d'application : discret, intégré à la barre (plus de pastille blanche). */
.topbar-tabs {
  align-self: center;
  height: auto;
  margin: 0 0 0 auto;
  border: 0;
  overflow: visible;
}
.topbar-switch {

  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 0 8px 0 16px;
  border: 0;
  border-right: 1px solid var(--topbar-line);
  background: #ffffff14;
  color: var(--topbar-text);
  font: 600 13px Poppins, Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.topbar-switch span:nth-child(2){
  width: 100%;
  text-align: left;
}
.topbar-switch .icon {
  font-size: 17px;
}
/* Nom d'application long : coupé avec « … » pour rester dans le bloc. */
.topbar .topbar-tabs {
  flex: 0 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
}
.topbar-tabs > .topbar-pop {
  width: 100%;
  height: 100%;
}
.topbar-switch {
  width: 100%;
  height: 100%;
}
.topbar-switch > span:not(.icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-switch > .icon:last-child {
  color: var(--topbar-muted);
}

.topbar-switch[aria-expanded='true'] {
  background: #ffffff24;
}
@media (hover: hover) {
.topbar-switch:hover {
  background: #ffffff24;
}
}
.topbar-tabs .topbar-menu {
  top: calc(100% + 6px);
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-menu, 0 8px 28px #0000002e);
  padding: 4px;
}
.topbar-menu .menu-item {
  border-radius: var(--radius-s, 6px);
}
.topbar-menu .menu-item.current {
  background: var(--pressed);
  font-weight: 600;
}

/* Contexte : compte suivi et mois. */
.topbar-context {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--topbar-text);
  font: 400 13px Poppins, Arial, sans-serif;
}
.topbar-context[hidden] {
  display: none;
}
.ctx-pill,
.ctx-month-label,
.ctx-icon,
.ctx-today {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: transparent;
  color: var(--topbar-text);
  font: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.ctx-pill {
  padding: 0 8px 0 10px;
  border-radius: var(--radius-s, 6px);
  background: #ffffff14;
  max-width: 340px;
}
.ctx-pill strong {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ctx-kind {
  font-size: 12px;
  color: var(--topbar-muted);
}
.ctx-pill > .icon,
.ctx-month-label .icon,
.ctx-icon .icon {
  font-size: 17px;
}
.ctx-pill > .icon:last-child {
  color: var(--topbar-muted);
}
.ctx-title {
  font-weight: 600;
  font-size: 14px;
  padding-left: 4px;
}
.ctx-month-nav {
  display: inline-flex;
  align-items: center;
  height: 30px;
  border-radius: var(--radius-s, 6px);
  background: #ffffff14;
}
.ctx-icon {
  width: 30px;
  justify-content: center;
  border-radius: var(--radius-s, 6px);
}
.ctx-month-label {
  width: 160px;
  justify-content: space-between;
  padding: 0 8px;
  font-weight: 600;
  border-radius: var(--radius-s, 6px);
}
.ctx-month-label .icon {
  color: var(--topbar-muted);
}
/* Le libellé d'une période peut contenir deux numéros de semaine ISO. */
.ctx-month-label[data-ctx-open='week'] {
  width: max-content;
  min-width: 200px;
}
.ctx-month-nav:has([data-ctx-open='week']),
.ctx-month-nav:has([data-ctx-open='week']) > :is(.topbar-pop, .ctx-icon) {
  flex-shrink: 0;
}
.ctx-today {
  padding: 0 10px 0 8px;
  border-radius: var(--radius-s, 6px);
  background: #ffffff1a;
  color: var(--topbar-text);
  font-size: 12px;
  font-weight: 600;
}
.ctx-today .icon {
  font-size: 16px;
}

.ctx-pill[aria-expanded='true'],
.ctx-month-label[aria-expanded='true']{
  background: #ffffff24;
  color: var(--topbar-text);
}
@media (hover: hover) {
.ctx-pill:hover,
.ctx-icon:hover,
.ctx-month-label:hover,
.ctx-today:hover {
  background: #ffffff24;
  color: var(--topbar-text);
}
}
:is(.topbar-switch, .ctx-pill, .ctx-icon, .ctx-month-label, .ctx-today):focus-visible {
  outline: 2px solid var(--topbar-muted);
  outline-offset: 1px;
}

/* Menus du contexte. */
.ctx-menu {
  top: calc(100% + 8px);
  min-width: 240px;
  padding: 4px;
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-menu, 0 8px 28px #0000002e);
  color: var(--text);
}
.ctx-menu-label {
  padding: 8px 10px 4px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ctx-menu .menu-item {
  min-height: 34px;
}
.ctx-menu .menu-item > .icon:last-child {
  margin-left: auto;
  color: var(--blue);
}
.ctx-item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.ctx-item-text small {
  font-size: 12px;
  color: var(--muted);
}
.ctx-month-menu {
  min-width: 0;
  width: 248px;
  padding: 8px;
}
/* Année et grille des mois : composant MonthPicker, dans shared/ui.css. */

/* À droite : historique, avatar en icônes seules. */
.topbar-label,
.topbar-user-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.topbar-right .topbar-button {
  padding: 0 13px;
}

/* Date et heure : discrètes, juste avant les icônes. */
.topbar .app-clock {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  color: var(--topbar-muted);
  font: 400 12px Poppins, Arial, sans-serif;
  white-space: nowrap;
}
.topbar .app-clock .clock-date {
  font-size: 12px;
}
.topbar .app-clock .clock-time {
  padding: 2px 7px;
  border-radius: var(--radius-s, 6px);
  background: #ffffff14;
  color: var(--topbar-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .topbar .app-clock .clock-date {
    display: none;
  }
}

/* Petit écran : la page garde sa propre bande compte + mois. */
@media (min-width: 701px) and (max-width: 767px) {
  .topbar-context {
    display: none !important;
  }
  .topbar-switch > span:not(.icon) {
    display: none;
  }
}

/* ---- Téléphone (≤ 700 px) : logo, sélecteur d'application, avatar (maquette mobile v2) ---- */
@media (max-width: 700px) {
  .topbar {
    height: 56px;
  }
  .topbar .topbar-left {
    width: auto;
    padding: 0 4px 0 14px;
    border-right: 0;
  }
  .topbar .app-clock,
  #history-toggle,
  .topbar-context {
    display: none !important;
  }
  .topbar-context {
    padding: 0 4px;
    gap: 8px;
  }
  .ctx-m-account {
    height: 40px;
    max-width: 100%;
    min-width: 0;
  }
  .ctx-m-account .ctx-kind {
    font-size: 12px;
  }
  .ctx-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html .topbar .topbar-right .topbar-button {
    width: 44px;
    padding: 0;
    justify-content: center;
    border: 0 !important;
  }
  .topbar-right .topbar-user {
    width: 52px;
  }
  /* En-tête : [sélecteur d'application ........] [cloche] [profil], sans blocs ni filets superposés. */
  html .topbar .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 0 0 8px;
  }
  html .topbar .topbar-left > .topbar-tabs,
  html .topbar .topbar-tabs > .topbar-pop {
    width: auto;
    max-width: 100%;
    height: 100%;
    align-items: center;
  }
  html .topbar .topbar-switch {
    width: auto;
    height: 44px;
    max-width: 100%;
    padding: 0 10px 0 6px;
    gap: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 15px;
  }
  @media (hover: hover) {
html .topbar .topbar-switch:is(:hover, [aria-expanded='true']) {
    background: #ffffff14;
  }
}
  html .topbar .topbar-switch:active {
    background: #ffffff24;
  }
  html .topbar .topbar-switch > span:not(.icon) {
    width: auto;
    flex: 0 1 auto;
  }
  .topbar-right .user-avatar {
    width: 30px;
    height: 30px;
  }
}

/* Téléphone : iOS teinte la zone sous l'heure avec le fond de la page à son bord haut. Le fond du corps de page prend donc la couleur
   de l'en-tête, et la zone de contenu garde son propre fond (comme en mode sombre, où les deux étaient déjà proches). */
@media (max-width: 700px) {
  html[data-design='doudapp'] body {
    background: var(--topbar);
  }
  html[data-design='doudapp'] .shell-body {
    background: var(--app-background);
  }
}

/* Notification globale (toast) : en haut à droite sous l'en-tête, couleur selon le type. */
html .shell-toast {
  position: fixed;
  top: 58px;
  right: 14px;
  left: auto;
  bottom: auto;
  transform: none;
  max-width: min(420px, calc(100vw - 28px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 14px;
  border: 0;
  border-radius: var(--radius, 8px);
  background: var(--toast-info);
  color: #fff;
  font: 600 14px Poppins, Arial, sans-serif;
  box-shadow: 0 10px 30px #00000040;
  z-index: 200;
  animation: toast-in 0.25s ease;
  transition: opacity 0.4s, transform 0.4s;
  touch-action: none; /* glisser pour écarter */
  cursor: pointer;
}
html .shell-toast .icon {
  flex: none;
  font-size: 22px;
}
html .shell-toast.toast-success {
  background: var(--toast-success);
}
html .shell-toast.toast-error {
  background: var(--toast-error);
}
html .shell-toast.toast-info {
  background: var(--toast-info);
}
html .shell-toast.out {
  opacity: 0;
  transform: translateX(16px);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
}
@media (max-width: 700px) {
  html .shell-toast {
    top: 66px;
    right: 10px;
    left: 10px;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html .shell-toast {
    animation: none;
    transition: opacity 0.2s;
  }
}

/* Téléphone : le compte et la page se choisissent en bas de l'écran ; l'en-tête garde l'application.
   Les menus de l'en-tête (applications, actions, profil) prennent toute la largeur de l'écran. */
@media (max-width: 700px) {
  .topbar .topbar-left {
    flex: 1 1 auto;
    min-width: 0;
  }
  html .topbar .topbar-left > .topbar-tabs {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: 4px;
    margin-right: auto;
  }
  .topbar-switch {
    height: 40px;
    padding: 0 10px 0 12px;
    font-size: 14px;
  }
  .topbar-switch .icon {
    font-size: 19px;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) {
    position: fixed !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

  }
  /* Feuilles du haut : en-tête fixe, corps défilant et poignée. */
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex;
    flex-direction: column;
    max-height: 88dvh;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-top: env(safe-area-inset-top) solid var(--app-background);
    border-radius: 0 0 18px 18px;
    background: var(--app-background);
    animation: shell-sheet-down 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 70;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu)[hidden] {
    display: none;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > :is(.menu-head, .sheet-head) {
    flex: none;
    background: var(--app-background);
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > .sheet-head {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 18px 4px;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > .sheet-head h2 {
    margin: 0;
    font: 700 17px Poppins, Arial, sans-serif;
    color: var(--text);
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > .sheet-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 0 0 18px 18px;
    background: var(--paper);
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > .sheet-grab {
    display: block;
    position: relative;
    flex: none;
    height: 36px;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) > .sheet-grab::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--sheet-grab-width);
    height: var(--sheet-grab-height);
    border-radius: var(--sheet-grab-radius);
    background: var(--border);
  }
  /* Lignes : même rendu et mêmes états que les lignes des feuilles du bas (.m-acc) :
     pleine largeur, sans coins arrondis, fond « pressed » à l'appui et pour l'élément actif. */
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) {
    padding-left: 0;
    padding-right: 0;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) .menu-item {
    padding: 8px 18px;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) .menu-item:is(.current, [aria-checked='true']) {
    background: var(--pressed);
    box-shadow: none;
  }
  /* Effet « écran actif » des feuilles du bas (.m-acc-ic) : icône dans une tuile arrondie,
     tuile pleine couleur d'accent pour l'écran, l'application ou le choix en cours. */
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) .menu-item {
    gap: 12px;
    font-weight: 600;
  }
  html .topbar :is(#app-switch-menu, #shell-user-menu) .menu-item > .icon:first-child {
    width: 36px;
    height: 36px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--hover-control);
    color: var(--blue);
    font-size: 20px;
  }
  html .topbar :is(#app-switch-menu, #shell-user-menu) .menu-item:is(.current, [aria-checked='true']) > .icon:first-child {
    background: var(--accent);
    color: var(--on-accent, #fff);
  }
  /* En-tête : l'application affichée porte la même tuile d'accent. */
  html .topbar .topbar-switch > .icon:first-child {
    width: 32px;
    height: 32px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent, #fff);
    font-size: 20px;
  }
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) .menu-item {
    min-height: 52px;
  }
}
/* Découpage des menus du haut en feuille (posé par shell.js) : sans effet sur grand écran. */
.sheet-body {
  display: contents;
}
.sheet-grab,
.sheet-head {
  display: none;
}
/* Voile des feuilles du haut : un vrai élément, car un clic dans l'application (iframe) n'atteint pas la coque. */
.sheet-backdrop {
  display: none;
}
@media (max-width: 700px) {
  html .topbar.sheet-open {
    z-index: 60;
  }
  html .topbar .sheet-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: color-mix(in srgb, var(--scrim) 50%, transparent);
    animation: m-fade-in 0.2s ease;
  }
}
@keyframes shell-sheet-up {
  to {
    transform: translateY(-100%);
  }
}
@keyframes shell-fade-out {
  to {
    opacity: 0;
  }
}
@media (max-width: 700px) {
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu).sheet-closing {
    animation: shell-sheet-up 0.2s ease forwards;
    pointer-events: none;
  }
  html .topbar .sheet-backdrop.sheet-closing {
    animation: shell-fade-out 0.2s ease forwards;
  }
}
@media (prefers-reduced-motion: reduce) {
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu).sheet-closing,
  html .topbar .sheet-backdrop.sheet-closing {
    animation: none !important;
  }
}
@keyframes shell-sheet-down {
  from {
    transform: translateY(-100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) {
    animation: none !important;
  }
}

/* Pas de zoom au double appui sur téléphone : les appuis sont traités tout de suite (le pincement reste possible). */
html,
body,
button,
a,
input,
select,
textarea,
label,
[role='button'] {
  touch-action: manipulation;
}

/* Barre du mois : flèches plus visibles, « Ce mois-ci » grisé quand on y est déjà. */
.ctx-icon {
  background: #ffffff1f;
}
.ctx-icon .icon {
  font-size: 20px;
  color: var(--topbar-text);
}
.ctx-month-nav {
  gap: 2px;
}
.ctx-today:disabled {
  opacity: 0.45;
  cursor: default;
  background: #ffffff0f;
}
@media (hover: hover) {
.ctx-today:disabled:hover {
  background: #ffffff0f;
}
}

/* Rail d'applications et outils globaux au-dessus du contenu. */
.app-rail[hidden], .app-nav-toggle[hidden] { display: none !important; }
.app-rail { display: none; }
html.rail-layout { --shell-navigation-offset: 0px; }
html.rail-layout .shell {
  display: grid;
  grid-template-columns: var(--app-rail-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  position: relative;
}
html.rail-layout .app-rail {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m, 8px);
  padding: var(--gap-m, 8px) 0;
  background: var(--app-rail-background);
  border-right: 1px solid var(--nav-line);
  z-index: 40;
}
.rail-apps {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-m, 8px);
  overflow-y: auto;
}
.rail-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--gap-m, 8px); }
.rail-link {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-control-size);
  height: var(--rail-control-size);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--nav-text);
  text-decoration: none;
}
.rail-link[hidden] { display: none; }
.rail-link .icon { font-size: 24px; }
@media (hover: hover) {
a.rail-link:hover { background: var(--nav-hover); }
}
a.rail-link:active { background: var(--nav-pressed); }
/* Application affichée : fond un peu plus clair que le rail, sans bordure, texte clair — même rendu dans tous les modes et toutes les palettes. */
.rail-link:is(.active, [aria-current='page']) {
  background: var(--nav-active);
  border-color: transparent;
  color: var(--nav-text);
  --icon-fill: 1;
}
.rail-link:focus-visible { outline: 2px solid var(--nav-text); outline-offset: 2px; }
.rail-brand img { width: 30px; height: 30px; }
.rail-brand .icon.app-icon { font-size: 28px; }
html.rail-layout .shell-body { grid-column: 2; grid-row: 1; min-width: 0; }
html.rail-layout .topbar {
  position: absolute;
  left: calc(var(--app-rail-width) + var(--shell-navigation-offset));
  right: 0;
  top: 0;
  height: var(--shell-toolbar-height);
  background: var(--topbar);
  color: var(--topbar-text);
  border-color: var(--topbar-line);
}
html.rail-layout .topbar .topbar-left { display: none; }
html.rail-layout .topbar-right { margin-left: auto; }
html.rail-layout .topbar .topbar-context { padding-left: 8px; gap: 6px; }
html.rail-layout .topbar :is(.topbar-button, .ctx-icon, .ctx-month-label, .ctx-today) {
  color: var(--topbar-text);
  background: transparent;
  border: 0;
}
@media (hover: hover) {
html.rail-layout .topbar :is(.topbar-button, .ctx-icon, .ctx-month-label, .ctx-today):hover { background: var(--nav-hover); }
}
html.rail-layout .topbar :is(.topbar-button, .ctx-icon, .ctx-month-label, .ctx-today):active { background: var(--nav-pressed); }
html.rail-layout .topbar .ctx-icon .icon { color: var(--topbar-text); }
/* Fond des boutons du mois : teinte du texte de l'en-tête (ressort sur en-tête clair comme sombre). */
html.rail-layout .topbar .ctx-month-nav { background: color-mix(in srgb, var(--topbar-text) 12%, transparent); border: 1px solid var(--topbar-line); }
html.rail-layout .topbar .ctx-today { border: 1px solid var(--topbar-line); background: color-mix(in srgb, var(--topbar-text) 12%, transparent); }
html.rail-layout .topbar .app-clock .clock-time { background: var(--nav-hover); color: var(--topbar-text); }
html.rail-layout .topbar .app-clock { padding: 0 8px; gap: 4px; }
html.rail-layout .topbar .topbar-button { width: var(--rail-control-size); padding: 0; justify-content: center; }
html.rail-layout .app-nav-toggle { display: inline-flex; }
html.rail-layout #rail-profile .topbar-user {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--rail-control-size);
  height: var(--rail-control-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  color: var(--nav-text);
}
@media (hover: hover) {
html.rail-layout #rail-profile .topbar-user:hover { background: var(--nav-hover); }
}
html.rail-layout #rail-profile .user-avatar { width: 32px; height: 32px; }
html.rail-layout #shell-user-menu {
  position: fixed;
  left: calc(var(--app-rail-width) + 8px);
  right: auto;
  top: auto;
  bottom: 8px;
  width: 280px;
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
}
html.rail-layout .shell-page { padding-top: calc(var(--shell-toolbar-height) + 16px); }
@media (min-width: 1101px) {
  html.rail-layout.has-app-navigation { --shell-navigation-offset: var(--app-navigation-width); }
}
html.rail-layout .history-panel { padding-top: var(--shell-toolbar-height); }

/* Menu du profil : « Mode d'affichage » et « Palette » sont des rangées repliées ; le choix actif porte une coche à droite (pas de fond, pas de bordure). */
.menu-expand-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
  text-align: left;
}
.menu-expand .menu-value {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-expand .menu-chevron {
  flex: none;
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
}
/* Grand écran : la liste s'ouvre sur le côté, le chevron pointe vers la droite (ouverte : il reste, la liste est visible). */
.menu-expand {
  min-height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.menu-expand[aria-expanded='true'] .menu-chevron {
  color: var(--blue);
}
/* Téléphone : accordéon, le chevron pointe vers le bas, puis vers le haut quand la rangée est dépliée. */
@media (max-width: 700px) {
  .menu-expand .menu-chevron {
    transform: rotate(90deg);
  }
  .menu-expand[aria-expanded='true'] .menu-chevron {
    transform: rotate(-90deg);
  }
}
.menu-group {
  padding: 2px 0 4px 12px;
}
.menu-group .menu-item .menu-check {
  margin-left: auto;
  color: var(--blue);
}
html[data-design='doudapp'] .menu-group .menu-item[aria-checked='true'] {
  background: transparent;
  box-shadow: none;
}
@media (max-width: 700px) {
  html .topbar #shell-user-menu .menu-group {
    padding-left: 0;
  }
  html .topbar #shell-user-menu .menu-group .menu-item[aria-checked='true'] {
    background: transparent;
  }
  html .topbar #shell-user-menu .menu-group .menu-item[aria-checked='true'] > .icon:first-child {
    background: var(--hover-control);
    color: var(--blue);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu-expand .menu-chevron {
    transition: none;
  }
}

/* Fenêtre ouverte dans l'application : l'en-tête et le rail (hors du cadre) sont assombris comme le contenu et deviennent inactifs (attribut inert, posé par shell.js). Un filtre n'a aucun effet sur la mise en page. */
html.app-modal-open .topbar,
html.app-modal-open #app-rail {
  filter: brightness(0.6);
}

/* Icônes d'application (SVG) : ni tuile ni fond supplémentaire autour, l'icône porte déjà sa tuile. */
.rail-link .icon.app-icon {
  font-size: 30px;
}
@media (max-width: 700px) {
  html .topbar .topbar-switch > .icon.app-icon:first-child,
  html .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu) .menu-item > .icon.app-icon:first-child {
    background: transparent;
    font-size: 28px;
  }
}

/* Palette propre à une application : sélecteur sur sa carte, et note dans le menu du profil. */
.app-palette {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
}
.app-palette select {
  min-height: var(--control-height, 32px);
  max-width: 190px;
}
.menu-note {
  margin: 4px 14px 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Pages de la coque : apparition progressive des blocs. */
.shell-page > * {
  animation: shell-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.shell-page > :nth-child(2) {
  animation-delay: 0.07s;
}
.shell-page > :nth-child(3) {
  animation-delay: 0.14s;
}
.shell-page > :nth-child(n + 4) {
  animation-delay: 0.21s;
}
@keyframes shell-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-page > * {
    animation: none;
  }
}

/* Entrée d'une application : l'en-tête entier (fond compris) reste invisible pendant le chargement (.is-held),
   puis apparaît en fondu progressif après le menu latéral. */
.topbar.is-held {
  opacity: 0;
}
.topbar.is-rising {
  animation: shell-bar-in 0.6s ease 0.25s both;
}
@keyframes shell-bar-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar.is-held {
    opacity: 1;
  }
  .topbar.is-rising {
    animation: none;
  }
}

/* Écran de chargement (shell.js, beginLoading) : fond de la palette, logo au centre ; il couvre l'en-tête et le contenu, comme un seul bloc,
   le rail (z-index 40) reste visible et inchangé. */
.shell-loader {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--app-background);
  color: var(--muted);
}
html.rail-layout .shell-loader {
  left: var(--app-rail-width);
}
/* Logo du chargement (connexion) : jusqu'à environ 190 px, borné à 13 % de la plus petite dimension de l'écran. */
/* html[data-design] : la règle générale « html[data-design='doudapp'] .icon { font-size: 18px } » est plus spécifique qu'un simple sélecteur de classe. */
html[data-design='doudapp'] .shell-loader .icon {
  font-size: min(146px, 13vmin);
  animation: shell-loader-pulse 1.4s ease-in-out infinite;
}
.shell-loader-name {
  font-size: 16px;
  font-weight: 600;
}
/* Barre de progression : sa largeur suit --p (0 à 100, posé par shell.js) ; pleine à la sortie. */
.shell-loader-bar {
  position: relative;
  width: 160px;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--border);
}
.shell-loader-bar::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--p, 0) * 1%);
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.25s ease-out;
}
.shell-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}
@keyframes shell-loader-pulse {
  50% {
    transform: scale(1.07);
    opacity: 0.85;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-loader .icon {
    animation: none;
  }
  .shell-loader-bar::before,
  .shell-loader.is-leaving {
    transition: none;
  }
}

/* Menu du profil : « Mode d'affichage » et les palettes s'ouvrent en liste déroulante sur le côté du menu (position fixe posée par shell.js,
   le menu défile). Sur téléphone, ce sont des accordéons. */
.menu-dropdown {
  position: relative;
}
.menu-dropdown > .menu-group {
  position: fixed;
  z-index: 80;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-menu);
}
.menu-dropdown > .menu-group[hidden] {
  display: none;
}
@media (max-width: 700px) {
  /* Téléphone : accordéon, la liste s'insère sous sa rangée et rallonge le menu. */
  html .topbar #shell-user-menu .menu-dropdown > .menu-group {
    position: static;
    width: auto;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (max-width: 700px) {
  /* Accordéon ouvert : toute la rangée et sa liste forment un bloc teinté ;
     la rangée d'en-tête est un cran plus marquée et la liste est en retrait. */
  html .topbar #shell-user-menu .menu-dropdown:has(> .menu-expand[aria-expanded='true']) {
    background: var(--hover-surface);
  }
  html .topbar #shell-user-menu .menu-expand[aria-expanded='true'] {
    background: var(--hover-control);
    font-weight: 600;
  }
  html .topbar #shell-user-menu .menu-expand[aria-expanded='true'] .menu-chevron {
    color: var(--blue);
  }
  html .topbar #shell-user-menu .menu-dropdown > .menu-group:not([hidden]) {
    padding-left: 14px;
    border-top: 1px solid var(--border);
  }
}

/* Administration, onglet Données : filtres et actions de ligne. */
.admin-data-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Fond qui respire pendant un chargement : des dégradés de la couleur d'accent partent des coins, deux diagonales qui s'allument tour à tour.
   Sur l'écran de chargement (connexion), et dans la zone de contenu quand un changement d'application se fait attendre plus de 0,3 s. */
.shell-loader {
  isolation: isolate;
  overflow: hidden;
}
.shell-breath {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
  animation: shell-breath-in 0.6s ease both;
}
.shell-loader::before,
.shell-loader::after,
.shell-breath::before,
.shell-breath::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  animation: shell-breathe 3.2s ease-in-out infinite;
}
/* Deux diagonales de tailles différentes (jamais symétriques) ; chacune respire à son propre rythme (périodes de 5,3 s et 3,7 s,
   départs décalés), sans lien avec la durée d'ouverture ou de fermeture de l'écran. */
.shell-loader::before,
.shell-breath::before {
  background:
    radial-gradient(ellipse 58% 68% at 0% 0%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 100%),
    radial-gradient(ellipse 32% 36% at 100% 100%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 100%);
  animation-duration: 5.3s;
  animation-delay: -1.2s;
}
.shell-loader::after,
.shell-breath::after {
  background:
    radial-gradient(ellipse 27% 30% at 100% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 100%),
    radial-gradient(ellipse 46% 55% at 0% 100%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 100%);
  animation-duration: 3.7s;
  animation-delay: -2.9s;
}
@keyframes shell-breathe {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 1;
  }
}
@keyframes shell-breath-in {
  from {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-breath {
    animation: none;
  }
  .shell-loader::before,
  .shell-loader::after,
  .shell-breath::before,
  .shell-breath::after {
    animation: none;
    opacity: 0.5;
  }
}

/* Attente d'un changement d'application : le logo de l'écran demandé flotte doucement au centre du halo.
   Le dessin de l'icône n'occupe qu'environ 60 % de son carré, et la tuile prend la couleur du halo : la taille tient compte de cette marge. */
.shell-breath {
  display: flex;
  align-items: center;
  justify-content: center;
}
html[data-design='doudapp'] .shell-breath .icon {
  font-size: min(95px, 11.5vmin);
  animation: shell-float 3.4s ease-in-out infinite;
}
@keyframes shell-float {
  0%,
  100% {
    transform: translateY(8px);
  }
  50% {
    transform: translateY(-8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-breath .icon {
    animation: none;
  }
}

/* Sortie du fond qui respire et de son logo : fondu progressif de 0,9 s. C'est une animation et non une transition : l'animation d'entrée
   (fill-mode both) maintiendrait l'opacité à 1 et empêcherait toute transition. */
.shell-breath.is-leaving {
  animation: shell-breath-out 0.9s ease-in-out forwards;
}
@keyframes shell-breath-out {
  to {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shell-breath.is-leaving {
    animation: none;
    opacity: 0;
  }
}

/* Téléphone : sélecteur d'application dans l'en-tête ; seule la barre de l'application reste en bas. */
.global-title {
  display: none;
}
@media (max-width: 700px) {
  html[data-design='doudapp'].mobile-shell body,
  html.mobile-shell .shell {
    background: var(--app-background);
  }
  html[data-design='doudapp'].mobile-shell {
    --shell-header-background: var(--app-background);
    background-color: var(--shell-header-background);
  }
  html[data-design='doudapp'].mobile-shell body {
    background-color: var(--shell-header-background);
  }
  /* En-tête fixé en haut (essai contre le flou de bord que iOS applique au contenu qui passe sous la barre d'état, absent quand un élément fixe tient le bord
     du haut, comme le bandeau « Hors ligne ») : fond plein, et la coque se décale de sa hauteur. */
  html.mobile-shell {
    --header-h: 56px;
  }
  html.mobile-shell .shell {
    box-sizing: border-box;
    padding: calc(env(safe-area-inset-top) + var(--header-h)) 0 0;
  }
  html.mobile-shell .topbar {
    position: fixed;
    top: env(safe-area-inset-top);
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--app-background);
  }
  html.is-offline.mobile-shell .topbar {
    top: calc(env(safe-area-inset-top) + var(--offline-banner-h));
  }
  html.shell-focus.mobile-shell .shell {
    padding-top: calc(env(safe-area-inset-top) + var(--focus-header-height));
  }
  /* En-tête : nom de l'application à gauche, boutons ronds à droite. */
  html.mobile-shell .topbar {
    border: 0;
    box-shadow: none;
    color: var(--text);
  }
  html.mobile-shell .global-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 0 6px 0 16px;
    align-self: center;
    min-height: 44px;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    text-align: left;
    cursor: pointer;
  }
  
  html.mobile-shell .global-title[aria-expanded='true'] {
    background: var(--hover-control);
  }
@media (hover: hover) {
html.mobile-shell .global-title:hover {
    background: var(--hover-control);
  }
}
  html.mobile-shell .global-title:focus-visible {
    outline: 2px solid var(--field-focus);
    outline-offset: -3px;
  }
  html.mobile-shell .global-title > .gt-chevron {
    margin-left: auto;
    font-size: 18px;
    color: var(--muted);
  }
  html.mobile-shell .global-title > .gt-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  html.mobile-shell .global-title .gt-sub {
    color: var(--muted);
  }
  html.mobile-shell .global-title .gt-name,
  html.mobile-shell .global-title .gt-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.mobile-shell .global-title > span:not(.icon) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html[data-design='doudapp'].mobile-shell .global-title > .icon:not(.gt-chevron) {
    flex: none;
    font-size: 28px;
  }
  html.mobile-shell .topbar .topbar-left {
    flex: 0 0 0;
    min-width: 0;
    padding: 0;
  }
  html.mobile-shell .topbar-right {
    gap: 8px;
    padding-right: 10px;
    align-items: center;
  }
  html.mobile-shell #history-toggle:not([hidden]) {
    display: inline-flex !important;
  }
  /* Historique : boutons secondaires (comme .btn), ronds. Le profil : l'image seule, comme sur grand écran. */
  html.mobile-shell .topbar .topbar-right :is(#history-toggle, #user-toggle) {
    width: 40px !important;
    height: 40px;
    padding: 0;
    align-self: center;
    justify-content: center;
    border-radius: 50%;
  }
  html.mobile-shell .topbar .topbar-right :is(#history-toggle) {
    border: 1px solid var(--border) !important;
    background: var(--paper);
    color: var(--text);
  }
  @media (hover: hover) {
html.mobile-shell .topbar .topbar-right :is(#history-toggle):hover {
    background: var(--hover-control);
  }
}
  html.mobile-shell .topbar .topbar-right :is(#history-toggle):active {
    background: var(--pressed);
  }
  html.mobile-shell .topbar .topbar-right #user-toggle {
    border: 0 !important;
    background: transparent;
    box-shadow: none;
  }
  html.mobile-shell .topbar .topbar-right #user-toggle .user-avatar {
    width: 40px;
    height: 40px;
  }
  /* Logo de l'application dans l'en-tête : en mode clair, comme dans les menus, il garde sa tuile (sans elle, il disparaît sur le fond clair). */
  html[data-design='doudapp']:not([data-theme='dark']) .topbar .global-title {
    --app-icon-tile: var(--app-icon);
  }
  /* Le déclencheur desktop reste présent pour porter le menu, sans arrêt clavier sur téléphone. */
  html.mobile-shell .topbar #app-switch {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
  }
  html.mobile-shell .topbar .topbar-pop:has(#app-switch) {
    width: 0;
    min-width: 0;
    padding: 0;
  }
  /* Le halo de changement d'application couvre tout l'écran. */
  html.mobile-shell .shell-breath {
    position: fixed;
    inset: 0;
    z-index: 30;
  }
  /* Menu du profil : l'avatar de l'en-tête est à droite, celui du menu aussi. */
  html.mobile-shell .topbar #shell-user-menu .menu-head {
    flex-direction: row-reverse;
  }
  html.mobile-shell .topbar #shell-user-menu .menu-head-text {
    flex: 1;
    min-width: 0;
  }
  html.mobile-shell .shell-toast {
    top: calc(64px + env(safe-area-inset-top));
  }
}
/* Le nom de l’application occupe seul l’en-tête mobile. */
@layer typography-trial {
  @media (max-width: 700px) {
    html.mobile-shell .global-title {
      font-size: 20px !important;
      line-height: 1.2 !important;
    }
    html.mobile-shell .global-title .gt-sub {
      font-size: 12px !important;
      font-weight: 400 !important;
      line-height: 1.3 !important;
    }
  }
}
/* Texte de présentation des connexions. */
.c-app-card > p {
  margin: 0;
  padding: 10px 16px 0;
}

/* Mode courses (l'application demande « shell-focus ») : sur téléphone, plus d'en-tête ni de barre du bas de la coque, la liste occupe l'écran. */
html:is([data-shell-app='groceries'], [data-shell-app='recipes']).shell-focus :is(.topbar, .app-rail) { display: none !important; }
html:is([data-shell-app='groceries'], [data-shell-app='recipes']).shell-focus .shell { grid-template-columns: minmax(0, 1fr); }
html:is([data-shell-app='groceries'], [data-shell-app='recipes']).shell-focus .shell-body { grid-column: 1; }
.shell-focus-controls { display: none; }
@media (max-width: 700px) {
  html.shell-focus.mobile-shell {
    --shell-focus-background: var(--app-background);
    --focus-header-height: calc(var(--control-height) + 16px);
  }
  /* Réutiliser le vrai header fixe, avec uniquement le bouton de sortie du mode. */
  html:is([data-shell-app='groceries'], [data-shell-app='recipes']).shell-focus.mobile-shell .topbar {
    display: flex !important;
    height: var(--focus-header-height);
    padding: 8px;
    box-sizing: border-box;
    background: var(--app-background);
  }
  html.shell-focus.mobile-shell .topbar > :not(.shell-focus-controls),
  html.shell-focus.mobile-shell .topbar::before {
    display: none !important;
  }
  html.shell-focus.mobile-shell .shell-focus-controls { display: flex; width: 100%; }
  html.shell-focus.mobile-shell .shell-focus-controls > .focus-exit { width: 100%; height: var(--control-height); justify-content: center; }
  html.shell-focus.mobile-shell .shell {
    padding-bottom: 0;
  }
}

/* Bandeau « Hors ligne » : une bande rouge à texte blanc tout en haut, au-dessus de l'en-tête (sous l'heure du téléphone), qui descend la page de sa hauteur. */
:root {
  --offline-banner-h: 28px;
}
.offline-banner {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  z-index: 95;
  height: var(--offline-banner-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  background: var(--danger-solid);
  color: var(--on-accent);
}
.offline-banner[hidden] {
  display: none;
}
/* Retour du réseau : même bande, en vert, pendant quelques secondes. */
.offline-banner.is-online {
  background: var(--green);
}
.offline-banner .icon {
  flex: none;
  font-size: 16px;
}
.offline-banner span:not(.icon) {
  white-space: nowrap; /* messages courts, jamais coupés ni remplacés par « … » */
}
html.is-offline .shell {
  box-sizing: border-box;
  padding-top: calc(env(safe-area-inset-top) + var(--offline-banner-h));
}
/* Bureau : l'en-tête est positionné par rapport à la coque, il descend avec le bandeau. */
html.rail-layout.is-offline .topbar {
  top: var(--offline-banner-h);
}
@media (max-width: 700px) {
  html.is-offline.mobile-shell .shell {
    padding-top: calc(env(safe-area-inset-top) + var(--offline-banner-h) + var(--header-h));
  }
  html.is-offline.shell-focus.mobile-shell .shell {
    padding-top: calc(env(safe-area-inset-top) + var(--offline-banner-h) + var(--focus-header-height));
  }
}
@layer typography-trial {
  .offline-banner {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
  }
}

/* Historique sur téléphone : panneau déroulant comme les actions et le profil (descend du haut, voile, poignée en bas). */
.history-panel > .sheet-grab,
.history-backdrop {
  display: none;
}
@media (max-width: 700px) {
  .history-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: auto;
    max-height: min(85dvh, calc(100dvh - env(safe-area-inset-bottom) - 48px));
    z-index: 70;
    border: 0;
    border-top: env(safe-area-inset-top) solid var(--app-background);
    border-radius: 0 0 18px 18px;
    background: var(--app-background);
    box-shadow: 0 8px 30px #0004;
    animation: shell-sheet-down 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
  }

  .history-panel.sheet-closing {
    animation: shell-sheet-up 0.2s ease forwards;
    pointer-events: none;
  }
  /* Panneau déroulant : on le ferme en glissant, en touchant le voile ou par le bouton de l'en-tête ; pas de croix. */
  .history-panel .history-close {
    display: none;
  }
  .history-panel > .history-list {
    background: var(--paper);
  }
  .history-panel > .sheet-grab {
    display: block;
    position: relative;
    flex: none;
    height: 36px;
  }
  .history-panel > .sheet-grab::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--sheet-grab-width, 40px);
    height: var(--sheet-grab-height, 4px);
    border-radius: var(--sheet-grab-radius, 2px);
    background: var(--border);
  }
  .history-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 65;
    background: color-mix(in srgb, var(--scrim) 50%, transparent);
    animation: m-fade-in 0.2s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .history-panel {
    animation: none !important;
  }
}

/* Bandeau de réseau affiché : les panneaux qui descendent du haut (actions, profil, historique) commencent sous le bandeau, qui tient lieu de marge de sécurité. */
@media (max-width: 700px) {
  html.is-offline .topbar :is(#app-switch-menu, #screen-actions-menu, #shell-user-menu),
  html.is-offline .history-panel {
    top: calc(env(safe-area-inset-top) + var(--offline-banner-h)) !important;
    border-top: 0;
    max-height: calc(100dvh - env(safe-area-inset-top) - var(--offline-banner-h) - 12px);
  }
}

/* Profil : appareils connectés. */
.profile-sessions {
  display: grid;
  gap: 8px;
}
.session-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.session-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.session-item:last-child {
  border-bottom: 0;
}
.session-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.session-text small {
  color: var(--muted);
}
@layer typography-trial {
  .session-text small {
    font-size: 12px !important;
    font-weight: 400 !important;
  }
}

/* Administration, onglet Sécurité : journal de connexion ; profil : activité récente. */
.admin-subtitle {
  margin: 20px 0 4px;
}
.admin-log-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
}
.security-log {
  display: grid;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.security-entry {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.security-when {
  flex: none;
  min-width: 96px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.security-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.security-text small {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.security-entry.is-alert strong,
.session-item.is-alert strong {
  color: var(--red);
}
@layer typography-trial {
  .security-when,
  .security-text small {
    font-size: 12px !important;
    font-weight: 400 !important;
  }
}

/* Profil : double authentification. */
.twofa-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.twofa-steps {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 20px;
}
.twofa-key,
.backup-codes li {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
}
.backup-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 8px 0;
  padding: 12px;
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  background: var(--paper);
}

/* Administration : accessible depuis la barre latérale sur ordinateur, depuis le menu utilisateur sur téléphone. */
html.rail-layout .menu-item-admin { display: none; }

/* Le logo de la plateforme est une identité visuelle, sans action de navigation. */
.rail-brand { cursor: default; }

/* Budget mobile : en-tête foncé translucide, sans déplacer les feuilles. */
@media (max-width: 700px) {
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell {
    --shell-header-background: var(--shell-focus-background, var(--topbar));
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar {
    background: var(--shell-header-background);
    color: var(--topbar-text);
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--topbar) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    pointer-events: none;
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title {
    color: var(--topbar-text);
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title :is(.gt-sub, .gt-chevron) {
    color: var(--topbar-muted);
  }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell #screen-actions-toggle {
    color: var(--topbar-text);
    background: #ffffff12;
    border-color: transparent;
  }
  @media (hover: hover) {
html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell #screen-actions-toggle:hover,
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title:is(:hover, [aria-expanded='true']) > .gt-chevron {
    background: #ffffff24;
  }
}
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .global-title:focus-visible {
    outline-color: var(--topbar-text);
  }
}

/* Navigation explicite des web apps installées, sans geste horizontal personnalisé. */
.shell-screen-navigation:not([hidden]) {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
}
html .topbar .shell-screen-navigation .topbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
}
.shell-screen-navigation .topbar-button:disabled {
  opacity: 0.3;
  cursor: default;
}
html .topbar .shell-screen-navigation .topbar-button .icon {
  font-size: 32px;
}

/* Retour discret sur un clic tactile réel, sans fond rectangulaire ni déplacement. */
@keyframes header-tap-feedback {
  0%, 35% { opacity: 0.55; }
  100% { opacity: 1; }
}
@media (hover: none) {
  html .topbar button.header-tap {
    animation: header-tap-feedback 0.2s ease-out;
  }
  /* Le sélecteur est un seul bouton : l'icône, le nom et la flèche partagent le retour tactile. */
  html.mobile-shell .topbar > #global-title:is(.header-tap, [aria-expanded='true']) {
    background: color-mix(in srgb, var(--accent) 12%, var(--topbar));
    border-radius: var(--radius);
  }
  html.mobile-shell .topbar > #global-title > .gt-chevron {
    background: transparent;
  }
}
@media (hover: none) and (prefers-reduced-motion: reduce) {
  html .topbar button.header-tap {
    animation: none;
    opacity: 0.65;
  }
}

/* Actions dans la barre flottante ; avatar commun à Budget, Cuisine et Courses. */
@media (max-width: 700px) {
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar .topbar-right #screen-actions-toggle { display: none !important; }
  html:is([data-shell-app='budget'], [data-shell-app='recipes'], [data-shell-app='groceries']).mobile-shell .topbar .topbar-right #user-toggle { display: inline-flex !important; align-items: center; justify-content: center; }
}

/* Identité commune : nom d’application seul, dans la typographie des titres. */
@layer typography-trial.original-important {
  html .global-title .gt-name { font-family: 'Londrina Solid', sans-serif !important; font-size: 24px !important; font-weight: 900 !important; line-height: 1.1 !important; }
}

/* Le sélecteur d’applications reprend la typographie de leur nom dans l’en-tête. */
@layer typography-trial.original-important {
  html #app-switch-menu .app-switch-name { font-family: 'Londrina Solid', sans-serif !important; font-size: 22px !important; font-weight: 400 !important; }
}
/* L’historique reste accessible depuis le menu du profil. */
html body .topbar .topbar-right #history-toggle { display: none !important; }