/* ux.css — Interactions and motion shared by the V5 screens */

:root {
  color-scheme: light;
}

[data-theme="dark"] {
  color-scheme: dark;
}

button,
[role="button"],
a,
input,
select,
textarea {
  touch-action: manipulation;
}

button:not(:disabled),
[role="button"],
a,
label[for],
select {
  -webkit-tap-highlight-color: transparent;
}

button:disabled,
[aria-disabled="true"] {
  cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

.form-input {
  min-height: 44px;
  transition:
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease,
    background-color var(--motion-fast) ease;
}

.form-input:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.switch input:focus-visible + .slider {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.screen.active {
  animation: screen-arrive 180ms var(--ease-out) both;
}

@keyframes screen-arrive {
  from { opacity: 0.78; }
  to { opacity: 1; }
}

.sheet-overlay,
.modal-overlay,
.app-overlay,
.success-popup-overlay {
  transition:
    opacity var(--motion-base) ease,
    visibility var(--motion-base) ease,
    background-color var(--motion-base) ease;
}

.sheet,
.modal-panel,
.modal,
.success-popup {
  transition:
    transform var(--motion-base) var(--ease-out),
    opacity var(--motion-base) ease,
    box-shadow var(--motion-base) ease;
}

.tab-btn,
.tab-pill,
.icon-btn,
.page-back,
.nav-item,
.mobile-menu-item,
.list-item,
.card,
.btn {
  -webkit-tap-highlight-color: transparent;
}

.tab-btn,
.tab-pill,
.icon-btn,
.page-back,
.nav-item,
.mobile-menu-item,
.list-item,
.btn {
  transition-duration: var(--motion-base);
}

.tab-btn:disabled,
.tab-pill:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tab-btn:focus-visible,
.tab-pill:focus-visible,
.nav-item:focus-visible,
.icon-btn:focus-visible,
.page-back:focus-visible {
  position: relative;
  z-index: 1;
}

.scroll-zone,
.page-body,
.sheet-body,
.modal-overlay > .modal-panel,
.app-overlay > .modal-panel {
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
}

@media (hover: hover) and (pointer: fine) {
  .card-interactive:hover,
  .list-item:hover,
  .mobile-menu-item:hover {
    border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
    box-shadow: var(--shadow);
  }

  .tab-btn:not(:disabled):not(.active):hover,
  .tab-pill:not(:disabled):not(.active):hover {
    color: var(--text);
    border-color: var(--border-2);
  }

  button:not(:disabled):not(.btn):hover,
  [role="button"]:not([aria-disabled="true"]):hover {
    filter: brightness(0.97);
  }
}

@media (max-width: 599px) {
  .page-header__actions {
    gap: 6px;
  }

  .page-header__title {
    /* Coupure entre les mots (et césure française si besoin), jamais au milieu d'un mot court (« Facturati|on »). */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    font-size: clamp(22px, 7.2vw, 30px);
  }

  .sheet,
  .modal-overlay > .modal-panel,
  .app-overlay > .modal-panel {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen.active {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}

/* ═══ Aide intégrée (public/js/help.js) ═══ */
.help-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border) !important; }
@media (max-width: 760px) { .help-btn span { display: none; } }
.help-sheet { padding: 22px 22px 28px; max-width: 640px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.help-sheet__eyebrow { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.help-sheet__title { margin: 0; font-size: 20px; font-weight: 900; color: var(--text); }
.help-sheet__purpose { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.help-sheet__tour { align-self: flex-start; gap: 6px; margin-top: 4px; }
.help-sheet h4 { margin: 12px 0 2px; font-size: 13px; font-weight: 800; color: var(--text); }
.help-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.help-list li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); }
.help-list strong { font-size: 13.5px; color: var(--text); }
.help-list span, .help-steps li, .help-terms dd { font-size: 13px; line-height: 1.55; color: var(--text-2); }
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.help-terms { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; }
.help-terms dt { font-size: 13px; font-weight: 700; color: var(--text); }
.help-terms dd { margin: 0; }
.help-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--success-bg); font-size: 13px; line-height: 1.5; color: var(--text-2); margin-top: 6px; }
.help-note svg { flex-shrink: 0; margin-top: 2px; color: var(--success); }
.help-doc { margin: 4px 0 0; font-size: 12px; color: var(--text-3); }
.help-doc code { font-family: var(--font-mono); }
@media (max-width: 560px) { .help-terms { grid-template-columns: 1fr; } .help-terms dd { margin-bottom: 6px; } }

.help-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: none; background: none; color: var(--text-3); cursor: pointer; }
.help-x:hover { background: var(--bg-3); color: var(--text); }
.help-offer { position: fixed; z-index: 9000; right: 20px; bottom: 96px; max-width: min(440px, calc(100vw - 32px)); display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(15, 23, 42, .16); animation: help-in .25s var(--ease-out, ease); }
/* Une feuille ouverte (action, formulaire) passe devant : le bandeau « Première fois sur … » ne doit pas la recouvrir. */
body.sheet-open .help-offer { display: none; }
.help-offer__icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--success-bg); color: var(--brand); }
.help-offer__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.help-offer__text strong { color: var(--text); font-size: 13.5px; }
.help-offer__text span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.help-offer__actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.help-offer__actions .help-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; }
@keyframes help-in { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 560px) { .help-offer { left: 16px; right: 16px; bottom: 84px; flex-wrap: wrap; } .help-offer__actions { flex-direction: row; width: 100%; } .help-offer__actions .btn { flex: 1; } }

.help-tour { position: fixed; inset: 0; z-index: 10050; }
.help-tour__spot { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55); outline: 2px solid var(--brand); transition: all .25s var(--ease-out, ease); cursor: pointer; }
.help-tour__pop { position: fixed; padding: 16px 16px 14px; border-radius: 16px; background: var(--bg-2); color: var(--text); box-shadow: 0 16px 40px rgba(0, 0, 0, .25); }
.help-tour__count { font-size: 11px; font-weight: 800; color: var(--brand); letter-spacing: .05em; }
.help-tour__title { margin-top: 4px; font-size: 15px; font-weight: 800; padding-right: 26px; }
.help-tour__text { margin: 6px 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.help-tour__nav { display: flex; justify-content: flex-end; gap: 8px; }
.help-tour__pop .help-x { position: absolute; top: 8px; right: 8px; }
@media (prefers-reduced-motion: reduce) { .help-tour__spot, .help-offer { transition: none; animation: none; } }

/* Chat d'équipe : pas de raccourcis flottants par-dessus la zone d'envoi */
body.on-chat .chat-side-dock,
body.on-chat .chat-mobile-fab,
body.on-chat #sabi-command-bubble,
body.on-web .chat-side-dock,
body.on-web .chat-mobile-fab,
body.on-web #sabi-command-bubble { display: none !important; }

/* Messagerie : erreur de lecture et diagnostic */
.mail-error-banner { display:flex; align-items:flex-start; gap:10px; background:#FEF2F2 !important; color:#7F1D1D !important; border:1px solid #FECACA; }
.mail-error-banner > div { flex:1; min-width:0; line-height:1.5; }
.mail-error-raw { font-size:11.5px; opacity:.75; margin-top:2px; word-break:break-word; }
.mail-diag h3 { margin:0 0 4px; font-size:18px; }
.mail-diag__sub { margin:0 0 14px; color:var(--text-2); font-size:13px; line-height:1.5; }
.mail-diag__wait { display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:13px; padding:12px 0; }
.mail-diag__verdict { display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; font-size:13.5px; font-weight:600; margin-bottom:10px; }
.mail-diag__verdict.is-ok { background:rgba(0,132,95,.08); color:#065F46; }
.mail-diag__verdict.is-ko { background:#FEF2F2; color:#991B1B; }
.mail-diag__step { display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border, #eef0f2); }
.mail-diag__step p { margin:2px 0 0; font-size:12.5px; color:var(--text-2); line-height:1.5; word-break:break-word; }
.mail-diag__step .mail-diag__hint { color:var(--text); font-weight:500; }
.mail-diag__ic { width:22px; height:22px; flex:0 0 22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.mail-diag__step.is-ok .mail-diag__ic { background:rgba(0,132,95,.12); color:#047857; }
.mail-diag__step.is-ko .mail-diag__ic { background:#FEE2E2; color:#B91C1C; }
.mail-diag__actions { margin-top:12px; display:flex; justify-content:flex-end; }
/* ─── Écrans tactiles : cibles et lisibilité (audit UX mobile 6.1.30) ───────────────────────────────────────────
   Mesuré sur tous les écrans à 360 px : filtres en pastilles de 25-30 px de haut, cases à cocher de 13 px,
   textes à 9-10 px écrits en dur dans le style des éléments. Corrigé ici une fois pour tous les écrans,
   uniquement au doigt (pointer: coarse) pour ne rien changer à l'ordinateur. */
@media (pointer: coarse) {
  .tab-pill, .filter-pill, .chip, .pill,
  [class*="filter"] > button, [class*="pills"] > button, [class*="chips"] > button, [class*="-tabs"] > button,
  [id$="-chip"], [id$="-chip-reconnect"], .chat-composer-tools button, #chat-direct-add-btn,
  .chat-tool-btn, .prio-pill, .dash-action-pill, .dash-mode-btn, .soc-flt {
    min-height: 36px;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; min-width: 20px; }
  input[type="search"], input.form-input, select.form-input, input[id$="-search"] { min-height: 40px; }
  /* Textes trop petits écrits en dur (9 à 10,5 px) : relevés à 11 px, minimum lisible au téléphone. */
  [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:10.5px"], [style*="font-size: 10.5px"] {
    font-size: 11px !important;
  }
}

/* Fiche projet : dossier du projet */
.pp-space { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:20px; margin-bottom:24px; }
.pp-space__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; }
.pp-space__title { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--text); }
.pp-space__sub { font-size:12.5px; color:var(--text-3); margin-top:4px; }
.pp-space__actions { display:flex; gap:8px; flex-wrap:wrap; }
.pp-space__list { display:flex; flex-direction:column; margin-top:14px; border-top:1px solid var(--border); }
.pp-space__file { display:flex; align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border); color:var(--text-2); font-size:13px; }
.pp-space__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.pp-space__meta { font-size:12px; color:var(--text-3); white-space:nowrap; }
.pp-space__empty { margin-top:12px; font-size:13px; color:var(--text-3); line-height:1.55; }
.pp-space__legacy { display:flex; align-items:center; gap:8px; margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--bg-2); font-size:12.5px; color:var(--text-2); }
.pp-space__legacy a { margin-left:auto; font-weight:600; }

/* Mes dossiers : onglets lisibles sur téléphone */
@media (max-width: 640px) {
  .dlv-view-tabs { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .dlv-view-tab { flex: 0 0 auto !important; white-space: nowrap; }
  .dlv-view-tab__hint { display: none; }
}

/* Réunions : cartes plus légères, liens client / projet */
.meeting-card .mt-links { display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 6px; }
.meeting-card .mt-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--bg-2); color:var(--text-2); font-size:11px; font-weight:600; text-decoration:none; }
.meeting-card .mt-chip:hover { background:var(--bg-3, #e9ecef); color:var(--text); }
.meeting-card .mt-del { padding:6px; color:var(--text-3); flex-shrink:0; opacity:.6; }
.meeting-card:hover .mt-del { opacity:1; color:var(--danger); }
.meeting-card .mt-actions { display:flex; gap:6px; padding:0 14px 12px 78px; align-items:center; }
@media (max-width: 640px) { .meeting-card .mt-actions { padding-left:14px; flex-wrap:wrap; } }

/* Fiche projet : briefs du client */
.pp-briefs { margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.pp-briefs:empty { display:none; }
.pp-briefs__head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.pp-briefs__head strong { display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--text); }
.pp-briefs__head span { display:block; font-size:12px; color:var(--text-3); margin-top:2px; max-width:520px; }
.pp-briefs__row { display:flex; align-items:center; gap:10px; padding:8px 2px; border-bottom:1px solid var(--border); font-size:13px; }
.pp-ib { width:30px; height:30px; flex:0 0 30px; border:0; background:transparent; border-radius:8px; color:var(--text-3); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.pp-ib:hover { background:var(--bg-2); color:var(--text); }
.pp-pick h3 { margin:0 0 4px; font-size:18px; }
.pp-pick > p { margin:0 0 12px; color:var(--text-2); font-size:13px; line-height:1.5; }
.pp-pick__label { display:block; font-size:11.5px; font-weight:600; color:var(--text-3); margin:12px 0 6px; }
.pp-pick__opt { display:flex; align-items:center; gap:12px; width:100%; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-align:left; cursor:pointer; margin-bottom:6px; color:var(--text); }
.pp-pick__opt:hover { border-color:var(--brand, #00845F); }
.pp-pick__opt strong { display:block; font-size:13.5px; }
.pp-pick__opt small { display:block; font-size:12px; color:var(--text-3); margin-top:2px; }
.pp-pick__ic { width:36px; height:36px; flex:0 0 36px; border-radius:10px; background:var(--bg-2); display:inline-flex; align-items:center; justify-content:center; color:var(--text-2); }
.pp-share__link { display:flex; gap:8px; margin:8px 0 4px; }
.pp-share__link .form-input { flex:1; min-width:0; font-size:13px; }
.pp-share__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.pp-share__note { font-size:12px; color:var(--text-3); margin:8px 0 0; }

/* Libellés masqués sur petit écran (boutons d'en-tête) */
@media (max-width: 640px) { .hide-sm { display: none !important; } }

/* Export comptable */
.acx h3 { margin:0 0 4px; font-size:18px; }
.acx__sub { margin:0 0 12px; font-size:13px; color:var(--text-2); line-height:1.5; }
.acx__presets { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.acx__chip { border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:6px 12px; font-size:12.5px; color:var(--text-2); cursor:pointer; }
.acx__chip.is-on { border-color:var(--brand, #00845F); color:var(--brand, #00845F); background:rgba(0,132,95,.06); font-weight:600; }
.acx__range { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.acx__range label { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--text-2); }
.acx__range .form-input { width:auto; }
.acx__sum { display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:12px; background:var(--bg-2); font-size:13px; color:var(--text-2); margin-bottom:12px; }
.acx__warn { color:#B45309; font-weight:600; }
.acx__files { display:flex; flex-direction:column; gap:8px; }
.acx__file { display:flex; align-items:center; gap:12px; width:100%; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--surface); text-align:left; cursor:pointer; color:var(--text-2); }
.acx__file:hover { border-color:var(--brand, #00845F); }
.acx__file > span { flex:1; min-width:0; }
.acx__file strong { display:block; font-size:13.5px; color:var(--text); }
.acx__file small { display:block; font-size:12px; color:var(--text-3); margin-top:2px; }

/* Laboratoire : propositions à valider */
.sl-review { display:flex; flex-direction:column; gap:12px; }
.sl-prop { border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:14px; display:flex; flex-direction:column; gap:10px; }
.sl-prop__act { display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap; }
.sl-prop__act select { width:auto; min-width:130px; }