/* Sirius V2 — apparence Foncé / Clair.
   Chargé EN DERNIER. Foncé = l'apparence d'origine : aucune règle de ce fichier ne s'applique sans
   <html data-theme="clair"> (sauf la ligne « Apparence » du menu du compte, nouvelle).
   Clair : mêmes variables que sirius-design-tokens.css, valeurs claires (maquette ApparenceTheme),
   plus quelques règles pour les couleurs écrites en dur dans les autres feuilles de style.
   Boutons dorés, panier ★ Sirius membres, bandeau photo : identiques dans les deux thèmes. */

/* ---- Ligne « Apparence » du menu du compte (les deux thèmes) ---- */
.user-theme { display: grid; gap: 6px; padding: 4px 0; }
.user-theme > span { font-size: 12px; font-weight: 700; color: var(--sirius-text-muted); }
.user-theme .theme-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-sm); overflow: hidden; }
.user-theme .theme-switch button { min-height: var(--sirius-control-touch, 44px); padding: 0 10px; border: 0; border-radius: 0; box-shadow: none; background: var(--sirius-field); color: var(--sirius-text); font-size: 13px; font-weight: 800; background-image: none; }
.user-theme .theme-switch button[aria-pressed="true"] { background: #302a22; color: #f2c27a; }
.user-theme small { font-size: 11px; color: var(--sirius-text-muted); }

/* ---- Agenda : couleurs par type (lisibles en Foncé et en Clair), vues Mois / Semaine / Liste, fiche à droite ---- */
:root { --ag-event: #c9934f; --ag-event-bg: #3a2c1a; --ag-party: #b04a5e; --ag-party-bg: #3a1820; --ag-brew: #3e8e86; --ag-brew-bg: #16302d; --ag-other: #8c7e68; --ag-other-bg: #26231e; --ag-text: #f4ecdf; --ag-option-bg: #12110f; }
:root[data-theme="clair"] { --ag-event: #8a5a1f; --ag-event-bg: #f6e7cc; --ag-party: #9a3a4e; --ag-party-bg: #f7dfe4; --ag-brew: #2d6f69; --ag-brew-bg: #d8efec; --ag-other: #6b5e4b; --ag-other-bg: #ebe6dc; --ag-text: #211d17; --ag-option-bg: #ffffff; }
[data-kind="event"] { --ag-c: var(--ag-event); --ag-bg: var(--ag-event-bg); }
[data-kind="private_party"] { --ag-c: var(--ag-party); --ag-bg: var(--ag-party-bg); }
[data-kind="brew"] { --ag-c: var(--ag-brew); --ag-bg: var(--ag-brew-bg); }
[data-kind="other"] { --ag-c: var(--ag-other); --ag-bg: var(--ag-other-bg); }
.agenda { display: grid; gap: 14px; }
.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.agenda-views { display: flex; border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-sm); overflow: hidden; }
.agenda-views button { min-height: var(--sirius-control-touch, 44px); padding: 0 16px; border: 0; border-radius: 0; box-shadow: none; background: var(--sirius-field); background-image: none; color: var(--sirius-text); font-weight: 800; }
.agenda-views button[aria-pressed="true"] { background: #302a22; color: #f2c27a; }
:root[data-theme="clair"] .agenda-views button[aria-pressed="true"] { background: #eadbc2; color: #6e4614; }
.agenda-nav { display: flex; align-items: center; gap: 6px; }
.agenda-nav button { min-height: var(--sirius-control-touch, 44px); min-width: 44px; }
.agenda-label { min-width: 150px; text-align: center; font-size: 16px; }
.agenda-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; font-size: 12px; color: var(--sirius-text-muted); }
.agenda-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.agenda-legend button[data-new] { min-height: var(--sirius-control-touch, 44px); padding: 0 18px; }
.agenda-cancelled { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; width: auto; white-space: nowrap; }
/* Petites cases à cocher (le style général des champs les étirait sur toute la largeur). */
.agenda-cancelled input, .ag-check input { width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 0; flex: 0 0 20px; }
.ag-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 2px solid var(--ag-c, var(--sirius-text-muted)); background: var(--ag-bg, transparent); }
.ag-dot.is-option { border-style: dashed; border-color: var(--sirius-text-muted); background: var(--ag-option-bg); }
.agenda-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.agenda-layout.has-sheet { grid-template-columns: minmax(0, 1fr) 440px; }
.agenda-sheet { border: 1px solid var(--sirius-border-bronze); border-radius: var(--sirius-radius-lg); background: var(--sirius-surface); }
.agenda-sheet[hidden] { display: none; }
.agenda-foot { margin: 0; font-size: 12px; }
.ag-chip, .ag-block, .ag-card { display: block; width: 100%; box-sizing: border-box; text-align: left; border: 2px solid var(--ag-c); border-radius: 6px; background: var(--ag-bg); color: var(--ag-text); box-shadow: none; background-image: none; font-weight: 700; }
.ag-chip[data-status="option"], .ag-block[data-status="option"], .ag-card[data-status="option"] { border-style: dashed; background: var(--ag-option-bg); }
.ag-chip[data-status="cancelled"], .ag-block[data-status="cancelled"], .ag-card[data-status="cancelled"] { opacity: .55; text-decoration: line-through; }
.ag-chip { padding: 3px 6px; min-height: 24px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chip-meta { font-weight: 600; }
.ag-chip[aria-current="true"], .ag-card[aria-current="true"] { outline: 3px solid var(--sirius-focus); outline-offset: 1px; }
.ag-month { border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-md); overflow: hidden; background: var(--sirius-surface); }
.ag-dows { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--sirius-surface-soft); }
.ag-dows span { padding: 9px 10px; font-size: 11px; font-weight: 800; color: var(--sirius-text-muted); }
.ag-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); }
.ag-day { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-top: 1px solid var(--sirius-border); border-left: 1px solid var(--sirius-border); min-width: 0; }
.ag-day.is-out { background: var(--sirius-surface-soft); }
.ag-day.is-out .ag-num { color: var(--sirius-text-muted); }
.ag-day.is-today .ag-num { color: var(--sirius-bronze-light); }
.ag-num { font-size: 12px; font-weight: 800; }
.ag-more { min-height: 24px; padding: 0 4px; border: 0; background: none; box-shadow: none; background-image: none; color: var(--sirius-text-muted); font-size: 11px; font-weight: 700; text-align: left; text-decoration: underline; }
.ag-week { border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-md); overflow: hidden; background: var(--sirius-surface); }
.ag-week-head, .ag-week-allday, .ag-week-grid { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.ag-week-head span { padding: 9px 8px; font-size: 12px; font-weight: 800; color: var(--sirius-text-muted); border-left: 1px solid var(--sirius-border); background: var(--sirius-surface-soft); }
.ag-week-head span.is-today { color: var(--sirius-bronze-light); }
.ag-week-allday { border-top: 1px solid var(--sirius-border); min-height: 40px; }
.ag-week-allday > span { padding: 8px 6px; font-size: 10px; color: var(--sirius-text-muted); }
.ag-week-allday > div { padding: 4px; border-left: 1px solid var(--sirius-border); display: grid; gap: 4px; align-content: start; }
.ag-hours { display: flex; flex-direction: column; }
.ag-hours span { height: 44px; padding: 2px 6px; font-size: 10px; color: var(--sirius-text-muted); border-top: 1px solid var(--sirius-border); }
.ag-col { position: relative; border-left: 1px solid var(--sirius-border); }
.ag-col.is-today { background: var(--sirius-selected, rgba(201,147,79,.1)); }
.ag-slot { display: block; height: 44px; border-top: 1px solid var(--sirius-border); cursor: pointer; }
.ag-block { position: absolute; padding: 5px 7px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-height: 28px; }
.ag-block small { font-weight: 600; font-size: 11px; }
.ag-list { display: grid; gap: 14px; }
.ag-list h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: .04em; color: var(--sirius-text-muted); }
.ag-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; margin-bottom: 6px; min-height: 44px; font-size: 14px; }
.ag-card small { font-weight: 600; font-size: 12px; }
.ag-empty { padding: 24px; text-align: center; color: var(--sirius-text-muted); }
.ag-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--sirius-border); }
.ag-sheet-head h3 { margin: 0; font: 700 22px/1.2 var(--sirius-font-display); }
.ag-sheet-head p { margin: 4px 0 0; font-size: 12px; }
.ag-sheet-actions { display: flex; gap: 6px; }
.ag-sheet-actions button { min-height: 44px; }
.ag-state[data-status="option"] { color: var(--ag-brew); font-weight: 800; }
.ag-state[data-status="confirmed"] { color: var(--sirius-success-text); font-weight: 800; }
.ag-state[data-status="cancelled"] { color: var(--sirius-danger-text); font-weight: 800; }
.ag-tabs { display: flex; padding: 0 16px; border-bottom: 1px solid var(--sirius-border); }
.ag-tabs button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; background-image: none; box-shadow: none; color: var(--sirius-text-muted); font-weight: 800; }
.ag-tabs button[aria-selected="true"] { color: var(--sirius-bronze-light); border-bottom-color: var(--sirius-border-bronze); }
.ag-sheet-body { padding: 16px; display: grid; gap: 14px; }
.ag-def { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; margin: 0; font-size: 13px; }
.ag-def dt { color: var(--sirius-text-muted); } .ag-def dd { margin: 0; font-weight: 700; }
.ag-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ag-history li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--sirius-border); border-radius: 10px; }
.ag-history span, .ag-history small { font-size: 12px; color: var(--sirius-text-muted); }
.agenda-form { display: grid; gap: 12px; min-width: 0; }
.agenda-form label { min-width: 0; }
.agenda-form input[type="date"], .agenda-form input[type="time"] { min-width: 0; max-width: 100%; }
/* Fenêtre « Réserver une date » : Fermer et Enregistrer ensemble, en haut à droite. */
.dialog-heading:has([data-save-head]) { gap: 10px; }
.dialog-heading:has([data-save-head]) > [data-dialog-close] { margin-left: auto; }
.agenda-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.agenda-form legend { padding: 0; margin-bottom: 4px; font-size: 12px; color: var(--sirius-text-muted); }
.ag-kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ag-kinds legend { grid-column: 1 / -1; }
.ag-kinds label, .ag-states label { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px; border: 2px solid var(--sirius-border); border-radius: 10px; font-size: 13px; font-weight: 800; cursor: pointer; position: relative; }
.ag-kinds label input, .ag-states label input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ag-kinds label:has(input:checked) { border-color: var(--ag-c); background: var(--ag-bg); color: var(--ag-text); }
.ag-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-states legend { grid-column: 1 / -1; }
.ag-states label[data-state="option"]:has(input:checked) { border: 2px dashed var(--sirius-border-bronze); background: var(--sirius-selected, rgba(201,147,79,.16)); }
.ag-states label[data-state="confirmed"]:has(input:checked) { border-color: var(--sirius-border-bronze); background: var(--sirius-selected, rgba(201,147,79,.16)); }
.ag-kinds label:has(input:focus-visible), .ag-states label:has(input:focus-visible) { outline: 3px solid var(--sirius-focus); outline-offset: 2px; }
.ag-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.ag-dates label[hidden] { display: none; }
.ag-two { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; }
.ag-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; width: auto; justify-self: start; white-space: nowrap; font-weight: 700; }
.ag-results { display: grid; gap: 4px; }
.ag-results button { text-align: left; min-height: 44px; }
.ag-warning { border: 1px solid var(--sirius-warning); background: var(--sirius-warning-surface); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; color: var(--sirius-warning-text); }
.ag-warning[hidden] { display: none; }
.ag-warning p { margin: 0; color: var(--sirius-text); font-size: 13px; }
.ag-warning-actions, .ag-link-actions, .agenda-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ag-warning-actions button, .ag-link-actions button, .agenda-form-actions button { min-height: 44px; }
.ag-link { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--sirius-border); }
.ag-link h4 { margin: 0; font-size: 14px; }
.ag-link p { margin: 0; }
.ag-cancel { justify-self: start; min-height: 44px; color: var(--sirius-text-muted); text-decoration: underline; background: none; background-image: none; box-shadow: none; border: 0; }
@media (max-width: 1099px) { .agenda-layout.has-sheet { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  /* iPhone : rien ne dépasse à droite ; mois et semaine tiennent en 7 colonnes lisibles (titre sur 2 lignes, sans l'heure). */
  .agenda, .agenda-layout, .agenda-main, .agenda-toolbar, .agenda-sheet, .ag-sheet-body { min-width: 0; max-width: 100%; }
  .agenda-toolbar { gap: 8px; }
  .agenda-views, .agenda-nav, .agenda-legend { width: 100%; }
  .agenda-views button { flex: 1 1 0; padding: 0 8px; }
  .agenda-label { flex: 1 1 0; min-width: 0; }
  .agenda-nav .button-secondary:last-child { padding-inline: 12px; }
  .agenda-legend { margin-left: 0; gap: 6px 12px; }
  .agenda-legend button[data-new] { width: 100%; }
  .ag-dows span { padding: 8px 0; text-align: center; font-size: 10px; }
  .ag-day { padding: 3px; gap: 2px; }
  .ag-num { font-size: 11px; }
  .ag-today-note { display: none; }
  .ag-chip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; overflow: hidden; overflow-wrap: anywhere; padding: 2px 3px; min-height: 22px; font-size: 10px; line-height: 1.2; border-width: 1px; }
  .ag-chip-meta { display: none; }
  .ag-week-head, .ag-week-allday, .ag-week-grid { grid-template-columns: 34px repeat(7, minmax(0, 1fr)); }
  .ag-week-head span { padding: 6px 0; font-size: 10px; text-align: center; }
  .ag-week-head span b { display: block; font-size: 13px; }
  .ag-week-allday > span, .ag-hours span { padding: 2px; font-size: 9px; }
  .ag-week-allday > div { padding: 2px; }
  .ag-block { padding: 2px 3px; font-size: 10px; line-height: 1.15; overflow-wrap: anywhere; border-width: 1px; }
  .ag-block small { display: none; }
  .ag-sheet-head { grid-template-columns: minmax(0, 1fr); }
  .ag-sheet-actions { width: 100%; }
  .ag-sheet-actions button { flex: 1 1 0; }
  .ag-sheet-body { padding: 12px; }
  .ag-cells { grid-auto-rows: minmax(70px, auto); }
  .ag-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-dates, .ag-two { grid-template-columns: minmax(0, 1fr); }
  .ag-def { grid-template-columns: 100px minmax(0, 1fr); }
}

/* ---- Messagerie de l'équipe (bulle, panneau, notifications) ---- */
.user-notify { display: grid; gap: 6px; padding: 4px 0; }
.user-notify > span { font-size: 12px; font-weight: 700; color: var(--sirius-text-muted); }
.user-notify .theme-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-sm); overflow: hidden; }
.user-notify .theme-switch button { min-height: var(--sirius-control-touch, 44px); padding: 0 10px; border: 0; border-radius: 0; box-shadow: none; background: var(--sirius-field); background-image: none; color: var(--sirius-text); font-size: 13px; font-weight: 800; }
.user-notify .theme-switch button[aria-pressed="true"] { background: #302a22; color: #f2c27a; }
.user-notify > button.button-secondary { min-height: var(--sirius-control-touch, 44px); }
.user-notify small { font-size: 11px; color: var(--sirius-text-muted); min-height: 0; }
.user-notify small:empty { display: none; }

.team-chat-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; border: 2px solid #c9934f; background: #262019; background-image: none; color: #f2c27a; box-shadow: none; }
.team-chat-toggle[aria-expanded="true"] { background: #302a22; }
.team-chat-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
.team-chat-badge[hidden] { display: none; }

/* Sous les menus déroulants de la barre du haut (z-index 20 à 40) qui s'ouvrent par-dessus la fenêtre, au-dessus de la page. */
.team-chat { position: fixed; z-index: 15; top: var(--team-chat-top, 84px); right: 16px; bottom: 16px; width: min(420px, calc(100vw - 32px)); display: flex; flex-direction: column; overflow: hidden; background: var(--sirius-surface); color: var(--sirius-text); border: 1px solid var(--sirius-border-bronze); border-radius: var(--sirius-radius-lg); box-shadow: var(--sirius-shadow-modal); }
.team-chat[hidden] { display: none; }
.team-chat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--sirius-border); }
.team-chat-head h2 { margin: 0; font: 700 20px/1.2 var(--sirius-font-display); }
.team-chat-sub { margin: 2px 0 0; font-size: 12px; color: var(--sirius-text-muted); }
.team-chat-list { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; }
.team-day { align-self: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sirius-text-muted); }
.team-empty { margin: auto; text-align: center; color: var(--sirius-text-muted); }
.team-msg { align-self: flex-start; min-width: 0; max-width: min(82%, calc(100% - 8px)); display: flex; flex-direction: column; gap: 3px; }
.team-msg.is-mine { align-self: flex-end; align-items: flex-end; }
.team-msg-meta { max-width: 100%; overflow-wrap: anywhere; font-size: 11px; font-weight: 800; color: var(--sirius-text-muted); }
.team-msg.is-mine .team-msg-meta { color: var(--sirius-bronze-light); }
.team-msg-bubble { display: flex; flex-direction: column; gap: 6px; padding: 8px 11px; border: 1px solid var(--sirius-border); border-radius: 12px; background: var(--sirius-surface-soft); font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.team-msg.is-mine .team-msg-bubble { background: #302a22; border-color: #6e5a3e; color: #f4ecdf; }
.team-msg-text { white-space: pre-wrap; }
.team-msg-photo { display: block; padding: 0; border: 0; border-radius: 8px; background: none; box-shadow: none; overflow: hidden; line-height: 0; cursor: zoom-in; }
.team-msg-photo img { display: block; max-width: 100%; max-height: 220px; border-radius: 8px; }
.team-msg-actions, .team-confirm, .team-edit-actions { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 4px 10px; align-items: center; font-size: 12px; color: var(--sirius-text-muted); }
.team-msg-actions[hidden] { display: none; }
.team-link { min-height: 32px; padding: 0 2px; border: 0; background: none; box-shadow: none; background-image: none; color: var(--sirius-text-muted); font-size: 12px; font-weight: 700; text-decoration: underline; }
.team-link.is-danger { color: var(--sirius-danger-text); }
.team-edit { width: 100%; min-height: 56px; border-radius: 8px; font: inherit; }
.team-chat-error { margin: 0; padding: 0 14px; min-height: 0; font-size: 12px; color: var(--sirius-danger-text); }
.team-chat-error:empty { display: none; }
.team-chat-chip { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 12px 6px; padding: 6px 10px; border: 1px solid var(--sirius-border); border-radius: 10px; font-size: 12px; background: var(--sirius-surface-soft); }
.team-chat-chip[hidden] { display: none; }
.team-chat-chip button { min-height: 32px; padding: 0 8px; background: none; background-image: none; box-shadow: none; border: 0; color: var(--sirius-text); }
.team-chat-compose { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sirius-border); }
.team-chat-compose textarea { min-height: 44px; max-height: 140px; resize: none; border-radius: 10px; font: inherit; padding: 10px 12px; }
.team-chat-compose button { min-height: 44px; white-space: nowrap; }
.team-chat-compose > * { min-width: 0; }
.team-chat-head > * { min-width: 0; }
.team-chat-photo { width: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.team-lightbox { max-width: 96vw; max-height: 96vh; padding: 12px; border: 1px solid var(--sirius-border-bronze); border-radius: var(--sirius-radius-md); background: var(--sirius-surface); display: grid; gap: 10px; }
.team-lightbox::backdrop { background: var(--sirius-backdrop); }
.team-lightbox img { max-width: 90vw; max-height: 78vh; object-fit: contain; justify-self: center; }
/* PC : la page se range à gauche du panneau, tout reste utilisable (panier, formulaires). En dessous de 1100 px, le panneau recouvre. */
/* Conversation ouverte sur PC : la barre du haut reste telle quelle ; la fenêtre se place sous elle et la page en dessous se range à gauche. */
@media (min-width: 1100px) { body.team-chat-open #app > :not(.topbar) { margin-right: 452px; } }
@media (max-width: 700px) {
  /* Plein écran, calé sur la zone réellement visible (clavier ouvert compris : --team-vv-top / --team-vv-bottom viennent de messaging.js). */
  .team-chat { top: var(--team-vv-top, 0px); right: 0; left: 0; bottom: var(--team-vv-bottom, 0px); width: auto; max-width: 100%; border: 0; border-radius: 0; box-shadow: none; z-index: 70; padding-top: env(safe-area-inset-top); }
  body.team-chat-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  .team-chat-compose { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .team-chat.is-keyboard .team-chat-compose { padding-bottom: 10px; }
  /* 16 px au moins : en dessous, iPhone zoome la page à la saisie et tout se décale sur le côté. */
  .team-chat-compose textarea, .team-edit { font-size: 16px; }
}

/* ---- Menus déroulants de la barre du haut : ils défilent quand l'écran est trop bas (la dernière entrée reste atteignable). ---- */
.nav-group > div { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }

/* ---- Champs remplis automatiquement par le navigateur : ils gardent les couleurs des champs Sirius, en Foncé comme en Clair. ---- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus,
select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sirius-text);
  caret-color: var(--sirius-text);
  -webkit-box-shadow: 0 0 0 1000px var(--sirius-field) inset;
  box-shadow: 0 0 0 1000px var(--sirius-field) inset;
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:autofill, textarea:autofill, select:autofill {
  -webkit-text-fill-color: var(--sirius-text);
  box-shadow: 0 0 0 1000px var(--sirius-field) inset;
  background-color: var(--sirius-field);
  color: var(--sirius-text);
}

/* ---- Bandeau du haut (Gestion › Paramètres › Apparence) ---- */
/* Photo d'origine : règle de sirius-design-system.css, inchangée. Photo chargée : même cadrage. Sans image : fond uni selon le thème. */
.hero[data-hero="custom"] { background: #000 var(--hero-image) center 42%/cover no-repeat; }
.hero[data-hero="plain"] { background: #1b1712; }
.hero[data-hero="plain"] h2 { filter: none; }
.hero[data-hero="plain"] .section-description { text-shadow: none; }
@media (max-width: 560px) { .hero[data-hero="custom"] { background-position: center; } }

/* ---- Écran Gestion › Paramètres › Apparence ---- */
.appearance-settings form { display: grid; gap: 16px; }
.appearance-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.appearance-head h3, .appearance-head p { margin: 0; }
.appearance-block { display: grid; gap: 12px; margin: 0; padding: 16px; border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-md); }
.appearance-block > legend { padding: 0 6px; font-weight: 800; font-size: 16px; }
.appearance-hero-preview { display: grid; align-content: center; gap: 4px; min-height: 130px; padding: 0 22px; border: 1px solid var(--sirius-border-bronze); border-radius: var(--sirius-radius-md); background: #000 center 42%/cover no-repeat; color: #f4ecdf; }
.appearance-hero-preview strong { font: 700 28px/1.1 var(--sirius-font-display); text-shadow: 0 1px 3px #000; }
.appearance-hero-preview small { color: #c9b89c; text-shadow: 0 1px 3px #000; }
.appearance-hero-preview[data-hero="plain"] { background: #1b1712; }
.appearance-hero-preview[data-hero="plain"] strong, .appearance-hero-preview[data-hero="plain"] small { text-shadow: none; }
.appearance-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.appearance-mode { display: grid; grid-template-columns: 22px minmax(0, 1fr); justify-content: start; gap: 10px; align-items: start; min-height: 44px; padding: 10px 12px; border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-sm); cursor: pointer; }
.appearance-mode:has(input:checked) { border-color: var(--sirius-border-bronze); background: var(--sirius-selected, rgba(201,147,79,.16)); }
.appearance-mode input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; padding: 0; }
.appearance-mode span { display: grid; gap: 2px; justify-items: start; text-align: left; }
.appearance-mode small, .appearance-actions small { color: var(--sirius-text-muted); }
.appearance-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.appearance-actions .appearance-file, .appearance-actions .link-button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; }
.appearance-actions .link-button { padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--sirius-text-muted); text-decoration: underline; font-weight: 700; }
.appearance-icon { grid-template-columns: 220px minmax(0, 1fr); align-items: start; }
.appearance-icon > legend { grid-column: 1 / -1; }
.appearance-icon-preview { display: grid; justify-items: center; gap: 8px; padding: 16px; border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-md); background: var(--sirius-surface-soft); }
.appearance-icon-preview img { border-radius: 18px; border: 1px solid var(--sirius-border); background: #0f0e0c; object-fit: cover; }
.appearance-icon-preview small { color: var(--sirius-text-muted); text-align: center; }
/* Logo : aperçus sur fond foncé / clair, quel que soit le thème de la personne qui règle l'écran. */
.appearance-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.appearance-logo-col { display: grid; gap: 10px; align-content: start; }
.appearance-logo-col h4 { margin: 0; font-size: 15px; }
.appearance-logo-preview { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 16px; border: 1px solid var(--sirius-border); border-radius: var(--sirius-radius-md); }
.appearance-logo-preview[data-logo-preview="dark"] { background: #0f0e0c; }
.appearance-logo-preview[data-logo-preview="light"] { background: #f5f1ea; }
.appearance-logo-preview .appearance-logo-img { max-width: 100%; max-height: 64px; object-fit: contain; }
.appearance-logo-preview .sirius-brand__constellation { width: 30px; height: 42px; object-fit: contain; }
.appearance-logo-preview .sirius-brand__wordmark { width: 122px; height: auto; object-fit: contain; }
.appearance-logo-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--sirius-radius-md); background: #0f0e0c; }

.appearance-icon-body { display: grid; gap: 10px; }
.appearance-icon-body p { margin: 0; }
.appearance-iphone { color: var(--sirius-warning-text); font-size: 13px; }
.appearance-settings .error:empty { display: none; }
@media (max-width: 700px) { .appearance-modes, .appearance-icon { grid-template-columns: 1fr; } .appearance-head { grid-template-columns: 1fr; } }

/* ---- Document (facture, avoir) ouvert en plein écran sur l'écran d'accueil du téléphone ---- */
dialog.document-viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--sirius-surface); color: var(--sirius-text); }
dialog.document-viewer::backdrop { background: var(--sirius-backdrop); }
dialog.document-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
dialog.document-viewer header { display: flex; padding: max(8px, env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid var(--sirius-border); }
dialog.document-viewer iframe { width: 100%; height: 100%; border: 0; background: #fff; }

/* ================= CLAIR ================= */
:root[data-theme="clair"] {
  color-scheme: light;
  --sirius-bg: #f5f1ea;
  --sirius-bg-deep: #ede6da;
  --sirius-surface: #ffffff;
  --sirius-surface-raised: #faf6ef;
  --sirius-surface-soft: #f8f4ec;
  --sirius-border: #ddd3c3;
  --sirius-border-bronze: #c9934f;

  /* Or : texte et filets plus sombres pour rester lisibles sur fond clair. Les fonds pleins dorés
     (boutons, onglets actifs) gardent la valeur d'origine : voir « Fonds dorés » plus bas. */
  --sirius-bronze-dark: #6e4614;
  --sirius-bronze: #7a4e16;
  --sirius-bronze-light: #7a4e16;
  --sirius-bronze-highlight: #6e4614;

  --sirius-text: #211d17;
  --sirius-text-muted: #6b5e4b;
  --sirius-success: #1e7a3b;
  --sirius-warning: #9a5b00;
  --sirius-danger: #a83a2c;
  --sirius-info: #1d5fb8;

  --sirius-shadow-soft: 0 10px 28px rgba(60,40,10,.10);
  --sirius-shadow-modal: 0 24px 70px rgba(60,40,10,.28);

  --sirius-page-gradient: linear-gradient(145deg, #f7f3ec 0%, #f5f1ea 56%, #f2ede4 100%);
  --sirius-panel-gradient: linear-gradient(145deg, #ffffff, #fbf8f2);
  --sirius-secondary-gradient: linear-gradient(145deg, #ffffff, #f3ede1);
  --sirius-title-gradient: linear-gradient(180deg, #8a5a1f 0%, #6e4614 100%);
  --sirius-product-media: linear-gradient(180deg, #f3eee4 0%, #ece5d8 100%);
  --sirius-field: #ffffff;
  --sirius-focus: #8a5a1f;
  --sirius-success-surface: #e6f3ea;
  --sirius-success-text: #1e6b36;
  --sirius-warning-surface: #fbf0d9;
  --sirius-warning-text: #7a4b00;
  --sirius-danger-surface: #fbe5e1;
  --sirius-danger-text: #9b2c20;
  --sirius-info-surface: #e5eef5;
  --sirius-info-text: #1f4a66;
  --sirius-backdrop: rgba(33,29,23,.5);
  --sirius-shadow-control: inset 0 1px rgba(255,255,255,.6), 0 2px 5px rgba(60,40,10,.10);
  --sirius-hover-surface: linear-gradient(145deg, #f3ecdf, #ece3d2);
  --sirius-pressed-surface: linear-gradient(145deg, #e8dfcd, #efe7d8);
  --sirius-shadow-pressed: inset 0 1px 3px rgba(60,40,10,.22);

  /* Panier et paiement (versions claires) ; lignes « offert » et « bon » : même teinte, plus foncée. */
  --sirius-gold: #7a4e16;
  --sirius-gold-frame: #c9934f;
  --sirius-gold-line: #cdbb9b;
  --sirius-cart-bg: #f1e9da;
  --sirius-cart-group: #e9dfcb;
  --sirius-cart-row: #ffffff;
  --sirius-cart-foot: #eadbc2;
  --sirius-offered: #1d6b35;
  --sirius-voucher: #1f4fa8;
  --sirius-pay-bg: #f5f1ea;
  --sirius-pay-frame: #c9934f;
  --sirius-selected: rgba(201,147,79,.18);

  /* Graphiques du tableau de bord */
  --chart-direct: #2e8b57; --chart-preorder: #7b5fc4; --chart-professional: #3a6fc0; --chart-events: #c47a12;
  --chart-tasting: #b84a4a; --chart-accent: #7a4e16; --chart-accent-soft: #e6d3b0; --chart-grid: #e4dacb; --chart-axis: #6b5e4b;

  /* Alias de compatibilité (recalculés : un alias figé sur :root ne suit pas un changement local). */
  --ink: var(--sirius-text); --text: var(--sirius-text); --muted: var(--sirius-text-muted);
  --surface: var(--sirius-surface); --panel: var(--sirius-surface); --surface-2: var(--sirius-surface-raised);
  --line: var(--sirius-border); --border: var(--sirius-border);
  --sirius-selected: rgba(183,126,66,.16);
  --amber: var(--sirius-bronze); --accent: var(--sirius-bronze); --amber-2: var(--sirius-bronze-light);
  --green: var(--sirius-success-text); --red: var(--sirius-danger-text);
  --sirius-navigation: var(--sirius-bg); --sirius-surface-2: var(--sirius-surface-raised);
  --sirius-line: var(--sirius-border); --sirius-ivory: var(--sirius-text);
  --sirius-pewter: var(--sirius-text-muted); --sirius-zinc: var(--sirius-text-muted);
}

/* Fonds dorés pleins : valeur d'origine, identiques aux deux thèmes (texte sombre dessus). */
:root[data-theme="clair"] .brand-mark,
:root[data-theme="clair"] .segmented button.active,
:root[data-theme="clair"] select option:checked,
:root[data-theme="clair"] [data-contact-detail] [role="tab"][aria-selected="true"],
:root[data-theme="clair"] .contact-role-toggles input:checked + span,
:root[data-theme="clair"] button.button-primary,
:root[data-theme="clair"] .contact-entry .entry-segment button[aria-pressed=true],
:root[data-theme="clair"] .contact-entry .entry-days button[aria-pressed=true],
:root[data-theme="clair"] .map-stop-number,
:root[data-theme="clair"] .catalog-add-menu > summary,
:root[data-theme="clair"] .catalog-plus > button,
:root[data-theme="clair"] .erp-toolbar button,
:root[data-theme="clair"] .erp-pane > button.erp-add { background-color: #b77e42; color: #100d08; }
:root[data-theme="clair"] .segmented button.active { border-color: #b77e42; }
:root[data-theme="clair"] .today-block > header strong { background: #d8a058; color: #100d08; }
:root[data-theme="clair"] .event-till [data-event-add].added::after { background: #e2b26b; color: #111; }

/* Traits blancs translucides d'origine : traits bruns translucides en Clair. */
:root[data-theme="clair"] .price-reference { border-color: rgba(60,40,10,.14); background: rgba(60,40,10,.035); }
:root[data-theme="clair"] .price-list-grid label,
:root[data-theme="clair"] .category-edit-row { border-color: rgba(60,40,10,.14); }
:root[data-theme="clair"] .repackage-line { border-bottom-color: rgba(60,40,10,.12); }
:root[data-theme="clair"] .batch-next { background: rgba(60,40,10,.035); }
:root[data-theme="clair"] .chart-bar:focus-visible .chart-hit { fill: rgba(60,40,10,.06); }

/* Ombres lourdes d'origine, adoucies. */
:root[data-theme="clair"] .login-card,
:root[data-theme="clair"] .nav-group > div,
:root[data-theme="clair"] .checkout-cart,
:root[data-theme="clair"] .client-search [role=listbox],
:root[data-theme="clair"] .stock-panel,
:root[data-theme="clair"] .contact-menu-items,
:root[data-theme="clair"] .panel { box-shadow: 0 10px 28px rgba(60,40,10,.10); }
:root[data-theme="clair"] .contact-workspace-modal::backdrop { background: rgba(33,29,23,.5); }

/* Logo argenté : posé sur une pastille sombre pour rester lisible sur fond clair. */
:root[data-theme="clair"] .topbar .sirius-brand,
:root[data-theme="clair"] .sirius-login-brand { background-color: #0f0e0c !important; border-radius: var(--sirius-radius-md); padding-inline: 12px; background-image: none !important; }

/* Menu du compte : Déconnexion (rouge clair). */
:root[data-theme="clair"] .user-menu-actions > #logout { color: #9b2c20; background: #fbe5e1; border-color: #e3b3ab; }
:root[data-theme="clair"] .user-menu-actions > #logout:is(:hover,:focus-visible) { background: #f7d3cd; border-color: #b74435; box-shadow: inset 3px 0 #b74435; }
:root[data-theme="clair"] .user-menu-actions > #logout:active { background: #f0c0b8; color: #7a1f15; }
:root[data-theme="clair"] .user-theme .theme-switch button { background: #ffffff; color: #211d17; }
:root[data-theme="clair"] .user-theme .theme-switch button[aria-pressed="true"] { background: #eadbc2; color: #6e4614; }

/* Pastilles de type de liste de prix : même teinte, texte plus sombre. */
:root[data-theme="clair"] .erp-kind-public { color: #1e6b36; }
:root[data-theme="clair"] .erp-kind-professional { color: #4f35a0; }
:root[data-theme="clair"] .erp-kind-internal { color: #6e4614; }

/* Carte des contacts : fenêtres et traits (les tuiles et les marqueurs ne changent pas). */
:root[data-theme="clair"] .map-popup { color: #211d17; }

/* Lien d'appel vert d'origine : inchangé (texte blanc). */

/* ---- Îlots qui gardent l'apparence d'origine dans les deux thèmes ---- */
/* Panier ★ Sirius membres, événements « soirée privée » (fond bordeaux), bandeau photo. */
:root[data-theme="clair"] .cart-panel[data-members],
:root[data-theme="clair"] .members-banner,
:root[data-theme="clair"] button.event-create-party,
:root[data-theme="clair"] .event-type-private,
:root[data-theme="clair"] .hero:not([data-hero="plain"]) {
  --sirius-text: #eae9e3; --text: #eae9e3; --ink: #eae9e3;
  --sirius-text-muted: #a7a69e; --muted: #a7a69e;
  --sirius-border: #2a2b26; --line: #2a2b26; --border: #2a2b26;
  --sirius-gold: #e2b26b; --sirius-gold-frame: #a07a45; --sirius-gold-line: #6e5a3e;
  --sirius-offered: #9fd3a8; --sirius-voucher: #8db8ff;
  --sirius-danger-text: #f0afa5; --red: #f0afa5; --sirius-success-text: #a3d6b0; --green: #a3d6b0;
  --sirius-warning-text: #e2bd83; --sirius-info-text: #adc6d3;
  --sirius-bronze: #b77e42; --sirius-bronze-light: #d8a058; --amber: #b77e42; --accent: #b77e42; --amber-2: #d8a058;
  --sirius-field: #101210; --sirius-surface: #141614; --surface: #141614; --sirius-surface-raised: #1c1c18; --surface-2: #1c1c18;
  --sirius-title-gradient: linear-gradient(180deg,#e0ab65 0%,#c28646 55%,#ad7742 100%);
  --sirius-hover-surface: linear-gradient(145deg,#20221e,#151713);
  --sirius-shadow-control: inset 0 1px rgba(255,255,255,.08),0 2px 5px rgba(0,0,0,.18);
  --sirius-bg: #0d0f0d; --sirius-bg-deep: #090a09; --sirius-surface-soft: #181a17; --sirius-border-bronze: #604424;
  --sirius-bronze-dark: #704a29; --sirius-bronze-highlight: #e2ad68; --sirius-focus: #e2ad68;
  --sirius-success: #299449; --sirius-warning: #f59e0b; --sirius-danger: #b74435; --sirius-info: #3b82f6;
  --sirius-panel-gradient: linear-gradient(145deg,rgba(28,29,25,.98),rgba(16,17,15,.98));
  --sirius-secondary-gradient: linear-gradient(145deg,#1a1c19,#111310);
  --sirius-pressed-surface: linear-gradient(145deg,#0f110e,#171915);
  --sirius-shadow-pressed: inset 0 1px 3px rgba(0,0,0,.45);
  --sirius-product-media: linear-gradient(180deg,#31332f 0%,#2b2d29 55%,#252622 100%);
  --sirius-success-surface: #16251b; --sirius-warning-surface: #2b2312; --sirius-danger-surface: #331c19; --sirius-info-surface: #1a252b;
  --sirius-backdrop: rgba(0,0,0,.72); --sirius-selected: initial;
  --sirius-pay-bg: #1b1814; --sirius-pay-frame: #e2b26b;
  --surface-2: #1c1c18; --sirius-surface-2: #1c1c18; --sirius-line: #2a2b26; --panel: #141614;
  color-scheme: dark;
  color: #eae9e3;
}
:root[data-theme="clair"] .cart-panel[data-members] { --sirius-cart-group: #3a141d; --sirius-cart-row: #4f1a26; --sirius-cart-foot: #3a141d; --sirius-cart-bg: #22141a; }

/* Bandeau « Sans image » en Clair : fond uni clair, titres sombres. */
:root[data-theme="clair"] .hero[data-hero="plain"] { background: #efe8dc; border: 1px solid var(--sirius-border); }
:root[data-theme="clair"] .appearance-hero-preview[data-hero="plain"] { background: #efe8dc; color: #211d17; }
:root[data-theme="clair"] .appearance-hero-preview[data-hero="plain"] small { color: #6b5e4b; }
:root[data-theme="clair"] .user-notify .theme-switch button { background: #ffffff; color: #211d17; }
:root[data-theme="clair"] .user-notify .theme-switch button[aria-pressed="true"] { background: #eadbc2; color: #6e4614; }
:root[data-theme="clair"] .team-chat-toggle { background: #ffffff; color: #6e4614; }
:root[data-theme="clair"] .team-chat-toggle[aria-expanded="true"] { background: #eadbc2; }
:root[data-theme="clair"] .team-chat { box-shadow: var(--sirius-shadow-modal); }
:root[data-theme="clair"] .team-msg.is-mine .team-msg-bubble { background: #eadbc2; border-color: #c9934f; color: #211d17; }
:root[data-theme="clair"] .team-msg.is-mine .team-msg-meta { color: #6e4614; }