:root {
  --orange: #ff5a1f;
  --orange-dark: #eb4c14;
  --orange-soft: #fff0e9;

  --black: #111111;

  --cream: #f4f1eb;
  --cream-light: #faf8f4;
  --cream-dark: #eae5dc;

  --white: #ffffff;

  --text: #111111;
  --secondary: #68655f;
  --muted: #716d66;

  --yellow: #c99528;
  --yellow-soft: #fff5de;

  --green: #24a866;

  --border: rgba(17, 17, 17, 0.09);
  --border-strong: rgba(17, 17, 17, 0.15);

  --font:
    "Manrope",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* ==================================================
   RESET
================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font);
  background: var(--cream);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: none;
  cursor: pointer;
  color: inherit;
}

svg {
  display: block;
  flex-shrink: 0;
}


/* ==================================================
   DEVICE
================================================== */

.device-stage {
  width: 100%;
  min-height: 100vh;

  display: flex;
  align-items: flex-start;
  justify-content: center;

  padding: 32px;
}

.device {
  width: 440px;
  height: min(900px, calc(100vh - 64px));

  position: relative;
  overflow: hidden;

  border: 8px solid var(--black);
  border-radius: 54px;

  background: var(--cream);

  box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.20);
}

.device-camera {
  width: 122px;
  height: 31px;

  position: absolute;
  z-index: 1000;

  top: 9px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 100px;

  background: var(--black);
}

.device-home-indicator {
  width: 120px;
  height: 4px;

  position: absolute;
  z-index: 1000;

  bottom: 8px;
  left: 50%;

  transform: translateX(-50%);

  border-radius: 100px;

  background: var(--black);
}


/* ==================================================
   APP
================================================== */

.app {
  width: 100%;
  height: 100%;

  position: relative;

  overflow: hidden;

  background: var(--cream);
}

.screen {
  width: 100%;
  height: 100%;

  display: none;

  overflow: hidden;
}

.screen.active {
  display: flex;
}


/* ==================================================
   COMMON
================================================== */

.logo {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.logo-mark {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--black);
  color: white;

  font-size: 16px;
}

.logo-small .logo-mark {
  width: 32px;
  height: 32px;
}

.eyebrow,
.section-eyebrow {
  color: var(--orange);

  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.primary-button {
  width: 100%;
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 18px 0 21px;

  border-radius: 15px;

  background: var(--orange);
  color: white;

  font-size: 16px;
  font-weight: 700;
}

.icon-button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface, #fff);
}


/* ==================================================
   WELCOME
================================================== */

.screen-welcome {
  overflow-y: auto;
  flex-direction: column;

  padding: 59px 25px 25px;

  background: var(--cream);
}

.welcome-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-badge {
  padding: 8px 11px;

  border: 1px solid var(--border-strong);
  border-radius: 100px;

  font-size: 13px;
  font-weight: 800;
}

.welcome-content {
  margin-top: 58px;
}

.welcome-content h1 {
  margin-top: 15px;

  font-size: 52px;
  line-height: .98;

  letter-spacing: -.065em;
}

.welcome-content h1 span {
  display: block;
  color: var(--orange);
}

.welcome-text {
  max-width: 345px;

  margin-top: 22px;

  color: var(--ink, #111);

  font-size: 16px;
  line-height: 1.65;
}

.welcome-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  color: var(--ink, #111);
  font-size: clamp(14px, 3.8vw, 16px);
  font-weight: 700;
  white-space: nowrap;
}

.welcome-dot { color: var(--orange); font-size: 22px; line-height: 1; }

.welcome-footer {
  padding-top: 0;
  margin-top: 44px;
}

.access-note {
  display: block;

  margin-top: 12px;

  color: var(--muted);

  text-align: center;

  font-size: 13px;
}


/* ==================================================
   LOGIN
================================================== */

.screen-login {
  overflow-y: auto;
  flex-direction: column;

  padding: 58px 25px 24px;

  background: var(--cream-light);
}

.simple-header {
  display: grid;
  grid-template-columns: 45px 1fr 45px;

  align-items: center;
}

.simple-header .logo {
  justify-self: center;
}

.login-content {
  margin-top: 47px;
}

.login-content h1 {
  margin-top: 0;

  font-size: 52px;
  line-height: 1;

  letter-spacing: -.06em;
}

.login-description {
  max-width: 320px;

  margin-top: 12px;

  color: var(--ink, #111);

  font-size: 16px;
  line-height: 1.5;
}

#loginForm {
  margin-top: 34px;
}

.field {
  margin-top: 18px;
}

.field:first-child {
  margin-top: 0;
}

.field label {
  display: block;

  margin-bottom: 9px;

  font-size: 16px;
  font-weight: 700;
}

.text-button {
  margin-bottom: 9px;

  background: transparent;

  color: var(--secondary);

  font-size: 14px;
}

.field input {
  width: 100%;
  height: 58px;

  padding: 0 16px;

  border: 1px solid var(--border-strong);
  border-radius: 14px;

  outline: none;

  background: var(--surface, #fff);

  font-size: 16px;
}

.login-input-wrapper { position: relative; }
.login-input-wrapper input { padding-left: 48px; }
.login-field-icon { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); color: var(--secondary); pointer-events: none; }
.password-wrapper input { padding-right: 52px; }
#togglePassword { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: transparent; color: var(--secondary); }
#togglePassword .eye-slash { display: none; }
#togglePassword[aria-pressed="true"] .eye-slash { display: block; }
#togglePassword:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.login-input-wrapper:focus-within .login-field-icon { color: var(--orange); }
.login-input-wrapper input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.forgot-password-row { display: flex; justify-content: flex-end; margin-top: 9px; }
.forgot-password-row .text-button { margin: 0; min-height: 32px; color: var(--ink, #111); }

.field-error {
  min-height: 15px;

  display: block;

  padding-top: 5px;

  color: #c92c20;

  font-size: 13px;
}

.remember-row {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-top: 15px;

  color: var(--secondary);

  font-size: 15px;
}

.remember-row input {
  position: absolute;
  opacity: 0;
}

.custom-checkbox {
  width: 19px;
  height: 19px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border-strong);
  border-radius: 5px;

  background: var(--surface, #fff);
}

.remember-row input:checked + .custom-checkbox {
  background: var(--black);
}

.remember-row input:checked + .custom-checkbox::after {
  content: "✓";
  color: white;
  font-size: 13px;
}

.login-button {
  margin-top: 24px;
}

.login-status {
  min-height: 17px;

  padding-top: 8px;

  font-size: 14px;
}

.login-status.success {
  color: var(--green);
}

.login-status.error {
  color: #c92c20;
}

.demo-section {
  margin-top: 25px;
  padding-top: 20px;
}

.demo-label {
  color: var(--muted);

  font-size: 13px;
  font-weight: 800;
}

.demo-card {
  min-height: 72px;

  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;

  gap: 11px;

  margin-top: 11px;
  padding: 12px;

  border-radius: 15px;

  background: var(--cream);
}

.demo-avatar {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--black);
  color: white;

  font-size: 14px;
}

.demo-user {
  display: flex;
  flex-direction: column;

  gap: 3px;
}

.demo-user strong {
  font-size: 15px;
}

.demo-user span {
  color: var(--muted);

  font-size: 13px;
}

.demo-card button {
  padding: 9px 11px;

  border-radius: 9px;

  background: var(--surface, #fff);

  font-size: 13px;
  font-weight: 700;
}


/* ==================================================
   MAIN
================================================== */

.screen-home,
.interventions-screen,
.messages-screen,
.intervention-detail-screen,
.generic-screen,
.conversation-screen {
  position: relative;

  flex-direction: column;

  background: var(--cream);
}

.home-scroll,
.interventions-scroll,
.messages-scroll,
.detail-scroll {
  flex: 1;

  overflow-y: auto;

  padding: 65px 21px 120px;

  scrollbar-width: none;
}

.home-scroll::-webkit-scrollbar,
.interventions-scroll::-webkit-scrollbar,
.messages-scroll::-webkit-scrollbar,
.detail-scroll::-webkit-scrollbar {
  display: none;
}


/* ==================================================
   HOME
================================================== */

.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home-date {
  color: var(--muted);

  font-size: 13px;
  font-weight: 800;
}

.home-header h1 {
  margin-top: 6px;

  font-size: 27px;

  letter-spacing: -.045em;
}

.home-header-actions {
  display: flex;

  gap: 9px;
}

.header-action-button,
.profile-avatar {
  width: 41px;
  height: 41px;

  display: grid;
  place-items: center;
}

.header-action-button {
  position: relative;

  border-radius: 13px;

  background: var(--surface, #fff);
}

.notification-dot {
  width: 8px;
  height: 8px;

  position: absolute;

  top: 7px;
  right: 7px;

  border: 2px solid white;
  border-radius: 50%;

  background: var(--orange);
}

.notification-dot.hidden {
  display: none;
}

.profile-avatar {
  border-radius: 50%;

  background: var(--black);

  color: white;

  font-size: 13px;
}

.next-card {
  margin-top: 27px;
  padding: 21px;

  border-radius: 23px;

  background: var(--orange);

  color: white;
}

.next-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  font-size: 13px;
  font-weight: 800;
}

.next-delay {
  padding: 6px 9px;

  border-radius: 99px;

  background: rgba(255,255,255,.17);
}

.next-time {
  margin-top: 24px;

  font-size: 41px;
  font-weight: 700;
}

.next-card h2 {
  margin-top: 13px;

  font-size: 18px;
}

.next-problem {
  margin-top: 3px;

  font-size: 16px;
}

.next-location {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 19px;

  font-size: 14px;
}

.next-card-button {
  width: 100%;
  min-height: 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 22px;
  padding: 0 15px;

  border-radius: 12px;

  background: var(--surface, #fff);

  /* IMPORTANT : texte visible */
  color: var(--ink, #111);

  font-size: 15px;
  font-weight: 700;
}

.next-card-button svg {
  color: var(--ink, #111);
}

.assistant-card {
  margin-top: 17px;
  padding: 20px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background: var(--surface, #fff);
}

.section-header {
  display: flex;
  justify-content: space-between;
}

.section-header h2 {
  margin-top: 5px;

  font-size: 19px;
}

.assistant-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--black);

  color: white;
}

.timeline {
  margin-top: 21px;
}

.timeline-item {
  min-height: 82px;

  display: grid;
  grid-template-columns: 22px 1fr;

  gap: 11px;
}

.timeline-marker {
  width: 11px;
  height: 11px;

  margin-top: 3px;

  border: 2px solid #bbb6ae;
  border-radius: 50%;

  background: var(--surface, #fff);
}

.timeline-active .timeline-marker {
  border-color: var(--orange);

  background: var(--orange);
}

.timeline-time {
  color: var(--orange);

  font-size: 13px;
  font-weight: 800;
}

.timeline-item strong {
  display: block;

  margin-top: 4px;

  font-size: 16px;
}

.timeline-item p {
  margin-top: 4px;

  color: var(--muted);

  font-size: 14px;
  line-height: 1.5;
}

.quick-section {
  margin-top: 29px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 13px;
}

.section-title-row h2 {
  font-size: 19px;
}

.section-title-row span,
.section-title-row button {
  background: transparent;

  color: var(--muted);

  font-size: 14px;
}

.quick-slider {
  display: flex;

  gap: 11px;

  overflow-x: auto;

  scrollbar-width: none;
}

.quick-card {
  width: 150px;
  min-width: 150px;
  height: 156px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding: 14px;

  border-radius: 18px;

  background: var(--surface, #fff);

  text-align: left;
}

.quick-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 11px;
}

.quick-orange {
  background: var(--orange);

  color: white;
}

.quick-black {
  background: var(--black);

  color: white;
}

.quick-cream {
  background: var(--cream-dark);
}

.quick-label {
  margin-top: auto;

  color: var(--muted);

  font-size: 14px;
}

.quick-card strong {
  margin-top: 4px;

  font-size: 16px;
}

.today-section {
  margin-top: 29px;
}

.appointment {
  min-height: 73px;

  display: grid;
  grid-template-columns: 43px 2px 1fr auto;

  align-items: center;

  gap: 11px;

  border-bottom: 1px solid var(--border);
}

.appointment-time {
  font-size: 14px;
  font-weight: 700;
}

.appointment-color {
  width: 2px;
  height: 34px;

  background: var(--orange);
}

.appointment strong {
  font-size: 15px;
}

.appointment div span {
  color: var(--muted);

  font-size: 13px;
}

.appointment-status {
  padding: 6px 8px;

  border-radius: 99px;

  background: var(--orange-soft);

  color: var(--orange);

  font-size: 12px;
}

.team-note {
  margin-top: 27px;
  padding: 19px;

  border-radius: 19px;

  background: var(--orange);

  color: var(--ink, #111);
}

.team-note-header {
  display: flex;
  justify-content: space-between;

  color: var(--ink, #111);

  font-size: 13px;
}

.team-note h3 {
  margin-top: 17px;

  font-size: 16px;
}

.team-note p {
  margin-top: 7px;

  color: var(--ink, #111);

  font-size: 14px;
  line-height: 1.5;
}


/* ==================================================
   INTERVENTIONS
================================================== */

.interventions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.interventions-header h1 {
  font-size: 32px;

  letter-spacing: -.05em;
}

.intervention-calendar-button {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--surface, #fff);
}

.period-tabs,
.status-tabs {
  display: flex;

  gap: 7px;

  overflow-x: auto;

  scrollbar-width: none;
}

.period-tabs {
  margin-top: 27px;
}

.period-tab {
  min-width: max-content;
  height: 40px;

  padding: 0 14px;

  border: 1px solid var(--border);
  border-radius: 100px;

  background: rgba(255,255,255,.65);

  color: var(--secondary);

  font-size: 14px;
  font-weight: 700;
}

.period-tab.active {
  border-color: var(--black);

  background: var(--black);

  color: white;
}

.status-filter-wrapper {
  margin-top: 19px;
}

.status-filter-label {
  display: block;

  margin-bottom: 9px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 800;
}

.status-tab {
  min-width: max-content;
  height: 35px;

  display: flex;
  align-items: center;

  gap: 6px;

  padding: 0 11px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: rgba(255,255,255,.55);

  color: var(--secondary);

  font-size: 13px;
  font-weight: 700;
}

.status-tab.active {
  border-color: var(--black);

  background: var(--surface, #fff);

  color: var(--ink, #111);
}

.status-mini-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}

.current-dot {
  background: var(--orange);
}

.pending-dot {
  background: var(--yellow);
}

.upcoming-dot {
  background: var(--black);
}

.completed-dot {
  background: var(--muted);
}

.day-overview {
  margin-top: 22px;
  padding: 17px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: rgba(255,255,255,.72);
}

.day-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.day-overview-label {
  color: var(--muted);

  font-size: 13px;
}

.day-overview h2 {
  margin-top: 5px;

  font-size: 20px;
}

.day-count {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--orange);

  color: white;

  font-size: 16px;
  font-weight: 700;
}

.day-status-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-top: 15px;
}

.day-status-box {
  padding: 9px;

  border-radius: 11px;

  background: var(--cream);
}

.day-status-box strong {
  display: block;

  font-size: 16px;
}

.day-status-box span {
  color: var(--muted);

  font-size: 12px;
}

.interventions-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 27px;
  margin-bottom: 12px;
}

.interventions-list-header h2 {
  font-size: 18px;
}

.interventions-list-header span {
  color: var(--muted);

  font-size: 14px;
}

.intervention-list,
.completed-list {
  display: flex;
  flex-direction: column;

  gap: 11px;
}

.intervention-card {
  padding: 17px;

  border: 1px solid var(--border);
  border-radius: 19px;

  background: var(--surface, #fff);
}

.intervention-card.current {
  box-shadow:
    inset 4px 0 0 var(--orange);
}

.intervention-card-top {
  display: flex;
  justify-content: space-between;
}

.intervention-hour {
  font-size: 19px;
  font-weight: 700;
}

.intervention-duration {
  color: var(--muted);

  font-size: 13px;
}

.intervention-status {
  padding: 6px 8px;

  border-radius: 100px;

  font-size: 12px;
  font-weight: 700;
}

.status-current {
  background: var(--orange-soft);

  color: var(--orange);
}

.status-pending {
  background: var(--yellow-soft);

  color: #8a620a;
}

.status-upcoming {
  background: #efede9;

  color: var(--ink, #111);
}

.intervention-client {
  margin-top: 17px;

  font-size: 16px;
  font-weight: 700;
}

.intervention-type {
  margin-top: 3px;

  color: var(--secondary);

  font-size: 15px;
}

.intervention-address {
  display: flex;
  align-items: center;

  gap: 7px;

  margin-top: 15px;

  color: var(--muted);

  font-size: 14px;
}

.waiting-reason {
  margin-top: 14px;
  padding: 10px;

  border-radius: 11px;

  background: #fff8e7;

  color: #86600b;

  font-size: 13px;
  line-height: 1.45;
}

.intervention-card-actions {
  display: flex;

  gap: 8px;

  margin-top: 17px;
}

.intervention-open-button {
  flex: 1;

  min-height: 43px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px;

  border-radius: 11px;

  background: var(--black);

  color: white;

  font-size: 14px;
  font-weight: 700;
}

.intervention-card.current
.intervention-open-button {
  background: var(--orange);
}

.route-button {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--cream);
}

.completed-card {
  min-height: 68px;

  display: grid;
  grid-template-columns: 51px 1fr 34px;

  align-items: center;

  gap: 10px;

  padding: 11px 12px;

  border: 1px solid var(--border);
  border-radius: 15px;

  background: rgba(255,255,255,.62);
}

.completed-card-time {
  color: var(--secondary);

  font-size: 14px;
  font-weight: 700;
}

.completed-card-info strong {
  display: block;

  font-size: 14px;
}

.completed-card-info span {
  color: var(--muted);

  font-size: 12px;
}

.completed-card-button {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--surface, #fff);
}


/* ==================================================
   MESSAGES
================================================== */

.messages-screen {
  background: var(--cream-light);
}

.messages-scroll {
  padding-bottom: 135px;
}

.messages-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}

.messages-header > div:first-child {
  min-width: 0;

  flex: 1;
}

.messages-header h1 {
  font-size: 32px;
  line-height: 1;

  letter-spacing: -.055em;
}

.messages-header p {
  margin-top: 8px;

  color: var(--secondary);

  font-size: 15px;
  line-height: 1.5;
}

.messages-header-actions {
  display: flex;
  align-items: center;

  gap: 7px;
}

.message-top-action {
  width: 41px;
  height: 41px;

  position: relative;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--surface, #fff);

  color: var(--ink, #111);
}

.new-message-top {
  background: var(--orange);
  color: white;
  border-color: transparent;
}

.notification-top-action {
  background: var(--surface, #fff);
}

.message-type-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;

  margin-top: 25px;
  padding: 4px;

  border-radius: 16px;

  background: #ebe7e1;
}

.message-type-button {
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  border-radius: 13px;

  background: transparent;

  color: var(--secondary);

  font-size: 15px;
  font-weight: 700;
}

.message-type-button strong {
  width: 24px;
  height: 24px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: rgba(17,17,17,.06);

  font-size: 13px;
}

.message-type-button.active {
  background: var(--surface, #fff);
  color: var(--orange);

  box-shadow:
    0 5px 18px rgba(35,30,25,.05);
}

.message-type-button.active strong {
  background: var(--orange);
  color: white;
}

.message-search-row {
  display: grid;
  grid-template-columns: 1fr 46px;

  gap: 9px;

  margin-top: 18px;
}

.message-search-box {
  height: 48px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0 13px;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--surface, #fff);
}

.message-search-box svg {
  color: var(--muted);
}

.message-search-box input {
  width: 100%;

  border: none;
  outline: none;

  background: transparent;

  font-size: 14px;
}

.message-search-box input::placeholder {
  color: var(--muted);
}

.message-filter-button {
  height: 48px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 13px;

  background: var(--surface, #fff);
}

.messages-list {
  display: flex;
  flex-direction: column;

  gap: 9px;

  margin-top: 21px;
}

.conversation-card {
  width: 100%;
  min-height: 82px;

  display: grid;
  grid-template-columns: 48px 1fr auto;

  align-items: center;

  gap: 11px;

  padding: 12px;

  border: 1px solid rgba(17,17,17,.05);
  border-radius: 18px;

  background: var(--surface, #fff);

  color: var(--text);

  text-align: left;
}

.conversation-avatar {
  width: 48px;
  height: 48px;

  position: relative;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--cream);

  font-size: 15px;
  font-weight: 800;
}

.conversation-avatar.orange {
  background: var(--orange-soft);
  color: var(--orange);
}

.conversation-avatar.black {
  background: var(--black);
  color: white;
}

.conversation-online {
  width: 10px;
  height: 10px;

  position: absolute;

  right: -1px;
  bottom: -1px;

  border: 2px solid white;
  border-radius: 50%;

  background: var(--green);
}

.conversation-center {
  min-width: 0;
}

.conversation-topline {
  display: flex;
  align-items: center;

  gap: 6px;
}

.conversation-topline strong {
  overflow: hidden;

  font-size: 15px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.linked-case-label {
  padding: 4px 6px;

  border-radius: 100px;

  background: var(--orange-soft);

  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.conversation-preview {
  overflow: hidden;

  margin-top: 5px;

  color: var(--secondary);

  font-size: 13px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-right {
  min-width: 34px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 8px;
}

.conversation-time {
  color: var(--muted);

  font-size: 12px;
}

.unread-badge {
  min-width: 21px;
  height: 21px;

  display: grid;
  place-items: center;

  padding: 0 6px;

  border-radius: 100px;

  background: var(--orange);

  color: white;

  font-size: 12px;
  font-weight: 800;
}


/* ==================================================
   IA FLOTTANTE
================================================== */

.nova-floating-button {
  width: 52px;
  height: 52px;

  position: absolute;
  z-index: 250;

  right: 21px;
  bottom: 106px;

  display: grid;
  place-items: center;

  border-radius: 16px;

  background: var(--black);

  color: white;

  box-shadow:
    0 12px 30px rgba(17,17,17,.22);
}

.nova-ai-dot {
  width: 8px;
  height: 8px;

  position: absolute;

  top: 6px;
  right: 6px;

  border: 2px solid var(--black);
  border-radius: 50%;

  background: var(--orange);
}


/* ==================================================
   CONVERSATION
================================================== */

.conversation-screen {
  background: var(--cream-light);
}

.conversation-header {
  min-height: 112px;

  display: grid;
  grid-template-columns: 42px 1fr 42px;

  align-items: end;

  gap: 10px;

  padding: 54px 18px 16px;

  border-bottom: 1px solid var(--border);

  background: rgba(250,248,244,.98);
}

.conversation-back-button,
.conversation-header-more {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface, #fff);
}

.conversation-header-user {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.conversation-header-avatar {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--black);

  color: white;

  font-size: 13px;
  font-weight: 800;
}

.conversation-header-user h2 {
  overflow: hidden;

  font-size: 16px;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.conversation-header-user span {
  display: block;

  margin-top: 3px;

  color: var(--green);

  font-size: 12px;
}

.conversation-messages {
  flex: 1;

  overflow-y: auto;

  padding: 20px 18px 105px;

  scrollbar-width: none;
}

.conversation-date {
  margin: 5px 0 18px;

  color: var(--muted);

  text-align: center;

  font-size: 12px;
  font-weight: 700;
}

.message-row {
  display: flex;

  margin-bottom: 10px;
}

.message-row.mine {
  justify-content: flex-end;
}

.chat-bubble {
  max-width: 78%;

  padding: 11px 12px;

  border: 1px solid var(--border);
  border-radius: 15px 15px 15px 4px;

  background: var(--surface, #fff);
}

.message-row.mine .chat-bubble {
  border: none;
  border-radius: 15px 15px 4px 15px;

  background: var(--orange);

  color: white;
}

.chat-bubble p {
  font-size: 14px;
  line-height: 1.55;
}

.chat-bubble span {
  display: block;

  margin-top: 6px;

  color: var(--muted);

  text-align: right;

  font-size: 12px;
}

.message-row.mine .chat-bubble span {
  color: rgba(255,255,255,.72);
}

.case-chat-card {
  margin: 8px 0 14px;
  padding: 12px;

  border: 1px solid rgba(255,90,31,.18);
  border-radius: 14px;

  background: var(--orange-soft);
}

.case-chat-card span {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.case-chat-card strong {
  display: block;

  margin-top: 4px;

  font-size: 14px;
}

.case-chat-card p {
  margin-top: 3px;

  color: var(--secondary);

  font-size: 12px;
}

.conversation-composer {
  min-height: 78px;

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  display: grid;
  grid-template-columns: 38px 1fr 42px;

  align-items: center;

  gap: 8px;

  padding: 10px 14px 18px;

  border-top: 1px solid var(--border);

  background: rgba(250,248,244,.98);
}

.conversation-attachment {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface, #fff);
}

.conversation-composer input {
  height: 42px;

  padding: 0 13px;

  border: 1px solid var(--border);
  border-radius: 12px;

  outline: none;

  background: var(--surface, #fff);

  font-size: 14px;
}

.conversation-send {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--orange);

  color: white;
}


/* ==================================================
   DOSSIER
================================================== */

.intervention-detail-screen {
  background: var(--cream-light);
}

.detail-scroll {
  padding-bottom: 90px;
}

.detail-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;

  align-items: center;

  margin-bottom: 28px;
}

.detail-header > div {
  text-align: center;
}

.detail-header span {
  display: block;

  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.detail-header strong {
  display: block;

  margin-top: 2px;

  font-size: 14px;
}

.detail-back-button,
.detail-more-button {
  width: 40px;
  height: 40px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--surface, #fff);
}

.client-detail-head {
  display: flex;
  justify-content: space-between;
}

.client-detail-head h1 {
  font-size: 29px;

  letter-spacing: -.05em;
}

.client-avatar-detail {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--black);

  color: white;

  font-size: 14px;
}

.detail-status {
  display: inline-flex;

  margin-top: 9px;
  padding: 6px 9px;

  border-radius: 100px;

  background: var(--orange-soft);

  color: var(--orange);

  font-size: 12px;
}

.intervention-main-card {
  margin-top: 22px;
  padding: 18px;

  border: 1px solid var(--border);
  border-radius: 20px;

  background: var(--surface, #fff);
}

.detail-card-top {
  display: flex;
  justify-content: space-between;
}

.detail-card-top small {
  color: var(--muted);

  font-size: 12px;
}

.detail-card-top strong {
  display: block;

  margin-top: 5px;

  font-size: 21px;
}

.detail-time {
  padding: 7px 9px;

  border-radius: 10px;

  background: var(--cream);

  font-size: 14px;
}

.detail-address {
  margin-top: 16px;

  color: var(--secondary);

  font-size: 14px;
}

.detail-contact-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

  margin-top: 16px;
}

.detail-contact-actions button {
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  border-radius: 11px;

  background: var(--cream);

  font-size: 13px;
  font-weight: 700;
}

.next-action-card {
  margin-top: 15px;
  padding: 17px;

  border-radius: 19px;

  background: var(--orange);

  color: white;
}

.next-action-card > span {
  font-size: 12px;
  font-weight: 800;
}

.next-action-card h2 {
  margin-top: 8px;

  font-size: 18px;
}

.next-action-card p {
  margin-top: 7px;

  font-size: 14px;
  line-height: 1.45;

  opacity: .86;
}

.next-action-footer {
  display: flex;
  justify-content: space-between;

  margin-top: 14px;
  padding-top: 13px;

  border-top: 1px solid rgba(255,255,255,.2);

  font-size: 13px;
}

.responsible-area {
  margin-top: 15px;
}

.send-responsible-button {
  width: 100%;
  min-height: 55px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 16px;

  border-radius: 15px;

  background: var(--black);

  color: white;

  font-size: 15px;
  font-weight: 700;
}

.escalation-status-card {
  padding: 16px;

  border: 1px solid var(--border);
  border-radius: 18px;

  background: var(--surface, #fff);
}

.escalation-status-top {
  display: flex;
  justify-content: space-between;
}

.escalation-status-top span {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.escalation-status-top strong {
  display: block;

  margin-top: 5px;

  font-size: 16px;
}

.manager-message-button {
  width: 100%;
  min-height: 42px;

  margin-top: 12px;

  border-radius: 11px;

  background: var(--cream);

  font-size: 13px;
  font-weight: 700;
}

.detail-sections {
  margin-top: 24px;
}

.detail-section-label {
  margin-bottom: 10px;

  color: var(--muted);

  font-size: 13px;
  font-weight: 800;
}

.detail-accordion {
  overflow: hidden;

  margin-bottom: 8px;

  border: 1px solid var(--border);
  border-radius: 16px;

  background: var(--surface, #fff);
}

.accordion-trigger {
  width: 100%;
  min-height: 62px;

  display: flex;
  align-items: center;

  gap: 11px;

  padding: 0 14px;

  background: var(--surface, #fff);

  text-align: left;
}

.accordion-icon {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: var(--cream);
}

.accordion-trigger > div:nth-child(2) {
  flex: 1;
}

.accordion-trigger strong {
  font-size: 15px;
}

.accordion-trigger span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.accordion-content {
  display: none;

  padding: 0 14px 15px;
}

.detail-accordion.open .accordion-content {
  display: block;
}

.info-row {
  display: grid;
  grid-template-columns: 105px 1fr;

  gap: 8px;

  padding: 10px 0;

  border-top: 1px solid var(--border);
}

.info-row span {
  color: var(--muted);

  font-size: 12px;
}

.info-row strong {
  font-size: 13px;
}

.history-item {
  padding: 12px 0;

  border-top: 1px solid var(--border);
}

.history-item strong {
  font-size: 14px;
}

.history-item p {
  margin-top: 4px;

  color: var(--muted);

  font-size: 12px;
}

.incident-card {
  margin-top: 10px;
  padding: 11px;

  border-radius: 12px;

  background: var(--yellow-soft);
}

.incident-card strong {
  font-size: 13px;
}

.incident-card p {
  margin-top: 4px;

  color: #765816;

  font-size: 12px;
}

.action-row {
  min-height: 52px;

  display: flex;
  align-items: center;

  gap: 10px;

  border-top: 1px solid var(--border);
}

.action-check {
  width: 18px;
  height: 18px;

  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

.action-row strong {
  font-size: 13px;
}

.action-row span {
  display: block;

  color: var(--muted);

  font-size: 12px;
}

.activity-item {
  display: grid;
  grid-template-columns: 46px 8px 1fr;

  gap: 7px;

  padding: 9px 0;
}

.activity-time {
  color: var(--muted);

  font-size: 12px;
}

.activity-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--orange);
}

.activity-text {
  font-size: 13px;
}

.detail-ai-button {
  width: 48px;
  height: 48px;

  position: absolute;
  z-index: 250;

  right: 21px;
  bottom: 24px;

  display: grid;
  place-items: center;

  border-radius: 14px;

  background: var(--black);

  color: white;

  box-shadow:
    0 10px 24px rgba(17,17,17,.18);
}


/* ==================================================
   GENERIC
================================================== */

.generic-screen {
  padding: 61px 21px 105px;
}

.generic-header {
  display: grid;
  grid-template-columns: 42px 1fr 42px;

  align-items: center;
}

.generic-header > div:nth-child(2) {
  text-align: center;
}

.generic-header span {
  color: var(--orange);

  font-size: 13px;
  font-weight: 800;
}

.generic-header h1 {
  margin-top: 3px;

  font-size: 20px;
}

.generic-content {
  min-height: 0;
  flex: 1;

  overflow-y: auto;

  padding-top: 28px;

  scrollbar-width: none;
}


/* ==================================================
   PROFIL
================================================== */

.nova-profile-page {
  padding-bottom: 40px;
}

.profile-main-card {
  padding: 18px;

  border: 1px solid var(--border);
  border-radius: 21px;

  background: var(--surface, #fff);
}

.profile-main-top {
  display: flex;
  align-items: center;

  gap: 14px;
}

.profile-avatar-wrapper {
  position: relative;
}

.profile-main-avatar {
  width: 65px;
  height: 65px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: var(--black);

  color: white;

  font-size: 16px;
  font-weight: 800;
}

.profile-photo-button {
  width: 25px;
  height: 25px;

  position: absolute;

  right: -2px;
  bottom: -1px;

  display: grid;
  place-items: center;

  border: 3px solid white;
  border-radius: 50%;

  background: var(--orange);

  color: white;
}

.profile-overline {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.profile-main-identity h2 {
  margin-top: 4px;

  font-size: 21px;
}

.profile-main-identity p {
  margin-top: 4px;

  color: var(--secondary);

  font-size: 14px;
}

.profile-main-infos {
  margin-top: 18px;
  padding-top: 5px;

  border-top: 1px solid var(--border);
}

.profile-info-line {
  min-height: 57px;

  display: flex;
  align-items: center;

  gap: 11px;

  border-bottom: 1px solid var(--border);
}

.profile-info-line:last-child {
  border-bottom: none;
}

.profile-info-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  background: var(--cream);
}

.profile-info-line span {
  display: block;

  color: var(--muted);

  font-size: 12px;
}

.profile-info-line strong {
  display: block;

  margin-top: 2px;

  font-size: 14px;
}

.profile-secondary-button {
  width: 100%;
  min-height: 47px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 15px;
  padding: 0 13px;

  border-radius: 12px;

  background: var(--cream);

  font-size: 14px;
  font-weight: 700;
}

.profile-section-card {
  overflow: hidden;

  margin-top: 10px;

  border: 1px solid var(--border);
  border-radius: 17px;

  background: var(--surface, #fff);
}

.profile-section-trigger {
  width: 100%;
  min-height: 67px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 14px;

  background: var(--surface, #fff);

  text-align: left;
}

.profile-section-left {
  display: flex;
  align-items: center;

  gap: 11px;
}

.profile-section-icon {
  width: 39px;
  height: 39px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--cream);
}

.profile-section-left strong {
  display: block;

  font-size: 15px;
}

.profile-section-left span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.profile-chevron {
  transition: transform .2s ease;
}

.profile-section-card.open .profile-chevron {
  transform: rotate(90deg);
}

.profile-section-content {
  display: none;

  padding: 0 14px 15px;

  border-top: 1px solid var(--border);
}

.profile-section-content.active {
  display: block;
}

.availability-summary {
  min-height: 64px;

  display: flex;
  align-items: center;

  gap: 10px;
}

.availability-status-dot {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: var(--green);
}

.availability-summary strong {
  display: block;

  font-size: 14px;
}

.availability-summary span {
  display: block;

  margin-top: 2px;

  color: var(--muted);

  font-size: 12px;
}

.profile-subsection {
  padding: 14px 0;

  border-top: 1px solid var(--border);
}

.profile-subsection-label {
  display: block;

  margin-bottom: 10px;

  color: var(--muted);

  font-size: 12px;
  font-weight: 800;
}

.working-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);

  gap: 6px;
}

.working-day {
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background: var(--cream);

  color: var(--muted);

  font-size: 12px;
  font-weight: 700;
}

.working-day.active {
  background: var(--black);

  color: white;
}

.availability-row {
  min-height: 52px;

  display: flex;
  align-items: center;

  border-top: 1px solid var(--border);
}

.availability-row span {
  display: block;

  color: var(--muted);

  font-size: 12px;
}

.availability-row strong {
  display: block;

  margin-top: 3px;

  font-size: 14px;
}

.profile-outline-button {
  width: 100%;
  min-height: 44px;

  margin-top: 12px;

  border: 1px solid var(--border-strong);
  border-radius: 11px;

  background: var(--surface, #fff);

  font-size: 13px;
  font-weight: 700;
}

.setting-row {
  min-height: 62px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-bottom: 1px solid var(--border);
}

.setting-row strong {
  display: block;

  font-size: 13px;
}

.setting-row span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.switch-control {
  width: 43px;
  height: 25px;

  position: relative;

  flex-shrink: 0;

  padding: 3px;

  border-radius: 100px;

  background: #ddd9d2;
}

.switch-control > span {
  width: 19px;
  height: 19px;

  display: block;

  margin: 0;

  border-radius: 50%;

  background: var(--surface, #fff);

  transition: transform .2s ease;
}

.switch-control.active {
  background: var(--orange);
}

.switch-control.active > span {
  transform: translateX(18px);
}

.profile-mini-select {
  min-width: 62px;
  height: 32px;

  border-radius: 9px;

  background: var(--cream);

  font-size: 12px;
  font-weight: 700;
}

.permission-row {
  min-height: 55px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);
}

.permission-row strong {
  display: block;

  font-size: 13px;
}

.permission-row div span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.permission-ok {
  padding: 5px 7px;

  border-radius: 100px;

  background: #ebf7ef;

  color: #238c51;

  font-size: 12px;
  font-weight: 700;
}

.map-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;

  gap: 8px;
}

.map-choice-button {
  min-height: 62px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding: 10px;

  border: 1px solid var(--border);
  border-radius: 12px;

  background: var(--cream);

  color: var(--secondary);
}

.map-choice-button.active {
  border-color: var(--orange);

  background: var(--orange-soft);

  color: var(--orange);
}

.map-app-icon {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border-radius: 9px;

  background: var(--surface, #fff);

  color: var(--ink, #111);

  font-size: 12px;
  font-weight: 800;
}

.map-choice-button span {
  font-size: 12px;
  font-weight: 700;
}

.help-option-row {
  width: 100%;
  min-height: 61px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid var(--border);

  background: transparent;

  text-align: left;
}

.help-option-row strong {
  display: block;

  font-size: 13px;
}

.help-option-row div span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.profile-logout-button {
  width: 100%;
  min-height: 57px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 16px;
  padding: 0 16px;

  border-radius: 15px;

  background: var(--black);

  color: white;
}

.profile-logout-button > div {
  display: flex;
  align-items: center;

  gap: 10px;
}

.profile-logout-button span {
  font-size: 14px;
  font-weight: 700;
}

.profile-version {
  margin-top: 14px;

  color: var(--muted);

  text-align: center;

  font-size: 12px;
}


/* ==================================================
   PANELS
================================================== */

.panel-overlay {
  width: 100%;
  height: 100%;

  position: absolute;
  z-index: 8000;

  inset: 0;

  display: none;

  /* IMPORTANT :
     panneau ancré en bas qui MONTE */
  align-items: flex-end;

  background: rgba(15,15,15,.35);

  backdrop-filter: blur(5px);
}

.panel-overlay.active {
  display: flex;
}

.panel-overlay.active
.notifications-panel,
.panel-overlay.active
.nova-ai-sheet,
.panel-overlay.active
.escalation-modal {
  animation:
    nova-sheet-up
    .28s
    cubic-bezier(.22,.8,.3,1)
    both;
}

@keyframes nova-sheet-up {

  from {
    transform: translateY(100%);
    opacity: .7;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }

}

.panel-handle {
  width: 40px;
  height: 4px;

  margin: 0 auto 16px;

  border-radius: 100px;

  background: #c8c3bc;
}

.panel-close-button {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface, #fff);
}


/* ==================================================
   NOTIFICATIONS
================================================== */

.notifications-panel {
  width: 100%;

  max-height: 80%;

  overflow: hidden;

  padding: 10px 18px 22px;

  border-radius: 28px 28px 0 0;

  background: var(--cream-light);

  transform-origin: bottom center;
}

.notifications-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.notifications-panel-header span {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.notifications-panel-header h2 {
  margin-top: 3px;

  font-size: 20px;
}

.notification-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 20px;
  padding-bottom: 12px;

  border-bottom: 1px solid var(--border);
}

.notification-actions-row span {
  color: var(--muted);

  font-size: 12px;
}

.notification-actions-row button {
  background: transparent;

  color: var(--orange);

  font-size: 12px;
  font-weight: 700;
}

.notifications-list {
  max-height: 500px;

  overflow-y: auto;

  margin-top: 8px;
}

.notification-item {
  min-height: 78px;

  display: grid;
  grid-template-columns: 38px 1fr auto;

  align-items: center;

  gap: 10px;

  padding: 10px 0;

  border-bottom: 1px solid var(--border);
}

.notification-item.unread
.notification-icon {
  background: var(--orange-soft);

  color: var(--orange);
}

.notification-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 11px;

  background: var(--cream);
}

.notification-body strong {
  display: block;

  font-size: 14px;
}

.notification-body p {
  margin-top: 4px;

  color: var(--secondary);

  font-size: 12px;
  line-height: 1.45;
}

.notification-time {
  color: var(--muted);

  font-size: 12px;
}


/* ==================================================
   NOVA AI
================================================== */

.nova-ai-sheet {
  width: 100%;
  height: 75%;

  display: flex;
  flex-direction: column;

  padding: 10px 18px 17px;

  border-radius: 28px 28px 0 0;

  background: var(--cream-light);
}

.nova-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nova-ai-header-left {
  display: flex;
  align-items: center;

  gap: 11px;
}

.nova-ai-logo {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 13px;

  background: var(--black);

  color: white;
}

.nova-ai-header span {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.nova-ai-header h2 {
  margin-top: 3px;

  font-size: 17px;
}

.nova-ai-content {
  flex: 1;

  overflow-y: auto;

  margin-top: 18px;
}

.nova-ai-intro {
  color: var(--secondary);

  font-size: 14px;
  line-height: 1.55;
}

.ai-suggestions {
  display: flex;

  gap: 7px;

  overflow-x: auto;

  margin-top: 14px;
}

.ai-suggestions button {
  min-width: max-content;

  padding: 10px 12px;

  border: 1px solid var(--border);
  border-radius: 100px;

  background: var(--surface, #fff);

  color: var(--secondary);

  font-size: 12px;
  font-weight: 700;
}

.ai-conversation {
  margin-top: 18px;
}

.ai-empty {
  padding: 28px 18px;

  border-radius: 18px;

  background: var(--surface, #fff);

  text-align: center;
}

.ai-empty-icon {
  width: 43px;
  height: 43px;

  display: grid;
  place-items: center;

  margin: auto;

  border-radius: 13px;

  background: var(--black);

  color: white;

  font-size: 15px;
  font-weight: 800;
}

.ai-empty strong {
  display: block;

  margin-top: 13px;

  font-size: 15px;
}

.ai-empty p {
  margin-top: 6px;

  color: var(--muted);

  font-size: 13px;
}

.ai-user-message {
  width: fit-content;
  max-width: 80%;

  margin-left: auto;
  padding: 10px 12px;

  border-radius: 14px 14px 4px 14px;

  background: var(--black);

  color: white;

  font-size: 13px;
}

.ai-response-card {
  margin-top: 10px;
  padding: 14px;

  border: 1px solid var(--border);
  border-radius: 17px;

  background: var(--surface, #fff);
}

.ai-response-label {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.ai-response-card h3 {
  margin-top: 6px;

  font-size: 16px;
}

.ai-response-card > p {
  margin-top: 6px;

  color: var(--secondary);

  font-size: 13px;
  line-height: 1.5;
}

.ai-result-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 10px;

  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid var(--border);
}

.ai-result-item strong {
  font-size: 13px;
}

.ai-result-item span {
  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 12px;
}

.ai-result-status {
  color: var(--orange) !important;

  font-weight: 700;
}

.ai-action-button {
  width: 100%;
  min-height: 39px;

  margin-top: 12px;

  border-radius: 10px;

  background: var(--orange);

  color: white;

  font-size: 13px;
  font-weight: 700;
}

.ai-composer {
  min-height: 60px;

  display: grid;
  grid-template-columns: 1fr 42px;

  align-items: center;

  gap: 8px;

  margin-top: 10px;
  padding-top: 10px;

  border-top: 1px solid var(--border);
}

.ai-composer input {
  height: 44px;

  padding: 0 13px;

  border: 1px solid var(--border);
  border-radius: 12px;

  outline: none;

  background: var(--surface, #fff);

  font-size: 13px;
}

.ai-composer button {
  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background: var(--orange);

  color: white;
}


/* ==================================================
   ESCALATION
================================================== */

.escalation-modal {
  width: 100%;
  max-height: 88%;

  display: flex;
  flex-direction: column;

  padding: 10px 18px 18px;

  border-radius: 26px 26px 0 0;

  background: var(--cream-light);
}

.modal-header {
  display: flex;
  justify-content: space-between;
}

.modal-header span {
  color: var(--orange);

  font-size: 12px;
  font-weight: 800;
}

.modal-header h2 {
  margin-top: 4px;

  font-size: 19px;
}

.modal-scroll {
  overflow-y: auto;

  margin-top: 18px;
}

.modal-field {
  margin-bottom: 19px;
}

.modal-field label {
  display: block;

  margin-bottom: 8px;

  font-size: 14px;
  font-weight: 700;
}

.modal-field select,
.modal-field textarea {
  width: 100%;

  border: 1px solid var(--border-strong);
  border-radius: 13px;

  outline: none;

  background: var(--surface, #fff);

  font-size: 14px;
}

.modal-field select {
  height: 50px;

  padding: 0 12px;
}

.modal-field textarea {
  height: 105px;

  padding: 12px;

  resize: none;
}

.priority-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  gap: 7px;
}

.priority-button {
  min-height: 41px;

  border: 1px solid var(--border);
  border-radius: 11px;

  background: var(--surface, #fff);

  color: var(--secondary);

  font-size: 13px;
  font-weight: 700;
}

.priority-button.active {
  border-color: var(--black);

  color: var(--ink, #111);
}

.modal-field-heading {
  display: flex;
  justify-content: space-between;
}

.ai-summary-button {
  margin-bottom: 8px;

  background: transparent;

  color: var(--orange);

  font-size: 12px;
  font-weight: 700;
}

.modal-footer {
  display: grid;
  grid-template-columns: 1fr 1.5fr;

  gap: 8px;

  padding-top: 12px;

  border-top: 1px solid var(--border);
}

.cancel-button,
.send-escalation-button {
  min-height: 50px;

  border-radius: 13px;

  font-size: 14px;
  font-weight: 700;
}

.cancel-button {
  border: 1px solid var(--border);

  background: var(--surface, #fff);
}

.send-escalation-button {
  background: var(--orange);

  color: white;
}


/* ==================================================
   NAVIGATION
================================================== */

.bottom-nav {
  height: 82px;

  position: absolute;
  z-index: 200;

  left: 10px;
  right: 10px;
  bottom: 14px;

  display: grid;
  grid-template-columns: .9fr 1.5fr 1fr 1.15fr .9fr;

  align-items: center;

  padding: 6px;

  border: 1px solid var(--border);
  border-radius: 22px;

  background: rgba(255,255,255,.97);

  box-shadow:
    0 13px 35px rgba(20,18,15,.11);

  backdrop-filter: blur(20px);
}

.nav-item {
  height: 62px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 6px;

  border-radius: 15px;

  background: transparent;

  color: var(--ink, #111);

  font-size: 12px;
}

.nav-item svg {
  width: 21px;
  height: 21px;
}

.nav-item.active {
  background: var(--orange-soft);

  color: var(--orange);
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

  body {
    background: var(--cream);
  }

  .device-stage {
    min-height: 100dvh;

    padding: 0;
  }

  .device {
    width: 100%;
    height: 100dvh;

    border: none;
    border-radius: 0;

    box-shadow: none;
  }

  .device-camera,
  .device-home-indicator {
    display: none;
  }

  .screen-welcome,
  .screen-login {
    padding-top:
      max(29px, env(safe-area-inset-top));
  }

  .home-scroll,
  .interventions-scroll,
  .messages-scroll,
  .detail-scroll {
    padding-top:
      max(31px, env(safe-area-inset-top));
  }

  .conversation-header {
    padding-top:
      max(20px, env(safe-area-inset-top));
  }

  .bottom-nav {
    bottom:
      max(8px, env(safe-area-inset-bottom));
  }

  .nova-floating-button {
    bottom:
      calc(
        max(8px, env(safe-area-inset-bottom))
        + 92px
      );
  }

}
/* ==================================================
   DOSSIER — INTERVENTION OPÉRATIONNELLE MODERNE
================================================== */

/* Indicateurs de durée */
.operational-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 4px;
  margin-bottom: 12px;
}

.operational-metric {
  min-width: 0;
  padding: 13px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--cream-light);
}

.operational-metric span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.operational-metric strong {
  display: block;
  color: var(--ink, #111);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
}

.operational-metric.overrun {
  border-color: rgba(255, 90, 31, .25);
  background: var(--orange-soft);
}

.operational-metric.overrun strong {
  color: var(--orange);
}

/* Blocs intérieurs */
.operational-block {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--cream-light);
}

.operational-block-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}

.operational-block-head > div {
  min-width: 0;
}

.operational-block-head span {
  display: block;
  margin: 0 0 4px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.2;
}

.operational-block-head strong {
  display: block;
  color: var(--ink, #111);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.35;
}

/* Statuts */
.operational-statuses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.operational-status-button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--white);
  color: var(--secondary);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.operational-status-button.active {
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

/* Checklist */
.operational-checklist {
  display: grid;
  gap: 7px;
}

.operational-check-row {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink, #111);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.35;
  text-align: left;
}

.operational-check-row.done {
  background: var(--cream);
  color: var(--secondary);
}

.operational-check-box {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--white);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
}

.operational-check-row.done .operational-check-box {
  border-color: var(--orange);
  background: var(--orange);
}

/* Matériel */
.materials-list {
  display: grid;
  gap: 7px;
}

.material-row {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--white);
  color: var(--ink, #111);
  font-family: var(--font);
  text-align: left;
}

.material-row > span {
  min-width: 0;
  color: var(--ink, #111);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
}

.material-status {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.material-status.planned {
  background: var(--cream);
  color: var(--secondary);
}

.material-status.used {
  background: #eaf7ef;
  color: #1e8d52;
}

.material-status.missing {
  background: var(--orange-soft);
  color: var(--orange);
}

.operational-hint {
  margin: 9px 1px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Compte rendu */
.operational-report {
  width: 100%;
  min-height: 110px;
  display: block;
  padding: 11px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  outline: none;
  resize: vertical;
  background: var(--white);
  color: var(--ink, #111);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
}

.operational-report::placeholder {
  color: var(--muted);
}

.operational-report:focus {
  border-color: rgba(255, 90, 31, .65);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .08);
}

.operational-inline-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 9px;
}

.operational-inline-actions button {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink, #111);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

.operational-inline-actions button.primary {
  grid-column: 1 / -1;
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

/* Suite à donner */
.operational-two-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.operational-select-field {
  display: block;
}

.operational-select-field > span {
  display: block;
  margin-bottom: 7px;
  color: var(--secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.operational-select-field select {
  width: 100%;
  height: 42px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--border-strong);
  border-radius: 11px;
  outline: none;
  background: var(--white);
  color: var(--ink, #111);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 650;
}

.operational-select-field select:focus {
  border-color: rgba(255, 90, 31, .65);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, .08);
}

/* Icônes du dossier : petites, stables et cohérentes */
.detail-accordion .accordion-icon {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 9px;
}

.detail-accordion .accordion-icon svg {
  width: 14px !important;
  height: 14px !important;
}

.detail-accordion .accordion-trigger > svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}

.detail-accordion .accordion-trigger strong {
  font-size: 16px;
  line-height: 1.25;
}

.detail-accordion .accordion-trigger span {
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 380px) {
  .operational-statuses {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operational-inline-actions {
    grid-template-columns: 1fr;
  }

  .operational-inline-actions button.primary {
    grid-column: auto;
  }
}


/* Suivi intervention, photos et page signature */

    .nova-direct-intervention{
      margin-top:10px;
      padding:14px;
      border:1px solid var(--border);
      border-radius:18px;
      background:var(--white);
    }

    .nova-direct-intervention-heading{
      margin-bottom:12px;
    }

    .nova-direct-intervention-heading>span{
      display:block;
      color:var(--orange);
      font-size: 12px;
      font-weight:800;
      letter-spacing:.07em;
    }

    .nova-direct-intervention-heading h2{
      margin:4px 0 0;
      color: var(--ink, #111);
      font-size: 18px;
      line-height:1.2;
    }

    .nova-direct-intervention-heading p{
      margin:5px 0 0;
      color:var(--muted);
      font-size: 13px;
      line-height:1.45;
    }

    .nova-photo-counter{
      min-width:28px;
      height:28px;
      display:grid;
      place-items:center;
      border-radius:9px;
      background:var(--cream);
      color: var(--ink, #111);
      font-size: 12px;
      font-weight:800;
    }

    .nova-photo-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .nova-photo-button{
      padding:10px;
      min-height:48px;
      border:1px solid var(--border);
      border-radius:10px;
      background:var(--white);
      color: var(--ink, #111);
      font-family:inherit;
      font-size: 12px;
      font-weight:800;
    }

    .nova-photo-button.primary{
      border-color:var(--orange);
      background:var(--orange);
      color:#fff;
    }

    .nova-photo-empty{
      margin-top:9px;
      padding:12px;
      border:1px dashed var(--border-strong);
      border-radius:10px;
      color:var(--muted);
      font-size: 12px;
      text-align:center;
    }

    .nova-photo-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:7px;
      margin-top:9px;
    }

    .nova-photo-item{
      position:relative;
      overflow:hidden;
      aspect-ratio:1;
      border-radius:10px;
      background:var(--cream);
    }

    .nova-photo-item img{
      width:100%;
      height:100%;
      display:block;
      object-fit:cover;
    }

    .nova-photo-item button{
      position:absolute;
      top:5px;
      right:5px;
      width:22px;
      height:22px;
      border:0;
      border-radius:7px;
      background:rgba(17,17,17,.82);
      color:#fff;
      font-size: 16px;
    }

    .nova-signature-sequence{
      display:grid;
      gap:8px;
    }

    .nova-signature-step{
      min-height:88px;
      display:grid;
      grid-template-columns:32px minmax(0,1fr) auto;
      align-items:center;
      gap:9px;
      padding:10px;
      border:1px solid var(--border);
      border-radius:12px;
      background: var(--surface, #fff);
    }

    .nova-signature-step.locked{
      opacity:.48;
    }

    .nova-signature-step.signed{
      border-color:rgba(255,90,31,.25);
    }

    .nova-signature-step-number{
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:var(--cream);
      font-size: 13px;
      font-weight:800;
    }

    .nova-signature-step.signed .nova-signature-step-number{
      background:var(--orange);
      color:#fff;
    }

    .nova-signature-step-copy strong{
      overflow-wrap:anywhere;
      display:block;
      font-size: 13px;
      line-height:1.3;
    }

    .nova-signature-step-copy span{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-size: 12px;
      line-height:1.35;
    }

    .nova-signature-launch{
      min-height:44px;
      padding:0 10px;
      border:0;
      border-radius:9px;
      background:var(--black);
      color:#fff;
      font-family:inherit;
      font-size: 12px;
      font-weight:800;
    }

    .nova-signature-launch.client{
      background:var(--orange);
    }

    .nova-signature-launch:disabled{
      background:var(--cream-dark);
      color:var(--muted);
    }

    .nova-signature-mini-preview{
      width:54px;
      height:30px;
      object-fit:contain;
      border-radius:7px;
      background:var(--cream-light);
    }

    .nova-signature-ok{
      color:var(--orange);
      font-size: 12px;
    }

    .nova-before-close-title{
      margin-top:13px;
      padding-top:12px;
      border-top:1px solid var(--border);
      color:var(--muted);
      font-size: 12px;
      font-weight:800;
      letter-spacing:.04em;
    }

    .nova-close-requirement{
      min-height:44px;
      display:grid;
      grid-template-columns:18px 1fr auto;
      align-items:center;
      gap:7px;
      border-bottom:1px solid var(--border);
      font-size: 12px;
    }

    .nova-close-check{
      width:16px;
      height:16px;
      display:grid;
      place-items:center;
      border:1px solid var(--border-strong);
      border-radius:5px;
      color:#fff;
      font-size: 12px;
      font-weight:800;
    }

    .nova-close-requirement.done .nova-close-check{
      border-color:var(--orange);
      background:var(--orange);
    }

    .nova-close-requirement strong{
      color:var(--muted);
      font-size: 12px;
    }

    .nova-close-requirement.done strong{
      color:var(--orange);
    }

    .nova-final-close{
      width:100%;
      min-height:48px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-top:12px;
      padding:0 13px;
      border:0;
      border-radius:11px;
      background:var(--orange);
      color:#fff;
      font-family:inherit;
      font-size: 13px;
      font-weight:800;
    }

    .nova-final-close:disabled{
      background:var(--cream-dark);
      color:var(--muted);
    }

    .nova-closed-state{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px;
      border-radius:12px;
      background:var(--orange-soft);
      color:var(--orange);
    }

    .nova-closed-state>span{
      font-size: 12px;
      font-weight:800;
    }

    .nova-closed-state>strong{
      color: var(--ink, #111);
      font-size: 13px;
    }

    .nova-signature-page{
      position:absolute;
      z-index:20000;
      inset:0;
      display:none;
      flex-direction:column;
      background:var(--cream-light);
    }

    .nova-signature-page.active{
      display:flex;
    }

    .nova-signature-header{
      flex-shrink:0;
      min-height:78px;
      display:grid;
      grid-template-columns:40px minmax(0,1fr) 40px;
      align-items:center;
      gap:8px;
      padding:18px 16px 12px;
      border-bottom:1px solid var(--border);
      background:var(--cream-light);
    }

    .nova-signature-back{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border:1px solid var(--border);
      border-radius:11px;
      background: var(--surface, #fff);
      color: var(--ink, #111);
    }

    .nova-signature-title{
      text-align:center;
    }

    .nova-signature-title span{
      display:block;
      color:var(--orange);
      font-size: 12px;
      font-weight:800;
      letter-spacing:.08em;
    }

    .nova-signature-title h2{
      margin:3px 0 0;
      font-size: 16px;
      line-height:1.2;
    }

    .nova-signature-content{
      min-height:0;
      flex:1;
      overflow-y:auto;
      padding:18px 17px 28px;
    }

    .nova-signature-person{
      padding:14px;
      border:1px solid var(--border);
      border-radius:16px;
      background: var(--surface, #fff);
    }

    .nova-signature-person>span{
      display:block;
      color:var(--muted);
      font-size: 12px;
      font-weight:800;
      letter-spacing:.07em;
    }

    .nova-signature-person h3{
      margin:4px 0 0;
      font-size: 18px;
    }

    .nova-signature-person p{
      margin:6px 0 0;
      color:var(--secondary);
      font-size: 13px;
      line-height:1.45;
    }

    .nova-signature-recap{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
      margin-top:12px;
    }

    .nova-signature-recap div{
      padding:10px;
      border-radius:11px;
      background:var(--cream-light);
    }

    .nova-signature-recap span{
      display:block;
      color:var(--muted);
      font-size: 12px;
      font-weight:700;
    }

    .nova-signature-recap strong{
      display:block;
      margin-top:3px;
      font-size: 13px;
    }

    .nova-signature-draw{
      margin-top:12px;
      padding:14px;
      border:1px solid var(--border);
      border-radius:16px;
      background: var(--surface, #fff);
    }

    .nova-signature-draw>span{
      display:block;
      color:var(--orange);
      font-size: 12px;
      font-weight:800;
      letter-spacing:.07em;
    }

    .nova-signature-draw h3{
      margin:4px 0 0;
      font-size: 16px;
    }

    .nova-signature-draw p{
      margin:5px 0 12px;
      color:var(--muted);
      font-size: 13px;
    }

    .nova-signature-canvas-wrap{
      position:relative;
      overflow:hidden;
      border:1px solid var(--border-strong);
      border-radius:14px;
      background: var(--surface, #fff);
    }

    #novaFieldSignatureCanvas{
      width:100%;
      height:260px;
      display:block;
      touch-action:none;
      cursor:crosshair;
    }

    .nova-signature-baseline{
      position:absolute;
      left:24px;
      right:24px;
      bottom:40px;
      height:1px;
      background:var(--border-strong);
      pointer-events:none;
    }

    .nova-signature-actions{
      display:grid;
      grid-template-columns:1fr 1.6fr;
      gap:8px;
      margin-top:11px;
    }

    .nova-signature-actions button{
      padding:12px 8px;
      min-height:48px;
      border-radius:11px;
      font-family:inherit;
      font-size: 13px;
      font-weight:800;
    }

    .nova-signature-clear{
      border:1px solid var(--border);
      background: var(--surface, #fff);
      color: var(--ink, #111);
    }

    .nova-signature-validate{
      border:0;
      background:var(--orange);
      color:#fff;
    }

    .nova-signature-validate:disabled{
      background:var(--cream-dark);
      color:var(--muted);
    }

    .nova-signature-success{
      display:none;
      flex:1;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      padding:30px;
      text-align:center;
    }

    .nova-signature-success.active{
      display:flex;
    }

    .nova-signature-success-icon{
      width:58px;
      height:58px;
      display:grid;
      place-items:center;
      border-radius:18px;
      background:var(--orange);
      color:#fff;
      font-size: 23px;
      font-weight:800;
    }

    .nova-signature-success h2{
      margin:16px 0 0;
      font-size: 21px;
    }

    .nova-signature-success p{
      max-width:270px;
      margin:7px auto 0;
      color:var(--secondary);
      font-size: 13px;
      line-height:1.5;
    }

    .nova-signature-success button{
      min-height:45px;
      margin-top:18px;
      padding:0 18px;
      border:0;
      border-radius:11px;
      background:var(--black);
      color:#fff;
      font-family:inherit;
      font-size: 13px;
      font-weight:800;
    }

    #interventionDetailScreen .detail-scroll{
      scroll-behavior:auto!important;
    }

    @media(max-width:380px){
      .nova-photo-actions,
      .nova-signature-actions,
      .nova-signature-recap{
        grid-template-columns:1fr;
      }

      .nova-signature-step{
        grid-template-columns:30px 1fr;
      }

      .nova-signature-launch,
      .nova-signature-mini-preview{
        grid-column:2;
        justify-self:start;
      }
    }


#interventionDetailScreen .detail-scroll { overflow-anchor: none; }
.nova-direct-intervention button:disabled { cursor: default; opacity: .55; }
.nova-direct-intervention textarea:disabled,
.nova-direct-intervention select:disabled { color: var(--ink, #111); opacity: 1; }
.nova-signature-page [hidden] { display: none; }
.action-row.done .action-check { background: var(--orange); }

.intervention-primary-action { margin-top: 14px; min-height: 48px; font-size: 15px; }
.intervention-primary-action:disabled { background: var(--cream); color: var(--secondary); cursor: default; }
/* Confirmation des actions, au-dessus de toutes les pages */
.nova-toast { position: absolute; z-index: 40000; top: 22px; left: 14px; right: 14px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 30px; align-items: start; gap: 10px; padding: 16px 12px 16px 14px; border: 1px solid rgba(255,90,31,.28); border-radius: 18px; background: var(--surface, #fff); color: var(--ink, #111); box-shadow: 0 12px 40px rgba(17,17,17,.2); visibility: hidden; opacity: 0; pointer-events: none; }
.nova-toast.visible { visibility: visible; opacity: 1; }
.nova-feedback-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--orange); color: #fff; font-size: 21px; font-weight: 800; }
.nova-feedback-copy strong { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.nova-feedback-copy p { margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--secondary); overflow-wrap: anywhere; }
.nova-feedback-close { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--cream); color: var(--secondary); pointer-events: auto; }
.nova-toast[data-kind="error"] { border-color: #db8574; }
.nova-toast[data-kind="error"] .nova-feedback-icon { background: #a83118; }

/* Lisibilité et espace pour les libellés */
input, textarea, select { font-size: 16px; }
input:not([type=checkbox]), textarea, select { min-width: 0; }
.operational-report, .operational-select-field select, .conversation-input,
#conversationInput, #messageSearchInput, #aiInput, #email, #password { font-size: 16px; }
.operational-inline-actions button, .operational-status-button { min-height: 44px; }
.nova-closed-state { flex-wrap: wrap; }
.nova-close-requirement { padding: 7px 0; }
.info-row strong, .detail-address, .intervention-address span, .chat-bubble p { overflow-wrap: anywhere; }
.nav-item { min-width: 0; }
.nav-item span { max-width: 100%; font-size: 11px; line-height: 1.3; }
.nova-signature-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
@media (max-width: 380px) {
  .nova-signature-actions { grid-template-columns: 1fr; }
  .nova-close-requirement { grid-template-columns: 18px minmax(0, 1fr); }
  .nova-close-requirement strong { grid-column: 2; }
}

/* Planning — agenda quotidien */
.planning-page { padding-bottom: 24px; }
.planning-month-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 18px; }
.planning-month-row h2 { font-size: 22px; line-height: 1.25; text-transform: capitalize; letter-spacing: -.03em; }
.planning-month-row p { color: var(--secondary); font-size: 13px; margin-top: 4px; }
.planning-today-button { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); font-size: 12px; font-weight: 800; }
.planning-day-navigation { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-bottom: 20px; }
.planning-day-button { min-width: 0; padding: 10px 2px; min-height: 80px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #fff); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.planning-day-button span { font-size: 12px; color: var(--secondary); text-transform: capitalize; }
.planning-day-button strong { font-size: 21px; line-height: 1.4; }
.planning-day-button i { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.planning-day-button.has-events i { background: var(--orange); }
.planning-day-button.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.planning-day-button.active span { color: #fff; }
.planning-day-button.active.has-events i { background: var(--surface, #fff); }
.planning-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.planning-summary > div { padding: 13px 14px; border-radius: 15px; border: 1px solid var(--border); background: var(--cream-light); }
.planning-summary strong { display: block; font-size: 23px; line-height: 1.3; }
.planning-summary span { color: var(--secondary); font-size: 13px; }
.planning-add-button { min-height: 48px; font-size: 14px; margin-bottom: 24px; }
.planning-add-button:disabled { background: var(--cream-dark); color: var(--secondary); cursor: default; }
.planning-agenda-heading { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.planning-agenda-heading h3 { font-size: 19px; letter-spacing: -.02em; }
.planning-agenda-heading span { color: var(--secondary); font-size: 13px; text-transform: capitalize; }
.planning-filters { display: flex; gap: 6px; margin-bottom: 18px; }
.planning-filter { border: 1px solid var(--border); border-radius: 100px; background: var(--surface, #fff); padding: 9px 11px; font-size: 12px; font-weight: 700; }
.planning-filter.active { background: var(--black); border-color: var(--black); color: #fff; }
.planning-slots-list { display: grid; gap: 10px; }
.planning-entry { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; }
.planning-entry-time { display: flex; flex-direction: column; padding-top: 15px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.planning-entry-time small { color: var(--muted); font-size: 12px; font-weight: 500; margin-top: 3px; }
.planning-slot { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 15px; padding: 14px; background: var(--surface, #fff); text-align: left; }
.planning-slot > div { min-width: 0; }
.planning-slot.busy { border-left: 3px solid var(--orange); }
.planning-slot.available { border: 1px dashed var(--border-strong); background: var(--cream-light); }
.planning-slot.break { background: var(--cream-dark); }
.planning-slot:disabled { cursor: default; }
.planning-slot-client { font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.planning-slot-type { margin-top: 4px; color: var(--secondary); font-size: 14px; overflow-wrap: anywhere; }
.planning-slot-status { display: inline-block; font-size: 12px; font-weight: 700; color: var(--secondary); }
.planning-slot.busy .planning-slot-status { color: var(--orange-dark); background: var(--orange-soft); border-radius: 6px; padding: 3px 6px; margin-top: 8px; }
.planning-slot.available strong { display: block; font-size: 14px; }
.planning-slot.available .planning-slot-status { margin-top: 3px; font-weight: 500; }
.planning-slot-action { font-size: 22px; color: var(--orange); }
.planning-empty { padding: 24px 16px; border-radius: 15px; background: var(--surface, #fff); color: var(--secondary); font-size: 14px; text-align: center; }

.next-delay { flex-shrink: 0; white-space: nowrap; }

/* Rendez-vous et destinataires : pages dédiées */
.nova-flow-page { position: absolute; inset: 0; z-index: 9000; display: none; flex-direction: column; background: var(--cream-light); overflow: hidden; }
.nova-flow-page.active { display: flex; }
.nova-flow-header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 32px; gap: 12px; align-items: center; padding: 24px 20px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.nova-flow-header > div > span { color: var(--orange); font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.nova-flow-header h2 { font-size: 20px; line-height: 1.25; margin-top: 3px; letter-spacing: -.03em; }
.nova-flow-brand { font-size: 24px; font-weight: 800; color: var(--orange); text-align: right; }
.nova-flow-form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.nova-flow-scroll { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px; scrollbar-width: thin; }
.nova-flow-intro { margin-bottom: 22px; }
.nova-flow-intro h3, .recipient-top > h3 { font-size: 22px; line-height: 1.25; letter-spacing: -.03em; }
.nova-flow-intro p, .recipient-top > p { margin-top: 8px; color: var(--secondary); font-size: 14px; line-height: 1.55; }
.nova-form-card { padding: 18px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface, #fff); margin-bottom: 16px; }
.nova-form-card > h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 18px; }
.nova-form-card > h3 > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--orange-soft); color: var(--orange); font-size: 12px; }
.nova-form-field { display: block; font-size: 13px; font-weight: 700; color: var(--secondary); margin-top: 15px; }
.nova-form-field input, .nova-form-field textarea, .nova-form-field select { display: block; width: 100%; min-width: 0; min-height: 48px; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--cream-light); color: var(--ink, #111); font: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; }
.nova-form-field textarea { resize: vertical; }
.nova-form-field input:focus, .nova-form-field textarea:focus, .nova-form-field select:focus, .recipient-search:focus-within { outline: 2px solid var(--orange); outline-offset: 2px; }
.nova-form-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nova-form-hint { font-size: 12px; color: var(--secondary); line-height: 1.5; margin-top: 12px; }
.nova-optional { font-size: 12px; color: var(--muted); font-weight: 500; }
#bookingClientDetails { border: 0; padding: 0; margin: 0; min-width: 0; }
#bookingClientDetails:disabled { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nova-segmented { display: flex; padding: 4px; gap: 4px; border: 1px solid var(--border); border-radius: 13px; background: var(--cream); }
.nova-segmented button { flex: 1; min-width: 0; min-height: 43px; padding: 8px; border-radius: 10px; background: transparent; color: var(--secondary); font-size: 13px; font-weight: 700; line-height: 1.3; }
.nova-segmented button.active { background: var(--black); color: #fff; }
.nova-flow-footer { flex-shrink: 0; padding: 12px 20px max(20px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface, #fff); }
.nova-flow-footer > p:first-child { font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--secondary); }
.nova-flow-footer .primary-button { min-height: 50px; font-size: 14px; gap: 12px; }
.nova-flow-footer .primary-button:disabled { background: var(--cream-dark); color: var(--muted); cursor: default; }
.nova-form-error { color: #a83118; font-size: 13px; line-height: 1.4; margin-bottom: 8px; }
.nova-form-error:empty { display: none; }
.recipient-top { padding: 22px 20px 16px; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.recipient-search { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 50px; background: var(--surface, #fff); border: 1px solid var(--border-strong); border-radius: 13px; margin: 18px 0 14px; }
.recipient-search > span { font-size: 25px; color: var(--secondary); }
.recipient-search input { width: 100%; min-width: 0; padding: 12px 0; font-size: 16px; border: 0; background: transparent; outline: none; }
.recipient-group { margin-bottom: 24px; }
.recipient-group h3 { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--secondary); font-weight: 700; margin: 0 2px 10px; }
.recipient-group h3 > span { border-radius: 7px; background: var(--cream); padding: 2px 7px; font-size: 12px; }
.recipient-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 80px; padding: 14px 12px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface, #fff); text-align: left; margin-bottom: 8px; }
.recipient-card:hover { border-color: var(--orange); background: #fffaf7; }
.recipient-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px; background: var(--cream); color: var(--ink, #111); font-size: 14px; font-weight: 800; }
.recipient-avatar.team { color: var(--orange-dark); background: var(--orange-soft); }
.recipient-copy { min-width: 0; flex: 1; }
.recipient-copy strong { display: block; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.recipient-copy > span { display: block; font-size: 12px; color: var(--secondary); margin-top: 4px; overflow-wrap: anywhere; }
.recipient-arrow { flex-shrink: 0; color: var(--muted); }
.recipient-empty { text-align: center; padding: 30px 12px; }
.recipient-empty > span { display: block; font-size: 36px; color: var(--orange); }
.recipient-empty h3 { font-size: 19px; margin: 10px 0 6px; }
.recipient-empty p { color: var(--secondary); font-size: 14px; }
@media (max-height: 600px) {
  .nova-flow-header { padding-top: 12px; padding-bottom: 12px; }
  .recipient-top { padding-top: 12px; }
  .recipient-top > h3 { font-size: 19px; }
  .recipient-top > p { display: none; }
}
@media (max-width: 360px) {
  .nova-flow-header { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .nova-flow-header h2 { font-size: 18px; }
  .nova-flow-scroll, .recipient-top { padding-left: 14px; padding-right: 14px; }
  .nova-form-card { padding: 14px; }
}

/* Photos et informations d’envoi des conversations */
.chat-message-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; }
.chat-message-meta strong { font-size: 12px; font-weight: 700; }
.chat-message-meta span { font-size: 11px; line-height: 1.4; opacity: .8; }
.chat-photo-grid { display: grid; gap: 6px; margin-bottom: 8px; }
.chat-photo { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: var(--cream); max-width: 100%; }
.chat-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.conversation-photo-draft { grid-column: 1 / -1; min-width: 0; }
.conversation-photo-draft[hidden] { display: none; }
.draft-photo-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.draft-photo-heading strong { font-size: 12px; }
.draft-photo-heading span { font-size: 11px; color: var(--secondary); }
.draft-photo-list { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 5px; }
.draft-photo-item { position: relative; flex: 0 0 65px; height: 65px; }
.draft-photo-item img { display: block; width: 100%; height: 100%; border-radius: 10px; object-fit: cover; }
.draft-photo-item button { position: absolute; top: 2px; right: 2px; width: 25px; height: 25px; border-radius: 8px; background: var(--black); color: #fff; font-size: 18px; }
.conversation-messages.with-photo-draft { padding-bottom: 200px; }
.media-gallery-heading { margin-bottom: 22px; }
.media-gallery-heading h3 { font-size: 22px; letter-spacing: -.03em; line-height: 1.3; }
.media-gallery-heading p { margin-top: 7px; color: var(--secondary); font-size: 14px; }
.media-photo-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.media-photo-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface, #fff); }
.media-photo-card button { display: block; width: 100%; aspect-ratio: 1; background: var(--cream); }
.media-photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.media-photo-card > div { padding: 12px; }
.media-photo-card strong { display: block; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.media-photo-card time { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--secondary); }
.media-photo-view { display: grid; place-items: center; min-height: 160px; overflow: hidden; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; }
.media-photo-view img { display: block; max-width: 100%; max-height: 48vh; object-fit: contain; }
.media-photo-details { padding: 18px; margin-top: 16px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 16px; }
.media-photo-details h3 { font-size: 17px; overflow-wrap: anywhere; }
.media-photo-details dl > div { padding-top: 14px; }
.media-photo-details dt { color: var(--secondary); font-size: 12px; }
.media-photo-details dd { margin-top: 4px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.media-return-button { width: 100%; margin-top: 18px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff); font-size: 14px; font-weight: 700; }
.media-empty { text-align: center; padding: 32px 10px; }
.media-empty > span { display: block; color: var(--orange); font-size: 44px; }
.media-empty h3 { font-size: 20px; margin: 12px 0 8px; }
.media-empty p { font-size: 14px; color: var(--secondary); line-height: 1.6; }

.team-note-ack-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink, #111);
  font: inherit;
  font-weight: 700;
}
.team-note-ack-button:disabled { background: transparent; color: var(--ink, #111); opacity: 1; }
.team-note-ack-button:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

/* Accueil et notifications : hiérarchie et navigation */
.screen-login, .screen-welcome { scrollbar-width: none; }
.screen-login::-webkit-scrollbar, .screen-welcome::-webkit-scrollbar { display: none; width: 0; }
.quick-label { margin-top: 9px; color: var(--ink, #111); }
.quick-card strong { width: 100%; margin-top: auto; text-align: center; }
.timeline { counter-reset: nova-step; }
.timeline-item { position: relative; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 24px; min-height: 0; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e8e3dc; }
.timeline-marker { counter-increment: nova-step; position: relative; width: 28px; height: 28px; margin: 0; display: grid; place-items: center; border: 1px solid #e8e3dc; background: var(--cream); color: var(--ink, #111); }
.timeline-marker::after { content: counter(nova-step); font-size: 13px; font-weight: 800; }
.timeline-active .timeline-marker { color: white; }
.timeline-time { display: block; font-size: 18px; line-height: 28px; color: var(--ink, #111); }
.timeline-item p { font-size: 15px; color: var(--ink, #111); }
.appointment { width: 100%; text-align: left; background: transparent; color: var(--ink, #111); grid-template-columns: 48px 2px minmax(0, 1fr) auto; gap: 9px; padding: 14px 0; }
.appointment-time { font-size: 17px; }
.appointment strong, .appointment div span { display: block; }
.appointment div span { margin-top: 4px; }
.appointment:hover { background: rgba(255,255,255,.6); }
.appointment:focus-visible, .quick-card:focus-visible, .notification-item:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.appointment-status.status-pending { color: #815100; background: #fff0c9; }
.appointment-status.status-upcoming { color: #2456a6; background: #e8f0ff; }
.team-note, .team-note-header, .team-note p { color: white; }
.team-note-ack-button { width: 100%; justify-content: center; margin-top: 18px; padding: 12px 14px; border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #111); }
.team-note-ack-button:disabled { background: transparent; border: 1px solid rgba(255,255,255,.65); color: white; opacity: 1; }
.team-note-ack-button:focus-visible { outline-color: white; }
.notifications-panel { height: 90%; max-height: 90%; display: flex; flex-direction: column; padding: 12px 20px 24px; background: var(--cream-light); }
.notifications-panel > .panel-handle { flex-shrink: 0; }
.notifications-panel-header { align-items: center; }
.notifications-panel-header h2 { font-size: 28px; letter-spacing: -.04em; }
.notifications-panel-header .panel-close-button { width: 44px; height: 44px; font-size: 26px; flex-shrink: 0; }
.notification-actions-row { gap: 12px; margin-top: 22px; padding-bottom: 18px; }
.notification-actions-row span { font-size: 15px; color: var(--ink, #111); }
.notification-actions-row button { padding: 10px 14px; border-radius: 100px; background: var(--black); color: white; font-size: 14px; min-height: 40px; }
.notification-actions-row button:disabled { opacity: .45; }
.notifications-list { min-height: 0; flex: 1; max-height: none; margin-top: 0; padding: 16px 0 4px; scrollbar-width: none; }
.notifications-list::-webkit-scrollbar { display: none; }
.notification-group-label { margin-bottom: 12px; font-size: 14px; font-weight: 700; color: var(--secondary); }
.notification-item { width: 100%; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 12px; margin-bottom: 12px; padding: 16px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface, #fff); color: var(--ink, #111); text-align: left; }
.notification-item.unread { border-color: #ffd5c4; }
.notification-icon svg { width: 20px; height: 20px; }
.notification-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: space-between; font-size: 12px; color: var(--secondary); line-height: 1.5; }
.notification-meta time { font-weight: 700; color: var(--ink, #111); }
.notification-body strong { margin-top: 7px; font-size: 16px; line-height: 1.4; }
.notification-description { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; }
.notification-link { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14px; font-weight: 800; color: var(--orange-dark); }
@media (max-width: 360px) {
  .appointment { grid-template-columns: 46px 2px minmax(0, 1fr); }
  .appointment-status { grid-column: 3; justify-self: start; }
  .notifications-panel { padding-left: 14px; padding-right: 14px; }
}

/* Parcours terrain guidé */
.home-header h1 { font-size: clamp(29px, 7.7vw, 34px); line-height: 1.15; letter-spacing: -.05em; }
.home-date { color: var(--ink, #111); font-size: 14px; }
.home-header > div:first-child { min-width: 0; }
.home-header-actions { flex-shrink: 0; }
.home-header { gap: 10px; }
.timeline-item { padding-bottom: 28px; grid-template-columns: 30px minmax(0,1fr); }
.timeline-marker { width: 30px; height: 30px; border: 1px solid #d9d6d1; background: var(--surface, #fff); color: var(--ink, #111); }
.timeline-item:not(:last-child)::before { left: 14px; top: 30px; }
.timeline-active .timeline-marker { background: var(--orange); border: 3px solid white; box-shadow: 0 0 0 2px var(--orange); color: white; }
.timeline-time { font-size: 19px; line-height: 30px; }
.timeline-item strong { font-size: 17px; margin-top: 2px; }
.notifications-panel { transform: none; }
#notificationsOverlay.active .notifications-panel { animation: none; }
#notificationsOverlay { overscroll-behavior: contain; }
.operational-block, .operational-block-head > div, .operational-metric, .material-row > div, .nova-signature-step-copy { min-width: 0; overflow-wrap: anywhere; }
.operational-block button, .nova-photo-button, .operational-status-button { min-height: 44px; height: auto; white-space: normal; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.operational-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.operational-inline-actions button { flex: 1 1 110px; padding: 11px 12px; }
.operational-inline-actions [data-report-voice] { flex: 0 0 44px; width: 44px; padding: 10px; }
.operational-statuses { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.operational-status-button { padding: 10px 7px; font-size: 14px; }
.operational-check-row { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 10px; align-items: start; }
.operational-check-row > button { grid-column: 2; justify-self: start; border-radius: 9px; padding: 8px 12px; background: var(--cream); font-size: 14px; }
.operational-check-row small, .material-row small { display: block; font-size: 13px; color: var(--secondary); margin-top: 5px; }
.material-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.material-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.material-actions button { padding: 8px 12px; border-radius: 10px; background: var(--cream); font-size: 14px; }
.material-actions [data-order-piece] { background: var(--orange-soft); color: #a83108; }
.status-context { padding: 12px; border-radius: 12px; background: var(--cream); margin-bottom: 14px; }
[data-pause-timer] { font-variant-numeric: tabular-nums; white-space: nowrap; }
#novaOperationalForm label { display: grid; gap: 8px; margin: 16px 0; font-size: 15px; font-weight: 700; }
#novaOperationalForm input, #novaOperationalForm textarea, #novaReportDraft { width: 100%; max-width: 100%; padding: 13px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface, #fff); color: var(--ink, #111); }
#novaReportDraft { margin: 16px 0; font-size: 16px; line-height: 1.6; }
.action-error { color: #b12b20; }
.quick-card { align-items: center; text-align: center; }
.quick-card strong { display: flex; align-items: center; justify-content: center; flex: 1; margin-top: 8px; }
.nova-photo-actions, .operational-grid { min-width: 0; }
.nova-photo-actions > * { min-width: 0; }
.nova-signature-step { flex-wrap: wrap; }
@media (max-width:360px) {
  .home-header { flex-wrap: wrap; }
  .home-header-actions { margin-left: auto; }
  .operational-block { padding: 15px; }
  .nova-close-requirement { grid-template-columns: 22px minmax(0,1fr); }
  .nova-close-requirement > strong { grid-column: 2; }
}
.timeline-done .timeline-marker { background: #24a866; color: white; border-color: #24a866; }
.timeline-done .timeline-marker::after { content: '✓'; }
.timeline-done:not(:last-child)::before { background: #24a866; }
.operational-statuses { display: flex; flex-wrap: wrap; }
.operational-status-button { flex: 1 1 100px; overflow-wrap: normal; word-break: normal; }
.operational-block button { overflow-wrap: normal; word-break: normal; }
.operational-check-row.done { color: var(--ink, #111); }

/* Navigation persistante et surfaces sans bordure */
:root { --muted: #111; --secondary: #111; --border: transparent; --border-strong: transparent; }
.app :where(article, section, div, button) { border-color: transparent; }
.screen { min-height: 0; }
.screen.active { position: absolute; inset: 0; }
.home-scroll, .interventions-scroll, .messages-scroll, .detail-scroll { min-height: 0; padding-bottom: 122px; }
.navigation-slot { position: absolute; inset: auto 0 0; height: 105px; z-index: 600; pointer-events: none; flex-shrink: 0; }
.navigation-slot .bottom-nav { pointer-events: auto; }
.generic-content { padding-bottom: 120px; }
.conversation-messages { min-height: 0; }
.conversation-composer { margin-bottom: 110px; flex-shrink: 0; }
.nova-flow-page:not(.nova-modal-flow) { padding-bottom: 108px; }
.nova-flow-scroll { scrollbar-width: none; }
.nova-flow-scroll::-webkit-scrollbar { display: none; }
.booking-minimal-header { padding: 18px 20px 0; flex-shrink: 0; }
.is-planning .generic-header { display: block; }
.is-planning #genericBack, .is-planning #genericLabel, .is-planning .generic-header > div:last-child { display: none; }
.is-planning .generic-header > div { text-align: left; }
.is-planning #genericTitle { font-size: 36px; line-height: 1.2; }
.nova-modal-flow { background: rgba(17,17,17,.38); padding: 20px; justify-content: center; align-items: center; backdrop-filter: blur(3px); }
.nova-modal-card { display: flex; flex-direction: column; width: 100%; max-height: 90%; min-height: 0; border-radius: 24px; background: var(--cream-light); overflow: hidden; box-shadow: 0 18px 60px #0002; }
.nova-modal-card .nova-flow-header { padding: 18px; grid-template-columns: 38px minmax(0,1fr); }
.nova-modal-card .nova-flow-brand { display: none; }
.nova-modal-card .nova-flow-scroll { padding: 0 18px 22px; flex: 1 1 auto; }
.month-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.month-controls h2 { font-size: 21px; text-transform: capitalize; text-align: center; }
.month-controls button { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: var(--surface, #fff); }
.month-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 5px; padding: 14px 10px; border-radius: 20px; background: var(--surface, #fff); }
.month-weekday { text-align: center; font-size: 13px; padding-bottom: 8px; }
.month-day { position: relative; min-height: 39px; display: grid; place-items: center; background: transparent; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--ink, #111); }
.month-day.today { background: var(--orange-soft); }
.month-day.selected { background: var(--orange); color: white; }
.month-day i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: currentColor; bottom: 3px; }
.planning-month-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0; }
.planning-month-row p { font-size: 13px; }
.planning-summary { margin-top: 10px; }
.month-day:focus-visible, .month-controls button:focus-visible { outline: 2px solid var(--black); }
/* Messagerie et notes d’équipe */
.messages-header { align-items: center; }
.messages-header h1 { font-size: 34px; }
.messages-header p { font-size: 14px; margin-top: 5px; }
.messages-header-actions { gap: 8px; flex-shrink: 0; }
.message-top-action { width: 42px; height: 42px; display: grid; place-items: center; }
#teamNotes { margin: 24px 0; }
.notes-heading { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.notes-heading strong { font-size: 16px; }
.notes-heading > span { font-size: 12px; }
.notes-strip { display: flex; gap: 14px; align-items: end; padding: 15px 0 6px; overflow-x: auto; scrollbar-width: none; }
.note-bubble { flex: 0 0 92px; max-width: 110px; display: flex; flex-direction: column; align-items: center; gap: 7px; background: transparent; }
.note-circle { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--orange-soft); color: var(--ink, #111); font-size: 16px; font-weight: 800; }
.note-add .note-circle { background: var(--orange); color: white; font-size: 30px; }
.note-bubble strong { font-size: 13px; }
.note-preview { position: relative; padding: 10px; border-radius: 15px; background: var(--surface, #fff); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.notes-help { min-width: 180px; font-size: 13px; padding-bottom: 15px; }
#messageReadFilters { display: flex; gap: 8px; margin: 12px 0; }
#messageReadFilters[hidden] { display: none; }
#messageReadFilters button { padding: 10px 14px; border-radius: 100px; background: var(--surface, #fff); color: var(--ink, #111); font-size: 14px; }
#messageReadFilters button.active { background: var(--black); color: white; }
.message-filter-button.active { background: var(--orange-soft); }
.conversation-card { padding: 18px 14px; border-radius: 20px; gap: 12px; background: var(--surface, #fff); min-width: 0; }
.conversation-card.is-unread { background: #fff0e4; }
.conversation-card.is-unread .conversation-center strong { font-weight: 850; }
.conversation-card.is-read .conversation-center strong { font-weight: 550; }
.conversation-center { min-width: 0; }
.conversation-center > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-avatar { flex-shrink: 0; background: var(--cream); }
.conversation-card.is-unread .conversation-avatar { background: var(--orange); color: white; }
.conversation-right { flex-shrink: 0; gap: 5px; }
.conversation-right small { font-size: 11px; }
.messages-empty { padding: 25px 15px; background: var(--surface, #fff); border-radius: 18px; text-align: center; }
#novaTeamNoteForm label { display: block; margin: 12px 0; font-weight: 700; }
#teamNoteText { width: 100%; padding: 14px; border: 0; border-radius: 14px; background: var(--surface, #fff); resize: vertical; }
#novaTeamNoteForm .primary-button { margin-top: 18px; }
.shared-note-text { padding: 18px; border-radius: 16px; background: var(--surface, #fff); font-size: 20px; overflow-wrap: anywhere; }
.note-delete { margin-top: 20px; padding: 12px 16px; background: var(--surface, #fff); border-radius: 12px; }
@media(max-width:360px) { .nova-modal-flow { padding: 10px; } .month-calendar { gap: 2px; padding: 12px 6px; } .month-day { min-height: 36px; } .messages-header { flex-wrap: wrap; gap: 14px; } }
.app :where(article, section, div, button) { border-style: none !important; }
.app :where(input, textarea, select) { border: 0; }
.app ::placeholder { color: var(--ink, #111); opacity: 1; }
.conversation-card { width: 100%; grid-template-columns: 48px minmax(0,1fr) 48px; }
.conversation-center > strong, .conversation-center > span { display: block; overflow: hidden; text-overflow: ellipsis; }
.conversation-center > strong { font-size: 16px; line-height: 1.35; }
.conversation-center > span { margin-top: 6px; font-size: 14px; }
.conversation-right { min-width: 0; align-items: flex-end; }
.nova-signature-page { padding-bottom: 108px; }
.nova-signature-content, .nova-signature-success { min-height: 0; overflow-y: auto; }
:root { --surface: #fff; --ink: #111; }
.nova-profile-page { display: grid; gap: 20px; padding-bottom: 16px; }
.profile-setting-card { padding: 20px; border-radius: 22px; background: var(--surface); }
.profile-setting-card h2 { font-size: 20px; margin-bottom: 12px; }
.profile-setting-card label, #novaProfileForm label { display: grid; gap: 8px; margin: 16px 0; font-size: 15px; font-weight: 700; }
.profile-setting-card select, #novaProfileForm input, #novaProfileForm select, #novaProfileForm textarea { width: 100%; min-width: 0; min-height: 44px; border: 0; border-radius: 12px; padding: 12px; background: var(--cream); color: var(--ink); }
.profile-edit { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 14px; margin-top: 12px; border-radius: 12px; background: var(--orange-soft); font-size: 14px; color: var(--ink); }
.availability-request { margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--cream); overflow-wrap: anywhere; }
.availability-request p, .availability-request small { display: block; margin-top: 5px; font-size: 13px; }
.profile-logout-button { min-height: 44px; height: auto; padding: 12px; margin: 0; text-align: center; display: flex; justify-content: center; align-items: center; font-size: 15px; }
.is-profile .generic-header { display: block; }
.is-profile #genericBack, .is-profile #genericLabel, .is-profile .generic-header > div:last-child { display: none; }
.is-profile .generic-header > div { text-align: left; }
.is-profile #genericTitle { font-size: 36px; }
.primary-button { min-height: 48px; height: auto; padding: 13px 16px; justify-content: center; align-items: center; text-align: center; gap: 12px; }
.primary-button > span:first-child { flex: 1; text-align: center; }
.primary-button > svg { flex-shrink: 0; }
#novaConversationMedia .nova-flow-header { grid-template-columns: 42px minmax(0,1fr); }
.intervention-main-card .nova-direct-intervention { padding: 0; margin-top: 24px; background: transparent; }
#interventionQuickControls { position: absolute; bottom: 106px; left: 12px; right: 12px; z-index: 650; display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 16px; background: var(--surface); box-shadow: 0 6px 25px #0002; }
#interventionQuickControls > div { flex: 1; min-width: 0; }
#interventionQuickControls small { display: block; font-size: 11px; }
#interventionQuickControls strong { font-size: 16px; font-variant-numeric: tabular-nums; }
#interventionQuickControls button { min-height: 40px; padding: 8px 10px; background: var(--orange-soft); color: var(--ink); border-radius: 10px; font-size: 13px; }
#interventionDetailScreen .detail-scroll { padding-bottom: 235px; }
#globalNova { z-index: 9500; width: 54px; height: 48px; right: 18px; bottom: 111px; font-size: 13px; font-weight: 800; }
#globalNova[hidden] { display: none; }
#globalNova.in-dossier { bottom: 183px; }
#novaAiOverlay { z-index: 11000; }
.copilot-context { padding: 16px; background: var(--surface); border-radius: 18px; }
.copilot-context > span { font-size: 11px; }
.copilot-context h3 { font-size: 22px; margin-top: 8px; }
.copilot-context p { margin-top: 8px; font-size: 14px; }
.copilot-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.copilot-actions button { padding: 12px; min-height: 44px; background: var(--cream); color: var(--ink); border-radius: 12px; font-size: 14px; }
html[data-theme="dark"] { color-scheme: dark; --ink:#f5f3ef; --text:#f5f3ef; --muted:#f5f3ef; --secondary:#f5f3ef; --surface:#262626; --white:#262626; --cream:#161616; --cream-light:#1c1c1c; --cream-dark:#353535; --orange-soft:#412a20; --orange-dark:#ffad85; }
html[data-theme="dark"] .bottom-nav { background:#262626; }
html[data-theme="dark"] .conversation-card.is-unread { background:#3c291f; }
html[data-theme="dark"] .nova-toast { background:#262626; color:var(--ink); }
html[data-theme="dark"] .appointment-status.status-pending { background:#463719; color:#ffe1a1; }
html[data-theme="dark"] .appointment-status.status-upcoming { background:#20354e; color:#b6d5ff; }
html[data-theme="dark"] .timeline-marker { color:var(--ink); }
html[data-theme="dark"] .nova-signature-canvas-wrap, html[data-theme="dark"] #novaFieldSignatureCanvas { background: var(--surface, #fff); }
html[data-theme="dark"] .nova-signature-canvas-wrap { color:#111; }
html[data-theme="dark"] .note-preview, html[data-theme="dark"] .nova-photo-empty { background:var(--surface); color:var(--ink); }
html[data-theme="dark"] .device { border-color:#070707; }
html[data-theme="dark"] .period-tab, html[data-theme="dark"] .status-tab, html[data-theme="dark"] .day-overview, html[data-theme="dark"] .completed-card { background:var(--surface); }
html[data-theme="dark"] .period-tab.active { background:var(--orange); }
html[data-theme="dark"] .message-type-switch, html[data-theme="dark"] .message-type-tabs, html[data-theme="dark"] .status-upcoming { background:var(--cream-dark); }
html[data-theme="dark"] .waiting-reason, html[data-theme="dark"] .status-pending { background:#463719; color:#ffe1a1; }
html[data-theme="dark"] .material-status.used, html[data-theme="dark"] .permission-ok { background:#193b2b; color:#a3e8bb; }
html[data-theme="dark"] .recipient-card:hover, html[data-theme="dark"] .appointment:hover { background:var(--cream-dark); }
html[data-theme="dark"] .nova-signature-canvas-wrap, html[data-theme="dark"] #novaFieldSignatureCanvas { background:#fff; }
html[data-theme="dark"] .login-status.error, html[data-theme="dark"] .action-error { color:#ffaaa0; }
#globalNova { z-index:30000; }
#novaAiOverlay { z-index:31000; }

/* Fond continu de Messages et repères du stepper */
.messages-screen { background: var(--cream); }
.messages-scroll { width: 100%; min-width: 0; background: inherit; overscroll-behavior-y: contain; }
#globalNova { width: 52px; height: 52px; display: grid; place-items: center; }
.app .timeline-marker { border: 1px solid #bbb6ae !important; border-radius: 50%; }
.app .timeline-active .timeline-marker { border: 3px solid var(--surface) !important; }
.app .timeline-done .timeline-marker { border-color: var(--green) !important; }
html[data-theme="dark"] .timeline-marker { border-color: #aaa !important; }
html[data-theme="dark"] .timeline-active .timeline-marker { border-color: var(--surface) !important; }
html[data-theme="dark"] .timeline-done .timeline-marker { border-color: var(--green) !important; }

/* Notes sous les avatars et filtre de statut sélectionné */
.notes-strip { align-items: flex-start; }
.notes-help { align-self: center; }
.note-bubble .note-preview { padding: 0; border-radius: 0; background: transparent; color: var(--ink); font-size: 13px; line-height: 1.4; text-align: center; }
.status-tab.active, html[data-theme="dark"] .status-tab.active { background: var(--orange); color: #fff; font-weight: 800; }
.status-tab.active .status-mini-dot { background: currentColor; }

/* Actions auparavant affichées avec le bouton gris natif du navigateur. */
.nova-action-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--orange);
  color: #111;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
  text-align: center;
}
.nova-action-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nova-action-cta:disabled { opacity: .55; cursor: default; }

/* Bulle Nova déplaçable sans faire défiler la page. */
#globalNova { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; }
#globalNova.dragging { cursor: grabbing; }
#globalNova:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }