:root {
  color-scheme: light;
  --sk-bg: #f4f2ee;
  --sk-bg-elevated: #ffffff;
  --sk-surface: rgba(255, 255, 255, 0.6);
  --sk-surface-border: rgba(15, 23, 42, 0.08);
  --sk-surface-blur: 20px;
  --sk-text: #1b1d22;
  --sk-text-muted: #5b6270;
  --sk-accent: #a8823f;
  --sk-accent-contrast: #ffffff;
  --sk-focus-ring: rgba(168, 130, 63, 0.55);
  --sk-shadow-glass: 0 8px 30px rgba(15, 23, 42, 0.1);
  --sk-radius-sm: 10px;
  --sk-radius-md: 16px;
  --sk-radius-lg: 24px;
  --sk-space-unit: 1;
}

[data-density="compact"] {
  --sk-space-unit: 0.72;
}

/* Spacieuse : cibles plus grandes pour un écran tactile ou une lecture reposée (Outlook « Spacieuse », Thunderbird « Tactile »). */
[data-density="spacious"] {
  --sk-space-unit: 1.35;
}

:root[data-text-zoom="80"] {
  --sk-text-zoom: 0.8;
  font-size: 80%;
}
:root[data-text-zoom="90"] {
  --sk-text-zoom: 0.9;
  font-size: 90%;
}
:root[data-text-zoom="100"] {
  --sk-text-zoom: 1;
  font-size: 100%;
}
:root[data-text-zoom="110"] {
  --sk-text-zoom: 1.1;
  font-size: 110%;
}
:root[data-text-zoom="125"] {
  --sk-text-zoom: 1.25;
  font-size: 125%;
}
:root[data-text-zoom="150"] {
  --sk-text-zoom: 1.5;
  font-size: 150%;
}
:root[data-text-zoom="175"] {
  --sk-text-zoom: 1.75;
  font-size: 175%;
}
:root[data-text-zoom="200"] {
  --sk-text-zoom: 2;
  font-size: 200%;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --sk-bg: #0b0d13;
    --sk-bg-elevated: #12151d;
    --sk-surface: rgba(255, 255, 255, 0.06);
    --sk-surface-border: rgba(255, 255, 255, 0.1);
    --sk-text: #f2f1ee;
    --sk-text-muted: #a2a7b4;
    --sk-accent: #d4af6a;
    --sk-accent-contrast: #14110a;
    --sk-focus-ring: rgba(212, 175, 106, 0.55);
    --sk-shadow-glass: 0 10px 34px rgba(0, 0, 0, 0.45);
  }
}

[data-theme="dark"] {
  color-scheme: dark;
  --sk-bg: #0b0d13;
  --sk-bg-elevated: #12151d;
  --sk-surface: rgba(255, 255, 255, 0.06);
  --sk-surface-border: rgba(255, 255, 255, 0.1);
  --sk-text: #f2f1ee;
  --sk-text-muted: #a2a7b4;
  --sk-accent: #d4af6a;
  --sk-accent-contrast: #14110a;
  --sk-focus-ring: rgba(212, 175, 106, 0.55);
  --sk-shadow-glass: 0 10px 34px rgba(0, 0, 0, 0.45);
}

/*
 * Accessibilité système (macOS « Réduire la transparence » / « Augmenter le
 * contraste », Windows « Effets de transparence » / « Contraste élevé ») :
 * le verre dépoli devient opaque et les traits se renforcent, dans les deux
 * thèmes. `:root:root` (0,2,0) passe après la règle sombre système
 * `:root:not([data-theme="light"])` de même poids.
 */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:root {
    --sk-surface: var(--sk-bg-elevated);
    --sk-surface-blur: 0px;
  }
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-contrast: more) {
  :root:root {
    --sk-surface-border: color-mix(in srgb, var(--sk-text) 55%, transparent);
    --sk-text-muted: color-mix(in srgb, var(--sk-text) 82%, var(--sk-bg));
    --sk-focus-ring: var(--sk-accent);
  }
}

/*
 * Contraste élevé Windows (forced-colors) : le navigateur impose la palette
 * système et retire ombres et fonds d'auteur — l'anneau de focus (souvent une
 * ombre) et la ligne sélectionnée (un fond) disparaîtraient. On les redonne
 * en couleurs système ; les icônes SVG en currentColor suivent seules.
 */
@media (forced-colors: active) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  :focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }
  [aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"], [aria-checked="true"], .is-selected, .is-checked {
    forced-color-adjust: none;
    background: SelectedItem !important;
    color: SelectedItemText !important;
  }
  :is([aria-selected="true"], [aria-current]:not([aria-current="false"]), [aria-pressed="true"], [aria-checked="true"], .is-selected, .is-checked) * {
    color: inherit !important;
    background: transparent !important;
    border-color: currentColor !important;
  }
  :disabled, [aria-disabled="true"] {
    color: GrayText !important;
  }
}


#app {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  height: calc(100vh - 2.5rem);
  box-sizing: border-box;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

/*
 * Barre laterale d'icones a l'extreme gauche, facon Apple Mail (carte P0 « Refonte IHM » :
 * « pas neuf pastilles de texte en travers de la fenetre »). La coque pose
 * `#app[data-layout="rail"]` (`markAppShellRail`) : deux colonnes, la barre a gauche sur toute
 * la hauteur, le bandeau de mise a jour, l'aide et la vue active a droite. `.app-shell-nav`
 * (le conteneur de la barre ET de l'aide) s'efface de la grille pour que l'aide aille a droite.
 * Sans l'attribut (ecran de connexion), `#app` reste la colonne flex ci-dessus.
 */
#app[data-layout="rail"] {
  /* ⭐ L'application va BORD A BORD, comme une fenetre native : index.html pose 1.25rem de
     marge autour de #app, ce qui laissait un lisere de fond tout autour des trois volets --
     le dernier reste du dessin en « cartes flottantes » refuse par le porteur le 2026-09-27.
     ⚠️ On ne retire PAS la marge dans index.html : l'ECRAN DE CONNEXION, qui ne porte pas
     data-layout="rail", en a besoin. Elle ne saute que pour la coque a rail.
     ⚠️ Et pas d'accent inverse dans ce commentaire : il est DANS un gabarit de chaine, un
     seul accent inverse la referme et esbuild echoue -- mesure du 2026-09-28. */
  padding: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0;
}

#app[data-layout="rail"] > * {
  grid-column: 2;
  min-width: 0;
}

#app[data-layout="rail"] > .app-shell-nav {
  display: contents;
}

#app[data-layout="rail"] > .app-shell-banner {
  grid-row: 1;
}

#app[data-layout="rail"] > .app-shell-banner:not([hidden]) {
  margin-bottom: 0.75rem;
}

#app[data-layout="rail"] [data-component="contextual-help"] {
  grid-column: 2;
  grid-row: 2;
  margin-bottom: 0.75rem;
  max-height: 40vh;
  overflow-y: auto;
}

#app[data-layout="rail"] > .app-shell-view {
  grid-row: 3;
}

#app[data-layout="rail"] [data-component="app-nav"] {
  grid-column: 1;
  grid-row: 1 / -1;
}

[data-component="app-nav"] {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.25rem;
  box-sizing: border-box;
  padding: 0.5rem 0.4rem;
  overflow-y: auto;
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
}

[data-component="app-nav"] button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  line-height: 0;
  cursor: pointer;
}

[data-component="app-nav"] button svg {
  width: 1.3rem;
  height: 1.3rem;
  flex: 0 0 auto;
}

[data-component="app-nav"] button:hover {
  background: var(--sk-surface);
  color: var(--sk-text);
}

[data-component="app-nav"] button[aria-current="page"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
}

/* Le libelle reste le nom accessible du bouton (et son infobulle `title`), il ne s'affiche pas. */
[data-component="app-nav"] [data-role="app-nav-label"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Compteur de non-lus (Veille) : pastille posee sur le coin de l'icone, jamais un chiffre nu. */
[data-component="app-nav"] [data-role="app-nav-badge"] {
  position: absolute;
  top: -0.2rem;
  right: -0.3rem;
  min-width: 1rem;
  padding: 0 0.25rem;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1rem;
  text-align: center;
}

/* Ecran actif : la pastille s'inverse pour rester lisible sur le fond accentue. */
[data-component="app-nav"] button[aria-current="page"] [data-role="app-nav-badge"] {
  background: var(--sk-accent-contrast);
  color: var(--sk-accent);
}

[data-component="app-nav"] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

/* Aide contextuelle : le bouton se range en bas de la barre, l'icone trait fin reste discrete jusqu'a ce qu'on la cherche. */
[data-component="app-nav"] [data-role="app-help-toggle"] {
  margin-block-start: auto;
  color: var(--sk-text-muted);
}

[data-component="app-nav"] [data-role="app-help-toggle"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

[data-component="app-nav"] [data-role="app-help-toggle"][aria-expanded="true"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
}

[data-component="contextual-help"] {
  flex: 0 0 auto;
  padding: calc(0.9rem * var(--sk-space-unit, 1)) calc(1.1rem * var(--sk-space-unit, 1));
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
  color: var(--sk-text);
}

[data-component="contextual-help"] h2 {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-component="contextual-help"] dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

[data-component="contextual-help"] dt {
  font-weight: 600;
  font-size: 0.9rem;
}

[data-component="contextual-help"] dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sk-text-muted);
  max-width: 78ch;
}

/* La source est citée sous chaque réponse : une aide qui ne dit pas d'où elle tient sa réponse ne se vérifie pas. */
[data-component="contextual-help"] [data-role="help-source"] {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--sk-accent);
}

/* Question libre : le champ est la première chose qu'on voit dans l'aide — on cherche SA question, pas la liste des nôtres. */
[data-role="help-ask"] {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  flex-wrap: wrap;
}

[data-role="help-ask"] label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 18rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--sk-text-muted);
}

[data-role="help-ask"] input {
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
}

[data-role="help-ask"] input:focus-visible,
[data-role="help-ask"] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-role="help-ask"] button {
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.88rem;
  color: var(--sk-accent-contrast);
  background: var(--sk-accent);
  border: 1px solid transparent;
  border-radius: var(--sk-radius-md);
  cursor: pointer;
}

/* Réponse à la question posée : détachée de la liste des sujets, et annoncée (role="status") puisqu'elle arrive sans changer d'écran. */
[data-role="help-answer"] {
  margin: 0 0 0.9rem;
  padding: calc(0.6rem * var(--sk-space-unit, 1)) calc(0.8rem * var(--sk-space-unit, 1));
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
}

[data-role="help-answer"] dt {
  font-weight: 600;
  font-size: 0.9rem;
}

[data-role="help-answer"] dd {
  margin: 0.15rem 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--sk-text-muted);
  max-width: 78ch;
}

/* État réel du compte, en tête de l'aide : une boîte en erreur passe avant toute question de la vue. */
[data-component="help-account-state"] {
  margin: 0 0 0.9rem;
  padding: calc(0.6rem * var(--sk-space-unit, 1)) calc(0.8rem * var(--sk-space-unit, 1));
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
}

[data-component="help-account-state"] h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
}

[data-component="help-account-state"] h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sk-text-muted);
}

[data-component="help-account-state"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

[data-component="help-account-state"] li {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.87rem;
  line-height: 1.45;
  color: var(--sk-text-muted);
}

[data-component="help-account-state"] svg {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.1rem;
}

/* Le dégradé s'annonce, il ne se masque pas : l'utilisateur doit savoir que la réponse est partielle. */
[data-component="help-account-state"] [data-role="help-account-degraded"] {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  color: var(--sk-accent);
}

[data-component="help-account-state"] [data-severity="ok"] { color: var(--sk-text-muted); }
[data-component="help-account-state"] [data-severity="warning"] { color: #d98a1c; }
[data-component="help-account-state"] [data-severity="error"] { color: #d64545; }
[data-component="help-account-state"] [data-severity="unknown"] { color: var(--sk-text-muted); font-style: italic; }

[data-component="contextual-help"] [data-role="help-close"] {
  margin-top: 0.8rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}

[data-component="contextual-help"]:focus-visible,
[data-component="contextual-help"] [data-role="help-close"]:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

.app-shell-view {
  flex: 1 1 auto;
  min-height: 0;
}

.app-shell-mail {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-shell-mail > .app-shell-inbox {
  flex: 1 1 auto;
  min-height: 0;
  transition: opacity 0.2s ease;
}

.app-shell-inbox[aria-busy="true"] {
  opacity: 0.55;
}

.app-shell-view[hidden],
[data-role="account-switcher"][hidden],
[data-role="account-offline"][hidden],
[data-role="notifications-paused"][hidden],
[data-role="pending-actions"][hidden] {
  display: none;
}

/* Bandeau de mise à jour : verre dépoli sobre, jamais une modale — le travail en cours n'est jamais interrompu. */
[data-component="update-banner"]:empty {
  display: none;
}

[data-component="update-banner"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--sk-text);
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-left: 3px solid var(--sk-accent);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-component="update-banner"] p {
  flex: 1 1 18rem;
  margin: 0;
  min-width: 0;
}

[data-component="update-banner"] [data-role="update-notes"] {
  flex-basis: 100%;
  color: var(--sk-text-muted);
}

[data-role="account-offline"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.9rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-role="account-offline"] svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sk-accent);
}

/* Témoin « Ne pas déranger » : même verre calme que le bandeau hors ligne, « Reprendre » à droite. */
[data-role="notifications-paused"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.45rem 0.6rem 0.45rem 0.9rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-role="notifications-paused"] svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sk-accent);
}

[data-role="notifications-paused"] span {
  flex: 1;
  min-width: 0;
}

[data-role="notifications-paused"] button {
  flex: none;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

[data-role="notifications-paused"] button:hover {
  background: var(--sk-bg-elevated);
}

[data-role="notifications-paused"] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-role="pending-actions"] {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  color: var(--sk-text);
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-left: 3px solid var(--sk-accent);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-role="pending-actions"] > svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
  color: var(--sk-accent);
}

[data-role="pending-actions"] > div {
  flex: 1;
  min-width: 0;
}

[data-role="pending-actions"] p {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

[data-role="pending-actions"] ul {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-role="pending-actions"] li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}

.pending-actions-label {
  flex: 1 1 14rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-actions-label small,
.pending-actions-error,
.pending-actions-warning {
  color: var(--sk-text-muted);
  font-size: 0.8rem;
}

.pending-actions-error {
  flex-basis: 100%;
  order: 3;
  overflow-wrap: anywhere;
}

.pending-actions-buttons {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.pending-actions-buttons button {
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}

.pending-actions-buttons button:hover {
  background: var(--sk-bg-elevated);
}

.pending-actions-buttons button[data-action="pending-retry"],
.pending-actions-buttons button[data-action="pending-discard-confirm"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

.pending-actions-buttons button:disabled {
  opacity: 0.55;
  cursor: default;
}

.pending-actions-buttons button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-component="account-switcher"] ul {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  overflow-x: auto;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-component="account-switcher"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  border: none;
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  cursor: pointer;
}

[data-component="account-switcher"] button:hover {
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
}

[data-component="account-switcher"] button[aria-current="true"] {
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--sk-focus-ring);
}

[data-component="account-switcher"] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

.account-color-dot {
  display: inline-block;
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
}

.app-shell-inbox p[data-role="account-connect-error"] {
  margin: 0;
  padding: 1.25rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  color: var(--sk-text);
}

/* Tâches, Veille et Migration manquaient ici (mesure du 2026-09-27) : sans cadre, leur contenu tombait nu sur le fond de la fenêtre. */
[data-panel="contacts"],
[data-panel="agenda"],
[data-panel="tasks"],
[data-panel="feeds"],
[data-panel="settings"],
[data-panel="addons"],
[data-panel="validation"],
[data-panel="migravia"] {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.25rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
  color: var(--sk-text);
}

[data-panel="contacts"] h1,
[data-panel="agenda"] h1,
[data-panel="tasks"] h1,
[data-panel="feeds"] h1,
[data-panel="settings"] h1,
[data-panel="addons"] h1,
[data-panel="validation"] h1,
[data-panel="migravia"] h1 {
  margin: 0 0 1rem;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Les icônes n'ont qu'un viewBox : sans taille, le SVG d'un titre prend toute la largeur de la fenêtre. */
[data-panel="validation"] h1 svg,
[data-panel="agenda"] h1 svg,
[data-panel="tasks"] h1 svg,
[data-panel="feeds"] h1 svg,
[data-panel="migravia"] h1 svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

[data-panel="settings"] section[data-section] {
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="settings"] section[data-section]:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

[data-panel="settings"] h2 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}

[data-component="settings-nav"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

[data-component="settings-nav"] button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

[data-component="settings-nav"] button svg {
  width: 1rem;
  height: 1rem;
}

[data-panel="settings"] label,
[data-panel="settings"] fieldset legend,
[data-panel="validation"] label {
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="settings"] input,
[data-panel="settings"] select,
[data-panel="settings"] textarea,
[data-panel="validation"] input {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.5rem;
}

[data-panel="settings"] fieldset {
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  margin: 0.6rem 0;
  padding: 0.6rem 0.8rem;
}

[data-panel="settings"] button[type="submit"],
[data-panel="settings"] section[data-section] > button[data-action],
[data-panel="settings"] [data-action="settings.appLock.lockNow"],
[data-panel="validation"] button {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  margin-top: 0.4rem;
}

[data-panel="settings"] button[type="submit"],
[data-panel="validation"] button[type="submit"],
[data-panel="validation"] button[data-action="crValidation.resolve"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

[data-panel="settings"] ul[data-role="account-list"],
[data-panel="settings"] ul[data-role="rule-list"],
[data-panel="validation"] ul[data-role="entries"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-panel="settings"] ul[data-role="account-list"] > li,
[data-panel="settings"] ul[data-role="rule-list"] > li,
[data-panel="validation"] ul[data-role="entries"] > li {
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  padding: 0.75rem;
}

[data-panel="validation"] ul[data-role="entries"] > li > * + * {
  margin-top: 0.5rem;
}

[data-panel="validation"] h2 {
  margin: 0;
  font-size: 1rem;
}

[data-panel="validation"] [data-role="loinc"],
[data-panel="validation"] [data-role="received-at"],
[data-panel="validation"] [data-role="reasons-label"],
[data-panel="validation"] [data-role="candidates-label"] {
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="validation"] ul[data-role="reasons"],
[data-panel="validation"] ul[data-role="candidates"] {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

[data-panel="validation"] ul[data-role="candidates"] > li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

[data-panel="validation"] [data-role="confidence"] {
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="validation"] [data-role="ins-status"] {
  font-weight: 600;
}

[data-panel="validation"] [data-role="ins-status"][data-ins-status="qualified"] {
  color: var(--sk-accent);
}

[data-panel="validation"] [data-role="resolve-blocked"] {
  color: var(--sk-text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

[data-panel="validation"] [data-role="notice"] {
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
}

[data-widget="language-switcher"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sk-surface-border);
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="addons"] p[data-role="addon-panels-empty"],
[data-panel="settings"] p[data-role="account-list-empty"],
[data-panel="settings"] p[data-role="rule-list-empty"],
[data-panel="settings"] p[data-role="addon-list-empty"],
[data-panel="validation"] p[data-role="empty"],
[data-panel="validation"] p[data-role="candidates-empty"] {
  color: var(--sk-text-muted);
}

/*
 * Blocs propres aux Réglages, repris de SETTINGS_SHELL_CSS (@sekervia/host-ui) qu'aucune coque n'injecte :
 * sans eux, le code QR de transfert suivait la couleur du thème (clair sur sombre, illisible pour un lecteur),
 * l'enregistreur de raccourcis, l'import Thunderbird, les permissions d'addons et les statuts s'affichaient
 * bruts, et aucun contrôle des Réglages n'avait d'anneau de focus clavier.
 */
[data-panel="settings"] button:focus-visible,
[data-panel="settings"] input:focus-visible,
[data-panel="settings"] select:focus-visible,
[data-panel="settings"] textarea:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-panel="settings"] :is([data-role="settings-status"], [data-role="ai-service-test"], [data-role="oauth-status"], [data-role="mail-discovery-status"], [data-role="account-scan-status"]) {
  margin: 0;
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="settings"] [data-role="settings-status"],
[data-panel="settings"] [data-role="ai-service-test"][data-status="ok"],
[data-panel="settings"] [data-role="mail-discovery-status"]:is([data-status="provider"], [data-status="domain-autoconfig"], [data-status="dns-srv"], [data-status="mx-provider"]) {
  color: var(--sk-accent);
}

[data-panel="settings"] [data-role="ai-service-test"]:is([data-status="auth-refused"], [data-status="unreachable"], [data-status="failed"]) {
  color: var(--sk-text);
}

[data-panel="settings"] [data-role="mail-discovery"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35em 0.75rem;
}

[data-panel="settings"] :is([data-action="settings.account.transfer"], [data-action="settings.account.add-scan"], [data-action="settings.account.add-thunderbird"], [data-action="settings.account.discover"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

[data-panel="settings"] :is([data-action="settings.account.transfer"], [data-action="settings.account.add-scan"], [data-action="settings.account.add-thunderbird"], [data-action="settings.account.discover"]) svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

[data-panel="settings"] [data-role="account-transfer"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

/* Toujours foncé sur blanc, quel que soit le thème : les lecteurs de code QR l'exigent. */
[data-panel="settings"] [data-role="account-transfer"] svg[data-role="account-transfer-qr"] {
  width: 196px;
  height: 196px;
  background: #ffffff;
  color: #111318;
  border-radius: var(--sk-radius-md);
  box-shadow: 0 0 0 1px var(--sk-surface-border);
}

[data-panel="settings"] [data-role="account-transfer"] h3 {
  margin: 0 0 0.35em;
  font-size: 0.95rem;
}

[data-panel="settings"] [data-role="account-transfer"] p {
  margin: 0 0 0.6em;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="settings"] [data-role="account-transfer"] p[data-role="account-transfer-expiry"] {
  color: var(--sk-accent);
}

@media (max-width: 560px) {
  [data-panel="settings"] [data-role="account-transfer"] {
    grid-template-columns: 1fr;
    justify-items: center;
  }
}

[data-panel="settings"] [data-role="thunderbird-import"] {
  display: grid;
  gap: 0.35em;
  justify-items: start;
  margin: 0.75rem 0;
}

[data-panel="settings"] [data-role="thunderbird-import"] :is(ul[data-role="thunderbird-accounts"], ul[data-role="thunderbird-profiles"]) {
  list-style: none;
  display: grid;
  gap: 0.35em;
  width: 100%;
  margin: 0.2em 0 0;
  padding: 0;
}

[data-panel="settings"] [data-role="thunderbird-import"] li {
  display: grid;
  gap: 0.15em;
  justify-items: start;
  padding: 0.5em 0.7em;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-surface);
}

[data-panel="settings"] [data-role="thunderbird-import"] small {
  font-size: 0.82rem;
  color: var(--sk-text-muted);
}

[data-panel="settings"] [data-role="thunderbird-import"] small[data-role="thunderbird-encryption"] {
  color: var(--sk-accent);
}

/* Exemple de chemin d'archive : une seule ligne, lue comme un chemin. */
[data-panel="settings"] section[data-section="archive"] [data-role="archive-preview"] {
  margin: 0 0 0.75rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-bg-elevated);
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="settings"] section:is([data-section="sorting"], [data-section="keyboard"]) h3 {
  margin: 0.75rem 0 0.2em;
  font-size: 0.95rem;
}

[data-panel="settings"] :is(ul[data-role="sender-category-list"], ul[data-role="shortcut-list"]) {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--sk-space-unit, 1));
}

[data-panel="settings"] :is(ul[data-role="sender-category-list"], ul[data-role="shortcut-list"]) form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  padding: calc(6px * var(--sk-space-unit, 1)) calc(10px * var(--sk-space-unit, 1));
}

[data-panel="settings"] ul[data-role="sender-category-list"] span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-panel="settings"] ul[data-role="shortcut-list"] li[data-invalid="true"] form {
  border-color: var(--sk-accent);
}

[data-panel="settings"] [data-role="shortcut-title"] {
  flex: 1;
  min-width: 10em;
}

[data-panel="settings"] button[data-role="shortcut-recorder"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  min-width: 7.5em;
  min-height: 2em;
  border: 1px dashed var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.2em 0.6em;
  cursor: text;
  transition: border-color 160ms ease;
}

[data-panel="settings"] button[data-role="shortcut-recorder"]:focus {
  border-style: solid;
  border-color: var(--sk-accent);
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-panel="settings"] [data-role="shortcut-recorder"] kbd {
  min-width: 1.5em;
  padding: 0.1rem 0.35rem;
  box-sizing: border-box;
  border: 1px solid var(--sk-surface-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--sk-surface);
  color: var(--sk-text);
  font: 600 0.75rem/1.3 "SF Mono", ui-monospace, "Cascadia Mono", monospace;
  text-align: center;
}

[data-panel="settings"] [data-role="shortcut-none"] {
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="settings"] [data-role="shortcut-error"] {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  [data-panel="settings"] button[data-role="shortcut-recorder"] {
    transition: none;
  }
}

[data-panel="settings"] ul[data-role="addon-list"] {
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

[data-panel="settings"] ul[data-role="addon-list"] > li {
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  padding: 0.75rem;
}

/* Panneau Contacts : annuaire (recherche, liste) à gauche, fiche à droite ; une colonne sous 760px. */
[data-panel="contacts"] h1 svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

[data-panel="contacts"] [data-role="contacts-layout"] {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 760px) {
  [data-panel="contacts"] [data-role="contacts-layout"] {
    grid-template-columns: 1fr;
  }
}

[data-panel="contacts"] [data-role="contacts-toolbar"] {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

[data-panel="contacts"] [data-role="contacts-sort"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--sk-text-muted);
  white-space: nowrap;
}

[data-panel="contacts"] [data-role="contacts-sort"] select {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.6rem;
}

[data-panel="contacts"] [data-role="contacts-transfer"],
[data-panel="contacts"] [data-role="contact-card-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

[data-panel="contacts"] [data-role="contact-search-field"] {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text-muted);
}

[data-panel="contacts"] [data-role="contact-search-field"]:focus-within {
  box-shadow: 0 0 0 2px var(--sk-focus-ring);
}

[data-panel="contacts"] svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="contacts"] input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.4rem 0;
}

[data-panel="contacts"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
}

[data-panel="contacts"] button:disabled {
  opacity: 0.55;
  cursor: default;
}

[data-panel="contacts"] button:focus-visible,
[data-panel="contacts"] input:focus-visible,
[data-panel="contacts"] textarea:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 1px;
}

/* Carnet du serveur (CardDAV) : bloc en verre dépoli sous l'annuaire — adresse du serveur, carnets trouvés, synchronisation. */
[data-panel="contacts"] section[data-role="contacts-carddav"] {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="contacts"] section[data-role="contacts-carddav"] h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

[data-panel="contacts"] section[data-role="contacts-carddav"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] section[data-role="contacts-carddav"] p[data-role="carddav-account"] {
  color: var(--sk-text);
}

[data-panel="contacts"] section[data-role="contacts-carddav"] p[data-role="carddav-error"],
[data-panel="contacts"] section[data-role="contacts-carddav"] p[data-role="carddav-none"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="contacts"] form[data-role="carddav-form"] {
  display: grid;
  gap: 0.4rem;
}

[data-panel="contacts"] form[data-role="carddav-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] form[data-role="carddav-form"] input {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.6rem;
}

[data-panel="contacts"] form[data-role="carddav-form"] div,
[data-panel="contacts"] div[data-role="carddav-tools"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-panel="contacts"] ul[data-role="carddav-found"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="contacts"] ul[data-role="carddav-found"] button {
  width: 100%;
  justify-content: space-between;
}

[data-panel="contacts"] ul[data-role="carddav-found"] span[data-role="carddav-choose"] {
  color: var(--sk-text-muted);
  font-size: 0.8rem;
}

/* Annuaire de l'établissement (LDAP) : annuaires déclarés, chacun avec son adresse, son chiffrement et ses outils. */
[data-panel="contacts"] section[data-role="contacts-directories"] {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="contacts"] section[data-role="contacts-directories"] h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

[data-panel="contacts"] section[data-role="contacts-directories"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] ul[data-role="directory-list"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

[data-panel="contacts"] ul[data-role="directory-list"] li {
  display: grid;
  gap: 0.25rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
}

/* Annuaire désactivé : conservé, visiblement en retrait — jamais effacé dans le dos de l'utilisateur. */
[data-panel="contacts"] ul[data-role="directory-list"] li[data-disabled="true"] {
  opacity: 0.62;
}

[data-panel="contacts"] ul[data-role="directory-list"] p[data-role="directory-name"] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sk-text);
}

[data-panel="contacts"] span[data-role="directory-badge"] {
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  font-size: 0.7rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] ul[data-role="directory-list"] p[data-role="directory-base"] {
  font-family: var(--sk-font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  word-break: break-all;
}

[data-panel="contacts"] div[data-role="directory-tools"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

[data-panel="contacts"] p[data-role="directory-ok"],
[data-panel="contacts"] p[data-role="directory-error"],
[data-panel="contacts"] p[data-role="directory-invalid"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="contacts"] p[data-role="directory-ok"] {
  color: var(--sk-accent, var(--sk-text));
}

[data-panel="contacts"] form[data-role="directory-form"] {
  display: grid;
  gap: 0.4rem;
}

[data-panel="contacts"] form[data-role="directory-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] form[data-role="directory-form"] input,
[data-panel="contacts"] form[data-role="directory-form"] select {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.6rem;
}

[data-panel="contacts"] form[data-role="directory-form"] div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Groupes de contacts : liste de filtres façon barre latérale, outils du groupe affiché, création/renommage en ligne. */
[data-panel="contacts"] nav[data-role="contact-groups"] {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-panel="contacts"] nav[data-role="contact-groups"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-panel="contacts"] nav[data-role="contact-groups"] ul button {
  width: 100%;
  border-color: transparent;
  padding: 0.35rem 0.55rem;
  text-align: start;
  gap: 0.55rem;
}

[data-panel="contacts"] nav[data-role="contact-groups"] ul button:hover {
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
}

[data-panel="contacts"] nav[data-role="contact-groups"] ul button[aria-current="true"] {
  background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--sk-accent) 35%, transparent);
}

[data-panel="contacts"] nav[data-role="contact-groups"] ul button svg {
  color: rgba(168, 130, 63, 0.95);
}

[data-panel="contacts"] [data-role="contact-group-name"] {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-panel="contacts"] [data-role="contact-group-count"] {
  flex: none;
  color: var(--sk-text-muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

[data-panel="contacts"] [data-role="contact-group-tools"],
[data-panel="contacts"] form[data-role="contact-group-editor"] div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-panel="contacts"] form[data-role="contact-group-editor"] {
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

[data-panel="contacts"] form[data-role="contact-group-editor"] label {
  display: grid;
  gap: 0.25rem;
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="contacts"] form[data-role="contact-group-editor"] input {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.4rem 0.55rem;
}

[data-panel="contacts"] fieldset[data-role="contact-form-groups"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0;
  padding: 0.5rem 0.7rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
}

[data-panel="contacts"] fieldset[data-role="contact-form-groups"] legend {
  padding: 0 0.3rem;
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="contacts"] form[data-form="contact"] fieldset[data-role="contact-form-groups"] label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sk-text);
  font-size: 0.9rem;
}

[data-panel="contacts"] form[data-form="contact"] fieldset[data-role="contact-form-groups"] input {
  accent-color: var(--sk-accent);
  padding: 0;
}

[data-panel="contacts"] ul[data-role="contact-list"] {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

[data-panel="contacts"] ul[data-role="contact-list"] button {
  width: 100%;
  border-color: transparent;
  padding: 0.45rem 0.55rem;
  text-align: start;
  gap: 0.65rem;
}

[data-panel="contacts"] ul[data-role="contact-list"] button:hover {
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
}

[data-panel="contacts"] ul[data-role="contact-list"] button[aria-current="true"] {
  background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
  border-color: color-mix(in srgb, var(--sk-accent) 35%, transparent);
}

[data-panel="contacts"] [data-role="contact-avatar"] {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sk-accent);
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sk-accent) 30%, transparent);
}

[data-panel="contacts"] [data-role="contact-avatar"] img,
[data-panel="contacts"] [data-role="contact-photo"] img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

[data-panel="contacts"] [data-role="contact-avatar"]:has(img) {
  overflow: hidden;
}

[data-panel="contacts"] [data-role="contact-form-photo"] {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

[data-panel="contacts"] [data-role="contact-photo"] {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--sk-text-muted);
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  box-shadow: 0 1px 3px color-mix(in srgb, #000 12%, transparent);
}

[data-panel="contacts"] [data-role="contact-photo"] svg {
  width: 2.4rem;
  height: 2.4rem;
}

[data-panel="contacts"] [data-role="contact-form-photo"] > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-panel="contacts"] [data-role="contact-text"] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

[data-panel="contacts"] [data-role="contact-text"] > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-panel="contacts"] [data-role="contact-email"],
[data-panel="contacts"] [data-role="contact-organization"],
[data-panel="contacts"] [data-role="contact-list-empty"],
[data-panel="contacts"] [data-role="contact-list-no-results"] {
  color: var(--sk-text-muted);
  font-size: 0.82rem;
}

[data-panel="contacts"] [data-role="contact-badge"] {
  flex: none;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--sk-surface-border);
  color: var(--sk-text-muted);
}

[data-panel="contacts"] [data-role="contact-card"] {
  padding: 1rem 1.1rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  background: color-mix(in srgb, var(--sk-bg-elevated) 60%, transparent);
}

[data-panel="contacts"] form[data-form="contact"] {
  display: grid;
  gap: 0.7rem;
}

[data-panel="contacts"] form[data-form="contact"] h1 {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
}

[data-panel="contacts"] form[data-form="contact"] label {
  display: grid;
  gap: 0.25rem;
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="contacts"] fieldset[data-role="contact-form-phones"] {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem 0.7rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
}

[data-panel="contacts"] fieldset[data-role="contact-form-phones"] legend {
  padding: 0 0.3rem;
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

[data-panel="contacts"] [data-role="contact-form-phone"] {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.4rem;
}

[data-panel="contacts"] form[data-form="contact"] input,
[data-panel="contacts"] form[data-form="contact"] select,
[data-panel="contacts"] form[data-form="contact"] textarea {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.4rem 0.55rem;
}

[data-panel="contacts"] form[data-form="contact"] textarea {
  min-height: 3.5rem;
  resize: vertical;
}

[data-panel="contacts"] [aria-invalid="true"] {
  border-color: #c2413b;
}

[data-panel="contacts"] [data-role="contact-form-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-panel="contacts"] button[type="submit"],
[data-panel="contacts"] [data-role="contacts-confirm"] button[data-action^="contacts.confirm"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

[data-panel="contacts"] [data-role="contacts-notice"],
[data-panel="contacts"] [data-role="contact-form-invalid"],
[data-panel="contacts"] [data-role="contacts-confirm"] {
  margin: 0 0 0.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  font-size: 0.9rem;
}

[data-panel="contacts"] [data-role="contacts-confirm"] p {
  margin: 0 0 0.5rem;
}

[data-panel="contacts"] [data-role="contacts-confirm"] div {
  display: flex;
  gap: 0.5rem;
}

/* Revue des doublons : panneau en verre dépoli au-dessus de l'annuaire — un bloc par rapprochement, fiches d'origine à gauche du résultat. */
[data-panel="contacts"] section[data-role="contacts-duplicates"] {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
}

[data-panel="contacts"] section[data-role="contacts-duplicates"] h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 1rem;
}

[data-panel="contacts"] section[data-role="contacts-duplicates"] > p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] ul[data-role="duplicate-groups"] {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-panel="contacts"] li[data-role="duplicate-group"] {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
}

[data-panel="contacts"] p[data-role="duplicate-reason"] {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

[data-panel="contacts"] ul[data-role="duplicate-members"] {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

[data-panel="contacts"] ul[data-role="duplicate-members"] li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
}

/* Fiche qui survit à la fusion : signalée par le liseré d'accent, jamais par un texte de plus. */
[data-panel="contacts"] ul[data-role="duplicate-members"] li[data-primary="true"] {
  padding-left: 0.5rem;
  border-left: 3px solid var(--sk-accent);
}

[data-panel="contacts"] [data-role="duplicate-preview"] {
  display: grid;
  gap: 0.25rem;
  padding: 0.6rem 0.7rem;
  border: 1px dashed var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="contacts"] [data-role="duplicate-preview"] h3 {
  margin: 0 0 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
  font-weight: 600;
}

[data-panel="contacts"] p[data-role="duplicate-field"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.85rem;
}

[data-panel="contacts"] p[data-role="duplicate-field"] > span:first-child {
  min-width: 8rem;
  color: var(--sk-text-muted);
}

[data-panel="contacts"] p[data-role="duplicate-conflict"],
[data-panel="contacts"] p[data-role="duplicate-blocked"] {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="contacts"] [data-role="duplicates-tools"],
[data-panel="contacts"] [data-role="contacts-maintenance"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-panel="contacts"] [data-role="contacts-maintenance"] {
  margin-bottom: 0.75rem;
}

[data-panel="contacts"] [data-role="contacts-notice"] button[data-action="contacts.duplicates.undo"] {
  margin-left: 0.5rem;
}

/* Verrouillage de l'application : le courrier est retiré de l'affichage, seul l'écran de verrouillage reste. */
#app[data-app-locked] {
  display: none !important;
}

[data-role="app-lock-layer"][hidden] {
  display: none;
}

[data-role="app-lock-layer"] {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(60rem 40rem at 30% 20%, color-mix(in srgb, var(--sk-accent) 14%, transparent), transparent 70%),
    var(--sk-bg);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--sk-text);
}

[data-component="app-lock"] .app-lock-card {
  width: min(22rem, calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding: 2rem 1.75rem 1.6rem;
  text-align: center;
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--sk-surface-blur)) saturate(1.4);
  box-shadow: var(--sk-shadow-glass);
}

[data-component="app-lock"] .app-lock-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  color: var(--sk-accent);
  background: color-mix(in srgb, var(--sk-accent) 12%, transparent);
}

[data-component="app-lock"] .app-lock-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

[data-component="app-lock"] h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-component="app-lock"] p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--sk-text-muted);
}

[data-component="app-lock"] label {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  text-align: left;
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

[data-component="app-lock"] input {
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
}

[data-component="app-lock"] input:focus-visible,
[data-component="app-lock"] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-component="app-lock"] p[data-role="app-lock-error"] {
  min-height: 1.3em;
  color: var(--sk-accent);
  font-weight: 500;
}

[data-component="app-lock"] button {
  align-self: stretch;
  border: none;
  border-radius: var(--sk-radius-sm);
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font: inherit;
  font-weight: 600;
  padding: 0.6rem 1rem;
  cursor: pointer;
}

[data-component="app-lock"] button:disabled {
  opacity: 0.6;
  cursor: default;
}

[data-panel="settings"] [data-role="app-lock"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="settings"] [data-role="app-lock"] h3,
[data-panel="settings"] [data-action="settings.appLock.lockNow"] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

[data-panel="settings"] [data-role="app-lock"] h3 {
  margin: 0;
  font-size: 1rem;
}

[data-panel="settings"] [data-role="app-lock"] svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sk-accent);
}

[data-panel="settings"] [data-role="app-lock"] p[role="alert"] {
  margin: 0;
  color: var(--sk-accent);
}

/* « Sauvegarde des réglages » (Stockage local) : même carte détachée que le verrouillage — séparateur, titre à icône, issue discrète. */
[data-panel="settings"] [data-role="settings-backup-block"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="settings"] [data-role="settings-backup-block"] h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 1rem;
}

[data-panel="settings"] [data-role="settings-backup-block"] svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--sk-accent);
}

[data-panel="settings"] [data-role="settings-backup-block"] form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  width: 100%;
}

[data-panel="settings"] [data-role="settings-backup"] {
  margin: 0;
  color: var(--sk-text-muted);
}

[data-panel="settings"] [data-role="settings-backup"][data-status="failed"] {
  color: var(--sk-accent);
}

/* ---- Panneau Agenda : grille jour/semaine/mois en verre dépoli, accent or sobre sur aujourd'hui (look macOS « Liquid Glass » SANTVIA). ---- */
[data-panel="agenda"] [data-role="agenda-layout"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  [data-panel="agenda"] [data-role="agenda-layout"] {
    grid-template-columns: 1fr;
  }
}

[data-panel="agenda"] [data-role="agenda-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

[data-panel="agenda"] [data-role="agenda-period"] {
  flex: 1 1 12rem;
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* Numéro de semaine ISO : pastille discrète, jamais mise en capitales (« vk 39 », « v. 39 » s'écrivent ainsi). */
[data-panel="agenda"] [data-role="agenda-week-number"] {
  display: inline-block;
  margin-inline-start: 0.55rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sk-accent) 12%, transparent);
  color: var(--sk-text-muted);
  font-size: 0.72rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  vertical-align: middle;
  white-space: nowrap;
}

[data-panel="agenda"] [data-role="agenda-day"] h3 [data-role="agenda-week-number"] {
  margin-inline-start: auto;
  font-size: 0.68rem;
}

[data-panel="agenda"] [data-role="agenda-nav"],
[data-panel="agenda"] [data-role="agenda-views"] {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] [data-role="agenda-nav"] button,
[data-panel="agenda"] [data-role="agenda-views"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-nav"] button svg,
[data-panel="agenda"] [data-role="agenda-views"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="agenda"] [data-role="agenda-nav"] button:hover,
[data-panel="agenda"] [data-role="agenda-views"] button:hover {
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg-elevated) 92%, transparent);
}

[data-panel="agenda"] [data-role="agenda-views"] button[aria-pressed="true"] {
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

[data-panel="agenda"] [data-role="agenda-weekdays"],
[data-panel="agenda"] [data-role="agenda-grid"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-panel="agenda"] [data-role="agenda-weekdays"] {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.78rem;
  color: var(--sk-text-muted);
  text-transform: capitalize;
}

[data-panel="agenda"] [data-role="agenda-grid"] {
  display: grid;
  gap: 0.4rem;
}

[data-panel="agenda"] [data-role="agenda-grid"][data-view="week"],
[data-panel="agenda"] [data-role="agenda-grid"][data-view="month"] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

[data-panel="agenda"] [data-role="agenda-grid"][data-view="workWeek"] {
  grid-template-columns: repeat(var(--agenda-columns, 5), minmax(0, 1fr));
}

/* Vue Année : douze mini-mois en verre dépoli, jours occupés marqués d'un point or. */
[data-panel="agenda"] [data-role="agenda-grid"][data-view="year"] {
  grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
  gap: 0.75rem;
}

[data-panel="agenda"] [data-role="agenda-year-month"] {
  padding: 0.6rem 0.65rem 0.7rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 62%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] [data-role="agenda-year-month"] h3 {
  margin: 0 0 0.4rem;
}

[data-panel="agenda"] [data-role="agenda-year-month"] h3 button {
  padding: 0.1rem 0.3rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: capitalize;
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-year-weekdays"],
[data-panel="agenda"] [data-role="agenda-year-days"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
}

[data-panel="agenda"] [data-role="agenda-year-weekdays"] {
  font-size: 0.68rem;
  color: var(--sk-text-muted);
  text-transform: uppercase;
}

[data-panel="agenda"] [data-role="agenda-year-days"] button {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-year-month"] h3 button:hover,
[data-panel="agenda"] [data-role="agenda-year-days"] button:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

[data-panel="agenda"] [data-role="agenda-year-days"] button[data-busy="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 0.26rem;
  height: 0.26rem;
  margin-left: -0.13rem;
  border-radius: 50%;
  background: var(--sk-accent);
}

[data-panel="agenda"] [data-role="agenda-year-days"] button[data-today="true"] {
  background: var(--sk-accent);
  color: var(--sk-bg-elevated);
  font-weight: 600;
}

[data-panel="agenda"] [data-role="agenda-year-days"] button[data-today="true"]::after {
  background: currentColor;
}

/* Mini-calendrier de la colonne latérale : mêmes cases que la vue Année, période affichée surlignée. */
[data-panel="agenda"] [data-role="agenda-mini-month"] {
  padding: 0.55rem 0.6rem 0.65rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 62%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] [data-role="agenda-mini-month-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
}

[data-panel="agenda"] [data-role="agenda-mini-month-header"] h2 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: capitalize;
}

[data-panel="agenda"] [data-role="agenda-mini-month-header"] button {
  display: inline-flex;
  padding: 0.2rem;
  border: 0;
  border-radius: 0.4rem;
  background: none;
  color: var(--sk-text-muted);
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-mini-month-header"] button:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
  color: var(--sk-text);
}

/* Colonne des numéros de semaine ISO, en tête de chaque ligne : plus étroite, discrète, cliquable (vue Semaine). */
[data-panel="agenda"] [data-role="agenda-mini-month"] [data-role="agenda-year-weekdays"],
[data-panel="agenda"] [data-role="agenda-mini-month"] [data-role="agenda-year-days"] {
  grid-template-columns: 1.5rem repeat(7, minmax(0, 1fr));
}

[data-panel="agenda"] [data-role="agenda-mini-month"] [data-role="agenda-year-days"] button[data-role="agenda-mini-week"] {
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0.4rem;
  color: var(--sk-text-muted);
  font-size: 0.64rem;
}

[data-panel="agenda"] [data-role="agenda-mini-month"] [data-role="agenda-year-days"] button[data-selected="true"]:not([data-today="true"]) {
  background: color-mix(in srgb, var(--sk-accent) 20%, transparent);
  border-radius: 0.4rem;
}

@media (max-width: 760px) {
  [data-panel="agenda"] [data-role="agenda-weekdays"] {
    display: none;
  }

  [data-panel="agenda"] [data-role="agenda-grid"][data-view="workWeek"],
  [data-panel="agenda"] [data-role="agenda-grid"][data-view="week"],
  [data-panel="agenda"] [data-role="agenda-grid"][data-view="month"] {
    grid-template-columns: 1fr;
  }
}

[data-panel="agenda"] [data-role="agenda-day"] {
  min-height: 5.5rem;
  padding: 0.5rem 0.55rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 62%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] [data-role="agenda-day"][data-outside="true"] {
  opacity: 0.55;
}

[data-panel="agenda"] [data-role="agenda-day"][data-today="true"] {
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sk-accent) 30%, transparent);
}

[data-panel="agenda"] [data-role="agenda-day"] h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sk-text-muted);
  text-transform: capitalize;
}

[data-panel="agenda"] [data-role="agenda-day"][data-today="true"] h3 {
  color: var(--sk-accent);
}

[data-panel="agenda"] [data-role="agenda-day"] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

[data-panel="agenda"] [data-role="agenda-day-empty"] {
  margin: 0;
  font-size: 0.78rem;
  color: var(--sk-text-muted);
  opacity: 0.6;
}

[data-panel="agenda"] [data-role="agenda-event"] {
  display: grid;
  gap: 0.05rem;
  padding: 0.3rem 0.4rem 0.3rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 88%, transparent);
  border-left: 2px solid var(--agenda-event-color, var(--sk-accent));
  font-size: 0.82rem;
}

/* Rendez-vous « libre » (TRANSP:TRANSPARENT) : carte en retrait, filet tireté — le créneau reste proposable (Outlook, Google). */
[data-panel="agenda"] [data-role="agenda-event"][data-show-as="free"] {
  background: transparent;
  border-left-style: dashed;
}

[data-panel="agenda"] [data-role="agenda-event-free"] {
  font-size: 0.72rem;
  color: var(--sk-text-muted);
}

/* Rendez-vous privé (CLASS) : cadenas fin + « Privé » en toutes lettres, jamais l'icône seule. */
[data-panel="agenda"] [data-role="agenda-event-private"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-event-private"] svg {
  width: 0.8rem;
  height: 0.8rem;
}

/* Catégories (CATEGORIES) : pastilles de verre nommées, jamais une couleur seule. */
[data-panel="agenda"] [data-role="agenda-event-categories"],
[data-panel="tasks"] [data-role="task-categories"] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

[data-panel="agenda"] [data-role="agenda-event-category"],
[data-panel="tasks"] [data-role="task-category"] {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  background: var(--sk-surface);
  font-size: 0.7rem;
  color: var(--sk-text-muted);
  white-space: nowrap;
}

/* Anniversaire d'un contact : même carte qu'un rendez-vous, filet or en pointillé — lu, jamais modifié ici. */
[data-panel="agenda"] [data-role="agenda-birthday"] {
  display: grid;
  gap: 0.05rem;
  padding: 0.3rem 0.4rem 0.3rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sk-accent) 8%, transparent);
  border-left: 2px dotted var(--sk-accent);
  font-size: 0.82rem;
}

[data-panel="agenda"] [data-role="agenda-birthday"] svg {
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 0.25rem;
  vertical-align: -0.15rem;
  color: var(--sk-accent);
}

[data-panel="agenda"] [data-role="agenda-event-time"] {
  font-variant-numeric: tabular-nums;
  color: var(--sk-text-muted);
  font-size: 0.75rem;
}

[data-panel="agenda"] [data-role="agenda-event-title"] {
  font-weight: 600;
}

[data-panel="agenda"] [data-role="agenda-event-location"],
[data-panel="agenda"] [data-role="agenda-event-zone"],
[data-panel="agenda"] [data-role="agenda-approximate"] {
  color: var(--sk-text-muted);
  font-size: 0.75rem;
}

[data-panel="agenda"] [data-role="agenda-approximate"] {
  margin-left: 0.2rem;
}

[data-panel="agenda"] [data-role="agenda-empty"],
[data-panel="agenda"] [data-role="agenda-notice"] {
  margin: 0 0 0.75rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-notice"][data-kind="error"] {
  color: var(--sk-accent);
  font-weight: 600;
}

[data-panel="agenda"] ul[data-role="agenda-calendars"] {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="agenda"] [data-role="agenda-calendar"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.88rem;
}

[data-panel="agenda"] [data-role="agenda-calendar"] label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

[data-panel="agenda"] [data-role="agenda-calendar-swatch"] {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  border-radius: 3px;
  background: var(--agenda-calendar-color, var(--sk-accent));
}

[data-panel="agenda"] [data-role="agenda-calendar-readonly"] {
  flex: none;
  font-size: 0.72rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-default"] {
  display: grid;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-show-birthdays"] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-show-birthdays"] input {
  accent-color: var(--sk-accent);
}

[data-panel="agenda"] [data-role="agenda-default"] select,
[data-panel="agenda"] form[data-role="agenda-caldav-form"] input,
[data-panel="agenda"] form[data-role="agenda-ics-form"] input {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.6rem;
}

/* Agenda du serveur (CalDAV) : même bloc en verre dépoli que le carnet CardDAV du panneau Contacts. */
[data-panel="agenda"] section[data-role="agenda-caldav"],
[data-panel="agenda"] section[data-role="agenda-ics"],
[data-panel="agenda"] section[data-role="agenda-file"] {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="agenda"] section[data-role="agenda-caldav"] h2,
[data-panel="agenda"] section[data-role="agenda-ics"] h2,
[data-panel="agenda"] section[data-role="agenda-file"] h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

[data-panel="agenda"] section[data-role="agenda-caldav"] h2 svg,
[data-panel="agenda"] section[data-role="agenda-ics"] h2 svg,
[data-panel="agenda"] section[data-role="agenda-file"] h2 svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--sk-accent);
}

[data-panel="agenda"] section[data-role="agenda-caldav"] p,
[data-panel="agenda"] section[data-role="agenda-ics"] p,
[data-panel="agenda"] section[data-role="agenda-file"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] section[data-role="agenda-caldav"] p[data-role="agenda-caldav-account"],
[data-panel="agenda"] section[data-role="agenda-ics"] p[data-role="agenda-ics-name"] {
  color: var(--sk-text);
}

[data-panel="agenda"] section[data-role="agenda-caldav"] p[data-role="agenda-caldav-error"],
[data-panel="agenda"] section[data-role="agenda-caldav"] p[data-role="agenda-caldav-none"],
[data-panel="agenda"] section[data-role="agenda-caldav"] p[data-role="agenda-caldav-invalid"],
[data-panel="agenda"] section[data-role="agenda-ics"] p[data-role="agenda-ics-error"],
[data-panel="agenda"] section[data-role="agenda-ics"] p[data-role="agenda-ics-invalid"],
[data-panel="agenda"] section[data-role="agenda-file"] p[data-role="agenda-file-error"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="agenda"] form[data-role="agenda-caldav-form"],
[data-panel="agenda"] form[data-role="agenda-ics-form"] {
  display: grid;
  gap: 0.4rem;
}

[data-panel="agenda"] form[data-role="agenda-caldav-form"] label,
[data-panel="agenda"] form[data-role="agenda-ics-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] section[data-role="agenda-caldav"] button,
[data-panel="agenda"] section[data-role="agenda-ics"] button,
[data-panel="agenda"] section[data-role="agenda-file"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

[data-panel="agenda"] section[data-role="agenda-caldav"] button svg,
[data-panel="agenda"] section[data-role="agenda-ics"] button svg,
[data-panel="agenda"] section[data-role="agenda-file"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="agenda"] section[data-role="agenda-caldav"] button:hover,
[data-panel="agenda"] section[data-role="agenda-ics"] button:hover,
[data-panel="agenda"] section[data-role="agenda-file"] button:hover {
  border-color: color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
}

[data-panel="agenda"] ul[data-role="agenda-caldav-found"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="agenda"] ul[data-role="agenda-caldav-found"] button {
  width: 100%;
  justify-content: space-between;
}

[data-panel="agenda"] [data-role="agenda-caldav-choose"] {
  color: var(--sk-accent);
  font-size: 0.8rem;
}

[data-panel="agenda"] [data-role="agenda-caldav-tools"],
[data-panel="agenda"] [data-role="agenda-ics-tools"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Fichier iCalendar : deux lignes « agenda + bouton », le choix d'agenda à gauche et le geste à droite. */
[data-panel="agenda"] section[data-role="agenda-file"] form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.4rem;
}

[data-panel="agenda"] section[data-role="agenda-file"] form label {
  display: grid;
  gap: 0.2rem;
  flex: 1 1 9rem;
  min-width: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] section[data-role="agenda-file"] form select {
  min-width: 0;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.5rem;
}

/* Abonnements iCalendar : une carte par agenda publié, l'adresse en second rang (elle est longue et publique). */
[data-panel="agenda"] ul[data-role="agenda-ics-list"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

[data-panel="agenda"] li[data-role="agenda-ics-item"] {
  display: grid;
  gap: 0.3rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 55%, transparent);
  padding: 0.5rem 0.6rem;
}

[data-panel="agenda"] p[data-role="agenda-ics-name"] {
  display: grid;
  gap: 0.15rem;
}

[data-panel="agenda"] [data-role="agenda-ics-url"] {
  font-size: 0.78rem;
  color: var(--sk-text-muted);
  overflow-wrap: anywhere;
}

[data-panel="agenda"] button:focus-visible,
[data-panel="agenda"] input:focus-visible,
[data-panel="agenda"] select:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 1px;
}
/* Formulaire d'un rendez-vous (créer / modifier) : verre dépoli posé au-dessus de la grille, deux colonnes dès
   qu'il y a la place — la même matière que les autres cartes du client. */
[data-panel="agenda"] form[data-role="agenda-event-form"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 0.8rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem 0.95rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 76%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-glass);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] h2 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] h2 svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--sk-accent);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] label[data-role="agenda-field-summary"],
[data-panel="agenda"] form[data-role="agenda-event-form"] label[data-role="agenda-field-description"],
[data-panel="agenda"] form[data-role="agenda-event-form"] p,
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-actions"],
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-confirm"] {
  grid-column: 1 / -1;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] label[data-role="agenda-field-allDay"] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  align-self: end;
  color: var(--sk-text);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] input[type="checkbox"] {
  accent-color: var(--sk-accent);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] textarea {
  font: inherit;
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  padding: 0.35rem 0.5rem;
  resize: vertical;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-event-invalid"],
[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-event-blocked"] {
  color: var(--sk-text);
  font-weight: 600;
}

/* Participants : champ pleine largeur, aide discrète, et réponses déjà reçues en liste lisible (verre dépoli, accent or). */
[data-panel="agenda"] form[data-role="agenda-event-form"] label[data-role="agenda-field-attendees"],
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendees-readonly"],
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendee-statuses"] {
  grid-column: 1 / -1;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-event-attendees-hint"],
[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-event-categories-hint"] {
  font-size: 0.78rem;
  margin-top: -0.25rem;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-event-attendees-invalid"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendees-readonly"] p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendees-readonly"] svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--sk-accent);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendee-statuses"] {
  display: grid;
  gap: 0.25rem;
  margin: 0.15rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-attendee-statuses"] li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.25rem 0.5rem;
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg) 60%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-attendee-partstat"] {
  flex: none;
  color: var(--sk-text-muted);
}

/* Répondu : l'accent or ne marque QUE l'acceptation (un refus n'est pas une alerte, il est simplement dit). */
[data-panel="agenda"] form[data-role="agenda-event-form"] li[data-partstat="ACCEPTED"] [data-role="agenda-attendee-partstat"] {
  color: var(--sk-accent);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

/* Assistant de planification : grille de créneaux en verre dépoli, un créneau libre marqué à l'accent or et rien d'autre
   (règle n°3 — on n'affiche que des périodes, jamais un rendez-vous d'autrui). */
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability"] {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.35rem;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-availability-hint"] {
  font-size: 0.78rem;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] p[data-role="agenda-availability-limited"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-slots"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-slots"] button {
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: left;
  font-size: 0.82rem;
  background: color-mix(in srgb, var(--sk-bg) 60%, transparent);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-range"] {
  font-weight: 600;
  color: var(--sk-text);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] li[data-free="true"] [data-role="agenda-availability-range"],
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-verdict"] {
  color: var(--sk-accent);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-busy"],
[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-availability-unknown"] {
  color: var(--sk-text-muted);
  overflow-wrap: anywhere;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] [data-role="agenda-event-confirm"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="agenda"] form[data-role="agenda-event-form"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] button[type="submit"] {
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
  background: color-mix(in srgb, var(--sk-accent) 18%, var(--sk-bg-elevated));
  font-weight: 600;
}

[data-panel="agenda"] form[data-role="agenda-event-form"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* Le rendez-vous est un bouton : même surface qu'avant, aucune décoration de lien. */
[data-panel="agenda"] [data-role="agenda-event"] > button {
  display: grid;
  gap: 0.05rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-event"] > button:hover [data-role="agenda-event-title"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Lien du rendez-vous (visio) : pastille ronde à droite de la carte, un clic l'ouvre dans le navigateur du système. */
[data-panel="agenda"] [data-role="agenda-event"][data-has-link="true"],
[data-panel="agenda"] [data-role="agenda-search-result"][data-has-link="true"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.4rem;
}

[data-panel="agenda"] [data-role="agenda-event"] > button[data-action="agenda.openEventUrl"],
[data-panel="agenda"] [data-role="agenda-search-result"] > button[data-action="agenda.openEventUrl"] {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  background: var(--sk-surface);
  color: var(--sk-accent);
  cursor: pointer;
}

[data-panel="agenda"] [data-role="agenda-event"] > button[data-action="agenda.openEventUrl"]:hover,
[data-panel="agenda"] [data-role="agenda-search-result"] > button[data-action="agenda.openEventUrl"]:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, var(--sk-surface));
}

[data-panel="agenda"] [data-role="agenda-event"] > button[data-action="agenda.openEventUrl"] svg,
[data-panel="agenda"] [data-role="agenda-search-result"] > button[data-action="agenda.openEventUrl"] svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Glisser un rendez-vous sur un autre jour : poignée « main », case visée soulignée du liseré or des dossiers. */
[data-panel="agenda"] [data-role="agenda-event"][draggable="true"] > button {
  cursor: grab;
}

[data-panel="agenda"] [data-role="agenda-day"][data-drop-target] {
  background: rgba(168, 130, 63, 0.12);
  box-shadow: inset 0 0 0 1px rgba(168, 130, 63, 0.55);
}

/* ---- « Aller à la date » : sélecteur de date natif + validation, même pastille de verre que la recherche. ---- */
[data-panel="agenda"] form[data-role="agenda-go-to-date"] {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.2rem 0.2rem 0.5rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

/* L'intitulé n'est lu que par les lecteurs d'écran : le champ de date se suffit à l'œil. */
[data-panel="agenda"] form[data-role="agenda-go-to-date"] label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-panel="agenda"] form[data-role="agenda-go-to-date"] input {
  border: 0;
  background: none;
  color: inherit;
  color-scheme: light dark;
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 0.25rem 0;
}

[data-panel="agenda"] form[data-role="agenda-go-to-date"] button {
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  padding: 0.3rem 0.45rem;
  cursor: pointer;
}

[data-panel="agenda"] form[data-role="agenda-go-to-date"] button:hover {
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg-elevated) 92%, transparent);
}

[data-panel="agenda"] form[data-role="agenda-go-to-date"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* ---- Recherche dans l'agenda : champ dans la barre d'outils, résultats en liste chronologique à la place de la grille. ---- */
[data-panel="agenda"] form[data-role="agenda-search"],
[data-panel="tasks"] form[data-role="tasks-search"] {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 14rem;
  min-width: 12rem;
  padding: 0.2rem 0.2rem 0.2rem 0.6rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="agenda"] [data-role="agenda-search-field"],
[data-panel="tasks"] [data-role="tasks-search-field"] {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* L'intitulé du champ n'est lu que par les lecteurs d'écran : la loupe le dit à l'œil. */
[data-panel="agenda"] [data-role="agenda-search-field"] > span,
[data-panel="tasks"] [data-role="tasks-search-field"] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-panel="agenda"] [data-role="agenda-search-field"] input,
[data-panel="tasks"] [data-role="tasks-search-field"] input {
  width: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0.25rem 0;
}

[data-panel="agenda"] form[data-role="agenda-search"] button,
[data-panel="tasks"] form[data-role="tasks-search"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

[data-panel="agenda"] form[data-role="agenda-search"] button:hover,
[data-panel="tasks"] form[data-role="tasks-search"] button:hover {
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg-elevated) 92%, transparent);
}

[data-panel="agenda"] form[data-role="agenda-search"] button svg,
[data-panel="tasks"] form[data-role="tasks-search"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="agenda"] [data-role="agenda-search-results"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

[data-panel="agenda"] [data-role="agenda-search-count"],
[data-panel="tasks"] [data-role="tasks-search-count"] {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-search-empty"],
[data-panel="agenda"] [data-role="agenda-search-truncated"],
[data-panel="agenda"] [data-role="agenda-search-window"] {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--sk-text-muted);
}

[data-panel="agenda"] [data-role="agenda-search-result"] {
  padding: 0.45rem 0.6rem 0.45rem 0.7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 88%, transparent);
  border-left: 2px solid var(--agenda-event-color, var(--sk-accent));
  font-size: 0.86rem;
}

[data-panel="agenda"] [data-role="agenda-search-result"] > button {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) minmax(4rem, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 0.2rem 0.75rem;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

@media (max-width: 700px) {
  [data-panel="agenda"] [data-role="agenda-search-result"] > button {
    grid-template-columns: minmax(0, 1fr);
  }
}

[data-panel="agenda"] [data-role="agenda-search-date"] {
  color: var(--sk-text-muted);
  font-size: 0.78rem;
  text-transform: capitalize;
}

[data-panel="agenda"] [data-role="agenda-search-result"] > button:hover [data-role="agenda-event-title"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

[data-panel="agenda"] [data-role="agenda-search-result"] [data-role="agenda-event-location"],
[data-panel="agenda"] [data-role="agenda-search-result"] [data-role="agenda-event-zone"] {
  grid-column: 3;
}

/* « + » d'un jour de la grille : discret, révélé au survol ou au clavier (il ne doit pas concurrencer la date). */
[data-panel="agenda"] [data-role="agenda-day"] h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

[data-panel="agenda"] [data-role="agenda-day"] h3 button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--sk-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}

[data-panel="agenda"] [data-role="agenda-day"] h3 button svg {
  width: 0.9rem;
  height: 0.9rem;
}

[data-panel="agenda"] [data-role="agenda-day"]:hover h3 button,
[data-panel="agenda"] [data-role="agenda-day"] h3 button:focus-visible {
  opacity: 1;
}

[data-panel="agenda"] [data-role="agenda-day"] h3 button:hover {
  background: color-mix(in srgb, var(--sk-accent) 18%, transparent);
  color: var(--sk-accent);
}

/* ---- Panneau Tâches (VTODO) : même matière verre dépoli et même accent or que l'agenda — une seule famille visuelle
   pour deux collections du même serveur. ---- */
[data-panel="tasks"] [data-role="tasks-layout"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  [data-panel="tasks"] [data-role="tasks-layout"] {
    grid-template-columns: 1fr;
  }
}

[data-panel="tasks"] [data-role="tasks-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

[data-panel="tasks"] [data-role="tasks-filters"] {
  display: flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="tasks"] [data-role="tasks-filters"] button {
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

[data-panel="tasks"] [data-role="tasks-filters"] button[aria-pressed="true"] {
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

[data-panel="tasks"] [data-role="tasks-toolbar"] > button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-accent) 14%, var(--sk-bg-elevated));
  color: var(--sk-text);
  font: inherit;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

[data-panel="tasks"] [data-role="tasks-toolbar"] > button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="tasks"] ol[data-role="tasks-items"],
[data-panel="tasks"] ul[data-role="task-children"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="tasks"] ul[data-role="task-children"] {
  margin: 0.3rem 0 0 1.5rem;
}

[data-panel="tasks"] [data-role="task-row"] {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 62%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-left: 2px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
}

[data-panel="tasks"] [data-role="task"][data-overdue="true"] > [data-role="task-row"] {
  border-left-color: var(--sk-accent);
}

[data-panel="tasks"] [data-role="task-check"] {
  display: inline-flex;
  align-items: center;
  flex: none;
}

[data-panel="tasks"] [data-role="task-check"] input[type="checkbox"] {
  accent-color: var(--sk-accent);
}

[data-panel="tasks"] [data-role="task-row"] > button {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

[data-panel="tasks"] [data-role="task-row"] > button:hover [data-role="task-summary"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

[data-panel="tasks"] [data-role="task-summary"] {
  font-weight: 600;
}

/* Tâche faite : barrée et en retrait, jamais escamotée (le filtre « Toutes » la montre telle quelle). */
[data-panel="tasks"] [data-role="task"][data-done="true"] [data-role="task-summary"] {
  text-decoration: line-through;
  color: var(--sk-text-muted);
  font-weight: 500;
}

[data-panel="tasks"] [data-role="task-due"],
[data-panel="tasks"] [data-role="task-progress"],
[data-panel="tasks"] [data-role="task-list-name"],
[data-panel="tasks"] [data-role="task-cancelled"] {
  font-size: 0.78rem;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
}

[data-panel="tasks"] [data-role="task-due"][data-overdue="true"],
[data-panel="tasks"] [data-role="task-overdue"] {
  color: var(--sk-accent);
  font-size: 0.78rem;
  font-weight: 600;
}

[data-panel="tasks"] [data-role="task-priority"] {
  font-size: 0.72rem;
  color: var(--sk-text-muted);
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
}

[data-panel="tasks"] [data-role="task-priority"][data-priority="1"] {
  color: var(--sk-accent);
  border-color: color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
}

[data-panel="tasks"] [data-role="tasks-empty"],
[data-panel="tasks"] [data-role="tasks-notice"] {
  margin: 0 0 0.75rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] [data-role="tasks-notice"][data-kind="error"],
[data-panel="tasks"] [data-role="tasks-notice"][data-kind="failed"] {
  color: var(--sk-accent);
  font-weight: 600;
}

[data-panel="tasks"] ul[data-role="tasks-lists"] {
  list-style: none;
  margin: 0 0 0.6rem;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="tasks"] [data-role="tasks-list"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.88rem;
}

[data-panel="tasks"] [data-role="tasks-list"] label {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

[data-panel="tasks"] [data-role="tasks-list-swatch"] {
  width: 0.65rem;
  height: 0.65rem;
  flex: none;
  border-radius: 3px;
  background: var(--tasks-list-color, var(--sk-accent));
}

[data-panel="tasks"] [data-role="tasks-list-readonly"] {
  flex: none;
  font-size: 0.72rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] [data-role="tasks-default"] {
  display: grid;
  gap: 0.2rem;
  font-size: 0.82rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] [data-role="tasks-sort"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] [data-role="tasks-sort"] select,
[data-panel="tasks"] [data-role="tasks-default"] select,
[data-panel="tasks"] form[data-role="tasks-caldav-form"] input {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.6rem;
}

/* Liste de tâches du serveur (CalDAV) : bloc jumeau de « Agenda du serveur ». */
[data-panel="tasks"] section[data-role="tasks-caldav"] {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="tasks"] section[data-role="tasks-caldav"] h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.95rem;
}

[data-panel="tasks"] section[data-role="tasks-caldav"] h2 svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--sk-accent);
}

[data-panel="tasks"] section[data-role="tasks-caldav"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] section[data-role="tasks-caldav"] p[data-role="tasks-caldav-account"] {
  color: var(--sk-text);
}

[data-panel="tasks"] section[data-role="tasks-caldav"] p[data-role="tasks-caldav-error"],
[data-panel="tasks"] section[data-role="tasks-caldav"] p[data-role="tasks-caldav-none"],
[data-panel="tasks"] section[data-role="tasks-caldav"] p[data-role="tasks-caldav-invalid"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="tasks"] form[data-role="tasks-caldav-form"] {
  display: grid;
  gap: 0.4rem;
}

[data-panel="tasks"] form[data-role="tasks-caldav-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] section[data-role="tasks-caldav"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

[data-panel="tasks"] section[data-role="tasks-caldav"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="tasks"] section[data-role="tasks-caldav"] button:hover {
  border-color: color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
}

[data-panel="tasks"] ul[data-role="tasks-caldav-found"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
}

[data-panel="tasks"] ul[data-role="tasks-caldav-found"] button {
  width: 100%;
  justify-content: space-between;
}

[data-panel="tasks"] [data-role="tasks-caldav-choose"] {
  color: var(--sk-accent);
  font-size: 0.8rem;
}

[data-panel="tasks"] [data-role="tasks-caldav-tools"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Formulaire d'une tâche : même carte en verre dépoli que celle d'un rendez-vous. */
[data-panel="tasks"] form[data-role="tasks-task-form"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.55rem 0.8rem;
  margin: 0 0 0.9rem;
  padding: 0.85rem 0.95rem;
  background: color-mix(in srgb, var(--sk-bg-elevated) 76%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  box-shadow: var(--sk-shadow-glass);
}

[data-panel="tasks"] form[data-role="tasks-task-form"] h2 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] h2 svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--sk-accent);
}

[data-panel="tasks"] form[data-role="tasks-task-form"] label {
  display: grid;
  gap: 0.2rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] form[data-role="tasks-task-form"] label[data-role="tasks-field-summary"],
[data-panel="tasks"] form[data-role="tasks-task-form"] label[data-role="tasks-field-description"],
[data-panel="tasks"] form[data-role="tasks-task-form"] p,
[data-panel="tasks"] form[data-role="tasks-task-form"] [data-role="tasks-task-actions"],
[data-panel="tasks"] form[data-role="tasks-task-form"] [data-role="tasks-task-confirm"] {
  grid-column: 1 / -1;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] input,
[data-panel="tasks"] form[data-role="tasks-task-form"] select,
[data-panel="tasks"] form[data-role="tasks-task-form"] textarea {
  font: inherit;
  color: var(--sk-text);
  background: color-mix(in srgb, var(--sk-bg) 70%, transparent);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  padding: 0.35rem 0.5rem;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] textarea {
  resize: vertical;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

[data-panel="tasks"] form[data-role="tasks-task-form"] p[data-role="tasks-task-invalid"],
[data-panel="tasks"] form[data-role="tasks-task-form"] p[data-role="tasks-task-blocked"] {
  color: var(--sk-text);
  font-weight: 600;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] [data-role="tasks-task-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] [data-role="tasks-task-confirm"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-panel="tasks"] form[data-role="tasks-task-form"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  color: var(--sk-text);
  font: inherit;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] button[type="submit"] {
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
  background: color-mix(in srgb, var(--sk-accent) 18%, var(--sk-bg-elevated));
  font-weight: 600;
}

[data-panel="tasks"] form[data-role="tasks-task-form"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="tasks"] button:focus-visible,
[data-panel="tasks"] input:focus-visible,
[data-panel="tasks"] select:focus-visible,
[data-panel="tasks"] textarea:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 1px;
}

/* ---- Panneau Veille (RSS/Atom) : trois colonnes comme le courrier — flux, entrées, article. Barre latérale au fond
   légèrement distinct, compteurs de non-lus en gris alignés à droite, liste dense à filets d'un pixel, pastille accent pour
   le non-lu. Clair et sombre par les seuls jetons --sk-* : rien à basculer, le thème suit la machine. Aucune transition
   hors transform/opacity (carte P0 « Refonte IHM » : budget 60 images/s). ---- */
[data-panel="feeds"] {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.35;
}

[data-panel="feeds"] svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-panel="feeds"] button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[data-panel="feeds"] button:disabled {
  opacity: 0.55;
  cursor: default;
}

[data-panel="feeds"] button:focus-visible,
[data-panel="feeds"] input:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 1px;
}

[data-panel="feeds"] [data-role="feeds-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.6rem;
}

[data-panel="feeds"] [data-role="feeds-toolbar"] button,
[data-panel="feeds"] [data-role="feeds-details-tools"] button,
[data-panel="feeds"] [data-role="feeds-reading-tools"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sk-text-muted);
  padding: 0.3rem 0.6rem;
}

[data-panel="feeds"] [data-role="feeds-toolbar"] button:hover:not(:disabled),
[data-panel="feeds"] [data-role="feeds-details-tools"] button:hover:not(:disabled),
[data-panel="feeds"] [data-role="feeds-reading-tools"] button:hover:not(:disabled) {
  color: var(--sk-text);
  background: var(--sk-bg-elevated);
  border-color: var(--sk-surface-border);
}

[data-panel="feeds"] [data-role="feeds-reading-tools"] button[aria-pressed="true"] {
  color: var(--sk-accent);
}

[data-panel="feeds"] form[data-role="feeds-add"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.9rem;
}

[data-panel="feeds"] form[data-role="feeds-add"] label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 22rem;
  min-width: 0;
  color: var(--sk-text-muted);
}

[data-panel="feeds"] form[data-role="feeds-add"] input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 70%, transparent);
  color: var(--sk-text);
  font: inherit;
}

[data-panel="feeds"] form[data-role="feeds-add"][data-invalid="true"] input {
  border-color: var(--sk-accent);
}

[data-panel="feeds"] form[data-role="feeds-add"] button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--sk-accent) 14%, var(--sk-bg-elevated));
  font-weight: 600;
  padding: 0.35rem 0.75rem;
}

[data-panel="feeds"] [data-role="feeds-add-invalid"] {
  flex: 1 0 100%;
  margin: 0;
  color: var(--sk-accent);
  font-weight: 600;
}

[data-panel="feeds"] [data-role="feeds-notice"] {
  margin: 0 0 0.6rem;
  color: var(--sk-text-muted);
}

[data-panel="feeds"] [data-role="feeds-notice"][data-kind="error"] {
  color: var(--sk-accent);
  font-weight: 600;
}

/* Trois colonnes : ~220 px de flux, ~340 px d'entrées, l'article prend le reste (2560 de large compris). */
[data-panel="feeds"] [data-role="feeds-layout"] {
  flex: 1 1 auto;
  min-height: 24rem;
  display: grid;
  grid-template-columns: minmax(12rem, 14rem) minmax(16rem, 22rem) minmax(0, 1fr);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  overflow: hidden;
  background: color-mix(in srgb, var(--sk-bg-elevated) 45%, transparent);
}

[data-panel="feeds"] [data-role="feeds-tree"],
[data-panel="feeds"] [data-role="feeds-main"],
[data-panel="feeds"] [data-role="feeds-reading-pane"] {
  min-width: 0;
  overflow-y: auto;
}

[data-panel="feeds"] [data-role="feeds-tree"] {
  padding: 0.5rem 0.4rem;
  background: color-mix(in srgb, var(--sk-text) 4%, transparent);
  border-right: 1px solid var(--sk-surface-border);
}

[data-panel="feeds"] [data-role="feeds-main"] {
  border-right: 1px solid var(--sk-surface-border);
}

@media (max-width: 1100px) {
  [data-panel="feeds"] [data-role="feeds-layout"] {
    grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
  }

  [data-panel="feeds"] [data-role="feeds-reading-pane"] {
    grid-column: 1 / -1;
    border-top: 1px solid var(--sk-surface-border);
  }
}

@media (max-width: 720px) {
  [data-panel="feeds"] [data-role="feeds-layout"] {
    grid-template-columns: 1fr;
  }

  [data-panel="feeds"] [data-role="feeds-tree"],
  [data-panel="feeds"] [data-role="feeds-main"] {
    border-right: 0;
    border-bottom: 1px solid var(--sk-surface-border);
  }
}

[data-panel="feeds"] ul[data-role="feeds-folder-items"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-panel="feeds"] [data-role="feeds-folder"] {
  margin-top: 0.6rem;
}

[data-panel="feeds"] [data-role="feeds-folder"] h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.15rem;
  padding: 0 0.5rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sk-text-muted);
}

[data-panel="feeds"] [data-role="feeds-folder"] h3 > span:not([data-role]) {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ligne de flux : 26 px, icône à gauche, compteur gris à droite ; sélection = rectangle arrondi à l'accent, texte contrasté. */
[data-panel="feeds"] [data-role="feeds-tree"] li > button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 26px;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  text-align: left;
}

[data-panel="feeds"] [data-role="feeds-tree"] li > button > svg {
  color: var(--sk-accent);
}

[data-panel="feeds"] [data-role="feeds-tree"] li > button:hover:not([aria-current="true"]) {
  background: color-mix(in srgb, var(--sk-text) 7%, transparent);
}

[data-panel="feeds"] [data-role="feeds-tree"] li > button[aria-current="true"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
}

[data-panel="feeds"] [data-role="feeds-tree"] li > button[aria-current="true"] > svg,
[data-panel="feeds"] [data-role="feeds-tree"] li > button[aria-current="true"] [data-role="feeds-unread"] {
  color: inherit;
}

[data-panel="feeds"] [data-role="feeds-feed-name"] {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-panel="feeds"] [data-role="feeds-unread"] {
  margin-left: auto;
  color: var(--sk-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

[data-panel="feeds"] [data-role="feeds-feed-error"] {
  display: inline-flex;
  color: var(--sk-accent);
}

[data-panel="feeds"] [data-role="feeds-feed-error"] svg {
  width: 0.85rem;
  height: 0.85rem;
}

[data-panel="feeds"] [data-role="feeds-empty"],
[data-panel="feeds"] [data-role="feeds-none"],
[data-panel="feeds"] [data-role="feeds-entries-empty"],
[data-panel="feeds"] [data-role="feeds-reading-none"] {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--sk-text-muted);
}

[data-panel="feeds"] [data-role="feeds-details"] {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-panel="feeds"] [data-role="feeds-details"] h2 {
  margin: 0 0 0.2rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-panel="feeds"] [data-role="feeds-url"],
[data-panel="feeds"] [data-role="feeds-refresh-period"],
[data-panel="feeds"] [data-role="feeds-last-refresh"] {
  margin: 0;
  font-size: 11px;
  color: var(--sk-text-muted);
  overflow-wrap: anywhere;
}

[data-panel="feeds"] [data-role="feeds-last-error"] {
  margin: 0.2rem 0 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--sk-accent);
}

[data-panel="feeds"] [data-role="feeds-details-tools"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0.5rem 0 0 -0.6rem;
}

[data-panel="feeds"] [data-role="feeds-remove-confirm"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--sk-accent) 45%, var(--sk-surface-border));
  border-radius: 6px;
  background: color-mix(in srgb, var(--sk-accent) 8%, transparent);
}

[data-panel="feeds"] [data-role="feeds-remove-confirm"] p {
  margin: 0;
  font-weight: 600;
}

/* Liste des entrées : filets d'un pixel, pastille accent pour le non-lu, titre en gras tant qu'il n'est pas lu. */
[data-panel="feeds"] ol[data-role="feeds-entries"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

[data-panel="feeds"] [data-role="feeds-entry"] {
  position: relative;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-panel="feeds"] [data-role="feeds-entry"] > button {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: 100%;
  padding: 0.55rem 0.8rem 0.55rem 1.4rem;
  border: 0;
  background: transparent;
  text-align: left;
}

[data-panel="feeds"] [data-role="feeds-entry"] > button:hover {
  background: color-mix(in srgb, var(--sk-text) 5%, transparent);
}

[data-panel="feeds"] [data-role="feeds-entry"][data-unread="true"]::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 0.95rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--sk-accent);
  pointer-events: none;
}

[data-panel="feeds"] [data-role="feeds-entry"][data-flagged="true"] > button {
  box-shadow: inset -3px 0 0 var(--sk-accent);
}

[data-panel="feeds"] [data-role="feeds-entry"][aria-current="true"] > button {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
}

[data-panel="feeds"] [data-role="feeds-entry"][aria-current="true"]::before {
  background: var(--sk-accent-contrast);
}

[data-panel="feeds"] [data-role="feeds-entry-title"] {
  font-weight: 500;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-panel="feeds"] [data-role="feeds-entry"][data-unread="true"] [data-role="feeds-entry-title"] {
  font-weight: 700;
}

[data-panel="feeds"] [data-role="feeds-entry-meta"] {
  font-size: 11px;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-panel="feeds"] [data-role="feeds-entry"][aria-current="true"] [data-role="feeds-entry-meta"] {
  color: inherit;
  opacity: 0.85;
}

/* Article : en-tête, outils, bandeaux de protection, puis le corps dans son cadre isolé (page claire, comme un courriel HTML). */
[data-panel="feeds"] article[data-role="feeds-reading"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
}

[data-panel="feeds"] [data-role="feeds-reading-title"] {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

[data-panel="feeds"] [data-role="feeds-reading-meta"] {
  margin: 0;
  font-size: 11px;
  color: var(--sk-text-muted);
}

[data-panel="feeds"] [data-role="feeds-reading-tools"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: -0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-panel="feeds"] [data-role="feeds-remote-blocked"],
[data-panel="feeds"] [data-role="feeds-trackers"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 6px;
  background: var(--sk-surface);
  color: var(--sk-text-muted);
  font-size: 12px;
}

[data-panel="feeds"] [data-role="feeds-remote-blocked"] button {
  border: 1px solid var(--sk-surface-border);
  border-radius: 6px;
  background: var(--sk-bg-elevated);
  padding: 0.15rem 0.55rem;
}

[data-panel="feeds"] iframe[data-role="feeds-entry-body"] {
  display: block;
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: #fff;
  zoom: var(--sk-text-zoom, 1);
}


/* 🔴 REFONTE DU 2026-09-28 (Master_1, sur M0 — la seule machine qui VOIT ce qu'elle dessine).
   Mesure faite dans le navigateur, pas lue dans le code : les trois volets sortaient en
   cartes flottantes (rayon 24px, ombre 0 10px 34px rgba(0,0,0,.45)) posées sur un fond, avec
   20px de marge extérieure PLUS 16px de marge de coque. C'est un tableau de bord web, pas un
   client de messagerie — et c'est le « il est très laid » du porteur.
   ⭐ Ce que fait Apple Mail, et qui tient en une phrase : les volets vont BORD À BORD, sur toute
   la hauteur, séparés par un FILET d'un pixel. Aucune ombre, aucun coin rond, aucune marge.
   L'ombre porte une élévation ; trois volets côte à côte ne sont pas élevés l'un au-dessus de
   l'autre, donc l'ombre ne décrit rien et ne fait que salir.
   ⚠️ Dix passes ont affiné des détails DANS ces cartes sans jamais mettre en cause la carte
   elle-même. Un défaut de prémisse ne se corrige pas en polissant ce qui repose dessus. */
[data-component="inbox-screen"] {
  display: flex;
  /* L'espace entre colonnes est porté par les séparateurs glissables (`[data-role="pane-splitter"]`). */
  gap: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  background: var(--sk-bg-elevated);
  box-sizing: border-box;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--sk-text);
}

/* Contrôles de base de l'écran ; les règles ciblées plus bas (plus spécifiques ou plus tardives) les affinent. */
[data-component="inbox-screen"] button {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}

[data-component="inbox-screen"] button[aria-pressed="true"] {
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
  font-weight: 600;
}

[data-component="inbox-screen"] button:disabled {
  cursor: progress;
  opacity: 0.6;
}

[data-component="inbox-screen"] input:not([type="checkbox"]):not([type="radio"]),
[data-component="inbox-screen"] select,
[data-component="inbox-screen"] textarea {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.5rem;
  box-sizing: border-box;
}

[data-component="inbox-screen"] :is(button, input, select, textarea, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

[data-component="inbox-screen"] svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

[data-component="inbox-screen"] p[role="alert"] {
  color: var(--sk-accent);
}

/* La barre latérale porte le matériau le plus SOURD des trois (`--sk-bg`), le contenu le plus
   clair (`--sk-bg-elevated`) : c'est ce contraste-là, et non un trait, qui dit « ceci navigue,
   cela se lit ». Le filet ne fait que finir l'arête. */
[data-role="inbox-screen-folders"] {
  flex: 0 0 var(--sk-pane-folders, 210px);
  min-width: 0;
  overflow-y: auto;
  background: var(--sk-bg);
  border: 0;
  border-right: 1px solid var(--sk-surface-border);
  border-radius: 0;
  box-shadow: none;
  padding: calc(0.55rem * var(--sk-space-unit, 1)) calc(0.4rem * var(--sk-space-unit, 1));
}

ul:is([data-component="folder-tree"], [data-component="folder-favorites"]) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Favoris au-dessus de l'arbre (Outlook, Thunderbird, Apple Mail) : petit titre discret, séparés de l'arbre par un filet. */
[data-role="folder-section-title"] {
  margin: 0.15rem 0.5rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sk-text-muted);
}

ul[data-component="folder-favorites"] {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

/* Dossiers de recherche (dossiers virtuels) : même ligne que l'arbre, loupe en tête, jamais cible d'un dépôt — ce n'est pas un dossier réel. */
ul[data-component="folder-search-folders"] {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

/* Barre laterale facon Apple Mail : icone trait fin devant chaque boite, a l'accent ; blanche sur la ligne selectionnee. */
li:is([data-component="folder-row"], [data-component="search-folder-row"]) .folder-icon {
  flex: none;
  display: inline-flex;
  color: var(--sk-accent);
}

li:is([data-component="folder-row"], [data-component="search-folder-row"]) .folder-icon svg {
  width: 16px;
  height: 16px;
}

li:is([data-component="folder-row"], [data-component="search-folder-row"]) > button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--sk-text);
  font-size: 13px;
  line-height: 1.35;
  text-align: start;
  padding: calc(3px * var(--sk-space-unit, 1)) 0.5rem;
}

li:is([data-component="folder-row"], [data-component="search-folder-row"]) > button:hover {
  background: var(--sk-bg-elevated);
}

/* Selection : rectangle arrondi plein a l'accent, texte, icone et compteur en contraste (Apple Mail). */
li:is([data-component="folder-row"], [data-component="search-folder-row"]).is-selected > button {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font-weight: 600;
}

li:is([data-component="folder-row"], [data-component="search-folder-row"]).is-selected :is(.folder-icon, .folder-unread-count) {
  color: inherit;
}

/* Glisser-déposer : dossier survolé souligné d'un liseré or, fond de l'arbre en pointillés pour un dépôt à la racine. */
li[data-component="folder-row"][data-drop-target] > button {
  background: rgba(168, 130, 63, 0.16);
  box-shadow: inset 0 0 0 1px rgba(168, 130, 63, 0.55);
  color: var(--sk-text);
}

nav[data-role="inbox-screen-folders"][data-drop-target] > ul[data-component="folder-tree"] {
  border-radius: 10px;
  outline: 1px dashed rgba(168, 130, 63, 0.55);
  outline-offset: 2px;
}

li[draggable="true"]:is([data-component="folder-row"], [data-component="message-row"]) {
  -webkit-user-drag: element;
}

li[data-component="folder-row"] button[data-action="folder.toggleExpand"],
li[data-component="folder-row"] .folder-toggle-spacer {
  flex: none;
  width: 1.1em;
  padding: 0;
  border: 0;
  color: inherit;
  text-align: center;
}

li:is([data-component="folder-row"], [data-component="search-folder-row"]) .folder-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compteur de non-lus : chiffre gris aligne a droite, jamais une pastille coloree (Apple Mail). */
li:is([data-component="folder-row"], [data-component="search-folder-row"]) .folder-unread-count {
  flex: none;
  margin-inline-start: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--sk-text-muted);
}

/* Jauge d'occupation de la boîte (IMAP QUOTA) sous l'arbre : filet fin en verre, or, ambre à 80 %, rouge à 95 %. */
div[data-component="mailbox-quota"] {
  margin-top: 0.6rem;
  padding: 0.5rem 0.5rem 0.1rem;
  border-top: 1px solid var(--sk-surface-border);
  font-size: 0.72rem;
  color: var(--sk-text-muted);
}

div[data-component="mailbox-quota"] .quota-bar {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sk-surface-border);
}

div[data-component="mailbox-quota"] .quota-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sk-accent);
  transition: inline-size 0.3s ease;
}

div[data-component="mailbox-quota"][data-level="warning"] .quota-bar > span {
  background: #d98a1c;
}

div[data-component="mailbox-quota"][data-level="full"] .quota-bar > span {
  background: #d64545;
}

div[data-component="mailbox-quota"] .quota-usage {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.35rem 0 0;
  font-variant-numeric: tabular-nums;
}

div[data-component="mailbox-quota"] .quota-alert {
  margin: 0.35rem 0 0;
  color: #d64545;
  line-height: 1.35;
}

/* Gestion des dossiers sous l'arbre : barre d'icônes discrète, formulaire en verre dépoli, accent or sur l'action principale. */
div[data-component="folder-management"] {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sk-surface-border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

div[data-role="folder-actions"] {
  display: flex;
  gap: 0.25rem;
}

div[data-role="folder-actions"] > button {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: transparent;
  border-radius: 9px;
  color: var(--sk-text-muted);
}

div[data-role="folder-actions"] > button[data-action="folder.toggleFavorite"][aria-pressed="true"] svg {
  fill: currentColor;
  fill-opacity: 0.22;
}

div[data-role="folder-actions"] > button:hover,
div[data-role="folder-actions"] > button[aria-pressed="true"] {
  color: var(--sk-accent);
  background: var(--sk-bg-elevated);
  border-color: var(--sk-surface-border);
}

/* Dossier non suivi gardé à l'affichage parce qu'il porte des dossiers suivis : en retrait, et il le dit. */
li[data-component="folder-row"].is-unsubscribed > button {
  opacity: 0.62;
}

li[data-component="folder-row"] .folder-unsubscribed-hint {
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: var(--sk-text-muted);
  text-transform: lowercase;
}

/* Dossier délégué ou partagé que le serveur n'autorise qu'en lecture (RFC 4314) : la pastille le dit, sobrement. */
li[data-component="folder-row"] .folder-read-only-hint {
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  color: var(--sk-text-muted);
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  padding: 0 0.4em;
  white-space: nowrap;
}

/* Titre d'une section d'espace de noms (boîtes d'autres utilisateurs, dossiers partagés) : même graisse que les autres titres du bandeau. */
ul[data-component="folder-tree"][data-namespace="otherUsers"],
ul[data-component="folder-tree"][data-namespace="shared"] {
  margin-block-start: 0;
}

/* Fenêtre « Dossiers du serveur » : liste dense, défilable, cases alignées à gauche. */
ul[data-component="folder-subscriptions"] {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 16rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

li[data-component="folder-subscription-row"] {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

li[data-component="folder-subscription-row"] > input {
  width: auto;
  accent-color: var(--sk-accent);
  flex: none;
}

li[data-component="folder-subscription-row"] > label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sk-text);
  cursor: pointer;
}

li[data-component="folder-subscription-row"][data-unsubscribed="true"] > label {
  color: var(--sk-text-muted);
}

[data-role="folder-editor"] {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

[data-role="folder-editor"] :is(input, select) {
  width: 100%;
  font-size: 0.85rem;
}

[data-role="folder-editor"] > p {
  margin: 0;
  color: var(--sk-text);
  line-height: 1.4;
}

[data-role="folder-editor"] > p[role="alert"] {
  color: #d64545;
}

[data-role="folder-editor"] > progress {
  width: 100%;
  height: 0.35rem;
  accent-color: var(--sk-accent);
}

div[data-role="folder-editor-buttons"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

div[data-role="folder-editor-buttons"] > button[data-variant="primary"] {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  font-weight: 600;
}

div[data-role="folder-editor-buttons"] > button[data-variant="danger"] {
  border-color: #d64545;
  color: #d64545;
  font-weight: 600;
}

ul.folder-tree-empty,
ul.message-list-empty,
div[data-component="reading-pane"].reading-pane-empty {
  list-style: none;
  margin: 0;
  padding: 0.75rem;
  color: var(--sk-text-muted);
}

div[data-component="reading-pane"].reading-pane-empty {
  display: grid;
  place-items: center;
  height: 100%;
  box-sizing: border-box;
}

/* 🔴 Porteur, 2026-09-28 : « ajouter une nouvelle boîte doit être dans Réglages, pas sur la
   fenêtre principale » et « si aucune boîte n'est configurée, il faut le montrer par défaut,
   je le verrais bien avec une pop-up ».
   ⭐ C'est ICI, et seulement ici, qu'une ombre et un coin rond ont un sens : un dialogue EST
   élevé au-dessus de la fenêtre. La même ombre sur trois volets côte à côte ne décrivait
   rien — c'est la différence entre une profondeur vraie et une décoration. */
[data-role="mail-account-backdrop"] {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--sk-bg) 62%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: sk-voile 160ms ease-out;
}

[data-role="mail-account-chooser"] {
  width: min(28rem, 100%);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  margin: 0;
  padding: calc(1.1rem * var(--sk-space-unit, 1)) calc(1.2rem * var(--sk-space-unit, 1));
  background: var(--sk-bg-elevated);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  animation: sk-dialogue 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* ⚠️ On n'anime que `opacity` et `transform` : ce sont les deux propriétés que le
   compositeur traite sans recalculer la mise en page. Et le dialogue MONTE de 8 px, il ne
   rebondit pas — une animation qui se remarque a raté. */
@keyframes sk-voile {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sk-dialogue {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* 🔴 Réglage SYSTÈME, sans exception : qui a désactivé les animations n'en voit aucune. */
@media (prefers-reduced-motion: reduce) {
  [data-role="mail-account-backdrop"],
  [data-role="mail-account-chooser"] {
    animation: none;
  }
}

/* L'etat `data-state="welcome"` (ecran d'accueil plein cadre) a ete RETIRE le 2026-09-28 :
   le porteur veut une pop-up par-dessus la fenetre, pas un ecran qui la remplace. Ses regles
   sont parties avec lui -- une feuille de style qui garde le dessin d'hier fait croire au
   passage suivant que les deux existent. */

section[data-role="mail-account-chooser"] > h2 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

section[data-role="mail-account-chooser"] > p {
  margin: 0 0 0.6rem;
  color: var(--sk-text-muted);
  font-size: 0.85rem;
}

section[data-role="mail-account-chooser"] > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

section[data-role="mail-account-chooser"] button {
  display: block;
  width: 100%;
  text-align: start;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-weight: 600;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

section[data-role="mail-account-chooser"] button:hover,
section[data-role="mail-account-chooser"] button:focus-visible {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}

section[data-role="mail-account-chooser"] small {
  display: block;
  padding: 0.15rem 0.6rem 0;
  color: var(--sk-text-muted);
  font-size: 0.8rem;
}

[data-role="inbox-screen-messages"] > button[data-action="mailShell.toggleSearch"] {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.4rem 0.6rem;
  cursor: pointer;
}

[data-role="inbox-screen-messages"] > button[data-action="mailShell.toggleSearch"][aria-pressed="true"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

div[data-role="mail-shell-search"] {
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

form[data-form="search"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

form[data-form="search"] label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

form[data-form="search"] input,
form[data-form="search"] select {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.5rem;
}

form[data-form="search"] p[data-role="search-operators"] {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
  font-size: 0.75rem;
  color: var(--sk-text-muted);
}

form[data-form="search"] p[data-role="search-operators"] code {
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 6px;
  background: var(--sk-bg-elevated);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

form[data-form="search"] label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
}

form[data-form="search"] button {
  align-self: flex-start;
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

form[data-form="search"] button[type="submit"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

section[data-component="saved-searches"] {
  margin-top: 0.6rem;
}

section[data-component="saved-searches"] h2 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

ul[data-role="saved-search-list"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

ul[data-role="saved-search-list"] li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

ul[data-role="saved-search-list"] li button {
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
}

ul[data-role="saved-search-list"] li button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ⭐ La barre d'outils du volet liste — le défaut que le porteur a vu en premier.
   Mesuré sur l'écran réel : « Nouveau message », « Commandes », « Recherche » et
   « Assistant multi-étapes » sortaient EMPILÉS, pleine largeur, du même poids visuel,
   et poussaient la liste des messages à 586 px du haut. Une fonction EXPOSÉE n'est pas
   une fonction UTILISABLE : quatre boutons pleine largeur ne hiérarchisent rien, ils
   repoussent le contenu. Ils tiennent désormais sur UNE ligne, comme la barre d'outils
   d'Apple Mail, et l'action principale garde seule l'accent. */
[data-role="messages-pane-toolbar"] {
  display: flex;
  align-items: center;
  /* ⚠️ Le repli est un FILET DE SÉCURITÉ, pas le dessin visé : sans lui, la barre
     débordait de 68 px et « Assistant multi-étapes » sortait coupé, avec une barre de
     défilement horizontale sur tout le volet. Une barre d'outils qui déborde est pire
     qu'une barre sur deux lignes. Le vrai dessin — icônes seules, à la Apple Mail — exige
     que ces deux boutons AIENT une icône : ils n'en ont aucune aujourd'hui, et retirer
     leur libellé les rendrait anonymes pour un lecteur d'écran. Carte ouverte. */
  flex-wrap: wrap;
  gap: calc(0.35rem * var(--sk-space-unit, 1));
  padding: calc(0.15rem * var(--sk-space-unit, 1)) calc(0.2rem * var(--sk-space-unit, 1))
           calc(0.45rem * var(--sk-space-unit, 1));
  border-bottom: 1px solid var(--sk-surface-border);
  margin-bottom: calc(0.35rem * var(--sk-space-unit, 1));
}

[data-role="messages-pane-toolbar"] > button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: calc(0.3rem * var(--sk-space-unit, 1));
  padding: calc(0.26rem * var(--sk-space-unit, 1)) calc(0.45rem * var(--sk-space-unit, 1));
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* L'action principale est la SEULE à porter l'accent : c'est ce qui la rend principale. */
[data-role="messages-pane-toolbar"] > button[data-action="compose.new"] {
  margin-right: auto;
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

/* Les secondaires s'effacent tant qu'on ne les vise pas — elles restent lisibles,
   elles cessent d'être bruyantes. */
[data-role="messages-pane-toolbar"] > button:not([data-action="compose.new"]) {
  background: transparent;
  border-color: transparent;
  color: var(--sk-text-muted);
  padding: calc(0.3rem * var(--sk-space-unit, 1));
}

/* ⭐ Icônes SEULES pour les actions secondaires — c'est le dessin d'Apple Mail, et c'est
   aussi ce qui fait tenir la barre sur une ligne. ⚠️ Le libellé n'est pas SUPPRIMÉ, il est
   masqué VISUELLEMENT : il reste dans le DOM pour le lecteur d'écran et dans `title` pour
   l'infobulle. Supprimer le texte aurait rendu trois boutons anonymes — on ne gagne pas
   de la place sur le dos de l'accessibilité. */
[data-role="messages-pane-toolbar"] > button:not([data-action="compose.new"]) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[data-role="messages-pane-toolbar"] > button > svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

[data-role="messages-pane-toolbar"] > button:not([data-action="compose.new"]):hover,
[data-role="messages-pane-toolbar"] > button:not([data-action="compose.new"])[aria-pressed="true"] {
  background: var(--sk-surface);
  color: var(--sk-text);
}

[data-role="inbox-screen-messages"] {
  flex: 0 1 var(--sk-pane-list-width, 40%);
  min-width: 280px;
  overflow-y: auto;
  /* Une liste de messages ne défile JAMAIS horizontalement : un objet trop long se
     tronque. La barre horizontale qui apparaissait ici déplaçait le contenu sous le
     curseur à chaque molette de travers. */
  overflow-x: hidden;
  background: var(--sk-bg-elevated);
  border: 0;
  border-right: 1px solid var(--sk-surface-border);
  border-radius: 0;
  box-shadow: none;
  padding: calc(0.5rem * var(--sk-space-unit, 1));
}

[data-role="inbox-screen-reading"] {
  flex: 1 1 0;
  min-width: 320px;
  overflow-y: auto;
  background: var(--sk-bg-elevated);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: calc(1.15rem * var(--sk-space-unit, 1)) calc(1.5rem * var(--sk-space-unit, 1));
}

/* Volet de lecture en bas (Réglages › Apparence ; Outlook « En bas », Thunderbird « Disposition classique ») : dossiers sur toute la hauteur, liste au-dessus du message. */
:root[data-reading-pane="bottom"] [data-component="inbox-screen"] {
  display: grid;
  grid-template-columns: var(--sk-pane-folders, 210px) 1rem minmax(0, 1fr);
  grid-template-rows: var(--sk-pane-list-height, minmax(0, 2fr)) 1rem minmax(0, 3fr);
}

:root[data-reading-pane="bottom"] :is([data-role="inbox-screen-folders"], [data-role="pane-splitter"][data-pane="folders"]) {
  grid-row: 1 / span 3;
}

:root[data-reading-pane="bottom"] [data-role="inbox-screen-messages"] {
  grid-area: 1 / 3;
  min-width: 0;
}

:root[data-reading-pane="bottom"] [data-role="pane-splitter"][data-pane="messageList"] {
  grid-area: 2 / 3;
  cursor: row-resize;
}

:root[data-reading-pane="bottom"] [data-role="inbox-screen-reading"] {
  grid-area: 3 / 3;
  min-width: 0;
}

/* Séparateurs glissables (Outlook, Thunderbird, Apple Mail) : la gouttière entière est la poignée, un filet or apparaît au survol, au focus et pendant le geste. */
[data-role="pane-splitter"] {
  flex: 0 0 1rem;
  position: relative;
  cursor: col-resize;
  touch-action: none;
  outline: none;
}

[data-role="pane-splitter"]::after {
  content: "";
  position: absolute;
  inset-block: 0.75rem;
  inset-inline-start: calc(50% - 1px);
  width: 2px;
  border-radius: 1px;
  background: transparent;
}

:root[data-reading-pane="bottom"] [data-role="pane-splitter"][data-pane="messageList"]::after {
  inset-block: auto;
  inset-inline: 0.75rem;
  inset-block-start: calc(50% - 1px);
  width: auto;
  height: 2px;
}

[data-role="pane-splitter"]:hover::after,
[data-role="pane-splitter"]:focus::after {
  background: var(--sk-accent);
}

[data-role="pane-splitter"]:focus-visible::after {
  box-shadow: 0 0 0 3px var(--sk-focus-ring);
}

:root[data-pane-resizing] {
  user-select: none;
  -webkit-user-select: none;
}

:root[data-pane-resizing="column"] * {
  cursor: col-resize !important;
}

:root[data-pane-resizing="row"] * {
  cursor: row-resize !important;
}

/* Le corps HTML d'un message (iframe isolée) ne capte pas le pointeur pendant le geste. */
:root[data-pane-resizing] iframe {
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  [data-role="pane-splitter"]::after {
    transition: background-color 140ms ease-out 80ms;
  }
}

[data-component="message-list-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(0.4rem * var(--sk-space-unit, 1));
  margin-bottom: calc(0.5rem * var(--sk-space-unit, 1));
}

[data-component="reading-pane"] > header h1 {
  margin: 0 0 0.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

/*
 * Bloc d'en-tête façon Apple Mail : pastille | nom en gras, adresse en gris dessous, À / Cc une ligne chacun | date à
 * droite. Un filet d'un pixel le sépare du corps.
 */
[data-role="reading-pane-sender"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: start;
  margin-top: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-role="reading-pane-sender"] > .sender-avatar {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.85rem;
}

[data-role="reading-pane-sender"] > time {
  font-size: 11px;
  color: var(--sk-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.reading-pane-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
  color: var(--sk-text-muted);
}

/*
 * ⚠️ overflow-wrap: anywhere etait pose ici pour eviter le debordement. Il l'evitait --
 * en coupant les adresses N'IMPORTE OU : mesure du 2026-09-28 dans une fenetre de 1024 px,
 * << secretariat@example.fr >> sortait sur TROIS lignes (<< secretariat / @example. / fr >>)
 * et << vous@example.eu >> coupe en plein milieu d'un mot.
 * ⭐ Une adresse ne se coupe pas, elle se TRONQUE : c'est ce que fait Apple Mail, et c'est
 * lisible a toute largeur. La valeur entiere reste dans title, donc rien n'est perdu.
 */
.reading-pane-meta > * {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* L'adresse sous le nom : meme regle, et elle reste sur sa propre ligne. */
.reading-pane-meta [data-role="from"] {
  display: flex;
  flex-direction: column;
  white-space: normal;
}

.reading-pane-meta strong {
  font-weight: 500;
  color: var(--sk-text-muted);
}

.reading-pane-meta [data-role="sender-name"] {
  font-size: 13px;
  font-weight: 600;
  color: var(--sk-text);
}

.reading-pane-meta [data-role="sender-address"] {
  display: block;
}

.reading-pane-meta .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-component="reading-pane-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(0.4rem * var(--sk-space-unit, 1));
  margin: 0 0 calc(0.75rem * var(--sk-space-unit, 1));
  padding-bottom: calc(0.75rem * var(--sk-space-unit, 1));
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-component="reading-pane-toolbar"] :is(button, select) {
  font-size: 0.9em;
}

/* Bascules d'action (drapeau, lu/non lu) : leur libellé dit déjà l'état, pas de mise en relief. */
[data-component="reading-pane-toolbar"] button[aria-pressed="true"] {
  background: transparent;
  box-shadow: none;
  font-weight: 400;
}

[data-component="message-list-toolbar"] button,
[data-component="reading-pane-toolbar"] button {
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: calc(0.3rem * var(--sk-space-unit, 1)) calc(0.6rem * var(--sk-space-unit, 1));
  cursor: pointer;
}

/*
 * Barre du volet de lecture façon Apple Mail : les actions de tous les instants en icônes seules (libellé gardé pour
 * les lecteurs d'écran et l'infobulle), le reste dans le menu « Autres actions ».
 */
[data-role="reading-pane-primary-actions"] {
  display: flex;
  align-items: center;
  gap: calc(0.15rem * var(--sk-space-unit, 1));
}

[data-role="reading-pane-primary-actions"] button,
details[data-role="reading-pane-more"] > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--sk-radius-sm);
  background: transparent;
  color: var(--sk-text-muted);
  cursor: pointer;
}

/* Séparateurs Apple Mail : répondre / transférer, puis ranger, puis marquer. */
[data-role="reading-pane-primary-actions"] [data-action="message.archive"],
[data-role="reading-pane-primary-actions"] [data-action="message.toggleFlag"] {
  margin-left: calc(0.6rem * var(--sk-space-unit, 1));
}

[data-role="reading-pane-primary-actions"] button:hover,
details[data-role="reading-pane-more"] > summary:hover,
details[data-role="reading-pane-more"][open] > summary {
  background: color-mix(in srgb, var(--sk-text) 9%, transparent);
  color: var(--sk-text);
}

[data-role="reading-pane-primary-actions"] button[aria-pressed="true"] {
  color: var(--sk-accent);
}

[data-role="reading-pane-primary-actions"] svg,
details[data-role="reading-pane-more"] > summary svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

[data-component="reading-pane-toolbar"] [data-role="action-label"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

details[data-role="reading-pane-more"] {
  position: relative;
}

details[data-role="reading-pane-more"] > summary {
  list-style: none;
}

details[data-role="reading-pane-more"] > summary::-webkit-details-marker {
  display: none;
}

/* Menu déroulant : une action par ligne, jamais un mur de boutons ; défile s'il dépasse la fenêtre. */
/*
 * 🔴 MESURE DU 2026-09-28, sur l'ecran reel : CINQ panneaux de menu etaient affiches en
 * permanence -- un << Autres actions >> de 252x369 px pose sur le message, TROIS menus de
 * ligne de 236 px empiles sur la liste, et le choix de categorie d'expediteur (305x273).
 * Leur <details> etait pourtant FERME (details.open === false).
 *
 * ⭐ La cause, et c'est une CLASSE de defaut, pas trois cas : un <details> ferme cache son
 * contenu par un display: none de la feuille du NAVIGATEUR. Une regle d'auteur qui pose
 * display: flex sur ce contenu **gagne**, et le panneau reste affiche. Le balisage disait
 * << ferme >>, la feuille disait << montre >>, et c'est la feuille qui a raison.
 *
 * ⚠️ Rien ne pouvait le voir : le HTML est correct, le CSS est valide, details.open est
 * bien false. Seul un REGARD sur l'ecran, ou une mesure de la geometrie rendue, le trouve.
 * C'est la meme famille que le selecteur section reste colle ce matin.
 */
/*
 * 🔴 MESURE DU 2026-09-28, sur l'ecran reel : CINQ panneaux de menu etaient affiches en
 * permanence -- un << Autres actions >> de 252x369 px pose sur le message, TROIS menus de
 * ligne de 236 px empiles sur la liste, et le choix de categorie d'expediteur (305x273).
 * Leur details etait pourtant FERME (open === false).
 *
 * ⭐ La cause, et c'est une CLASSE de defaut, pas cinq cas : un details ferme cache son
 * contenu par un display:none de la feuille du NAVIGATEUR. Une regle d'auteur qui pose
 * display:flex sur ce contenu GAGNE, et le panneau reste affiche. Le balisage disait
 * << ferme >>, la feuille disait << montre >>, et c'est la feuille qui a raison.
 *
 * ⚠️ Rien ne pouvait le voir : le HTML est correct, le CSS est valide, open vaut bien false.
 * Seul un REGARD sur l'ecran, ou une mesure de la geometrie rendue, le trouve.
 *
 * ⚠️ Et on conditionne les regles QUI DECLARENT, pas par une regle-filet posee ailleurs :
 * ma premiere tentative etait un details:not([open]) plus haut dans le fichier, battu en
 * SPECIFICITE par la regle d'origine. Deux mecanismes pour une seule intention finissent
 * toujours par diverger.
 */
details[open] > [data-role="reading-pane-more-menu"] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 15rem;
  max-width: min(22rem, 90vw);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

[data-role="reading-pane-more-menu"] button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  border: 0;
  border-radius: var(--sk-radius-sm);
  padding: calc(0.35rem * var(--sk-space-unit, 1)) 0.6rem;
  text-align: left;
  white-space: normal;
}

[data-role="reading-pane-more-menu"] button:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

[data-role="reading-pane-more-menu"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-role="reading-pane-more-menu"] > div[data-role="tag-toggles"] {
  margin: 0.3rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--sk-surface-border);
}

/*
 * Barre de la liste façon Apple Mail : trois menus à icône (filtre, tri, « … »), zéro bouton empilé au-dessus des
 * messages. Même dessin que le menu « Autres actions » du volet de lecture.
 */
:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"]) {
  position: relative;
}

:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"]) > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text-muted);
  cursor: pointer;
  list-style: none;
}

:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"]) > summary::-webkit-details-marker {
  display: none;
}

:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"]) > summary:hover,
:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"])[open] > summary {
  background: color-mix(in srgb, var(--sk-text) 9%, transparent);
  color: var(--sk-text);
}

/* Filtre en vigueur : l'entonnoir passe à l'accent, sans ouvrir le menu. */
details[data-role="message-list-filter-menu"] > summary[data-active="true"] {
  color: var(--sk-accent);
}

:is(details[data-role="message-list-filter-menu"], details[data-role="message-list-sort-menu"], details[data-role="message-list-more"]) > summary svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}

[data-component="message-list-toolbar"] [data-role="action-label"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

details[open] > [data-role="message-list-menu"] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 14rem;
  max-width: min(22rem, 90vw);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

[data-component="message-list-toolbar"] [data-role="message-list-menu"] [data-role="message-list-filter"] {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-component="message-list-toolbar"] [data-role="message-list-menu"] button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  width: 100%;
  border: 0;
  border-radius: var(--sk-radius-sm);
  padding: calc(0.35rem * var(--sk-space-unit, 1)) 0.6rem;
  text-align: left;
  white-space: normal;
}

[data-component="message-list-toolbar"] [data-role="message-list-menu"] button:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

/* Choix en vigueur (tri, filtre, regroupement) : à l'accent, comme la coche d'un menu macOS. */
[data-component="message-list-toolbar"] [data-role="message-list-menu"] button[aria-pressed="true"] {
  color: var(--sk-accent);
  font-weight: 600;
}

[data-component="message-list-toolbar"] [data-role="message-list-menu"] button svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

[data-role="message-list-menu"] > div[data-role="tag-toggles"] {
  margin: 0.3rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--sk-surface-border);
}

[data-role="message-rows"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
 * Ligne de message facon Apple Mail (carte P0 refonte IHM) : TROIS lignes, rien d'autre —
 * (1) correspondant en gras si non lu, marques et drapeau, date grise a droite ; (2) objet ;
 * (3) extrait gris (1 ou 2 lignes, Reglages > Apparence). Colonne de tete : pastille de non-lu
 * (la case de selection s'y superpose au survol), puis la pastille d'initiales sur toute la hauteur.
 * Metrique : 13 px, secondaires 11 px, interligne 1,35, filet d'un pixel — ~70 px par ligne,
 * soit ~12 messages sur 900 px (cible de la carte ; il en tenait 4).
 */
li[data-component="message-row"] {
  position: relative;
  display: grid;
  grid-template-columns: 1.1rem auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: calc(0.5rem * var(--sk-space-unit, 1));
  row-gap: 1px;
  align-items: start;
  padding: calc(0.45rem * var(--sk-space-unit, 1)) 0.75rem calc(0.5rem * var(--sk-space-unit, 1)) 0.2rem;
  border-bottom: 1px solid var(--sk-surface-border);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 400;
  cursor: pointer;
}

li[data-component="message-row"] > :is(.message-unread-dot, button[data-action="messageList.toggleChecked"]) {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

li[data-component="message-row"] > .sender-avatar {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

li[data-component="message-row"] > .message-line {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

li[data-component="message-row"] > .message-heading {
  grid-column: 3;
  grid-row: 2;
}

.message-unread-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sk-accent);
  visibility: hidden;
}

li[data-component="message-row"].is-unread > .message-unread-dot {
  visibility: visible;
}

/* La case de selection prend la place de la pastille des qu'elle se montre. */
li[data-component="message-row"]:is(:hover, :focus-within, .is-checked) > .message-unread-dot,
[data-component="message-list"][data-has-checked] li[data-component="message-row"] > .message-unread-dot {
  opacity: 0;
}

li[data-component="message-row"].is-unread .message-from {
  font-weight: 600;
}

li[data-component="message-row"]:hover {
  background: var(--sk-surface);
}

li[data-component="message-row"].is-selected {
  background: rgba(168, 130, 63, 0.12);
  border-radius: 10px;
}

li[data-component="message-row"] :is(button, button[aria-pressed="true"]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: calc(4px * var(--sk-space-unit, 1));
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--sk-text-muted);
  font-weight: 400;
}

li[data-component="message-row"] button:hover,
li[data-component="message-row"] button:focus-visible {
  background: var(--sk-surface);
  color: var(--sk-text);
}

li[data-component="message-row"] .message-line > button[data-action="message.toggleFlag"][aria-pressed="true"] {
  color: var(--sk-accent);
}

li[data-component="message-row"] .message-line > button[data-action="message.toggleFlag"][aria-pressed="true"] svg {
  fill: currentColor;
}

li[data-component="message-row"]:not(:hover):not(:focus-within) .message-line > button[data-action="message.toggleFlag"]:not([aria-pressed="true"]) {
  opacity: 0;
}

/* Drapeau a la hauteur de la premiere ligne : il ne doit pas l'epaissir. */
li[data-component="message-row"] .message-line > button {
  padding: 0 2px;
}

/* Sélection multiple : case au survol, toutes visibles dès qu'une ligne est cochée ; ligne cochée teintée d'or. */
[data-component="message-list"]:not([data-has-checked]) li[data-component="message-row"]:not(:hover):not(:focus-within) > button[data-action="messageList.toggleChecked"] {
  opacity: 0;
}

:is(li[data-component="message-row"], [data-component="message-list-toolbar"]) button[role="checkbox"]:is([aria-checked="true"], [aria-checked="mixed"]) {
  color: var(--sk-accent);
}

li[data-component="message-row"].is-checked {
  background: rgba(168, 130, 63, 0.08);
}

[data-component="message-list-bulk"],
[data-component="message-list-quick-steps"],
[data-component="message-list-delete-confirm"] {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  box-shadow: var(--sk-shadow-glass);
  font-size: 0.85rem;
}

[data-role="bulk-count"] {
  margin-inline-end: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

[data-component="message-list-bulk"] button,
[data-component="message-list-bulk"] select,
[data-component="message-list-quick-steps"] button,
[data-component="message-list-delete-confirm"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

[data-component="message-list-bulk"] :is(button, label) svg,
[data-component="message-list-quick-steps"] button svg,
[data-component="message-list-toolbar"] button:is([role="checkbox"], [data-action="messageList.checkMail"], [data-action="messageList.markAllRead"], [data-action="messageList.emptyFolder"]) svg {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
}

form[data-role="bulk-move-to"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

form[data-role="bulk-move-to"] label {
  display: inline-flex;
  color: var(--sk-accent);
}

form[data-role="bulk-move-to"] label span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:is([data-action="messageList.markAllRead"], [data-action="messageList.emptyFolder"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: auto;
}

[data-action="messageList.markAllRead"] ~ [data-action="messageList.emptyFolder"] {
  margin-inline-start: 0;
}

[data-action="messageList.emptyFolder"] {
  color: #d64545;
}

:is([data-action="messageList.markAllRead"], [data-action="messageList.emptyFolder"]):disabled {
  opacity: 0.55;
  cursor: progress;
}

[data-action="messageList.checkMail"][aria-busy="true"] {
  cursor: progress;
  color: var(--sk-accent);
}

@media (prefers-reduced-motion: no-preference) {
  [data-action="messageList.checkMail"][aria-busy="true"] svg {
    animation: sk-check-mail-spin 900ms linear infinite;
  }
}

@keyframes sk-check-mail-spin {
  to { transform: rotate(360deg); }
}

:is([data-role="bulk-error"], [data-role="mark-all-read-error"], [data-role="empty-folder-error"], [data-role="check-mail-status"], [data-role="work-offline-status"], [data-role="work-offline-error"]) {
  flex-basis: 100%;
  margin: 0;
}

/*
 * « Travailler hors connexion » actif : l'interrupteur prend l'accent or (mode
 * choisi, pas une panne) et la ligne d'état rappelle, en texte discret, que
 * rien ne part vers les serveurs — la barre reste lisible sans devenir une alerte.
 */
[data-component="message-list-toolbar"] button[data-action="messageList.workOffline"][aria-pressed="true"] {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
}

[data-role="work-offline-status"] {
  color: var(--sk-text-muted);
}

#message-delete-question {
  flex-basis: 100%;
  margin: 0;
  font-weight: 600;
}

[data-role="delete-confirm-count"] {
  margin-inline-end: auto;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
}

[data-component="message-list-delete-confirm"] button[data-variant="danger"] {
  border-color: #d64545;
  color: #d64545;
  font-weight: 600;
}

/*
 * Actions rapides au survol (Outlook, Apple Mail) : pastille de verre posée
 * sur la fin de la ligne, sans prendre de place à l'expéditeur ni à l'objet.
 * Transparentes hors survol mais jamais retirées du flux (ni display:none ni
 * visibility:hidden) : atteignables à la tabulation, visibles dès le focus.
 */
.message-row-actions {
  position: absolute;
  inset-inline-end: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
  font-weight: 400;
}

li[data-component="message-row"]:not(:hover):not(:focus-within) > .message-row-actions {
  opacity: 0;
  pointer-events: none;
}

.message-from {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

li[data-component="message-row"] time,
li[data-component="message-row"] .message-size {
  flex: none;
  font-size: 11px;
  font-weight: 400;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
}

.thread-count {
  flex: none;
  min-width: 1.4em;
  padding: 0 0.35em;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  font-size: 0.75em;
  text-align: center;
  color: var(--sk-text-muted);
}

.account-color-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.attachment-icon {
  flex: none;
  color: var(--sk-text-muted);
}

.muted-icon {
  flex: none;
  color: var(--sk-text-muted);
}

.muted-icon svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

/* « Indésirable probable » : simple avertissement en teinte discrète, la ligne n'est ni déplacée ni masquée. */
.junk-icon {
  flex: none;
  color: var(--sk-text-muted);
  opacity: 0.85;
}

.junk-icon svg {
  display: block;
  width: 1.05em;
  height: 1.05em;
}

h3[data-role="message-list-section-heading"] {
  margin: 0.9rem 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-text-muted);
}

h3[data-role="message-list-section-heading"] .section-count {
  margin-left: 0.3em;
  color: var(--sk-accent);
}

[data-role="inbox-screen-messages"] > button[data-action="tasklet.toggle"] {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
}

div[data-role="tasklet-panel"]:not([hidden]),
div[data-role="ai-summary"],
section[data-role="ai-chat"],
div[data-role="similar-messages-panel"],
div[data-role="cr-intake-panel"] {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
}

form[data-form="tasklet.plan"],
form[data-form="message.sendToCrIntake"] {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

form[data-form="tasklet.plan"] label,
form[data-form="message.sendToCrIntake"] label {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.85rem;
  color: var(--sk-text-muted);
}

form[data-form="tasklet.plan"] button[type="submit"],
form[data-form="message.sendToCrIntake"] button[type="submit"] {
  align-self: flex-start;
}

ul[data-role="tasklet-plan-steps"],
ul[data-role="tasklet-plan-results"],
ul[data-role="phishing-reasons"] {
  margin: 0.4rem 0;
  padding-left: 1.2rem;
  font-weight: 400;
}

.important-icon svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  color: var(--sk-accent);
}

.message-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.message-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-snippet {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 12px;
  color: var(--sk-text-muted);
}

/* Lignes d'aperçu (Réglages › Apparence ; Outlook « Aperçu du message », Apple Mail « Aperçu ») : aucune, une (défaut ci-dessus) ou deux, coupées proprement. */
:root[data-preview-lines="0"] .message-snippet {
  display: none;
}

:root[data-preview-lines="2"] .message-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
 * Pastille de l'expéditeur (Réglages › Apparence ; Outlook « Images de l'expéditeur ») : initiales sur un voile teinté,
 * huit teintes sourdes accordées à l'or SANTVIA, lisibles en clair comme en sombre (texte mêlé à la couleur du thème).
 */
.sender-avatar {
  --sk-avatar: #8a6d3b;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  color: color-mix(in srgb, var(--sk-avatar) 72%, var(--sk-text));
  background: color-mix(in srgb, var(--sk-avatar) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sk-avatar) 28%, transparent);
}

.sender-avatar svg {
  width: 1rem;
  height: 1rem;
}

.sender-avatar[data-avatar-tone="1"] { --sk-avatar: #4f7a8c; }
.sender-avatar[data-avatar-tone="2"] { --sk-avatar: #6b7f4e; }
.sender-avatar[data-avatar-tone="3"] { --sk-avatar: #8c5a5a; }
.sender-avatar[data-avatar-tone="4"] { --sk-avatar: #5e6391; }
.sender-avatar[data-avatar-tone="5"] { --sk-avatar: #3f7d72; }
.sender-avatar[data-avatar-tone="6"] { --sk-avatar: #86617f; }
.sender-avatar[data-avatar-tone="7"] { --sk-avatar: #7a7166; }

[data-density="compact"] .sender-avatar {
  width: 1.6rem;
  height: 1.6rem;
  font-size: 0.64rem;
}

:root[data-sender-images="false"] .sender-avatar {
  display: none;
}

@media (forced-colors: active) {
  .sender-avatar {
    border-color: CanvasText;
  }
}

/* Filtre rapide : segmenté en verre dépoli, segment actif en relief, icônes trait fin. */
[data-component="message-list-toolbar"] [data-role="message-list-filter"] {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

[data-component="message-list-toolbar"] [data-role="message-list-filter"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-color: transparent;
  border-radius: 8px;
  padding: 0.2rem 0.55rem;
  font-size: 0.9em;
  color: var(--sk-text-muted);
}

[data-component="message-list-toolbar"] [data-role="message-list-filter"] button[aria-pressed="true"] {
  color: var(--sk-text);
}

[data-component="message-list-toolbar"] [data-role="message-list-filter"] button[aria-pressed="true"] svg {
  color: var(--sk-accent);
}

[data-component="message-list-toolbar"] [data-role="message-list-filter"] button svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

/* Onglets de catégorie (Gmail, Proton Mail) : barre en verre dépoli défilant horizontalement, onglet actif en relief souligné d'or. */
[data-component="message-list-categories"] {
  display: flex;
  gap: 2px;
  margin-bottom: 0.5rem;
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

[data-component="message-list-categories"] button {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  font-size: 0.88em;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

[data-component="message-list-categories"] button:hover {
  color: var(--sk-text);
}

[data-component="message-list-categories"] button[aria-pressed="true"] {
  color: var(--sk-text);
  border-color: var(--sk-surface-border);
}

[data-component="message-list-categories"] button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset-inline: 0.65rem;
  bottom: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--sk-accent);
}

[data-component="message-list-categories"] button svg {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
}

[data-component="message-list-categories"] button[aria-pressed="true"] svg {
  color: var(--sk-accent);
}

[data-component="message-list-categories"] .category-unread {
  min-width: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.15rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

[data-component="message-list-categories"] .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  [data-component="message-list-categories"] button {
    transition: none;
  }
}

ul.message-list-empty button:is([data-action="messageList.filter"], [data-action="messageList.category"]) {
  margin-inline-start: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

[data-component="reading-pane-view-toggle"] {
  display: inline-flex;
  gap: 2px;
  margin: 0.75rem 0 0.5rem;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
}

[data-component="reading-pane-view-toggle"] button,
[data-component="reading-pane-attachments"] button,
[data-role="remote-content-banner"] button {
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.85em;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
}

[data-component="reading-pane-view-toggle"] button[aria-pressed="true"] {
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
  font-weight: 600;
}

/* « Fond clair » (thème sombre) : bascule à côté du segmenté, même verre ; accent or quand le fond clair est rétabli. */
button[data-role="light-background"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0.75rem 0 0.5rem 0.5rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 0.85em;
  cursor: pointer;
}

button[data-role="light-background"] svg {
  width: 16px;
  height: 16px;
}

button[data-role="light-background"][aria-pressed="true"] {
  border-color: var(--sk-accent);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

button[data-role="light-background"][aria-pressed="true"] svg {
  color: var(--sk-accent);
}

div[data-role="phishing-banner"] {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sk-accent);
  border-left-width: 4px;
  border-radius: 10px;
  font-weight: 600;
}

/* Envois différés : « Annuler » juste après « Envoyer » et envois programmés, au-dessus de la liste. */
/* Rappels de suivi échus, au-dessus de la liste : même carte que les envois programmés. */
section[data-role="follow-up-reminders"],
section[data-role="drafts"] {
  margin: 0.5rem 0.5rem 0.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

section[data-role="follow-up-reminders"] h3,
section[data-role="drafts"] h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sk-text-muted);
}

section[data-role="follow-up-reminders"] ul,
section[data-role="drafts"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li[data-component="follow-up-reminder"],
li[data-component="draft"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
}

li[data-component="follow-up-reminder"] + li[data-component="follow-up-reminder"],
li[data-component="draft"] + li[data-component="draft"] {
  border-top: 1px solid var(--sk-surface-border);
}

li[data-component="follow-up-reminder"] > span:not(.follow-up-actions),
li[data-component="draft"] > span:not(.draft-actions),
li[data-component="draft"] > time {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.follow-up-subject,
.draft-subject {
  font-weight: 600;
}

.follow-up-to,
.draft-to,
li[data-component="draft"] > time {
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

.draft-actions {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: inline-flex;
  gap: 0.4rem;
}

.follow-up-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  gap: 0.4rem;
}

section[data-role="scheduled-sends"],
section[data-role="snoozed-messages"] {
  margin: 0.5rem 0.5rem 0.25rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

section[data-role="scheduled-sends"] h3,
section[data-role="snoozed-messages"] h3 {
  margin: 0 0 0.35rem;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sk-text-muted);
}

section[data-role="scheduled-sends"] ul,
section[data-role="snoozed-messages"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li[data-component="scheduled-send"],
li[data-component="snoozed-message"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.4rem 0;
}

li[data-component="scheduled-send"] + li[data-component="scheduled-send"],
li[data-component="snoozed-message"] + li[data-component="snoozed-message"] {
  border-top: 1px solid var(--sk-surface-border);
}

li[data-component="scheduled-send"] > span,
li[data-component="scheduled-send"] > time,
li[data-component="scheduled-send"] > p,
li[data-component="snoozed-message"] > span,
li[data-component="snoozed-message"] > time,
li[data-component="snoozed-message"] > p {
  grid-column: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

li[data-component="scheduled-send"] > button,
li[data-component="snoozed-message"] > button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.scheduled-send-subject,
.snoozed-subject {
  font-weight: 600;
}

.scheduled-send-to,
li[data-component="scheduled-send"] > time,
.snoozed-from,
li[data-component="snoozed-message"] > time {
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

li[data-component="scheduled-send"] > time,
li[data-component="snoozed-message"] > time {
  color: var(--sk-accent);
  font-variant-numeric: tabular-nums;
}

p[data-role="scheduled-send-error"],
p[data-role="snooze-error"] {
  margin: 0.15rem 0 0;
  font-size: 0.85em;
  color: #d64545;
}

div[data-role="undo-send-banner"],
p[data-role="scheduled-sends-notice"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0;
  padding: 0.15rem 0;
}

div[data-role="undo-send-banner"] + h3,
p[data-role="scheduled-sends-notice"] + h3 {
  margin-top: 0.5rem;
}

div[data-role="undo-send-banner"] button {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  font-weight: 600;
}

div[data-role="undo-action"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0.5rem 0.5rem 0.25rem;
  padding: 0.45rem 0.5rem 0.45rem 0.85rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sk-shadow-glass);
}

div[data-role="undo-action"] > p[role="status"] {
  margin: 0;
  margin-inline-end: auto;
  font-weight: 500;
}

span[data-role="undo-action-count"] {
  margin-inline-start: 0.35rem;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
}

button[data-action="messageList.undo"] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  font-weight: 600;
}

button[data-action="messageList.undo"]:disabled {
  opacity: 0.55;
  cursor: progress;
}

p[data-role="undo-action-error"] {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85em;
  color: #d64545;
}

div[data-role="format-toolbar"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.5rem 0 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px 12px 0 0;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

span[data-role="editor-table-tools"]:not([hidden]),
span[data-role="format-commands"] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--sk-surface-border);
}

span[data-role="editor-table-tools"] button,
span[data-role="format-commands"] button,
div[data-role="format-toolbar"] > button[data-compose-find],
div[data-role="format-toolbar"] > button[data-compose-symbols],
span[data-role="compose-find-row"] button:has(> svg) {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  color: var(--sk-text-muted);
}

span[data-role="editor-table-tools"] button:hover,
span[data-role="format-commands"] button:hover,
div[data-role="format-toolbar"] > button[data-compose-find]:hover,
div[data-role="format-toolbar"] > button[data-compose-symbols]:hover,
span[data-role="compose-find-row"] button:has(> svg):hover:not(:disabled),
span[data-role="format-commands"] button[aria-expanded="true"],
div[data-role="format-toolbar"] > button[aria-expanded="true"] {
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
}

span[data-role="format-commands"] button[aria-pressed="true"] {
  border-color: var(--sk-surface-border);
  color: var(--sk-accent);
  font-weight: inherit;
}

span[data-role="editor-table-tools"] svg,
span[data-role="format-commands"] svg,
div[data-role="format-toolbar"] > button[data-compose-find] svg,
div[data-role="format-toolbar"] > button[data-compose-symbols] svg,
span[data-role="compose-find-row"] svg {
  width: 1.1rem;
  height: 1.1rem;
}

select[data-role="editor-block-style"],
select[data-role="editor-font-family"],
select[data-role="editor-font-size"] {
  height: 2rem;
  padding: 0 0.4rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

select[data-role="editor-block-style"]:hover,
select[data-role="editor-font-family"]:hover,
select[data-role="editor-font-size"]:hover {
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
}

select[data-role="editor-block-style"]:focus-visible,
select[data-role="editor-font-family"]:focus-visible,
select[data-role="editor-font-size"]:focus-visible {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}

label[data-role="editor-color-button"] {
  display: inline-grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0.3rem 0 0.25rem;
  border-radius: 8px;
  color: var(--sk-text-muted);
  cursor: pointer;
}

label[data-role="editor-color-button"]:hover {
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
}

label[data-role="editor-color-button"]:focus-within {
  outline: 2px solid var(--sk-accent);
  outline-offset: 1px;
}

label[data-role="editor-color-button"] svg {
  width: 1rem;
  height: 1rem;
}

label[data-role="editor-color-button"] input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  cursor: pointer;
}

label[data-role="editor-color-button"] input[type="color"]:focus {
  outline: none;
}

label[data-role="editor-color-button"] input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

label[data-role="editor-color-button"] input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 2px;
}

span[data-role="editor-link"]:not([hidden]),
span[data-role="editor-table"]:not([hidden]) {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

span[data-role="editor-link"] input {
  width: min(18rem, 60vw);
}

span[data-role="editor-table"] label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

span[data-role="editor-table"] input {
  width: 4.5rem;
}

span[data-role="editor-link"] input[aria-invalid="true"],
span[data-role="editor-table"] input[aria-invalid="true"] {
  border-color: var(--sk-accent);
}

/* « Rechercher et remplacer » du composeur : verre dépoli comme la recherche du volet de lecture, occurrences surlignées or. */
div[data-role="compose-find"]:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0.45rem 0.35rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sk-shadow-glass);
}

div[data-role="compose-find"]:focus-within {
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
}

span[data-role="compose-find-row"] {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

span[data-role="compose-find-row"] > svg {
  color: var(--sk-accent);
}

span[data-role="compose-find-row"] input[type="search"],
span[data-role="compose-find-row"] input[type="text"] {
  width: min(14rem, 50vw);
}

span[data-role="compose-find-row"] label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
}

span[data-role="compose-find-status"] {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sk-text-muted);
}

span[data-role="compose-find-status"][data-empty] {
  color: #d64545;
}

div[data-role="compose-find"] button:disabled {
  cursor: default;
  opacity: 0.35;
}

/* « Insérer un symbole » : même verre dépoli que la barre de recherche, cases carrées, focus or. */
div[data-role="compose-symbols"]:not([hidden]) {
  display: grid;
  gap: 0.15rem;
  margin: 0 0 0.5rem;
  padding: 0.4rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sk-shadow-glass);
}

span[data-role="compose-symbols-row"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
}

button[data-compose-symbol] {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text);
  font-size: 1rem;
  line-height: 1;
}

button[data-compose-symbol]:hover,
button[data-compose-symbol]:focus-visible {
  background: var(--sk-bg-elevated);
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
  color: var(--sk-accent);
}

::highlight(sekervia-compose-find) {
  background-color: color-mix(in srgb, var(--sk-accent) 28%, transparent);
}

::highlight(sekervia-compose-find-current) {
  background-color: var(--sk-accent);
  color: #fff;
}

div[data-role="format-toolbar"]:not([role="toolbar"]) {
  margin-bottom: 0.5rem;
  border-radius: 12px;
}

div[data-role="body-html"][contenteditable="true"] {
  min-height: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 0 0 12px 12px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  line-height: 1.55;
  overflow-wrap: anywhere;
  cursor: text;
}

div[data-role="body-html"] :is(p, ul, ol, pre, table) {
  margin: 0 0 0.6em;
}

div[data-role="body-html"] :is(h1, h2, h3) {
  margin: 0.5em 0 0.35em;
  line-height: 1.25;
}

div[data-role="body-html"] blockquote {
  margin: 0.5em 0;
  padding: 0.1em 0 0.1em 0.85em;
  border-left: 3px solid var(--sk-accent);
  color: var(--sk-text-muted);
}

div[data-role="body-html"] a {
  color: var(--sk-accent);
}

div[data-role="body-html"] img {
  max-width: 100%;
  height: auto;
}

div[data-role="body-html"] td {
  min-width: 3em;
  vertical-align: top;
}

div[data-role="body-html"] hr {
  border: 0;
  border-top: 1px solid var(--sk-surface-border);
  margin: 0.8em 0;
}

div[data-role="compose-templates"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

div[data-role="compose-templates"] label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

div[data-role="compose-templates"] svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--sk-accent);
}

div[data-role="compose-templates"] select,
div[data-role="compose-templates"] input {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-surface);
  color: inherit;
}

div[data-role="send-later"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

div[data-role="send-later"] input[type="datetime-local"] {
  font: inherit;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 8px;
  background: var(--sk-surface);
  color: inherit;
}

div[data-role="attachment-reminder"],
div[data-role="sensitive-data-reminder"],
div[data-role="external-recipients-reminder"],
div[data-role="visible-recipients-reminder"],
div[data-role="subject-reminder"],
div[data-role="message-size-reminder"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--sk-accent);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

div[data-role="attachment-reminder"] p,
div[data-role="sensitive-data-reminder"] p,
div[data-role="external-recipients-reminder"] p,
div[data-role="visible-recipients-reminder"] p,
div[data-role="subject-reminder"] p,
div[data-role="message-size-reminder"] p {
  overflow-wrap: anywhere;
  flex: 1 1 16rem;
  margin: 0;
}

div[data-role="phishing-banner"][data-phishing-verdict="dangerous"] {
  border-color: #d64545;
  background: rgba(214, 69, 69, 0.1);
}

[data-role="remote-content-banner"],
[data-role="read-receipt-banner"],
[data-role="unsubscribe-banner"],
[data-role="block-sender-banner"] {
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  font-size: 0.9em;
  color: var(--sk-text-muted);
}

[data-role="remote-content-banner"] button,
[data-role="unsubscribe-banner"] button,
[data-role="block-sender-banner"] button {
  border-color: var(--sk-surface-border);
  margin-left: 0.5rem;
}

/* « Liens du message » : destination réelle lisible (hôte en gras, adresse en chasse fixe), avertissements en ambre/rouge sobres. */
section[data-component="reading-pane-links"] {
  margin: 0.75rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

section[data-component="reading-pane-links"] .message-links-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

section[data-component="reading-pane-links"] .message-links-heading button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: none;
  font-weight: 600;
}

section[data-component="reading-pane-links"] svg {
  width: 16px;
  height: 16px;
}

[data-role="message-links-warning"],
ul[data-role="message-links"] [data-link-warning="deceptive"],
ul[data-role="message-links"] [data-link-warning="credentials"],
ul[data-role="message-links"] [data-link-warning="deceptive-address"] {
  color: #c43c3c;
  font-size: 0.9em;
}

.message-links-hint,
ul[data-role="message-links"] [data-link-warning] {
  margin: 0.25rem 0;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

ul[data-role="message-links"] {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
}

ul[data-role="message-links"] > li {
  display: grid;
  gap: 0.15rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--sk-surface-border);
}

ul[data-role="message-links"] > li[data-suspicious] {
  border-left: 2px solid #c9a227;
  padding-left: 0.5rem;
}

ul[data-role="message-links"] .message-link-destination {
  overflow-wrap: anywhere;
  font-size: 0.9em;
}

button[data-action="message.email.write"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

ul[data-role="message-links"] .message-link-url {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

ul[data-role="message-links"] .message-link-actions,
[data-role="message-link-confirm"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Les courriels HTML supposent un fond clair : page blanche encadrée, aussi en thème sombre. */
iframe[data-role="message-html-body"]:not([hidden]),
iframe[data-role="attached-message-body"] {
  display: block;
  width: 100%;
  min-height: 60vh;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: #fff;
  /* Taille du texte (Réglages › Apparence, Ctrl/Cmd +/−) : l'iframe isolée n'hérite pas de la taille de la racine. */
  zoom: var(--sk-text-zoom, 1);
}

/* Corps assombri : fond du cadre accordé au fond du document inversé, aucun éclair blanc pendant le chargement. */
iframe[data-dark-body] {
  background: #141414;
}

[data-role="message-text-body"] pre,
pre[data-role="message-text-body"] {
  margin: 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Historique cité replié (Gmail « Afficher le contenu masqué ») : pastille verre dépoli, trois points or ; texte cité en retrait. */
details[data-role="quoted-history"] > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0.4rem;
  padding: 0.2rem 0.75rem 0.2rem 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  color: var(--sk-text-muted);
  font-size: 0.8em;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

details[data-role="quoted-history"] > summary::-webkit-details-marker {
  display: none;
}

details[data-role="quoted-history"] > summary:hover {
  color: var(--sk-text);
}

details[data-role="quoted-history"] > summary:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

details[data-role="quoted-history"] > summary svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--sk-accent);
}

details[data-role="quoted-history"][open] > summary .q-show,
details[data-role="quoted-history"]:not([open]) > summary .q-hide {
  display: none;
}

details[data-role="quoted-history"] > pre {
  padding-left: 0.75rem;
  border-left: 2px solid var(--sk-surface-border);
  color: var(--sk-text-muted);
}

/* Boutons icône + libellé de la barre d'actions (VIP, épingler, rechercher…) : icône alignée sur le texte. */
[data-component="reading-pane-toolbar"] button:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

/* « Rechercher dans ce message » : barre en verre dépoli collée en haut du volet pendant le défilement, occurrences surlignées or. */
form[data-role="message-find"] {
  position: sticky;
  /* Compense le retrait intérieur de la colonne de lecture : la barre colle au bord visible. */
  top: -1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.75rem;
  padding: 0.3rem 0.35rem 0.3rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--sk-bg-elevated) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: var(--sk-shadow-glass);
}

form[data-role="message-find"]:focus-within {
  border-color: color-mix(in srgb, var(--sk-accent) 55%, var(--sk-surface-border));
}

form[data-role="message-find"] > svg {
  color: var(--sk-accent);
}

[data-component="inbox-screen"] form[data-role="message-find"] input[name="messageFind"] {
  flex: 1 1 auto;
  min-width: 6rem;
  padding: 0.25rem 0.35rem;
  border: 0;
  background: transparent;
}

[data-component="inbox-screen"] form[data-role="message-find"] input[name="messageFind"]:focus-visible {
  outline: none;
}

span[data-role="message-find-status"] {
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sk-text-muted);
}

span[data-role="message-find-status"][data-empty] {
  color: #d64545;
}

[data-component="inbox-screen"] form[data-role="message-find"] button {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 0;
  border-radius: 8px;
}

[data-component="inbox-screen"] form[data-role="message-find"] button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

[data-component="inbox-screen"] form[data-role="message-find"] button:disabled {
  cursor: default;
  opacity: 0.35;
}

[data-role="message-text-body"] mark[data-sekervia-find] {
  border-radius: 2px;
  background: color-mix(in srgb, var(--sk-accent) 28%, transparent);
  color: inherit;
}

[data-role="message-text-body"] mark[data-sekervia-find="current"] {
  outline: none;
  background: var(--sk-accent);
  box-shadow: 0 0 0 2px var(--sk-accent);
  color: var(--sk-accent-contrast);
}

/* Source brute : verre dépoli, texte à chasse fixe défilant (borné), résumé d'authentification en pastilles. */
section[data-role="message-source"] {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

section[data-role="message-source"] .message-source-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

section[data-role="message-source"] h2 {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-text-muted);
}

section[data-role="message-source"] > p {
  margin: 0.5rem 0 0;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

dl[data-role="message-authentication"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
}

dl[data-role="message-authentication"] > div {
  display: flex;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  font-size: 0.8em;
}

dl[data-role="message-authentication"] dt {
  font-weight: 600;
}

dl[data-role="message-authentication"] dd {
  margin: 0;
  color: var(--sk-text-muted);
}

dl[data-role="message-authentication"] dd[data-auth-result="pass"] {
  color: var(--sk-accent);
}

dl[data-role="message-authentication"] dd:is([data-auth-result="fail"], [data-auth-result="softfail"], [data-auth-result="permerror"]) {
  color: #d64545;
}

pre[data-role="message-source-text"] {
  margin: 0.6rem 0 0;
  padding: 0.6rem;
  max-height: 50vh;
  overflow: auto;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  font: 0.8rem/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

[data-component="reading-pane-attachments"] h2 {
  margin: 1rem 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sk-text-muted);
}

[data-role="attachments-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

[data-role="attachments-header"] button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

[data-role="attachments-header"] svg {
  color: var(--sk-accent);
}

[data-role="attachments"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-role="attachments"] li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.3rem 0.3rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  max-width: 100%;
}

.attachment-filename {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-size {
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

[data-role="attachments-total"] {
  margin: 0.3rem 0 0;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

/* Nombre de mots / caractères : discret sous le corps, aligné à droite, chiffres tabulaires (pas de saut à la frappe). */
p[data-role="compose-word-count"] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin: 0.3rem 0 0;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  color: var(--sk-text-muted);
}

p[data-role="compose-word-count"] > span + span::before {
  content: '·';
  margin-right: 0.5rem;
}

/* Trop volumineux pour le serveur d'envoi : filet rouge, rien à confirmer. */
div[data-role="message-size-reminder"] {
  border-color: #d64545;
}

/* Conseil « premier contact » : note verre dépoli sous l'en-tête, icône à l'accent or, jamais alarmiste. */
[data-role="first-contact-tip"],
[data-role="diverted-reply-to"],
[data-role="trackers-blocked"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: var(--sk-bg-elevated);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  font-size: 0.9em;
}

[data-role="first-contact-tip"] svg,
[data-role="diverted-reply-to"] svg,
[data-role="trackers-blocked"] svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--sk-accent);
}

/* Expéditeur non vérifié : même note verre dépoli, liseré et icône rouges sobres (échec d'authentification, pas un simple conseil). */
[data-role="unverified-sender"],
[data-role="attached-message-unverified"],
[data-role="misleading-name"],
[data-role="lookalike-domain"],
[data-role="impersonated-contact"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(196, 60, 60, 0.55);
  border-radius: 10px;
  background: var(--sk-bg-elevated);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  font-size: 0.9em;
}

[data-role="unverified-sender"] svg,
[data-role="attached-message-unverified"] svg,
[data-role="misleading-name"] svg,
[data-role="lookalike-domain"] svg,
[data-role="impersonated-contact"] svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgb(196, 60, 60);
}

/* Domaine sosie : caractères d'un autre alphabet ou invisibles surlignés dans le domaine, rouge sobre. */
[data-role="lookalike-domain"] mark {
  padding: 0 0.15em;
  border-radius: 4px;
  background: rgba(196, 60, 60, 0.18);
  color: inherit;
}

/* Pièce jointe à risque : liseré rouge sobre, avertissement et confirmation sur toute la largeur de la pastille. */
[data-role="attachments"] li[data-attachment-risk] {
  flex-wrap: wrap;
  border-color: rgba(196, 60, 60, 0.55);
}

[data-role="attachment-risk"] {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0;
  font-size: 0.85em;
  color: #c43c3c;
}

[data-role="attachment-risk"] svg {
  flex: none;
  width: 14px;
  height: 14px;
}

/* « Supprimer » une seule pièce jointe : icône seule, discrète jusqu'au survol. */
[data-role="attachment-remove"] {
  display: inline-flex;
  align-items: center;
  color: var(--sk-text-muted);
}

[data-role="attachment-remove"]:hover:not(:disabled),
[data-role="attachment-remove"][aria-expanded="true"] {
  color: var(--sk-accent);
}

[data-role="attachment-remove"] svg {
  width: 14px;
  height: 14px;
}

/* Témoin d'une pièce jointe supprimée : nom barré, pastille en pointillés, rien à ouvrir. */
[data-role="attachments"] li[data-attachment-deleted] {
  border-style: dashed;
}

[data-role="attachments"] li[data-attachment-deleted] .attachment-filename {
  color: var(--sk-text-muted);
  text-decoration: line-through;
}

.attachment-deleted {
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

[data-role="attachment-removal-confirm"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-size: 0.9em;
}

[data-role="attachment-removal-status"] {
  margin: 0.25rem 0;
  font-size: 0.9em;
}

[data-role="attachment-removal-status"][role="alert"] {
  color: var(--sk-accent);
}

[data-role="attachment-risk-confirm"] {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0;
  font-size: 0.9em;
}

[data-component="reading-pane-attachments"] button:hover:not(:disabled),
[data-component="reading-pane-attachments"] button:focus-visible {
  border-color: var(--sk-surface-border);
}

[data-component="reading-pane-attachments"] button:disabled {
  cursor: progress;
  opacity: 0.6;
}

[data-role="attachment-error"] {
  color: var(--sk-accent);
  font-size: 0.9em;
}

figure[data-role="attachment-preview"] {
  margin: 0.75rem 0 0;
}

figure[data-role="attachment-preview"] img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  border-radius: 10px;
  border: 1px solid var(--sk-surface-border);
}

/* Aperçu texte (.txt, .csv, HPRIM) : colonnes conservées, défilement borné, verre dépoli comme le volet. */
pre[data-role="attachment-text-preview"] {
  margin: 0;
  max-height: 60vh;
  overflow: auto;
  padding: 0.75rem 1rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: var(--sk-bg-elevated);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  font: 0.85em/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre;
  tab-size: 8;
}

[data-role="attachment-preview-truncated"] {
  margin: 0.3rem 0 0;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

figure[data-role="attachment-preview"] figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

/* Message joint ouvert : carte verre dépoli sous les pièces jointes, en-tête discret, icône or. */
section[data-role="attached-message"] {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem 1rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 14px;
  background: var(--sk-bg-elevated);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

[data-role="attached-message-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

[data-role="attached-message-header"] p {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

[data-role="attached-message-header"] svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--sk-accent);
}

section[data-role="attached-message"] h3 {
  margin: 0.5rem 0 0.3rem;
  font-size: 1.05em;
  font-weight: 600;
}

pre[data-role="attached-message-text"] {
  margin: 0.5rem 0 0;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

ul[data-role="attached-message-attachments"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.85em;
  color: var(--sk-text-muted);
}

[data-role="attached-message-invalid"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

p[data-role="ai-summary-text"] {
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
}

section[data-role="ai-chat"] h2,
div[data-role="cr-intake-panel"] h2 {
  margin: 0 0 0.5em;
  font-size: 0.95rem;
  font-weight: 600;
}

ol[data-role="ai-chat-log"] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

ol[data-role="ai-chat-log"] li {
  max-width: 85%;
  padding: 0.4rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--sk-surface-border);
  background: var(--sk-bg-elevated);
}

ol[data-role="ai-chat-log"] li[data-chat-role="user"] {
  align-self: flex-end;
}

ol[data-role="ai-chat-log"] li p {
  margin: 0.2em 0 0;
  white-space: pre-wrap;
}

ol[data-role="ai-chat-log"] li[aria-busy="true"] p {
  color: var(--sk-text-muted);
}

.ai-chat-author {
  font-size: 0.75rem;
  color: var(--sk-accent);
}

form[data-form="message.askAi"] {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

form[data-form="message.askAi"] label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

form[data-form="message.askAi"] button[type="submit"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

/* « Rediriger » (Thunderbird, Apple Mail) : carte de verre dépoli sous la barre d'actions, départ en accent or. */
form[data-form="message.redirect.send"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 14px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-glass);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  font-size: 0.8rem;
}

form[data-form="message.redirect.send"] > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 600;
  color: var(--sk-text-muted);
}

form[data-form="message.redirect.send"] svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--sk-accent);
}

form[data-form="message.redirect.send"] input {
  flex: 1 1 14rem;
  min-width: 0;
  font: inherit;
}

form[data-form="message.redirect.send"] button[type="submit"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

form[data-form="message.redirect.send"] > p,
div[data-role="redirect-warning"] {
  flex-basis: 100%;
  margin: 0;
}

p[data-role="redirect-hint"] {
  color: var(--sk-text-muted);
}

p[data-role="redirect-status"] {
  color: var(--sk-accent);
}

p[data-role="redirect-error"] {
  color: #d64545;
}

div[data-role="redirect-warning"] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
}

div[data-role="redirect-warning"] p {
  margin: 0;
}

/* Réponse rapide (Outlook, Gmail) : carte de verre dépoli sous le message, envoi en accent or. */
form[data-form="message.quickReply"] {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
  padding: 0.75rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 14px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

form[data-form="message.quickReply"] > label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sk-text-muted);
}

form[data-form="message.quickReply"] > label svg {
  width: 1rem;
  height: 1rem;
  color: var(--sk-accent);
}

fieldset[data-role="quick-reply-mode"] {
  display: inline-flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.8rem;
}

fieldset[data-role="quick-reply-mode"] label {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

form[data-form="message.quickReply"] textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.45;
}

div[data-role="quick-reply-actions"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

form[data-form="message.quickReply"] button[type="submit"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  border-color: transparent;
  font-weight: 600;
}

p[data-role="quick-reply-status"],
p[data-role="quick-reply-error"] {
  margin: 0;
  font-size: 0.8rem;
}

p[data-role="quick-reply-status"] {
  color: var(--sk-accent);
}

ul[data-role="similar-messages"] {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

ul[data-role="similar-messages"] button {
  width: 100%;
  text-align: start;
  border-color: transparent;
}

nav[data-component="reading-pane-conversation"] {
  margin: 0.75rem 0;
  padding: 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

p[data-role="conversation-title"] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.35rem;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--sk-text-muted);
}

p[data-role="conversation-title"] svg {
  width: 15px;
  height: 15px;
  color: var(--sk-accent);
}

p[data-role="conversation-title"] .conversation-count {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

nav[data-component="reading-pane-conversation"] ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 14rem;
  overflow-y: auto;
}

nav[data-component="reading-pane-conversation"] button {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 0.75rem;
  width: 100%;
  padding: 0.35rem 0.5rem;
  text-align: start;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
}

nav[data-component="reading-pane-conversation"] button[aria-current="true"] {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

nav[data-component="reading-pane-conversation"] .conversation-from {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav[data-component="reading-pane-conversation"] button[data-unread="true"] .conversation-from {
  font-weight: 600;
}

nav[data-component="reading-pane-conversation"] button[data-unread="true"] .conversation-from::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 0.4rem;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--sk-accent);
}

nav[data-component="reading-pane-conversation"] time {
  font-size: 0.75rem;
  color: var(--sk-text-muted);
  font-variant-numeric: tabular-nums;
}

nav[data-component="reading-pane-conversation"] .conversation-snippet {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

nav[data-component="reading-pane-conversation"] .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Sas de premier contact (HEY « Screener ») : même segmenté en verre dépoli que la catégorie d'expéditeur, titre à l'icône fine ; la destination retenue s'allume à l'accent or. */
div[data-role="screener"] > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--sk-text);
}

div[data-role="screener"] > span:first-child svg {
  width: 1rem;
  height: 1rem;
}

div[data-role="screener-choices"] button[aria-pressed="true"] {
  color: var(--sk-accent);
  border-color: color-mix(in srgb, var(--sk-accent) 45%, transparent);
}

div[data-role="screener"],
div[data-role="sender-category"] {
  margin: 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

div[data-role="screener-choices"],
div[data-role="sender-category-choices"] {
  display: inline-flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

div[data-role="screener-choices"] button,
div[data-role="sender-category-choices"] button {
  border: 0;
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
}

div[data-role="screener"] p,
div[data-role="sender-category"] p {
  margin: 0;
}

/* Liste des expéditeurs triés (Réglages › Tri) : adresse, destination en accent or, bouton d'oubli. */
ul[data-role="screener-decision-list"] {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

ul[data-role="screener-decision-list"] li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

ul[data-role="screener-decision-list"] span[data-role="screener-destination"] {
  color: var(--sk-accent);
}

/* « Me le rappeler » (volet de lecture) : préréglages en segmenté verre dépoli, échéance posée à l'accent or. */
div[data-role="follow-up"],
div[data-role="snooze"],
form[data-role="move-to"] {
  margin: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  font-size: 0.8rem;
  color: var(--sk-text-muted);
}

div[data-role="follow-up"] > span,
div[data-role="snooze"] > span,
form[data-role="move-to"] > label,
section[data-role="snoozed-messages"] h3,
section[data-role="follow-up-reminders"] h3,
section[data-role="drafts"] h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

div[data-role="follow-up"] svg,
div[data-role="snooze"] svg,
form[data-role="move-to"] svg,
section[data-role="snoozed-messages"] h3 svg,
section[data-role="follow-up-reminders"] h3 svg,
section[data-role="drafts"] h3 svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--sk-accent);
}

div[data-role="follow-up-presets"],
div[data-role="snooze-presets"] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

div[data-role="follow-up-presets"] button,
div[data-role="snooze-presets"] button {
  border: 0;
  border-radius: 10px;
  padding: 0.3rem 0.6rem;
}

/* « Seulement sans réponse » : pastille verre dépoli, accent or une fois activée. */
div[data-role="follow-up"] > button[data-action="followUp.toggleUnlessReplied"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  padding: 0.3rem 0.6rem;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  color: inherit;
  font: inherit;
  cursor: pointer;
}

div[data-role="follow-up"] > button[data-action="followUp.toggleUnlessReplied"][aria-pressed="true"] {
  color: var(--sk-accent);
  border-color: color-mix(in srgb, var(--sk-accent) 45%, transparent);
}

div[data-role="follow-up"] > time {
  color: var(--sk-accent);
  font-variant-numeric: tabular-nums;
}

div[data-role="follow-up"] > p,
div[data-role="snooze"] > p,
form[data-role="move-to"] > p,
section[data-role="follow-up-reminders"] > p {
  flex-basis: 100%;
  margin: 0;
  color: #d64545;
}

/*
 * Rappel, report et catégorie d'expéditeur (volet de lecture) : les préréglages ne sont plus une rangée de boutons
 * à plat, ils se rangent dans un menu — « details » natif (clavier et lecteurs d'écran d'office, zéro script).
 * Le titre devient une pastille ; le menu flotte comme le « … » de la barre, une ligne par choix.
 */
details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) {
  position: relative;
}

details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-sm);
  padding: 0.3rem 0.6rem;
  background: var(--sk-surface);
  color: var(--sk-text-muted);
  cursor: pointer;
}

details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) > summary::-webkit-details-marker {
  display: none;
}

details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) > summary:hover,
details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"])[open] > summary {
  background: color-mix(in srgb, var(--sk-text) 9%, transparent);
  color: var(--sk-text);
}

details[data-role="follow-up-menu"][open] > div[data-role="follow-up-presets"],
details[data-role="snooze-menu"][open] > div[data-role="snooze-presets"],
details[data-role="sender-category-menu"][open] > div[data-role="sender-category-choices"] {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  min-width: 13rem;
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  padding: 0.3rem;
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
  box-shadow: var(--sk-shadow-glass);
}

details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) > div button {
  border-radius: var(--sk-radius-sm);
  padding: calc(0.35rem * var(--sk-space-unit, 1)) 0.6rem;
  text-align: left;
}

details:is([data-role="follow-up-menu"], [data-role="snooze-menu"], [data-role="sender-category-menu"]) > div button:hover {
  background: color-mix(in srgb, var(--sk-accent) 14%, transparent);
}

div[data-role="sender-category-choices"] > p {
  max-width: 18rem;
  padding: 0.4rem 0.6rem 0.2rem;
}

/* Carte d'invitation d'agenda (iMIP) : verre dépoli, accent or sur l'icône et la réponse choisie. */
/* Rapport de remise / non-remise (DSN) : même carte de verre que l'invitation, liseré d'accent quand la remise a échoué. */
section[data-role="delivery-report"] {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sk-surface-border);
  border-left-width: 4px;
  border-radius: 14px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-glass);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

section[data-role="delivery-report"][data-delivery-outcome="failed"] {
  border-left-color: #d64545;
}

section[data-role="delivery-report"][data-delivery-outcome="delayed"] {
  border-left-color: var(--sk-accent);
}

.delivery-report-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.delivery-report-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--sk-surface-border);
  color: var(--sk-accent);
}

[data-component="inbox-screen"] .delivery-report-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

section[data-role="delivery-report"] h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

section[data-role="delivery-report"] p {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

p[data-role="delivery-subject"] span,
p[data-role="delivery-diagnostic"] span,
p[data-role="delivery-reported-by"] {
  color: var(--sk-text-muted);
}

ul[data-role="delivery-recipients"] {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

ul[data-role="delivery-recipients"] li {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
}

ul[data-role="delivery-recipients"] li p:first-child {
  margin-top: 0;
}

p[data-role="delivery-diagnostic"] code {
  font-size: 0.8125rem;
}

section[data-role="invitation"] {
  margin: 0.75rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 14px;
  background: var(--sk-surface);
  box-shadow: var(--sk-shadow-glass);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
}

section[data-role="invitation"][data-invitation-kind="cancel"] h2 {
  text-decoration: line-through;
  color: var(--sk-text-muted);
}

.invitation-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.invitation-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--sk-surface-border);
  color: var(--sk-accent);
}

[data-component="inbox-screen"] .invitation-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

p.invitation-kind {
  margin: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--sk-text-muted);
}

section[data-role="invitation"] h2 {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  font-weight: 600;
}

section[data-role="invitation"] dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.9rem;
  margin: 0.75rem 0 0;
  font-size: 0.875rem;
}

section[data-role="invitation"] dl > div {
  display: contents;
}

section[data-role="invitation"] dt {
  color: var(--sk-text-muted);
}

section[data-role="invitation"] dd {
  margin: 0;
  overflow-wrap: anywhere;
}

span[data-role="invitation-recurring"] {
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  font-size: 0.75rem;
  color: var(--sk-text-muted);
}

div[data-role="invitation-actions"] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 0.8rem;
  padding: 2px;
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
}

div[data-role="invitation-actions"] button {
  border: 0;
  border-radius: 10px;
  padding: 0.35rem 0.85rem;
}

[data-component="inbox-screen"] div[data-role="invitation-actions"] button[aria-pressed="true"] {
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
}

p[data-role="invitation-reply"],
p[data-role="invitation-status"],
p[data-role="invitation-error"] {
  margin: 0.6rem 0 0;
  font-size: 0.875rem;
}

p[data-role="invitation-status"] {
  color: var(--sk-text-muted);
}

/* Palette de commandes (Cmd/Ctrl-K) : montée sur document.body, hors de l'écran courrier. */
/* « Nouveau message » : action principale de la colonne, accent or. */
[data-role="inbox-screen-messages"] > button[data-action="compose.new"] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-color: transparent;
  border-radius: 12px;
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font-weight: 600;
  box-shadow: var(--sk-shadow-glass);
}

[data-role="inbox-screen-messages"] > button[data-action="compose.new"]:disabled {
  cursor: default;
  opacity: 0.45;
}

[data-component="inbox-screen"] button[data-action="commandPalette.open"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

[data-component="command-palette"] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 14vh;
  background: rgba(10, 12, 18, 0.28);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--sk-text);
}

[data-component="command-palette"][hidden] {
  display: none;
}

[data-role="command-palette-panel"] {
  width: min(620px, calc(100vw - 2rem));
  overflow: hidden;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md, 16px);
  box-shadow: var(--sk-shadow-glass), 0 24px 60px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  [data-role="command-palette-panel"] {
    animation: sk-palette-in 140ms ease-out;
  }
}

@keyframes sk-palette-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

input[data-role="command-palette-input"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.15rem;
  border: 0;
  border-bottom: 1px solid var(--sk-surface-border);
  background: transparent;
  color: var(--sk-text);
  font: inherit;
  font-size: 1.05rem;
  outline: none;
}

ul[data-role="command-palette-list"] {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
}

li[data-role="command-palette-option"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
  cursor: pointer;
}

li[data-role="command-palette-option"]:hover,
li[data-role="command-palette-option"][aria-selected="true"] {
  background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
}

li[data-role="command-palette-option"][aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--sk-accent);
}

span[data-role="command-category"] {
  color: var(--sk-text-muted);
  font-size: 0.8rem;
}

span[data-role="command-shortcut"] {
  display: inline-flex;
  gap: 0.25rem;
}

span[data-role="command-shortcut"] kbd {
  min-width: 1.5em;
  padding: 0.1rem 0.35rem;
  box-sizing: border-box;
  border: 1px solid var(--sk-surface-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--sk-bg-elevated);
  color: var(--sk-text-muted);
  font: 600 0.75rem/1.3 "SF Mono", ui-monospace, "Cascadia Mono", monospace;
  text-align: center;
}

form[data-form="compose"] label[data-role="compose-read-receipt"],
form[data-form="compose"] label[data-role="compose-delivery-receipt"] {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sk-text-muted);
  cursor: pointer;
}

form[data-form="compose"] label[data-role="compose-read-receipt"] input,
form[data-form="compose"] label[data-role="compose-delivery-receipt"] input {
  margin: 0;
  accent-color: var(--sk-accent);
}

form:is([data-form="compose"], [data-form="settings.quickStep.add"]) label:has(> ul[data-role="recipient-suggestions"]) {
  position: relative;
}

/* Ligne d'étape rapide (Réglages › Règles) : seuls les champs du type d'action choisi restent visibles, comme la boîte
   « Modifier l'étape rapide » d'Outlook — `data-kinds` (`QUICK_STEP_FIELD_KINDS`) suit le menu sans script ; ligne « — » : aucun champ. */
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value=""]:checked) > label[data-kinds],
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="markRead"]:checked) > label[data-kinds]:not([data-kinds~="markRead"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="markUnread"]:checked) > label[data-kinds]:not([data-kinds~="markUnread"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="flag"]:checked) > label[data-kinds]:not([data-kinds~="flag"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="unflag"]:checked) > label[data-kinds]:not([data-kinds~="unflag"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="pin"]:checked) > label[data-kinds]:not([data-kinds~="pin"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="unpin"]:checked) > label[data-kinds]:not([data-kinds~="unpin"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="addTag"]:checked) > label[data-kinds]:not([data-kinds~="addTag"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="clearTags"]:checked) > label[data-kinds]:not([data-kinds~="clearTags"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="move"]:checked) > label[data-kinds]:not([data-kinds~="move"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="copy"]:checked) > label[data-kinds]:not([data-kinds~="copy"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="archive"]:checked) > label[data-kinds]:not([data-kinds~="archive"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="delete"]:checked) > label[data-kinds]:not([data-kinds~="delete"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="createTask"]:checked) > label[data-kinds]:not([data-kinds~="createTask"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="reply"]:checked) > label[data-kinds]:not([data-kinds~="reply"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="replyAll"]:checked) > label[data-kinds]:not([data-kinds~="replyAll"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="forward"]:checked) > label[data-kinds]:not([data-kinds~="forward"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="forwardAsAttachment"]:checked) > label[data-kinds]:not([data-kinds~="forwardAsAttachment"]),
form[data-form="settings.quickStep.add"] li[data-role="quick-step-action"]:has(select[name^="actionKind."] option[value="newMessage"]:checked) > label[data-kinds]:not([data-kinds~="newMessage"]) {
  display: none;
}

/* Fichiers du système glissés sur le composeur : voile verre dépoli, liseré or en pointillés et consigne centrée. */
form[data-form="compose"] {
  position: relative;
}

form[data-form="compose"][data-drop-target]::after {
  content: attr(data-drop-hint);
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1rem;
  border-radius: var(--sk-radius-lg);
  outline: 1.5px dashed rgba(168, 130, 63, 0.7);
  outline-offset: -6px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  color: var(--sk-text);
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}

ul[data-role="recipient-suggestions"] {
  position: absolute;
  z-index: 50;
  top: 100%;
  left: 0;
  width: min(420px, 100%);
  max-height: 16rem;
  overflow-y: auto;
  margin: 0.25rem 0 0;
  padding: 0.3rem;
  list-style: none;
  background: color-mix(in srgb, var(--sk-bg-elevated) 82%, transparent);
  backdrop-filter: blur(24px) saturate(1.6);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  box-shadow: var(--sk-shadow-glass), 0 14px 36px rgba(0, 0, 0, 0.16);
}

/* « @Nom » dans le corps : liste posée sous le curseur (haut/gauche calculés par la coque). */
ul[data-role="recipient-suggestions"][data-anchor="mention"] {
  width: min(340px, 100%);
}

ul[data-role="recipient-suggestions"] li[role="option"] {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
}

ul[data-role="recipient-suggestions"] li[role="option"]:hover,
ul[data-role="recipient-suggestions"] li[role="option"][aria-selected="true"] {
  background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
}

ul[data-role="recipient-suggestions"] li[role="option"][aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--sk-accent);
}

/* Groupe de contacts : icône deux silhouettes (accent or) à gauche du nom et de l'effectif. */
ul[data-role="recipient-suggestions"] li[role="option"][data-kind="group"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: center;
}

ul[data-role="recipient-suggestions"] li[data-kind="group"] svg {
  grid-row: span 2;
  width: 1.15rem;
  height: 1.15rem;
  color: rgba(168, 130, 63, 0.95);
}

span[data-role="recipient-name"] {
  color: var(--sk-text);
  font-weight: 500;
}

span[data-role="recipient-email"] {
  color: var(--sk-text-muted);
  font-size: 0.85em;
}

span[data-role="recipient-email"]:only-child {
  color: var(--sk-text);
  font-size: inherit;
}

/* Aide-mémoire des raccourcis (« ? ») : même verre dépoli que la palette, deux colonnes sur grand écran. */
[data-component="shortcut-help"] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 8vh;
  background: rgba(10, 12, 18, 0.28);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  color: var(--sk-text);
}

[data-role="shortcut-help-panel"] {
  display: flex;
  flex-direction: column;
  width: min(820px, calc(100vw - 2rem));
  max-height: 80vh;
  overflow: hidden;
  background: color-mix(in srgb, var(--sk-bg-elevated) 80%, transparent);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md, 16px);
  box-shadow: var(--sk-shadow-glass), 0 24px 60px rgba(0, 0, 0, 0.18);
}

@media (prefers-reduced-motion: no-preference) {
  [data-role="shortcut-help-panel"] {
    animation: sk-palette-in 140ms ease-out;
  }
}

[data-role="shortcut-help-panel"] > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--sk-surface-border);
}

[data-role="shortcut-help-panel"] h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

[data-role="shortcut-help-panel"] button[data-action="shortcutHelp.close"] {
  display: inline-flex;
  padding: 0.35rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sk-text-muted);
  cursor: pointer;
}

[data-role="shortcut-help-panel"] button[data-action="shortcutHelp.close"]:hover {
  background: color-mix(in srgb, var(--sk-accent) 15%, transparent);
  color: var(--sk-text);
}

[data-role="shortcut-help-body"] {
  overflow-y: auto;
  padding: 0.5rem 1.15rem 1rem;
  columns: 2 320px;
  column-gap: 2rem;
  outline: none;
}

[data-role="shortcut-help-body"] section {
  break-inside: avoid-column;
}

[data-role="shortcut-help-body"] h3 {
  margin: 0.8rem 0 0.35rem;
  color: var(--sk-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-role="shortcut-help-body"] ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-role="shortcut-help-body"] li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--sk-surface-border) 60%, transparent);
  font-size: 0.875rem;
  break-inside: avoid;
}

li[data-role="command-palette-empty"] {
  padding: 1.1rem;
  color: var(--sk-text-muted);
  text-align: center;
}

/* « Ajouter aux contacts » à côté de l'expéditeur. */
.reading-pane-meta [data-role="from"] button[data-action="message.addSenderToContacts"] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-inline-start: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 999px;
  background: transparent;
  color: var(--sk-text-muted);
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}

.reading-pane-meta [data-role="from"] button[data-action="message.addSenderToContacts"] svg {
  width: 0.95em;
  height: 0.95em;
  color: var(--sk-accent);
}

.reading-pane-meta [data-role="sender-contact-outcome"] {
  margin-inline-start: 0.4rem;
  color: var(--sk-text-muted);
}

/* Étiquettes (mots-clés IMAP, palette fermée — intégrées aux couleurs de Thunderbird adoucies) : la couleur double toujours un nom lisible. */
.message-tag-dot {
  display: inline-block;
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 999px;
  background: var(--sk-tag-color, var(--sk-text-muted));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-tag-color, currentColor) 35%, transparent);
}

[data-tag-color="red"] { --sk-tag-color: #d64541; }
[data-tag-color="orange"] { --sk-tag-color: #d98a1f; }
[data-tag-color="yellow"] { --sk-tag-color: #b8930f; }
[data-tag-color="green"] { --sk-tag-color: #3d9a57; }
[data-tag-color="teal"] { --sk-tag-color: #1f8f8f; }
[data-tag-color="blue"] { --sk-tag-color: #3b6fd6; }
[data-tag-color="purple"] { --sk-tag-color: #8b57c7; }
[data-tag-color="pink"] { --sk-tag-color: #c8508f; }
[data-tag-color="brown"] { --sk-tag-color: #9a6a3a; }
[data-tag-color="gray"] { --sk-tag-color: #7a8594; }

.message-tags {
  display: inline-flex;
  flex: none;
  gap: 0.2em;
}

div[data-component="reading-pane"] ul[data-role="message-tags"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0 0 0.4em;
  padding: 0;
  list-style: none;
}

div[data-component="reading-pane"] ul[data-role="message-tags"] li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.15em 0.6em;
  border: 1px solid color-mix(in srgb, var(--sk-tag-color) 40%, var(--sk-surface-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--sk-tag-color) 10%, var(--sk-surface));
  font-size: 0.8rem;
  font-weight: 600;
}

div[data-role="tag-toggles"] {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 2px 2px 0.45rem;
  border: 1px solid var(--sk-surface-border);
  border-radius: 10px;
  background: var(--sk-surface);
  backdrop-filter: blur(var(--sk-surface-blur, 20px));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur, 20px));
  color: var(--sk-text-muted);
}

div[data-role="tag-toggles"] > svg {
  width: 0.95rem;
  height: 0.95rem;
  margin-inline-end: 0.2rem;
}

div[data-role="tag-toggles"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  min-height: 1.7rem;
  padding: 0;
  border-color: transparent;
  border-radius: 8px;
  color: inherit;
}

div[data-role="tag-toggles"] button .message-tag-dot {
  width: 0.7rem;
  height: 0.7rem;
  background: transparent;
  box-shadow: inset 0 0 0 1.6px var(--sk-tag-color);
}

div[data-role="tag-toggles"] button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--sk-tag-color, var(--sk-accent)) 14%, transparent);
}

div[data-role="tag-toggles"] button[aria-pressed="true"] .message-tag-dot {
  background: var(--sk-tag-color);
}

div[data-role="tag-toggles"] button svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* Réglages › Tri automatique › Étiquettes : pastille, nom et palette fermée en pastilles cliquables (radios nommées). */
section[data-section="sorting"] ul[data-role="tag-list"] {
  list-style: none;
  margin: var(--sk-gap) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6px * var(--sk-space-unit, 1));
}

section[data-section="sorting"] form[data-form^="settings.tags."] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6em;
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-md);
  padding: calc(6px * var(--sk-space-unit, 1)) calc(10px * var(--sk-space-unit, 1));
}

section[data-section="sorting"] form[data-form^="settings.tags."] input[name="name"] {
  flex: 1 1 10rem;
  min-width: 0;
}

fieldset[data-role="tag-colors"] {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

fieldset[data-role="tag-colors"] label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  min-height: 1.7rem;
  border-radius: 8px;
  cursor: pointer;
}

fieldset[data-role="tag-colors"] input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

fieldset[data-role="tag-colors"] .message-tag-dot {
  width: 0.85rem;
  height: 0.85rem;
}

fieldset[data-role="tag-colors"] label:has(input:checked) {
  background: color-mix(in srgb, var(--sk-tag-color) 16%, transparent);
  box-shadow: inset 0 0 0 1.6px var(--sk-tag-color);
}

fieldset[data-role="tag-colors"] label:has(input:focus-visible) {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 1px;
}

[data-role="tag-rejection"] {
  margin: 0.3em 0 0;
  color: var(--sk-accent);
}

/* Menu contextuel des lignes (clic droit) : verre dépoli flottant, comme un menu natif macOS. */
[data-component="message-context-menu"] {
  position: fixed;
  z-index: 900;
  width: 15rem;
  box-sizing: border-box;
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--sk-bg-elevated) 78%, transparent);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--sk-surface-border);
  border-radius: 12px;
  box-shadow: var(--sk-shadow-glass), 0 14px 40px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 0.875rem;
  color: var(--sk-text);
}

@media (prefers-reduced-motion: no-preference) {
  [data-component="message-context-menu"] {
    animation: sk-context-menu-in 110ms ease-out;
  }
}

@keyframes sk-context-menu-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

[data-component="message-context-menu"] [role="menuitem"] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 1.9rem;
  padding: 0.2rem 0.6rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: default;
}

[data-component="message-context-menu"] [role="menuitem"] svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--sk-text-muted);
}

[data-component="message-context-menu"] [role="menuitem"]:is(:hover, :focus-visible):not([disabled]) {
  outline: none;
  background: color-mix(in srgb, var(--sk-accent) 16%, transparent);
}

[data-component="message-context-menu"] [role="menuitem"]:is(:hover, :focus-visible):not([disabled]) svg {
  color: var(--sk-accent);
}

[data-component="message-context-menu"] [role="menuitem"][disabled] {
  opacity: 0.45;
}

[data-component="message-context-menu"] [role="separator"] {
  height: 1px;
  margin: 0.3rem 0.5rem;
  background: var(--sk-surface-border);
}

/*
 * FERMETURE, en dernier et a dessein : un details FERME ne montre RIEN.
 *
 * Mesure du 2026-09-28 : apres avoir conditionne a [open] les cinq regles qui posaient
 * position:absolute, DEUX panneaux restaient affiches -- une AUTRE regle
 * (div[data-role="screener-choices"], div[data-role="sender-category-choices"])
 * leur posait inline-flex, hors de toute notion d'ouverture.
 * ⭐ Tant qu'on corrige panneau par panneau, il en reste toujours un : l'invariant n'est
 * pas << ce panneau-ci se cache >>, c'est << un details ferme ne montre rien >>. On l'ecrit
 * UNE fois, en fin de feuille pour que l'ordre de cascade le fasse gagner a specificite
 * egale, et les panneaux futurs sont couverts sans qu'on y pense.
 */
/* ===========================================================================
   ANIMATIONS — porteur, 2026-09-27 : << des animations a la Apple >>, et
   << il ne faut pas que ca soit arbre de Noel, on reste pros >>.

   🔴 MESURE DU 2026-09-28, et elle BORNE ce qu'on peut faire ici : cette coque
   REND TOUT A CHAQUE CHANGEMENT D'ETAT. Verifie en marquant un noeud puis en
   selectionnant un message : le marqueur a disparu, le noeud n'est plus le meme.
   ⭐ Consequence : une animation d'ENTREE posee sur les lignes de la liste se
   rejouerait a CHAQUE clic, sur TOUTES les lignes. C'est exactement l'arbre de
   Noel que le porteur refuse -- et cela n'aurait rien signale, puisque c'est
   joli une fois et insupportable la seconde.

   ➤ On anime donc ce qui correspond a UN geste de l'utilisateur :
     · les etats de survol et de selection (transition, jamais keyframes) ;
     · le volet de lecture quand on ouvre un autre message (un fondu, une fois).
   ⚠️ Ce qu'on NE fait PAS : la ligne qui glisse a la suppression et le message
   qui part a l'envoi. Ils exigent un rendu CIBLE (noeuds conserves entre deux
   etats), qui n'existe pas encore. Les ecrire aujourd'hui produirait l'inverse
   de l'effet demande. Carte ouverte.
   =========================================================================== */

/* Survol et selection : 110 ms, et UNIQUEMENT la couleur. Animer autre chose
   ferait bouger une liste qu'on parcourt a la molette. */
li[data-component="message-row"],
li:is([data-component="folder-row"], [data-component="search-folder-row"]) > button {
  transition: background-color 110ms ease, color 110ms ease;
}

/* ⛔ Jamais d'animation sur le clic lui-meme : la selection est instantanee.
   On n'ajoute pas de retard a un geste. */
li[data-component="message-row"][aria-selected="true"] {
  transition: none;
}

/* Ouvrir un message : un fondu court, une fois par geste. Le volet est recree a
   chaque rendu, donc l'animation se declenche quand -- et seulement quand -- son
   contenu change. C'est le << changement de vue >> du standard (~120 ms). */
[data-component="reading-pane"] {
  animation: sk-volet-entre 130ms ease-out;
}

@keyframes sk-volet-entre {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Rendu CIBLE (`renderKeepingRows`, dom-adapters.ts) : les lignes survivent d'un rendu a
   l'autre, donc `data-motion` n'est pose QUE sur ce qui bouge vraiment. */
li[data-component="message-row"][data-motion="leave"] {
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  animation: sk-ligne-part 220ms ease-in forwards;
}

@keyframes sk-ligne-part {
  0%   { height: var(--sk-row-h); opacity: 1; transform: none; }
  50%  { height: var(--sk-row-h); opacity: 0; transform: translateX(-2rem); }
  100% { height: 0; opacity: 0; transform: translateX(-2rem); padding-block: 0; margin-block: 0; border-width: 0; }
}

li[data-component="message-row"][data-motion="enter"] {
  animation: sk-ligne-arrive 200ms ease-out;
}

@keyframes sk-ligne-arrive {
  from { opacity: 0; transform: translateY(-0.25rem); }
  to   { opacity: 1; transform: none; }
}

form[data-form="compose"][data-motion="send"] {
  z-index: 50;
  margin: 0;
  pointer-events: none;
  animation: sk-envoi-part 250ms ease-in forwards;
}

@keyframes sk-envoi-part {
  to { opacity: 0; transform: translateY(-3rem) scale(0.96); }
}

/* 🔴 Reglage SYSTEME, sans exception : qui a desactive les animations n'en voit
   aucune. C'est de l'accessibilite, pas une preference. */
@media (prefers-reduced-motion: reduce) {
  li[data-component="message-row"],
  li:is([data-component="folder-row"], [data-component="search-folder-row"]) > button {
    transition: none;
  }
  [data-component="reading-pane"],
  [data-motion] {
    animation: none;
  }
}

/* Le deplacement vers un dossier : un resume discret, pas un formulaire permanent.
   Meme facture que les autres menus repliables du volet. */
details[data-role="move-to-menu"] {
  margin: calc(0.2rem * var(--sk-space-unit, 1)) 0 calc(0.5rem * var(--sk-space-unit, 1));
}

details[data-role="move-to-menu"] > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--sk-radius-sm);
  color: var(--sk-text-muted);
  font-size: 0.8rem;
}

details[data-role="move-to-menu"] > summary::-webkit-details-marker {
  display: none;
}

details[data-role="move-to-menu"] > summary:hover,
details[data-role="move-to-menu"][open] > summary {
  background: var(--sk-surface);
  color: var(--sk-text);
}

details:not([open]) > form[data-role],
details:not([open]) > div[data-role],
details:not([open]) > ul[data-role],
details:not([open]) > div[class] {
  display: none;
}


/*
 * ⚠️ PAS DE HAUTEUR DE FENETRE ICI. L'ecran vivait en `min-height: 100dvh` alors que
 * son parent `#app` fait `calc(100vh - 2.5rem)` : l'enfant reclamait 40px de plus que
 * la boite qui le contient, et ces 40px sortaient du document -- un ascenseur pour rien
 * sur l'ecran de connexion. ⭐ Deux elements ne peuvent pas revendiquer la fenetre
 * chacun de leur cote : celui du dessus la possede, celui du dessous la REMPLIT.
 */
#app > *:has(> [data-component='auth-screen']) {
  /* Le div de montage (`mountAuthScreen`) n'a aucun style propre ; il ne doit pas
     s'interposer entre #app, qui porte la hauteur, et l'ecran, qui la consomme. */
  display: contents;
}

#app [data-component='auth-screen'] {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(32px * var(--sk-space-unit, 1)) calc(24px * var(--sk-space-unit, 1));
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  box-sizing: border-box;
}

/* LA CARTE DE VERRE — c'est elle qui rattache l'ecran au reste de l'application. */
#app [data-component='auth-screen'] [data-role='auth-card'] {
  width: min(26rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: calc(40px * var(--sk-space-unit, 1)) calc(32px * var(--sk-space-unit, 1));
  background: var(--sk-surface);
  border: 1px solid var(--sk-surface-border);
  border-radius: var(--sk-radius-lg);
  backdrop-filter: blur(var(--sk-surface-blur));
  -webkit-backdrop-filter: blur(var(--sk-surface-blur));
  box-shadow: var(--sk-shadow-glass);
  box-sizing: border-box;
}

#app [data-component='auth-screen'] svg {
  width: 36px;
  height: 36px;
  color: var(--sk-accent);
  margin-bottom: calc(16px * var(--sk-space-unit, 1));
}

/*
 * ⚠️ LA MARQUE N'EST PAS CARREE (30/34). La regle ci-dessus la forcerait dans un
 * carre de 36px et l'ECRASERAIT -- un bouclier aplati, ce qui est precisement
 * ce qu'on remarque sans savoir le nommer. On lui rend son rapport.
 * ⚠️ Et aucune declaration de couleur ici : ses trois ors sont fixes, une marque ne prend pas
 * la teinte du texte qui l'entoure.
 */
#app [data-component='auth-screen'] svg[data-role='sekervia-mark'] {
  width: 38px;
  height: 43px;
}

#app [data-component='auth-screen'] h1 {
  margin: 0 0 calc(8px * var(--sk-space-unit, 1));
  font-size: 1.45rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* ⚠️ La coque pose une regle sur #app p qui fait de CHAQUE paragraphe une carte :
   ici c'est du texte, pas une carte — on la neutralise explicitement. */
#app [data-component='auth-screen'] p {
  margin: 0;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  max-width: 22rem;
  color: var(--sk-text-muted);
  font-size: 0.925rem;
  line-height: 1.45;
}

#app [data-component='auth-screen'] [data-role='auth-session'] {
  color: var(--sk-text);
  font-weight: 500;
}

/* ATTENTE : libelle + anneau qui tourne. L'anneau est decoratif (aria-hidden) ; le libelle est
   annonce par role="status". Sans mouvement, l'anneau reste visible, simplement immobile. */
#app [data-component='auth-screen'] [data-role='auth-status'] {
  display: inline-flex;
  align-items: center;
  gap: calc(8px * var(--sk-space-unit, 1));
  margin-top: calc(16px * var(--sk-space-unit, 1));
  color: var(--sk-text);
  font-weight: 500;
}

#app [data-component='auth-screen'] [data-role='auth-spinner'] {
  flex: none;
  width: 0.95em;
  height: 0.95em;
  border: 2px solid var(--sk-surface-border);
  border-top-color: var(--sk-accent);
  border-radius: 50%;
  box-sizing: border-box;
}

/* ERREUR : un encart, pas une ligne de texte perdue entre le titre et le bouton. */
#app [data-component='auth-screen'] [data-role='auth-error'] {
  width: 100%;
  max-width: none;
  margin-top: calc(16px * var(--sk-space-unit, 1));
  padding: calc(10px * var(--sk-space-unit, 1)) calc(12px * var(--sk-space-unit, 1));
  border: 1px solid var(--sk-accent);
  border-left-width: 3px;
  border-radius: var(--sk-radius-md);
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  font-weight: 500;
  text-align: left;
  box-sizing: border-box;
}

/* Separateur fin entre l'action principale et la creation de compte : deux chemins, pas un bloc. */
#app [data-component='auth-screen'] [data-role='auth-register-hint'] {
  width: 100%;
  max-width: none;
  margin-top: calc(24px * var(--sk-space-unit, 1));
  padding-top: calc(20px * var(--sk-space-unit, 1));
  border-top: 1px solid var(--sk-surface-border);
  font-size: 0.85rem;
}

#app [data-component='auth-screen'] button {
  width: 100%;
  margin-top: calc(20px * var(--sk-space-unit, 1));
  padding: calc(11px * var(--sk-space-unit, 1)) calc(18px * var(--sk-space-unit, 1));
  border: 1px solid transparent;
  border-radius: var(--sk-radius-md);
  background: var(--sk-accent);
  color: var(--sk-accent-contrast);
  font: inherit;
  font-size: 0.925rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

/* Action secondaire : meme largeur, poids visuel moindre. */
#app [data-component='auth-screen'] button[data-action='auth.register'] {
  margin-top: calc(10px * var(--sk-space-unit, 1));
  background: var(--sk-bg-elevated);
  color: var(--sk-text);
  border-color: var(--sk-surface-border);
  font-weight: 500;
}

#app [data-component='auth-screen'] button:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
#app [data-component='auth-screen'] button:active:not(:disabled) { transform: translateY(1px); }

/* ⚠️ Un bouton desactive doit SE VOIR desactive : pendant 'checking' et 'redirecting',
   l'utilisateur doit comprendre que le systeme travaille, pas que l'application est figee. */
#app [data-component='auth-screen'] button:disabled {
  opacity: 0.38;
  cursor: progress;
}

#app [data-component='auth-screen'] button:focus-visible {
  outline: 2px solid var(--sk-focus-ring);
  outline-offset: 2px;
}

/* MOUVEMENT — uniquement si l'utilisateur ne l'a pas refuse (prefers-reduced-motion). */
@media (prefers-reduced-motion: no-preference) {
  #app [data-component='auth-screen'] [data-role='auth-card'] {
    animation: sk-auth-card-in 320ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  #app [data-component='auth-screen'] [data-role='auth-spinner'] {
    animation: sk-auth-spin 800ms linear infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app [data-component='auth-screen'] button {
    transition: none;
  }
}

@keyframes sk-auth-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes sk-auth-spin {
  to { transform: rotate(360deg); }
}