/* =====================================================================
   shell.css : la coquille de la suite (barre à deux lignes, menus, Paramètres généraux,
   fenêtres, page d'un lien externe), au style du système de design.

   Repris de la maquette validée (docs/maquette-design.html, composants), avec le préfixe sh-
   pour ne jamais toucher aux classes du Carnet (.tab, .btn, .card, .field, .form… dans
   app.css). Règle : uniquement les jetons de tokens.css ; les seules valeurs écrites ici sont
   des dimensions de composants et l'épaisseur des traits.
   Le contenu des écrans du Carnet garde son apparence (app.css) : il s'affiche sous la barre.
   ===================================================================== */

/* ---------- Base de la coquille ---------- */
html {
  /* Le focus clavier ne passe jamais sous la barre collante (critère 2.4.11) */
  scroll-padding-top: calc(var(--h-topbar-1) + var(--h-topbar-2) + var(--space-sm));
}
[hidden] { display: none !important; }
.sh-bar, .sh-main, .sh-menu, .sh-backdrop, .sh-preview {
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-lh);
  font-weight: var(--body-md-weight);
  letter-spacing: normal;
  color: var(--ink);
}
.sh-bar *, .sh-main *, .sh-backdrop *, .sh-preview * { box-sizing: border-box; }
.sh-main h1, .sh-main h2, .sh-main h3, .sh-main h4, .sh-backdrop h2, .sh-backdrop h3 {
  font-family: var(--font-sans); letter-spacing: normal; margin: 0;
}
.sh-main p { margin: 0; }
.sh-main a:not(.sh-btn):not(.sh-chip), .sh-backdrop a:not(.sh-btn) { color: var(--link); }
.sh-main a:not(.sh-btn):not(.sh-chip):hover, .sh-backdrop a:not(.sh-btn):hover { color: var(--link-hover); }
.sh-bar :focus-visible, .sh-main :focus-visible, .sh-backdrop :focus-visible, .sh-preview :focus-visible {
  outline: var(--focus-outline); outline-offset: var(--focus-offset);
}
.sh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sh-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sh-ico-sm { width: 16px; height: 16px; }
.sh-ico-xs { width: 14px; height: 14px; }
.sh-num { font-variant-numeric: var(--num-tabular); }
.sh-muted { color: var(--ink-muted); }
.sh-caps { font-size: var(--caps-size); line-height: var(--caps-lh); font-weight: var(--caps-weight); letter-spacing: var(--caps-tracking); text-transform: uppercase; color: var(--ink-subtle); }
.sh-caption { font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: var(--caption-weight); color: var(--ink-muted); }
.sh-stack { display: grid; gap: var(--space-base); }
.sh-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.sh-spacer { flex: 1; }
/* Tout conteneur qui défile garde ses éléments « .sh-sr-only » (position absolue) à l'intérieur */
.sh-l2, .sh-table-wrap, .sh-dialog-body, .sh-menu { position: relative; }

/* ---------- Barre du haut ---------- */
.sh-bar { position: sticky; top: 0; z-index: var(--z-topbar); }
.sh-l1 {
  display: flex; align-items: stretch; height: var(--h-topbar-1);
  background: var(--brand); color: var(--brand-ink);
  padding: 0 var(--space-sm) 0 var(--space-md);
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
/* Contour couleur de texte : seulement pour ce qui est posé sur --brand. Les menus sont blancs. */
.sh-l1 :focus-visible { outline: var(--focus-outline-on-brand); outline-offset: -4px; }
.sh-l1 .sh-menu :focus-visible { outline: var(--focus-outline); outline-offset: -2px; }
.sh-l1-btn {
  display: flex; align-items: center; gap: var(--space-sm); min-height: var(--h-touch-min);
  padding: 0 var(--space-md); border: 0; background: transparent; color: inherit; cursor: pointer;
  font: var(--nav-weight) var(--nav-size)/var(--nav-lh) var(--font-sans); white-space: nowrap;
  text-decoration: none;
}
/* Survol : un trait sous le libellé (pas d'aplat) ; appui : fond éclairci */
.sh-l1-btn:hover { color: inherit; box-shadow: inset 0 -2px 0 var(--brand-ink); }
.sh-l1-btn:active { background: var(--brand-hover); }
.sh-l1-wrap { position: relative; display: flex; align-items: stretch; }
.sh-l1 > .sh-l1-wrap:first-child, .sh-site, .sh-site .sh-site-name { min-width: 0; flex: 0 1 auto; }
.sh-site { padding-left: var(--space-xs); font-weight: var(--fw-semibold); }
.sh-site.is-static { cursor: default; }
.sh-site.is-static:hover { box-shadow: none; }
.sh-site .sh-site-name { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.sh-logo {
  width: 36px; height: 36px; border-radius: var(--radius-pill); flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: var(--brand-ink); color: var(--brand);
  font: var(--fw-bold) var(--label-size)/1 var(--font-sans); letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 2.5px var(--brand-ink), inset 0 0 0 4px var(--brand);
}
.sh-logo-img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--canvas); }
.sh-sep { width: 1px; background: var(--brand-line); margin: var(--space-md) var(--space-xs); flex: none; }
/* Marque de la suite (« FullMoon ») : discrète, non cliquable, couleur du texte de la barre
   (--brand-ink, noir ou blanc selon le site, sans opacité : design §0 règle 7) ; disque plein =
   pleine lune. Légende 12 px en poids normal : elle ne se lit pas comme un côté (16 px semi-gras)
   et laisse la place au nom du site. */
.sh-moon { width: 10px; height: 10px; border-radius: var(--radius-pill); background: currentColor; flex: none; }
.sh-brand {
  display: flex; align-items: center; gap: var(--space-xs); flex: none; padding: 0 var(--space-sm);
  white-space: nowrap; font: var(--fw-regular) var(--caption-size)/var(--caption-lh) var(--font-sans);
  letter-spacing: 0.5px; color: inherit; cursor: default;
}
.sh-brand .sh-moon { width: 8px; height: 8px; }
.sh-sides { display: flex; align-items: stretch; flex: none; }
/* Côtés : le nom du module tel quel (Clautel | Caisse | Carnet), 16 px semi-gras, sans capitales */
.sh-side { position: relative; padding: 0 var(--space-base); }
.sh-side .sh-side-name { font-weight: var(--nav-active-weight); }
.sh-side[aria-current="true"] { background: var(--brand-selected); }
.sh-side[aria-current="true"]::after {
  content: ""; position: absolute; left: var(--space-sm); right: var(--space-sm); bottom: 0; height: 4px;
  background: var(--brand-ink); border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.sh-l1-right { margin-left: auto; display: flex; align-items: stretch; flex: none; }
.sh-avatar {
  width: 28px; height: 28px; border-radius: var(--radius-pill); display: grid; place-items: center; flex: none;
  border: 1.5px solid currentColor; font: var(--fw-bold) var(--label-sm-size)/1 var(--font-sans);
}
.sh-menu-btn, .sh-mobile-wrap { display: none; }
.sh-l1-icon { width: var(--h-touch-min); justify-content: center; padding: 0; }

.sh-l2 {
  display: flex; align-items: stretch; height: var(--h-topbar-2);
  background: var(--canvas); border-bottom: 1px solid var(--hairline);
  padding: 0 calc(var(--gutter) - var(--space-md)); overflow-x: auto; scrollbar-width: none;
}
.sh-l2::-webkit-scrollbar { display: none; }
/* Indice de suite quand la rangée d'onglets défile (le masque n'est pas une couleur de l'interface) */
.sh-l2.fade-end {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
}
.sh-tab {
  display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); flex: none;
  color: var(--link); text-decoration: none; white-space: nowrap;
  font: var(--nav-weight) var(--nav-size)/var(--nav-lh) var(--font-sans);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
}
.sh-tab:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 6px; }
.sh-tab:focus-visible { outline-offset: -4px; }
.sh-tab[aria-current="page"] { font-weight: var(--nav-active-weight); color: var(--link-hover); border-bottom-color: var(--link); }
.sh-tab[aria-current="page"]:hover { text-decoration: none; }
.sh-tab-sep { width: 1px; background: var(--hairline); margin: var(--space-md) var(--space-sm); flex: none; }

/* Menus déroulants */
.sh-menu {
  position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-menu);
  min-width: 260px; max-width: calc(100vw - var(--space-base));
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-menu); padding: var(--space-sm);
}
.sh-menu--right { left: auto; right: 0; }
.sh-menu-item {
  display: flex; align-items: center; gap: var(--space-md); width: 100%; min-height: var(--h-touch-min);
  padding: var(--space-sm) var(--space-md); border: 0; border-radius: var(--radius-md); background: none; cursor: pointer;
  color: var(--link); text-decoration: none; text-align: left;
  font: var(--body-lg-weight) var(--body-lg-size)/var(--body-lg-lh) var(--font-sans);
}
.sh-menu-item:hover { background: var(--link-tint); color: var(--link-hover); }
.sh-menu-item[aria-current="true"] { font-weight: var(--fw-semibold); color: var(--link-hover); }
/* Dans le menu blanc, chaque logo garde la couleur de son site (pastille pleine) */
.sh-menu-item .sh-logo { width: 28px; height: 28px; font-size: var(--label-sm-size); background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.sh-menu-item .sh-check { margin-left: auto; }
.sh-menu-label { margin: 0; padding: var(--space-sm) var(--space-md) var(--space-xs); }
.sh-user-head { display: grid; gap: 2px; }
.sh-user-head strong { font-weight: var(--fw-semibold); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.sh-menu-sep { height: 1px; background: var(--hairline); margin: var(--space-sm) 0; }
/* La marque passe au bas des menus quand la ligne 1 n'a plus la place (sous 1 024 px) */
.sh-menu-brand {
  display: none; align-items: center; gap: var(--space-sm); margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md) var(--space-xs); border-top: 1px solid var(--hairline);
  font-size: var(--caption-size); line-height: var(--caption-lh); font-weight: var(--fw-semibold); color: var(--ink-muted);
}
.sh-menu-brand .sh-moon { width: 8px; height: 8px; }

/* Bandeau d'aperçu « Voir comme… » */
.sh-preview { background: var(--warning-bg); border-bottom: 1px solid var(--warning); }
.sh-preview-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-base); max-width: var(--container-max); margin: 0 auto; padding: var(--space-sm) var(--gutter); color: var(--warning-ink); font-weight: var(--fw-semibold); }

/* ---------- Page ---------- */
main.sh-main { padding: 0; max-width: none; margin: 0; }
.sh-page { max-width: var(--container-max); margin: 0 auto; padding: var(--space-xl) var(--gutter) var(--space-3xl); }
.sh-page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); margin-bottom: var(--space-base); }
.sh-display { font-size: var(--display-size); line-height: var(--display-lh); font-weight: var(--display-weight); }
.sh-heading { font-size: var(--heading-size); line-height: var(--heading-lh); font-weight: var(--heading-weight); }
.sh-heading-md { font-size: var(--heading-md-size); line-height: var(--heading-md-lh); font-weight: var(--heading-md-weight); }
.sh-lead { font-size: var(--body-lg-size); line-height: var(--body-lg-lh); font-weight: var(--body-lg-light-weight); color: var(--ink); }
.sh-title-sub { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xs); color: var(--ink-muted); }
/* Le titre reçoit le focus à chaque changement d'écran (lecteurs d'écran) : il n'est pas
   interactif, donc pas de contour. */
.sh-main h1[tabindex="-1"]:focus, .sh-main h1[tabindex="-1"]:focus-visible { outline: none; }
.sh-placeholder { max-width: 720px; display: grid; gap: var(--space-base); }
.sh-section { display: grid; gap: var(--space-base); margin-top: var(--space-xl); }

/* Cartes */
.sh-card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-base); min-width: 0; }
.sh-card + .sh-card { margin-top: var(--space-base); }
.sh-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.sh-card--flush { padding: 0; overflow: hidden; }
.sh-card-pad { padding: var(--space-base) var(--space-base) var(--space-md); }
.sh-band { background: var(--surface-1); border-radius: var(--radius-md); padding: var(--space-md) var(--space-base); }
.sh-danger-zone { border-color: var(--danger); }
.sh-danger-zone .sh-heading-md { color: var(--danger-ink); }

/* Boutons */
.sh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: var(--h-button); min-width: var(--h-touch-min); padding: var(--space-sm) var(--space-base); border-radius: var(--radius-md);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--button-weight) var(--button-size)/var(--button-lh) var(--font-sans);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sh-btn:focus-visible { box-shadow: var(--focus-ring); }
.sh-btn-primary { background: var(--link); color: var(--link-ink); }
.sh-btn-primary:hover { background: var(--link-hover); color: var(--link-ink); }
.sh-btn-secondary { background: var(--canvas); color: var(--link); border-color: var(--link); }
.sh-btn-secondary:hover { background: var(--link-tint); color: var(--link-hover); border-color: var(--link-hover); }
.sh-btn-danger { background: var(--danger); color: var(--on-danger); }
.sh-btn-danger:hover { background: var(--danger-hover); color: var(--on-danger); }
.sh-btn-ghost { background: transparent; color: var(--link); padding-inline: var(--space-md); }
.sh-btn-ghost:hover { background: var(--link-tint); color: var(--link-hover); }
.sh-btn:disabled, .sh-btn[aria-disabled="true"] { background: var(--surface-2); color: var(--disabled-ink); border-color: var(--surface-2); cursor: not-allowed; }
.sh-btn-sm { min-height: var(--h-button-sm); }
.sh-icon-btn {
  width: var(--h-touch-min); height: var(--h-touch-min); display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--link); cursor: pointer;
  font: var(--fw-bold) var(--body-lg-size)/1 var(--font-sans);
}
.sh-icon-btn:hover { background: var(--link-tint); color: var(--link-hover); }
.sh-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.sh-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }

/* Sélecteur segmenté */
.sh-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--link); border-radius: var(--radius-md); overflow: hidden; }
.sh-seg button {
  min-height: var(--h-touch-min); min-width: var(--h-touch-min); padding: 0 var(--space-base); border: 0; border-left: 1px solid var(--link);
  background: var(--canvas); color: var(--link); cursor: pointer; font: var(--nav-weight) var(--nav-size)/var(--nav-lh) var(--font-sans); white-space: nowrap;
}
.sh-seg button:first-child { border-left: 0; }
.sh-seg button:hover { background: var(--link-tint); color: var(--link-hover); }
.sh-seg button[aria-pressed="true"] { background: var(--link); color: var(--link-ink); font-weight: var(--nav-active-weight); }
.sh-seg button:focus-visible { outline-offset: -4px; outline-color: var(--link-hover); }
.sh-seg button[aria-pressed="true"]:focus-visible { outline-color: var(--link-ink); }
.sh-seg .sh-soon { font-size: var(--caption-size); }

/* Champs */
.sh-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-base) var(--space-xl); }
.sh-form-grid .sh-wide { grid-column: 1 / -1; }
.sh-field { display: grid; gap: var(--space-sm); min-width: 0; align-content: start; }
.sh-label { font-size: var(--label-size); line-height: var(--label-lh); font-weight: var(--label-weight); color: var(--ink); }
.sh-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-sm); }
.sh-label-help { font-size: var(--caption-size); line-height: var(--label-lh); font-weight: var(--caption-weight); color: var(--ink-muted); }
.sh-input, .sh-select, .sh-textarea {
  width: 100%; min-height: var(--h-field); padding: 0 var(--space-base);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: var(--canvas);
  color: var(--ink); font: var(--body-lg-weight) var(--body-lg-size)/var(--body-lg-lh) var(--font-sans);
}
.sh-input[type="color"] { padding: var(--space-xs); width: 72px; cursor: pointer; }
.sh-textarea { padding: var(--space-md) var(--space-base); min-height: 88px; resize: vertical; }
.sh-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--link) 50%), linear-gradient(135deg, var(--link) 50%, transparent 50%);
  background-repeat: no-repeat; background-size: 6px 6px, 6px 6px;
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
}
.sh-select--sm, .sh-input--sm { min-height: var(--h-field-sm); padding-left: var(--space-md); }
.sh-input:hover, .sh-select:hover, .sh-textarea:hover { border-color: var(--ink-subtle); }
.sh-input:focus, .sh-select:focus, .sh-textarea:focus { outline: 2px solid var(--focus-color); outline-offset: 0; border-color: var(--focus-color); box-shadow: var(--focus-ring); }
.sh-input[aria-invalid="true"], .sh-textarea[aria-invalid="true"], .sh-select[aria-invalid="true"] { border-color: var(--danger); }
.sh-input[readonly] { background: var(--surface-1); border-color: var(--surface-1); }
.sh-input::placeholder, .sh-textarea::placeholder { color: var(--ink-placeholder); opacity: 1; }
.sh-input:disabled, .sh-select:disabled { background: var(--surface-2); color: var(--disabled-ink); border-color: var(--surface-2); cursor: not-allowed; }
.sh-field-help { font-size: var(--caption-size); line-height: var(--caption-lh); color: var(--ink-muted); }
.sh-field-error { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--danger); font-size: var(--body-md-size); line-height: var(--label-lh); }
.sh-field-error:empty { display: none; }
.sh-field-warn { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--warning-ink); font-size: var(--body-md-size); line-height: var(--label-lh); }
.sh-field-warn:empty { display: none; }
.sh-check, .sh-radio { display: flex; align-items: center; gap: var(--space-md); min-height: var(--h-touch-min); cursor: pointer; font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.sh-check input, .sh-radio input { width: 20px; height: 20px; flex: none; accent-color: var(--link); margin: 0; }
.sh-check input:disabled + span { color: var(--disabled-ink); }
.sh-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--space-xs); }
.sh-fieldset legend { padding: 0; margin-bottom: var(--space-xs); }
.sh-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); }
.sh-form-section { display: grid; gap: var(--space-base); padding: var(--space-base) 0; border-top: 1px solid var(--hairline); }
.sh-form-section:first-of-type { border-top: 0; padding-top: 0; }
.sh-swatch { width: 28px; height: 28px; border-radius: var(--radius-pill); border: 1px solid var(--hairline-strong); flex: none; display: inline-block; vertical-align: middle; }

/* Puces à cocher (sites) : contour cerulean ; cochée = fond pâle + coche + 600 */
.sh-chips { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.sh-chip {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--h-touch-min); padding: 0 var(--space-md);
  border: 1px solid var(--link); border-radius: var(--radius-md); background: var(--canvas);
  color: var(--link); font: var(--body-lg-weight) var(--body-lg-size)/var(--body-lg-lh) var(--font-sans); cursor: pointer;
}
.sh-chip:hover { background: var(--link-tint); color: var(--link-hover); }
.sh-chip[aria-pressed="true"] { background: var(--link-tint); border-color: var(--link); color: var(--link-hover); font-weight: var(--fw-semibold); }
.sh-chip .sh-ico { width: 16px; height: 16px; }
.sh-chip:disabled { color: var(--disabled-ink); background: var(--surface-2); border-color: var(--surface-2); cursor: not-allowed; }
.sh-fixed-note { display: flex; align-items: center; gap: var(--space-sm); color: var(--ink-subtle); min-height: var(--h-touch-min); }

/* Messages */
.sh-msg {
  display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-base);
  border-radius: var(--radius-md); border: 1px solid var(--m-border); border-left-width: 4px;
  background: var(--m-bg); color: var(--ink);
}
.sh-msg > .sh-ico { color: var(--m-fg); margin-top: 1px; }
.sh-msg .sh-msg-body { flex: 1; min-width: 0; }
.sh-msg strong { color: var(--ink); }
.sh-msg--info { --m-bg: var(--info-bg); --m-border: var(--info); --m-fg: var(--info); }
.sh-msg--success { --m-bg: var(--success-bg); --m-border: var(--success); --m-fg: var(--success); }
.sh-msg--warning { --m-bg: var(--warning-bg); --m-border: var(--warning); --m-fg: var(--warning-ink); }
.sh-msg--danger { --m-bg: var(--danger-bg); --m-border: var(--danger); --m-fg: var(--danger-ink); }
.sh-secret { font-size: var(--body-lg-size); font-weight: var(--fw-semibold); letter-spacing: 0.02em; font-variant-numeric: var(--num-tabular); }

/* Pastilles de statut (non cliquables : rayon 4) */
.sh-badge {
  display: inline-flex; align-items: center; gap: var(--space-xs); height: 24px; padding: 0 var(--space-sm); flex: none;
  border-radius: var(--radius-sm); background: var(--b-bg); color: var(--b-fg); white-space: nowrap;
  font: var(--label-sm-weight) var(--label-sm-size)/var(--label-sm-lh) var(--font-sans);
}
.sh-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sh-badge--ok { --b-bg: var(--success-bg); --b-fg: var(--success); }
.sh-badge--veille { --b-bg: var(--warning-bg); --b-fg: var(--warning-ink); }
.sh-badge--gerant { --b-bg: var(--info-bg); --b-fg: var(--info); }
.sh-badge--neutre { --b-bg: var(--surface-1); --b-fg: var(--ink-subtle); }
.sh-badge--danger { --b-bg: var(--danger-bg); --b-fg: var(--danger-ink); }

/* Tableaux denses */
.sh-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas); }
.sh-table-wrap--flat { border: 0; border-top: 1px solid var(--hairline); border-radius: 0; }
.sh-table-wrap:focus-visible { outline-offset: -2px; }
.sh-dense { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--body-md-size); line-height: var(--label-lh); }
.sh-dense th, .sh-dense td { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; height: var(--h-row-dense); }
.sh-dense thead th { background: var(--surface-1); color: var(--ink-subtle); font: var(--caps-weight) var(--caps-size)/var(--caps-lh) var(--font-sans); letter-spacing: var(--caps-tracking); text-transform: uppercase; white-space: nowrap; }
.sh-dense tbody th { font-weight: var(--fw-semibold); background: var(--canvas); }
.sh-dense .sh-num { text-align: right; white-space: nowrap; }
.sh-dense .sh-sticky-col { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--hairline); }
.sh-dense thead .sh-sticky-col { background: var(--surface-1); z-index: 2; }
.sh-dense tbody tr:last-child td, .sh-dense tbody tr:last-child th { border-bottom: 0; }
.sh-dense tr.sh-row-link { cursor: pointer; }
.sh-dense tr.sh-row-link:hover td, .sh-dense tr.sh-row-link:hover th { background: var(--link-tint); }
.sh-dense td.sh-center, .sh-dense th.sh-center { text-align: center; }
.sh-dense .sh-col-owner { background: var(--surface-1); }
.sh-nowrap { white-space: nowrap; }
.sh-person { display: flex; gap: var(--space-md); align-items: center; min-width: 180px; }
.sh-person .sh-avatar { width: 36px; height: 36px; font-size: var(--label-size); color: var(--ink-subtle); }
.sh-person .sh-nm { font-weight: var(--fw-semibold); }
.sh-cellmod { display: grid; gap: var(--space-sm); min-width: 200px; }
.sh-perm-label { display: grid; gap: 2px; min-width: 240px; }
.sh-perm-label strong { font-weight: var(--fw-semibold); }
.sh-url { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: var(--body-md-size); color: var(--ink-subtle); word-break: break-all; }
.sh-diff { display: grid; grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs) var(--space-base); }
.sh-diff dt { color: var(--ink-muted); }
.sh-diff dd { margin: 0; word-break: break-word; }
.sh-diff .sh-diff-head { font-weight: var(--fw-semibold); color: var(--ink-subtle); }

/* Liste d'établissements, modules de l'entreprise */
.sh-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.sh-list-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md) var(--space-base); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--canvas); }
.sh-list-item .sh-grow { flex: 1 1 200px; min-width: 0; }
.sh-list-item .sh-logo { width: 40px; height: 40px; }

/* Fenêtre (popup) ; le voile garde .overlay (fermé à l'impression, attendu par les tests) */
.overlay.sh-backdrop {
  position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; padding: var(--space-base); overflow: auto;
}
.sh-dialog {
  position: relative; z-index: var(--z-dialog); background: var(--canvas); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay);
  width: min(520px, 100%); max-height: calc(100dvh - var(--space-2xl)); display: flex; flex-direction: column; outline: none;
}
.sh-dialog--wide { width: min(720px, 100%); }
.sh-dialog-head { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-base) var(--space-md) var(--space-md) var(--space-xl); border-bottom: 1px solid var(--hairline); }
.sh-dialog-head h2 { flex: 1; min-width: 0; padding-top: var(--space-sm); }
.sh-dialog-body { padding: var(--space-base) var(--space-xl); overflow: auto; display: grid; gap: var(--space-base); scroll-padding-block: var(--space-base); }
.sh-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-md) var(--space-xl) var(--space-base); border-top: 1px solid var(--hairline); }

/* Dépliant */
.sh-fold { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 0 var(--space-base); }
.sh-fold > summary { display: flex; align-items: center; gap: var(--space-sm); min-height: 48px; cursor: pointer; font-weight: var(--fw-semibold); color: var(--link); list-style: none; }
.sh-fold > summary::-webkit-details-marker { display: none; }
.sh-fold[open] > summary .sh-ico { transform: rotate(90deg); }
.sh-fold > .sh-fold-body { padding-bottom: var(--space-base); display: grid; gap: var(--space-base); }

/* ---------- Lien externe dans la page ---------- */
.sh-embed { display: flex; flex-direction: column; }
.sh-embed-bar { display: flex; align-items: center; gap: var(--space-sm) var(--space-md); min-height: var(--h-touch-min); padding: 0 var(--gutter); border-bottom: 1px solid var(--hairline); background: var(--canvas); }
.sh-embed-bar .sh-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; word-break: normal; }
.sh-embed-note { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--gutter); background: var(--warning-bg); color: var(--warning-ink); border-bottom: 1px solid var(--warning); }
.sh-embed-frame {
  display: block; width: 100%; border: 0; background: var(--surface-1);
  height: calc(100dvh - var(--h-topbar-1) - var(--h-topbar-2) - var(--h-touch-min) - 1px); min-height: 320px;
}
.sh-embed-frame.is-test { height: calc(100dvh - var(--h-topbar-1) - var(--h-topbar-2) - var(--h-touch-min) - 40px); }

/* ---------- Ce qui entoure les écrans du Carnet ---------- */
/* Fenêtres du Carnet au-dessus de la barre collante ; message flash au-dessus de tout. */
.overlay { z-index: var(--z-backdrop); }
.toast {
  z-index: var(--z-toast); border-radius: var(--radius-md); background: var(--surface-dark); color: var(--ink-inverse);
  font-family: var(--font-sans); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); letter-spacing: normal;
  padding: var(--space-md) var(--space-base); max-width: calc(100vw - var(--space-2xl));
}
.pull-refresh { z-index: calc(var(--z-topbar) + 1); }
/* L'aperçu collant d'une facture reste sous la barre collante. */
.invoice-preview-sticky { top: calc(var(--h-topbar-1) + var(--h-topbar-2)); }
.app-footer { font-family: var(--font-sans); }

/* ---------- Adaptations ---------- */
@media (max-width: 1279px) {
  .sh-page { padding-top: var(--space-base); }
}
@media (max-width: 1180px) {
  .sh-tab { padding: 0 var(--space-sm); }
}
@media (max-width: 1023px) {
  .sh-brand, .sh-brand-sep { display: none; }
  .sh-menu-brand { display: flex; }
}
@media (max-width: 960px) {
  .sh-site .sh-site-name { max-width: 150px; }
}
@media (max-width: 879px) {
  .sh-l1-right .sh-user-name, .sh-links-label { display: none; }
}
@media (max-width: 719px) {
  /* le nom du site reste dans le titre de l'écran et dans l'aria-label du bouton */
  .sh-site .sh-site-name { display: none; }
}
@media (max-width: 599px) {
  .sh-l1 { padding: 0 var(--space-xs) 0 var(--space-sm); }
  .sh-site .sh-chev { display: none; }
  .sh-site { padding: 0 var(--space-sm) 0 2px; }
  .sh-l1 > .sh-sep, .sh-l1-right > .sh-sep, .sh-l1-right .sh-links-wrap, .sh-l1-right .sh-user-wrap, .sh-l1-right .sh-logout { display: none; }
  .sh-sides { flex: 1; justify-content: center; min-width: 0; }
  .sh-sides .sh-sep { display: block; }
  .sh-side { padding: 0 var(--space-sm); }
  .sh-mobile-wrap { display: flex; }
  .sh-menu-btn { display: flex; }
  .sh-page { padding-top: var(--space-base); }
  .sh-dialog-head { padding-left: var(--space-base); }
  .sh-dialog-body, .sh-dialog-foot { padding-left: var(--space-base); padding-right: var(--space-base); }
  .sh-dialog-foot .sh-btn { flex: 1 1 auto; }
  .sh-page-head .sh-actions { width: 100%; }
  .sh-page-head .sh-actions .sh-btn { flex: 1 1 auto; }
  .sh-embed-bar .sh-url { display: none; }
  .sh-embed-bar .sh-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* Tableaux de réglages : cartes empilées, libellé de colonne au-dessus de chaque valeur */
  .sh-stack-table, .sh-stack-table tbody, .sh-stack-table tr, .sh-stack-table td, .sh-stack-table tbody th { display: block; }
  .sh-stack-table thead { display: none; }
  .sh-stack-table tr { border-bottom: 1px solid var(--hairline-strong); padding: var(--space-sm) 0; }
  .sh-stack-table tbody th { border-bottom: 0; padding: var(--space-sm) var(--space-md) var(--space-xs); height: auto; }
  .sh-stack-table td { border-bottom: 0; padding: var(--space-xs) var(--space-md) var(--space-sm); height: auto; }
  .sh-stack-table td[data-label]::before { content: attr(data-label); display: block; font: var(--caps-weight) var(--caps-size)/var(--caps-lh) var(--font-sans); letter-spacing: var(--caps-tracking); text-transform: uppercase; color: var(--ink-subtle); margin-bottom: var(--space-xs); }
  .sh-stack-table .sh-sticky-col { position: static; box-shadow: none; }
  .sh-stack-table .sh-cellmod, .sh-stack-table .sh-person { min-width: 0; }
}

@media print {
  .sh-bar, .sh-menu, .sh-preview { display: none !important; }
}

/* ---------- Rôles et permissions ---------- */
.sh-role-head { display: flex; flex-direction: column; align-items: center; gap: 2px; text-transform: none; letter-spacing: normal; font: var(--fw-semibold) var(--body-md-size)/var(--label-lh) var(--font-sans); color: var(--ink); white-space: normal; min-width: 112px; }
.sh-role-head .sh-caption { text-transform: none; letter-spacing: normal; }
.sh-role-menu-wrap { position: relative; display: inline-flex; }
.sh-role-menu-wrap .sh-menu { text-transform: none; letter-spacing: normal; text-align: left; }
.sh-perm-box { width: 20px; height: 20px; accent-color: var(--link); cursor: pointer; }
.sh-perm-box:disabled { cursor: not-allowed; }
.sh-access-list { display: grid; gap: var(--space-base); }
.sh-access { display: grid; gap: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--hairline); }
.sh-access:first-child { border-top: 0; padding-top: 0; }
.sh-access > .sh-select { max-width: 360px; }
/* Profil type (Modules) : le libellé reste lisible, le tableau défile dans sa carte si besoin */
.sh-preset { min-width: 150px; }

/* ---------- Établissements, Entreprise ---------- */
.sh-logo--list { width: 40px; height: 40px; background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.sh-logo--lg { width: 56px; height: 56px; font-size: var(--heading-md-size); }
.sh-org-logo { height: 48px; max-width: 160px; object-fit: contain; border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-xs); background: var(--canvas); }
.sh-bar-preview span { display: inline-flex; align-items: center; min-height: var(--h-touch-min); margin-top: var(--space-sm); padding: 0 var(--space-base); border-radius: var(--radius-md); font: var(--fw-semibold) var(--nav-size)/var(--nav-lh) var(--font-sans); }

/* ---------- Rôles et permissions : cases lisibles, cartes au téléphone (revue du 10/10) ---------- */
.sh-perm-label .sh-badge { justify-self: start; }
.sh-perm-hit { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-width: var(--h-touch-min); min-height: var(--h-touch-min); cursor: pointer; }
.sh-always { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-width: var(--h-touch-min); min-height: var(--h-touch-min); color: var(--ink); }
.sh-always .sh-ico { width: 18px; height: 18px; }
.sh-perm-role { display: none; }
.sh-role-head .sh-btn { text-transform: none; letter-spacing: normal; }
.sh-role-bar { display: none; }
.sh-empty-help { display: grid; gap: var(--space-sm); margin-top: var(--space-sm); }
.sh-empty-help p { margin: 0; }
.sh-steps { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-xs); }
@media (max-width: 599px) {
  .sh-role-bar { display: grid; gap: var(--space-xs); list-style: none; margin: 0; padding: 0 var(--space-md) var(--space-md); }
  .sh-role-bar li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-height: var(--h-touch-min); border-top: 1px solid var(--hairline); }
  .sh-role-bar li .sh-nm { font-weight: var(--fw-semibold); }
  .sh-role-bar li .sh-role-menu-wrap { margin-left: auto; }
  .sh-perm-table td[data-label]::before { content: none; }
  .sh-perm-table td.sh-center { text-align: left; padding-top: 0; padding-bottom: 0; }
  .sh-perm-table .sh-perm-role { display: inline; }
  .sh-perm-table .sh-perm-hit, .sh-perm-table .sh-always { justify-content: flex-start; }
  .sh-perm-table .sh-col-owner { background: transparent; }
  .sh-perm-label { min-width: 0; }
}

/* Barre d'enregistrement collée en bas d'un long formulaire */
.sh-sticky-actions { position: sticky; bottom: 0; z-index: 2; background: var(--canvas); padding: var(--space-md) 0; border-top: 1px solid var(--hairline); }
.sh-dirty-note { color: var(--warning-ink); font-weight: var(--fw-semibold); }
.sh-danger-zone .sh-actions { margin-top: var(--space-md); }
.sh-chip { white-space: nowrap; }

/* ---------- Écran de connexion : nom de la suite ----------
   Le reste de l'écran garde le style d'origine du Carnet (app.css). */
.login-box .sh-login-brand {
  display: flex; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-xs);
  font: var(--fw-bold) var(--display-size)/var(--display-lh) var(--font-sans); letter-spacing: normal; color: var(--ink);
}
.sh-login-brand .sh-moon { width: 24px; height: 24px; background: var(--site-default); }
.login-box .sh-login-modules {
  margin: 0 0 var(--space-xl);
  font: var(--fw-semibold) var(--body-md-size)/var(--body-md-lh) var(--font-sans); letter-spacing: normal; color: var(--ink-muted);
}