* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f5efe8;
  color: #2a1d1b;
}
.app-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
}
.topbar {
  background: #fff;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  margin-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.logo {
  width: 88px;
  height: auto;
  flex: 0 0 auto;
}
.brand-text h1 {
  margin: 0;
  font-size: 28px;
  color: #7C1416;
}
.brand-text p {
  margin: 6px 0 0 0;
  color: #6f625c;
  font-size: 15px;
}
.main-grid {
  display: grid;
  gap: 16px;
}
.card {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.section-head h2 {
  margin: 0;
  color: #7C1416;
  font-size: 22px;
}
.section-head p {
  margin: 6px 0 0 0;
  color: #6f625c;
  font-size: 14px;
}
.status-line {
  background: #f7f3ef;
  color: #7C1416;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 210px;
  font-size: 14px;
}
.text-block { display: block; margin-bottom: 14px; }
.text-block span {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #5a3838;
}
input, textarea, button {
  width: 100%;
  font: inherit;
}
input, textarea {
  border: 1px solid #d7c9bc;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}
textarea {
  min-height: 120px;
  resize: vertical;
}
.record-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.record-btn {
  border: 0;
  border-radius: 14px;
  padding: 16px;
  background: #2E7D32;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
}
.record-btn.is-recording { background: red; }
.record-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
}
.timer {
  min-width: 88px;
  text-align: center;
  background: #f7f3ef;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  padding: 16px 12px;
  font-weight: 700;
  color: #7C1416;
}
.audio-player { width: 100%; margin-bottom: 12px; }
.actions-row, .bottom-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.inline-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.secondary-btn, .save-btn, .email-btn, .note-action-link {
  border: 0;
  border-radius: 12px;
  padding: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.small-btn {
  width: auto;
  min-width: 74px;
  padding: 10px 12px;
  font-size: 13px;
}
.secondary-btn, .note-action-link { background: #efe7df; color: #5b4337; }
.save-btn { background: #F36B21; color: #fff; }
.email-btn { background: #7C1416; color: #fff; }
.loader {
  margin-bottom: 14px;
  background: #fff3e6;
  color: #9a4d00;
  border: 1px solid #ffd7af;
  border-radius: 12px;
  padding: 10px 12px;
}
.email-box {
  background: #faf7f3;
  border: 1px solid #eadfd4;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.email-box-title {
  font-weight: 700;
  color: #7C1416;
  margin-bottom: 4px;
}
.email-box-text {
  font-size: 13px;
  color: #6f625c;
  margin-bottom: 10px;
}
.photo-preview-wrap {
  margin-bottom: 14px;
}
.photo-preview {
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #eadfd4;
  display: block;
}
.secondary-link {
  color: #7C1416;
  font-weight: 700;
  text-decoration: none;
  align-self: center;
}
.notes-list { display: grid; gap: 10px; }
.note-item {
  border: 1px solid #eadfd4;
  background: #faf7f3;
  border-radius: 14px;
  padding: 14px;
}
.note-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.tag {
  display: inline-block;
  background: #7C1416;
  color: #fff;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.note-date, .note-updated {
  color: #6f625c;
  font-size: 13px;
}
.note-title {
  font-size: 18px;
  font-weight: 700;
  color: #4c2c2b;
  margin-bottom: 6px;
}
.note-text {
  color: #4f4540;
  white-space: pre-wrap;
  margin: 10px 0;
}
.note-photo-link {
  display: block;
  margin-top: 10px;
}
.note-photo {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid #eadfd4;
}
.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  align-items: center;
}
.translate-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.empty-state {
  padding: 18px;
  border: 1px dashed #d7c9bc;
  border-radius: 14px;
  color: #6f625c;
  text-align: center;
}
@media (max-width: 700px) {
  .brand { align-items: center; }
  .logo { width: 72px; }
  .brand-text h1 { font-size: 24px; }
  .section-head { flex-direction: column; }
  .status-line { width: 100%; min-width: 0; }
  .actions-row, .bottom-actions { grid-template-columns: 1fr; }
  .record-box { grid-template-columns: 1fr; }
}

.save-row {
  margin-bottom: 14px;
}
.save-row .save-btn {
  width: 100%;

  background: #F36B21;
}
.note-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.note-title-photo-link {
  display: inline-flex;
  flex: 0 0 auto;
}
.note-title-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eadfd4;
  display: block;
}


/* Corrections couleurs V5E */
.record-btn {
  background: #2E7D32 !important;
}
.record-btn.is-recording {
  background: red !important;
}
.save-btn {
  background: #F36B21 !important;
}


.field-help {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}


/* V5I ajustements UI */
.record-btn.is-recording .record-icon,
.record-btn.is-recording .status-dot,
.record-btn.is-recording .btn-dot,
.record-btn.is-recording .shape-dot {
  border-radius: 4px !important;
}

.status-message.is-editing,
.status-line.is-editing,
.alert-editing,
.notice-editing {
  background: #FFD54F !important;
}





/* V5K couleurs pâles des messages */
#statusLine.status-success,
.status-success {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

#statusLine.status-danger,
.status-danger {
  background: #FDECEC !important;
  color: #C62828 !important;
}

#statusLine.status-warning,
.status-warning {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}


.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.session-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-pill,
.admin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

.user-pill {
  background: #f3ece6;
  color: #5b4337;
  border: 1px solid #eadfd4;
}

.admin-pill {
  background: #fff3e0;
  color: #a55a00;
  border: 1px solid #ffd7af;
}

.logout-btn {
  width: auto !important;
  min-width: 140px;
}

.auth-grid {
  max-width: 560px;
  margin: 0 auto;
}

.auth-form,
.admin-form {
  display: grid;
  gap: 12px;
}

.auth-status {
  margin-top: 14px;
}

.admin-card {
  margin-bottom: 16px;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 18px;
  align-items: start;
}

.users-list {
  display: grid;
  gap: 8px;
}

.user-item {
  border: 1px solid #eadfd4;
  background: #faf7f3;
  border-radius: 14px;
  padding: 12px 14px;
}

.user-item-name {
  font-weight: 700;
  color: #4c2c2b;
}

.user-item-meta {
  margin-top: 4px;
  color: #6f625c;
  font-size: 13px;
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #5a3838;
  font-weight: 700;
}

.checkbox-line input {
  width: auto;
}

.small-heading {
  margin: 0 0 10px 0;
  color: #7C1416;
  font-size: 18px;
}

.privacy-note {
  margin-bottom: 12px;
  background: #f7f3ef;
  color: #6f625c;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
}

.field-help {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}

.record-btn.is-recording .record-dot {
  border-radius: 4px !important;
}

.note-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}

.note-title-photo-link {
  display: inline-flex;
  flex: 0 0 auto;
}

.note-title-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eadfd4;
  display: block;
}

.note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.note-action-btn {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #f5efe8;
  color: #7C1416;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #eadfd4;
  cursor: pointer;
}

#statusLine.status-success,
.status-success {
  background: #E8F5E9 !important;
  color: #2E7D32 !important;
}

#statusLine.status-danger,
.status-danger {
  background: #FDECEC !important;
  color: #C62828 !important;
}

#statusLine.status-warning,
.status-warning {
  background: #FFF3E0 !important;
  color: #E65100 !important;
}

#statusLine.is-editing,
.is-editing {
  background: #FFF9C4 !important;
  color: #7a6500 !important;
}

@media (max-width: 780px) {
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .status-line {
    min-width: 0;
  }

  .topbar-inner {
    align-items: flex-start;
  }
}

.app-topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 16px; background:#f5efe8; border-bottom:1px solid #eadfd4; font-size:14px; }
.app-topbar-right { display:flex; gap:12px; flex-wrap:wrap; }
.login-page, .admin-page { background:#f7f4f1; min-height:100vh; }
.login-card, .admin-wrap { max-width:960px; margin:24px auto; padding:20px; }
.login-card, .admin-card { background:#fff; border-radius:16px; padding:20px; border:1px solid #eadfd4; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.login-form, .admin-form-grid { display:grid; gap:12px; }
.user-table { display:grid; gap:12px; }
.user-row-wrap { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.user-row { display:grid; grid-template-columns:120px 1fr 1fr auto; gap:10px; align-items:center; }
.user-row-actions { display:flex; gap:8px; }
.inline-delete-form { display:inline-flex; }
.small-btn { padding:8px 12px; min-height:38px; }
.danger-btn { background:#c62828 !important; color:#fff !important; }
.forgot-result a { word-break: break-all; }


.user-row-v8 {
  grid-template-columns: 90px 1fr 1fr 1.2fr 1fr 110px auto;
}
@media (max-width: 1200px) {
  .user-row-v8 {
    grid-template-columns: 1fr;
  }
}


.email-box-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 1px solid #eadfd4;
  border-radius: 12px;
  background: #f5efe8;
  color: #7C1416;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}

.email-box-toggle::after {
  content: '+';
  font-size: 20px;
  line-height: 1;
}

.email-box-toggle[aria-expanded="true"]::after {
  content: '−';
}

.email-box-content[hidden] {
  display: none !important;
}


.topbar-user {
  font-weight: 600;
  color: #7C1416;
}

.email-box-actions {
  margin-top: 12px;
}

.app-topbar-left {
  font-weight: 700;
  color: #7C1416;
}




/* V8J topbar gauche/droite */
.app-topbar {
  justify-content: space-between !important;
}

.app-topbar-right {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
}


.app-topbar + .app-topbar { display: none !important; }



/* V8N topbar restaurée */
.app-topbar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px;
}
.app-topbar-right {
  display: flex !important;
  gap: 12px;
  flex-wrap: wrap;
}
.topbar-user {
  font-weight: 600;
  color: #7C1416;
}

.tag-hidden { display: none !important; }