@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;700;800;900&display=swap');

/* ─────────────────────────────────────────
   TOKENS — palette DarumaTeam
   ───────────────────────────────────────── */
:root {
  --bg:     #0F1117;
  --card:   #1A1D26;
  --border: #2A2D3A;
  --orange: #E8580A;
  --text:   #F0F2F8;
  --muted:  #6B7280;
  --green:  #22C55E;
  --red:    #EF4444;
  --blue:   #3B82F6;
  --yellow: #F59E0B;
}

/* ─────────────────────────────────────────
   RESET
   ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

input, textarea {
  outline: none;
}

/* ─────────────────────────────────────────
   BASE
   ───────────────────────────────────────── */
html, body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────
   LAYOUT — conteneur mobile-first
   ───────────────────────────────────────── */
.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px 90px;
}

/* ─────────────────────────────────────────
   CARTE standard
   ───────────────────────────────────────── */
.card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 20px;
}

/* ─────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────── */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.35s ease both;
}

/* ─────────────────────────────────────────
   AUTH — écrans de connexion (3 étapes)
   ───────────────────────────────────────── */

:root {
  --current-team-color: var(--orange); /* fallback ; valeur reelle posee en inline style sur .auth-screen par le serveur */
}

.auth-screen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.auth-screen__brand,
.auth-screen__header {
  text-align: center;
  margin-bottom: 40px;
}

.auth-screen__brand-title {
  font-size: clamp(40px, 12vw, 64px);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 1;
}

.brand--orange {
  color: var(--orange);
}

.auth-screen__subtitle {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.auth-screen__icon {
  font-size: 44px;
  display: block;
  margin-bottom: 8px;
}

.auth-screen__team-name {
  font-weight: 900;
  font-size: 28px;
}

/* Grille équipes */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 480px;
}

.team-card {
  border-radius: 16px;
  padding: 20px 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  border: 2px solid;
  animation: fadeIn 0.3s ease both;

  &:hover {
    opacity: 0.85;
  }
}

.team-card--boss {
  grid-column: 1 / -1;
}

.team-card__icon {
  display: block;
}

.team-card__label {
  display: block;
}

/* Liste utilisateurs */
.user-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
}

.user-card {
  border-radius: 16px;
  padding: 22px 20px;
  cursor: pointer;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 2px;
  text-decoration: none;
  display: block;
  text-align: center;
  border: 2px solid;

  &:hover {
    opacity: 0.85;
  }
}

/* Bouton retour */
.btn-back {
  position: absolute;
  top: 20px;
  left: 20px;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 28px;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;

  &:hover {
    color: var(--text);
  }
}

/* Pavé PIN — en-tête */
.pin-header {
  text-align: center;
  margin-bottom: 40px;
}

.pin-header__icon {
  font-size: 44px;
  display: block;
  margin-bottom: 8px;
}

.pin-header__name {
  font-weight: 900;
  font-size: 26px;
}

.pin-header__title {
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 1px;
  margin-top: 6px;
}

.pin-header__hint {
  color: var(--orange);
  font-size: 13px;
  margin-top: 4px;
  opacity: 0.6;
}

/* Indicateurs dots */
.pin-dots {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
}

.pin-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  border: 2px solid var(--border);
  transition: all 0.15s;
}

.pin-dot--filled {
  background: var(--current-team-color);
  border-color: var(--current-team-color);
}

.pin-dot--error {
  background: var(--red);
  border-color: var(--red);
}

/* Message d'erreur PIN */
.pin-error {
  color: var(--red);
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 20px;
  min-height: 24px;
  text-align: center;
}

/* Grille touches */
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 280px;
}

.pin-key {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 18px 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;

  &:active {
    opacity: 0.7;
  }
}

.pin-key--delete {
  background: color-mix(in srgb, var(--orange) 22%, transparent);
  border-color: var(--orange);
  color: var(--orange);
  font-size: 22px;
}

.pin-key--empty {
  background: transparent;
  border: none;
  cursor: default;

  &:active {
    opacity: 1;
  }
}

/* ─────────────────────────────────────────
   SHELL / NAV — layout connecté
   ───────────────────────────────────────── */

/* Header sticky */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo */
.app-logo__wordmark {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1.1;
}

.app-logo__daruma {
  color: var(--orange);
}

.app-logo__team-word {
  color: var(--text);
}

.app-logo__sub {
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
  /* couleur posée en inline style (team color dynamique) */
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-notifications {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--yellow) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 42%, var(--border));
  border-radius: 8px;
  color: var(--yellow);
  font-size: 18px;
  cursor: pointer;

  &[data-state="enabled"] {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border-color: color-mix(in srgb, var(--green) 42%, var(--border));
    color: var(--green);
  }

  &[data-state="blocked"],
  &[data-state="unsupported"] {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    border-color: color-mix(in srgb, var(--red) 35%, var(--border));
    color: var(--red);
  }

  &:disabled {
    cursor: default;
    opacity: 0.55;
  }
}

/* Bouton CHANGER */
.btn-changer {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;

  &:hover {
    color: var(--text);
    border-color: var(--muted);
  }

  &:active {
    opacity: 0.7;
  }
}

/* button_to génère un <form> wrapper — on le neutralise visuellement */
.btn-changer-form {
  display: flex;
  align-items: center;
}

/* Barre d'onglets basse */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 8px 4px 12px;
  z-index: 100;
}

/* Onglet individuel */
.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  border-top: 2px solid transparent;
  position: relative;
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  cursor: pointer;
  letter-spacing: 0.3px;

  &:hover {
    color: var(--text);
  }
}

.nav-tab__icon {
  font-size: 20px;
  line-height: 1;
}

.nav-tab__label {
  display: block;
}

/* Onglet actif */
.nav-tab--active {
  color: var(--team-color);
  border-top-color: var(--team-color);
}

/* Badge compteur (câblé Phase 3/5) */
.nav-badge {
  position: absolute;
  top: 0;
  right: 10%;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
}

/* Titres de modules (stubs phase 2) */
.screen-title {
  font-weight: 900;
  font-size: 24px;
  color: var(--orange);
  margin-bottom: 16px;
}

.screen-stub {
  color: var(--muted);
  font-size: 14px;
}

.app-flash {
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--border);
}

.app-flash--notice {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
  border-color: color-mix(in srgb, var(--green) 38%, var(--border));
}

.app-flash--alert {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 38%, var(--border));
}

/* ─────────────────────────────────────────
   SPLASH — écran d'accueil marque
   ───────────────────────────────────────── */
.splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;

  & .splash__brand {
    text-align: center;
    animation: fadeIn 0.4s ease both;

    & .splash__title {
      font-size: clamp(52px, 14vw, 80px);
      font-weight: 900;
      letter-spacing: 4px;
      line-height: 1;

      & .splash__daruma {
        color: var(--orange);
      }

      & .splash__team {
        color: var(--text);
      }
    }

    & .splash__subtitle {
      margin-top: 12px;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--muted);
    }
  }
}

/* ─────────────────────────────────────────
   ACCESSIBILITÉ — sr-only
   ───────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─────────────────────────────────────────
   FORMULAIRES — champs communs
   ───────────────────────────────────────── */
.form-group {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 16px;
  font-family: 'Barlow Condensed', sans-serif;
  appearance: none;

  &::placeholder {
    color: var(--muted);
    opacity: 0.7;
  }

  &:focus {
    border-color: var(--orange);
  }
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.form-error {
  color: var(--red);
  font-size: 13px;
  margin-top: 4px;
  font-weight: 700;
}

/* Champ + bouton micro côte à côte */
.form-field-with-mic {
  display: flex;
  gap: 8px;
  align-items: flex-start;

  & .form-input,
  & textarea.form-input {
    flex: 1;
  }
}

/* ─────────────────────────────────────────
   BOUTON PRIMAIRE (orange plein)
   ───────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-decoration: none;

  &:hover {
    opacity: 0.88;
  }

  &:active {
    opacity: 0.75;
  }
}

.btn-primary--full {
  width: 100%;
  border-radius: 12px;
  padding: 16px;
  font-size: 20px;
  margin-top: 8px;
}

/* ─────────────────────────────────────────
   DICTATION — bouton micro
   ───────────────────────────────────────── */
.btn-dictation {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--orange) 22%, transparent);
  border: 1.5px solid var(--orange);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--orange);
  font-size: 18px;
  cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;

  &:active {
    opacity: 0.75;
  }
}

.btn-dictation.dictation--active {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  border-color: var(--red);
  color: var(--red);
}

.btn-dictation.dictation--fallback {
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  border-color: var(--blue);
  color: var(--blue);
}

.btn-dictation.dictation--error {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  border-color: var(--red);
  color: var(--red);
}

/* ─────────────────────────────────────────
   MODALE — <dialog> natif
   ───────────────────────────────────────── */
.app-dialog {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  padding: 0;
  margin: auto;
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;

  &::backdrop {
    background: rgba(0, 0, 0, 0.65);
  }
}

.app-dialog__header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.app-dialog__title {
  font-weight: 800;
  font-size: 20px;
  color: var(--orange);
}

.app-dialog__close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  font-family: 'Barlow Condensed', sans-serif;

  &:hover {
    color: var(--text);
  }
}

.app-dialog__body {
  padding: 20px;
}

/* ─────────────────────────────────────────
   PHOTO VIEWER — composant partagé
   ───────────────────────────────────────── */
.photo-viewer-trigger {
  appearance: none;
  background: none;
  border: 0;
  border-radius: 10px;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  line-height: 0;
  padding: 0;
  position: relative;
  text-align: inherit;

  &:active {
    opacity: 0.8;
  }
}

.photo-viewer-trigger--block {
  width: 100%;
  margin-top: 8px;
}

.photo-viewer-trigger--thumb,
.photo-viewer-trigger--fill {
  flex-shrink: 0;
}

.photo-viewer-trigger--fill {
  width: 100%;
}

.photo-viewer-trigger__caption {
  position: absolute;
  left: 2px;
  top: 2px;
  background: var(--green);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}

.photo-viewer-dialog {
  background: #05070B;
  border: 0;
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  height: 100dvh;
  margin: 0;
  max-height: none;
  max-width: none;
  padding: 0;
  width: 100vw;

  &::backdrop {
    background: rgba(0, 0, 0, 0.82);
  }
}

.photo-viewer-dialog__bar {
  align-items: center;
  background: rgba(15, 17, 23, 0.94);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 14px;
}

.photo-viewer-dialog__title {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.photo-viewer-dialog__actions {
  align-items: center;
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.photo-viewer-dialog__open {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  padding: 8px 10px;
  text-decoration: none;
}

.photo-viewer-dialog__close {
  align-items: center;
  background: var(--orange);
  border: 0;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px;
  font-weight: 400;
  height: 36px;
  justify-content: center;
  line-height: 1;
  padding: 0 0 3px;
  width: 36px;
}

.photo-viewer-dialog__body {
  align-items: center;
  display: flex;
  height: calc(100dvh - 58px);
  justify-content: center;
  padding: 12px;
}

.photo-viewer-dialog__body img {
  display: block;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* ─────────────────────────────────────────
   BADGE NAV — disparaît quand vide
   ───────────────────────────────────────── */
.nav-badge:empty {
  display: none;
}

/* ─────────────────────────────────────────
   FILTRE BOSS — sélecteur par équipier
   ───────────────────────────────────────── */
.boss-filter {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.boss-filter__label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.boss-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.boss-filter__chip {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.boss-filter__chip--active {
  color: var(--orange);
  border-color: var(--orange);
}

/* ─────────────────────────────────────────
   RAPPELS — header + sections
   ───────────────────────────────────────── */
.reminders-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.reminders-header .screen-title {
  margin-bottom: 0;
}

.reminder-section {
  margin-bottom: 20px;
}

.reminder-section__title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;

  &.reminder-section__title--red    { color: var(--red); }
  &.reminder-section__title--yellow { color: var(--yellow); margin-top: 14px; }
  &.reminder-section__title--green  { color: var(--green); margin-top: 14px; }
}

.reminders-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 18px;
}

/* ─────────────────────────────────────────
   RAPPELS — carte
   ───────────────────────────────────────── */
.reminder-card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 12px;
  border-left-width: 4px;
  border-left-style: solid;

  &.reminder-card--overdue  { border-left-color: var(--red); }
  &.reminder-card--due_today { border-left-color: var(--yellow); }
  &.reminder-card--pending  { border-left-color: var(--green); }
  &.reminder-card--done     { border-left-color: var(--muted); }
}

.reminder-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
}

.reminder-card__info {
  flex: 1;
  min-width: 0;
}

.reminder-card__client {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}

.reminder-card__subject {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px;
}

.reminder-card__equipier {
  color: var(--orange);
  font-size: 13px;
  margin-top: 4px;
}

.reminder-card__note {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}

.reminder-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

/* Bouton d'action coloré partagé */
.btn-call,
.btn-done,
.btn-report {
  flex: 1;
  border-radius: 10px;
  padding: 12px 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1.5px solid;

  &:active {
    opacity: 0.75;
  }
}

.btn-call {
  background: color-mix(in srgb, var(--green) 22%, transparent);
  border-color: var(--green);
  color: var(--green);
}

.btn-done {
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  border-color: var(--blue);
  color: var(--blue);
}

.btn-report {
  background: color-mix(in srgb, var(--orange) 22%, transparent);
  border-color: var(--orange);
  color: var(--orange);
}

/* ─────────────────────────────────────────
   BADGES DE STATUT
   ───────────────────────────────────────── */
.status-badge {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  flex-shrink: 0;

  &.status-badge--overdue  {
    background: color-mix(in srgb, var(--red) 22%, transparent);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 44%, transparent);
  }

  &.status-badge--due_today {
    background: color-mix(in srgb, var(--yellow) 22%, transparent);
    color: var(--yellow);
    border: 1px solid color-mix(in srgb, var(--yellow) 44%, transparent);
  }

  &.status-badge--pending {
    background: color-mix(in srgb, var(--green) 22%, transparent);
    color: var(--green);
    border: 1px solid color-mix(in srgb, var(--green) 44%, transparent);
  }

  &.status-badge--done {
    background: color-mix(in srgb, var(--muted) 22%, transparent);
    color: var(--muted);
    border: 1px solid color-mix(in srgb, var(--muted) 44%, transparent);
  }
}

/* ─────────────────────────────────────────
   CLIENTS — liste + fiche
   ───────────────────────────────────────── */
.client-search {
  margin-bottom: 16px;
}

.client-search__input {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;

  &::placeholder {
    color: var(--muted);
  }

  &:focus {
    border-color: var(--orange);
  }
}

.client-card {
  display: block;
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;

  &:hover {
    border-color: var(--orange);
  }

  &:active {
    opacity: 0.85;
  }
}

.client-card__name {
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 4px;
}

.client-card__meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 14px;
}

/* Fiche client show */
.client-show {
}

.client-show__header {
  margin-bottom: 24px;
}

.client-show__name {
  font-weight: 900;
  font-size: 28px;
  color: var(--text);
  margin-bottom: 6px;
}

.client-show__phone {
  color: var(--green);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;

  &:hover {
    opacity: 0.85;
  }
}

.client-show__section-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--muted);
  margin-bottom: 12px;
}

.client-reminder-card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 16px;
  margin-bottom: 10px;
  border-left: 4px solid var(--border);

  &.client-reminder-card--overdue  { border-left-color: var(--red); }
  &.client-reminder-card--due_today { border-left-color: var(--yellow); }
  &.client-reminder-card--pending  { border-left-color: var(--green); }
  &.client-reminder-card--done     { border-left-color: var(--muted); }
}

.client-reminder-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
  gap: 8px;
}

.client-reminder-card__subject {
  font-weight: 800;
  font-size: 16px;
  flex: 1;
}

.client-reminder-card__date {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.client-reminder-card__status {
  margin-bottom: 6px;
}

.client-show__back {
  margin-top: 24px;
}

.btn-back-inline {
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;

  &:hover {
    color: var(--text);
  }
}

/* ─────────────────────────────────────────
   JOURNAL — actions de saisie
   ───────────────────────────────────────── */
.journal-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.journal-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  padding: 14px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  border: 2px solid;

  &:active {
    opacity: 0.75;
  }

  &.journal-action-btn--green {
    background: color-mix(in srgb, var(--green) 18%, transparent);
    border-color: var(--green);
    color: var(--green);
  }

  &.journal-action-btn--blue {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    border-color: var(--blue);
    color: var(--blue);
  }

  &.journal-action-btn--yellow {
    background: color-mix(in srgb, var(--yellow) 18%, transparent);
    border-color: var(--yellow);
    color: var(--yellow);
  }

  &.journal-action-btn--orange {
    background: color-mix(in srgb, var(--orange) 18%, transparent);
    border-color: var(--orange);
    color: var(--orange);
  }

  &.journal-action-btn--full {
    grid-column: 1 / -1;
    width: 100%;
    padding: 20px 14px;
    font-size: 19px;
  }
}

.journal-action-btn__icon {
  font-size: 28px;
  line-height: 1;
}

/* ─────────────────────────────────────────
   JOURNAL — formulaire photo
   ───────────────────────────────────────── */
.journal-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  border: 2px solid var(--orange);
  border-radius: 14px;
  padding: 20px 14px;
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 16px;

  &:active {
    opacity: 0.75;
  }
}

.journal-photo-preview {
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;

  & img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }
}

/* ─────────────────────────────────────────
   JOURNAL — carte entrée
   ───────────────────────────────────────── */
.journal-entry-card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--orange) 66%, transparent);
  padding: 16px;
  margin-bottom: 10px;
}

.journal-entry-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.journal-entry-card__type {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journal-entry-card__icon {
  font-size: 20px;
  line-height: 1;
}

.journal-entry-card__label {
  font-weight: 800;
  font-size: 15px;
  color: var(--orange);
}

.journal-entry-card__time {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.journal-entry-card__client {
  font-weight: 700;
  font-size: 18px;
  margin-top: 4px;
}

.journal-entry-card__note {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.journal-entry-card__equipier {
  color: color-mix(in srgb, var(--orange) 66%, transparent);
  font-size: 13px;
  margin-top: 4px;
}

.journal-entry-card__analyzing {
  color: var(--orange);
  font-weight: 700;
  margin-top: 8px;
}

.journal-entry-card__failed {
  color: var(--red);
  font-weight: 700;
  margin-top: 8px;
}

.journal-entry-card__photo {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  margin-top: 8px;
}

.journal-entry-card__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 12px;
}

.journal-entry-card__show-link {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  padding: 6px 10px;
  text-decoration: none;

  &:hover {
    border-color: var(--orange);
    color: var(--orange);
  }
}

.journal-entry-card__rejected {
  background: color-mix(in srgb, var(--yellow) 18%, transparent);
  border: 1.5px solid var(--yellow);
  border-radius: 10px;
  padding: 12px;
  color: var(--yellow);
  font-weight: 800;
  margin-top: 8px;
}

.journal-entry-card__analysis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.journal-entry-card__field {
  font-size: 13px;

  &.journal-entry-card__field--amount {
    color: var(--yellow);
    font-weight: 700;
  }
}

.journal-entry-card__field-label {
  color: var(--muted);
}

.journal-entry-card__resume {
  color: var(--muted);
  font-size: 14px;
  margin-top: 4px;
}

.journal-entry-card__no-analysis {
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  margin-top: 6px;
}

/* ─────────────────────────────────────────
   JOURNAL — état vide
   ───────────────────────────────────────── */
.journal-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 20px;
  font-size: 18px;
}

/* ─────────────────────────────────────────
   JOURNAL — prompt de liaison client
   ───────────────────────────────────────── */
.client-link-prompt {
  background: color-mix(in srgb, var(--orange) 10%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--orange) 50%, transparent);
  border-radius: 10px;
  padding: 12px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.client-link-prompt__title {
  font-weight: 800;
  font-size: 14px;
  color: var(--orange);
  margin: 0;
}

.client-link-prompt__btn {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  border: none;

  &:active {
    opacity: 0.75;
  }

  &.client-link-prompt__btn--candidate {
    background: var(--orange);
    color: #fff;
  }

  &.client-link-prompt__btn--new {
    background: color-mix(in srgb, var(--muted) 20%, transparent);
    color: var(--text);
    border: 1px solid var(--border);
  }
}

/* button_to génère un <form> — on neutralise son influence sur le layout */
.client-link-prompt form {
  margin: 0;
}

.client-link-prompt__new-form {
  display: flex;
  gap: 8px;
}

.client-link-prompt__input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;

  &:focus {
    outline: none;
    border-color: var(--orange);
  }
}

/* ─────────────────────────────────────────
   FLASH MARCHÉ — grille de déclencheurs
   ───────────────────────────────────────── */
.flash-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.flash-type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 14px;
  padding: 18px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid;
  cursor: pointer;
  text-align: center;

  &:active {
    opacity: 0.75;
  }

  &.flash-type-btn--reprise {
    background: color-mix(in srgb, var(--red) 18%, transparent);
    border-color: var(--red);
    color: var(--red);
  }

  &.flash-type-btn--recherche {
    background: color-mix(in srgb, var(--blue) 18%, transparent);
    border-color: var(--blue);
    color: var(--blue);
  }
}

.flash-type-btn__sub {
  font-size: 13px;
  font-weight: 400;
  margin-top: 2px;
}

/* ─────────────────────────────────────────
   FLASH MARCHÉ — carte
   ───────────────────────────────────────── */
.flash-card {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 14px;
  border-left: 4px solid var(--border);
  animation: fadeIn 0.3s ease both;

  &.flash-card--reprise  { border-left-color: var(--red); }
  &.flash-card--recherche { border-left-color: var(--blue); }
}

.flash-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.flash-type-badge {
  display: inline-block;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;

  &.flash-type-badge--reprise {
    background: color-mix(in srgb, var(--red) 22%, transparent);
    color: var(--red);
    border: 1px solid color-mix(in srgb, var(--red) 44%, transparent);
  }

  &.flash-type-badge--recherche {
    background: color-mix(in srgb, var(--blue) 22%, transparent);
    color: var(--blue);
    border: 1px solid color-mix(in srgb, var(--blue) 44%, transparent);
  }
}

.flash-meta {
  color: var(--muted);
  font-size: 13px;
}

.flash-body {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.flash-price {
  color: var(--yellow);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.flash-author {
  color: var(--orange);
  font-size: 13px;
  margin-bottom: 10px;
}

.flash-response-item {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 4px;
  font-size: 14px;
}

.flash-response-item__author {
  color: var(--green);
  font-weight: 700;
}

.flash-viewers {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}

.flash-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash-btn-seen {
  width: 100%;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--muted) 44%, transparent);
  border-radius: 10px;
  padding: 9px 16px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;

  /* button_to génère un <form> — on le voit via le sélecteur parent */
  &:active {
    opacity: 0.75;
  }
}

/* Neutralise le form wrapper de button_to */
.flash-card__actions form {
  display: contents;
}

.flash-btn-reply {
  width: 100%;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  border: 1.5px solid var(--green);
  border-radius: 10px;
  padding: 10px 16px;
  color: var(--green);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;

  &:active {
    opacity: 0.75;
  }
}

.flash-reply-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flash-btn-ok {
  background: var(--green);
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  align-self: flex-end;

  &:active {
    opacity: 0.75;
  }
}

.flash-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 18px;
}

/* ─────────────────────────────────────────
   MESSAGES — annuaire
   ───────────────────────────────────────── */
.messages-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
  margin-top: -10px;
}

.broadcast-boss-block {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--border);
  border-top: 3px solid #FFD700;
  padding: 20px;
  margin-bottom: 20px;
}

.broadcast-boss-block__title {
  font-weight: 800;
  font-size: 16px;
  color: #FFD700;
  margin-bottom: 10px;
}

.broadcast-boss-block__send {
  background: #FFD700;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--bg);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;

  &:active {
    opacity: 0.75;
  }
}

.messages-directory {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Inbox : liste à plat des discussions, triée chronologiquement */
.messages-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.new-message-btn {
  flex-shrink: 0;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}

.messages-inbox {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.messages-empty-inbox {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  line-height: 1.6;
}

.directory-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid;
  border-color: inherit;
  opacity: 0.7;
}

.directory-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border-radius: 14px;
  border: 1.5px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;

  &:hover {
    border-color: var(--muted);
  }

  &:active {
    opacity: 0.85;
  }

  &.directory-card--unread {
    background: color-mix(in srgb, var(--orange) 10%, var(--card));
    border-color: var(--orange);
  }

  &.directory-card--closed {
    opacity: 0.6;
    border-color: var(--muted);
  }
}

.directory-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  flex-shrink: 0;
}

.directory-card__body {
  flex: 1;
  min-width: 0;
}

.directory-card__name {
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 2px;
}

.directory-card__meta {
  font-size: 13px;
  display: flex;
  gap: 4px;
  align-items: center;
}

.directory-card__site {
  color: var(--muted);
}

.directory-card__last-msg {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.directory-card__closed {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.directory-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.directory-card__time {
  font-size: 12px;
  color: var(--muted);
}

.directory-unread-dot {
  background: var(--orange);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}

.directory-card__chevron {
  font-size: 20px;
  color: var(--muted);
}

/* ─────────────────────────────────────────
   MESSAGES — conversation show
   ───────────────────────────────────────── */
.conversation-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.conversation-back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 20px;
  text-decoration: none;
  font-family: 'Barlow Condensed', sans-serif;
  flex-shrink: 0;

  &:hover {
    color: var(--text);
  }
}

.conversation-header__name {
  font-weight: 800;
  font-size: 20px;
}

.conversation-header__meta {
  display: flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
}

.conversation-header__site {
  color: var(--muted);
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: 16px;
  padding: 4px 0;
  scroll-behavior: smooth;
}

.messages-empty {
  text-align: center;
  color: var(--muted);
  padding: 40px 20px;
  font-size: 15px;
}

/* Masque le placeholder dès qu'un message (rendu initial ou broadcast Turbo) le suit. */
.messages-empty:has(~ .message-bubble) {
  display: none;
}

.message-bubble {
  max-width: 78%;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.4;
}

.message-bubble--mine {
  align-self: flex-end;
  background: var(--orange);
  color: #fff;
  border-radius: 18px 18px 4px 18px;

  & .message-time {
    color: rgba(255, 255, 255, 0.65);
    text-align: right;
  }
}

.message-bubble--other {
  align-self: flex-start;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 18px 18px 18px 4px;
}

.message-bubble__text {
  margin-bottom: 4px;
}

.message-time {
  font-size: 11px;
  color: var(--muted);
}

/* ─────────────────────────────────────────
   MESSAGES — zone de saisie
   ───────────────────────────────────────── */
.conversation-input-area {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.conversation-close-wrap {
  margin-bottom: 8px;
}

.conversation-close-btn {
  width: 100%;
  background: color-mix(in srgb, var(--red) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 44%, transparent);
  border-radius: 10px;
  padding: 9px 16px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;

  &:active {
    opacity: 0.75;
  }
}

.conversation-close-confirm {
  background: color-mix(in srgb, var(--red) 22%, transparent);
  border: 1.5px solid var(--red);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}

.conversation-close-confirm__title {
  color: var(--red);
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}

.conversation-close-confirm__sub {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.conversation-close-confirm__btns {
  display: flex;
  gap: 8px;
}

.conversation-close-confirm__cancel {
  flex: 1;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  cursor: pointer;
}

.conversation-close-confirm__ok {
  flex: 2;
  background: var(--red);
  border: none;
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

/* button_to wrapper */
.conversation-close-confirm__btns form {
  flex: 2;
  display: contents;
}

.conversation-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.conversation-input-field {
  flex: 1;
  resize: none;
  min-height: 44px;
  border-radius: 12px;
}

.conversation-send-btn {
  background: var(--orange);
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  flex-shrink: 0;

  &:active {
    opacity: 0.75;
  }
}

/* ─────────────────────────────────────────
   MODULE MONTAGE
   ───────────────────────────────────────── */

/* Header index */
.assembly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.assembly-header__title {
  margin-bottom: 0;
  color: var(--yellow);
}

.assembly-header__sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

/* Etat vide */
.assembly-empty {
  text-align: center;
  padding: 50px 20px;
}

.assembly-empty__icon {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
}

.assembly-empty__title {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}

.assembly-empty__sub {
  color: var(--muted);
  font-size: 14px;
}

/* Carte liste */
.assembly-card {
  border-left: 4px solid var(--border);
  margin-bottom: 12px;

  &.assembly-card--active { border-left-color: var(--yellow); }
  &.assembly-card--done   { border-left-color: var(--green); }
}

.assembly-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
  gap: 10px;
}

.assembly-card__info {
  flex: 1;
  min-width: 0;
}

.assembly-card__name {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
}

.assembly-card__date {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.assembly-card__btn {
  margin-top: 12px;
}

.assembly-card__btn--show {
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--text);
}

/* Barre de progression */
.assembly-progress-bar {
  background: var(--border);
  border-radius: 4px;
  height: 8px;
  margin-bottom: 0;
}

.assembly-progress-bar__fill {
  background: var(--yellow);
  border-radius: 4px;
  height: 8px;
  transition: width 0.3s ease;

  &.assembly-progress-bar__fill--done {
    background: var(--green);
  }
}

/* Header vue active (show) */
.assembly-active-header {
  margin-bottom: 14px;
  border-top: 3px solid var(--border);

  &.assembly-active-header--current {
    border-top-color: var(--yellow);
  }
}

.assembly-active-header__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.assembly-active-header__name {
  font-weight: 900;
  font-size: 20px;
  color: var(--yellow);
}

.assembly-active-header__started {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.assembly-active-header__back {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;

  &:hover {
    color: var(--text);
    border-color: var(--muted);
  }
}

.assembly-progress-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.assembly-progress-row__label {
  font-size: 13px;
  color: var(--muted);
}

.assembly-progress-row__value {
  font-size: 13px;
  color: var(--yellow);
  font-weight: 700;
}

/* Liste des étapes */
.assembly-steps-list {
  margin-bottom: 14px;
}

.assembly-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 8px;
  border-left: 4px solid var(--border);
  border-radius: 16px;

  &.assembly-step--done    { border-left-color: var(--green); }
  &.assembly-step--current { border-left-color: var(--yellow); }
  &.assembly-step--future  { border-left-color: var(--border); opacity: 0.4; }
}

.assembly-step__badge {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 20px;
  border: 2px solid var(--border);
  background: color-mix(in srgb, var(--border) 44%, transparent);
  color: var(--muted);

  &.assembly-step__badge--done {
    background: color-mix(in srgb, var(--green) 22%, transparent);
    border-color: var(--green);
    color: var(--green);
  }

  &.assembly-step__badge--current {
    background: color-mix(in srgb, var(--yellow) 22%, transparent);
    border-color: var(--yellow);
    color: var(--yellow);
  }

  &.assembly-step__badge--future {
    background: color-mix(in srgb, var(--border) 44%, transparent);
    border-color: var(--border);
    color: var(--muted);
  }
}

.assembly-step__body {
  flex: 1;
  min-width: 0;
}

.assembly-step__label {
  font-weight: 800;
  font-size: 17px;

  .assembly-step--done &    { color: var(--green); }
  .assembly-step--current & { color: var(--yellow); }
  .assembly-step--future &  { color: var(--text); }
}

.assembly-step__sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 2px;
}

.assembly-step__thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid var(--green);
  flex-shrink: 0;
}

/* Panneau upload photo */
.assembly-upload {
  border-top: 3px solid var(--yellow);
}

.assembly-upload__step-label {
  font-weight: 900;
  font-size: 20px;
  color: var(--yellow);
  margin-bottom: 4px;
}

.assembly-upload__step-sub {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 14px;
}

/* Bouton photo et preview — calqués sur journal */
.assembly-photo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: color-mix(in srgb, var(--orange) 18%, transparent);
  border: 2px solid var(--orange);
  border-radius: 14px;
  padding: 20px 14px;
  color: var(--orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 16px;
  text-align: center;

  &:active {
    opacity: 0.75;
  }
}

.assembly-photo-preview {
  margin-bottom: 16px;
  border-radius: 10px;
  overflow: hidden;

  & img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
  }
}

/* Ecran terminé */
.assembly-finished {
  text-align: center;
  border-top: 3px solid var(--green);

  &.assembly-finished--done {
    border-top-color: var(--green);
  }
}

.assembly-finished__emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}

.assembly-finished__title {
  font-weight: 900;
  font-size: 24px;
  color: var(--green);
  margin-bottom: 4px;
}

.assembly-finished__vehicle {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 4px;
}

.assembly-finished__meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.assembly-finished-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 16px;
}

.assembly-finished-thumb {
  position: relative;
}

.assembly-finished-thumb__img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--green);
  display: block;
}

.assembly-finished-thumb__num {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--green);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  line-height: 1.4;
}

.assembly-finished__actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.assembly-finished__btn-list {
  flex: 1;
  background: var(--card);
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: 16px;

  &:hover {
    border-color: var(--muted);
    opacity: 1;
  }
}

.assembly-finished__btn-new {
  flex: 2;
  background: var(--yellow);
  color: var(--bg);
  font-size: 18px;
}

/* ─────────────────────────────────────────
   VUE BOSS
   ───────────────────────────────────────── */

.boss-title {
  color: #FFD700;
}

.boss-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  border-top: 3px solid var(--border);

  &.stat-card--red    { border-top-color: var(--red); }
  &.stat-card--yellow { border-top-color: var(--yellow); }
  &.stat-card--blue   { border-top-color: var(--blue); }
  &.stat-card--green  { border-top-color: var(--green); }
}

.stat-card__value {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 4px;

  .stat-card--red &    { color: var(--red); }
  .stat-card--yellow & { color: var(--yellow); }
  .stat-card--blue &   { color: var(--blue); }
  .stat-card--green &  { color: var(--green); }
}

.stat-card__label {
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 1px;
  font-weight: 700;
}

.activity-section-title {
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.activity-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.activity-card--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.activity-card__name {
  font-weight: 700;
  font-size: 18px;
}

.activity-empty {
  text-align: center;
  color: var(--muted);
  padding: 30px 20px;
  font-size: 16px;
}

/* ─────────────────────────────────────────
   PRÉFÉRENCES BOSS
   ───────────────────────────────────────── */
.preferences-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.preferences-action {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  border-left: 4px solid #FFD700;
}

.preferences-action__icon {
  font-size: 28px;
  line-height: 1;
}

.preferences-action__body {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.preferences-action__title {
  font-size: 18px;
  font-weight: 900;
}

.preferences-action__meta {
  color: var(--muted);
  font-size: 14px;
}

.preferences-action__chevron {
  color: var(--muted);
  font-size: 28px;
}

.preferences-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.preferences-header .screen-title {
  margin-bottom: 4px;
}

.preferences-header__action {
  flex-shrink: 0;
  padding: 8px 12px;
  font-size: 16px;
}

.preferences-back-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
}

.preferences-users-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preferences-user-card {
  padding: 16px;
}

.preferences-user-card__main {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.preferences-user-card__avatar {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 16px;
  font-weight: 900;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.preferences-user-card__body {
  min-width: 0;
  flex: 1;
}

.preferences-user-card__name {
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
}

.preferences-user-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.preferences-user-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.preferences-user-card__actions form {
  flex: 1;
}

.preferences-user-card__edit,
.preferences-user-card__delete,
.preferences-form-actions__cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border-radius: 8px;
  padding: 8px 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.preferences-user-card__edit {
  flex: 1;
  color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--border));
}

.preferences-user-card__delete {
  width: 100%;
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 45%, var(--border));
}

.preferences-user-form {
  padding: 18px;
}

.preferences-form-errors {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--border));
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
}

.preferences-locked-value {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--muted);
  font-size: 16px;
}

.preferences-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.preferences-form-actions__cancel {
  flex: 1;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--border);
}

.preferences-form-actions__submit {
  flex: 2;
}

/* ─────────────────────────────────────────
   MESSAGES — bannière clôture
   ───────────────────────────────────────── */
.closed-banner {
  background: var(--card);
  border-radius: 12px;
  border: 1px solid var(--border);
  border-top: 2px solid var(--muted);
  padding: 14px;
  text-align: center;
  margin-bottom: 12px;
}

.closed-banner__text {
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}

.closed-banner__sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.closed-banner__new {
  margin-top: 10px;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* ─────────────────────────────────────────
   MESSAGES — fils (threads) & intervention tierce
   ───────────────────────────────────────── */
.conversation-thread-title {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 4px 4px;
}

.message-bubble--third-party {
  align-self: center;
  max-width: 88%;
  background: color-mix(in srgb, var(--yellow) 14%, var(--card));
  border: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--border));
  border-radius: 14px;
  color: var(--text);
}

.message-bubble__author {
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 2px;
}

.directory-card__intervened {
  color: var(--yellow);
  font-weight: 700;
  font-size: 13px;
  margin-top: 2px;
}

.thread-history {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.thread-history__title {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
}

.thread-history__item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;

  & summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
  }
}

.thread-history__date {
  color: var(--muted);
  font-weight: 400;
  font-size: 12px;
}

.thread-history__messages {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.thread-history__msg {
  font-size: 14px;
  color: var(--text);
}

.thread-history__sender {
  color: var(--muted);
  font-weight: 700;
}

/* Section boss : toutes les discussions entre tiers */
.supervised-section {
  margin-top: 20px;
}

.supervised-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  text-decoration: none;
  color: var(--text);
}

.supervised-card__pair {
  font-weight: 700;
  flex-shrink: 0;
}

.supervised-card__meta {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.supervised-card__intervened {
  color: var(--yellow);
  font-weight: 700;
}

.supervised-card__closed {
  color: var(--muted);
}

/* ─────────────────────────────────────────
   FICHE CLIENT — en-tête enrichi
   ───────────────────────────────────────── */
.client-show__header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 6px;
}

.client-show__meta {
  color: var(--muted);
  font-size: 15px;
  margin-top: 4px;
}

.btn-edit-inline {
  color: var(--orange);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--orange);
  border-radius: 8px;
  padding: 4px 12px;
  white-space: nowrap;
  flex-shrink: 0;

  &:hover {
    background: color-mix(in srgb, var(--orange) 18%, transparent);
  }
}

/* ─────────────────────────────────────────
   FICHE CLIENT — carte véhicule
   ───────────────────────────────────────── */
.vehicle-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--blue);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.vehicle-card__label {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 10px;
}

.vehicle-card__docs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.vehicle-card__doc-thumb-link {
  display: block;
  flex-shrink: 0;
}

.vehicle-card__doc-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  display: block;
}

/* ─────────────────────────────────────────
   FICHE CLIENT — carte document
   ───────────────────────────────────────── */
.doc-card {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.doc-card__thumb-wrap {
  flex-shrink: 0;
}

.doc-card__thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  display: block;
}

.doc-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.doc-card__field {
  font-size: 14px;
  color: var(--text);
}

.doc-card__field--amount {
  color: var(--yellow);
  font-weight: 700;
}

.doc-card__field--date {
  color: var(--muted);
}

/* ─────────────────────────────────────────
   SHOW générique
   ───────────────────────────────────────── */
.record-show-header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.record-show-header__title {
  margin-bottom: 0;
}

.record-show-header__meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.journal-entry-edit {
  margin-bottom: 16px;
}

.journal-entry-edit__error {
  background: color-mix(in srgb, var(--red) 16%, transparent);
  border: 1px solid var(--red);
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.journal-entry-edit__hint {
  margin: 6px 0 0;
}

.journal-entry-edit__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ─────────────────────────────────────────
   FICHE CLIENT — formulaire édition
   ───────────────────────────────────────── */
.client-edit-form__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
}