@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

/* ══════════════════════════════════════
   DESIGN TOKENS — alignés sur le site public Plumeo
   Palette : indigo (primaire) + ambre (accent) + slate (neutres)
   ══════════════════════════════════════ */
:root {
  /* Neutrals — slate cool palette */
  --bg:             #F8FAFC;   /* slate-50 — fond app */
  --surface:        #FFFFFF;
  --surface-alt:    #F1F5F9;   /* slate-100 — fond zones secondaires */
  --text:           #0F172A;   /* slate-900 */
  --text-secondary: #475569;   /* slate-600 */
  --muted:          #94A3B8;   /* slate-400 */
  --border:         #E2E8F0;   /* slate-200 */
  --border-light:   #F1F5F9;   /* slate-100 */

  /* Primaire — indigo (couleur de marque) */
  --accent:         #6366F1;   /* indigo-500 */
  --accent-hover:   #4F46E5;   /* indigo-600 */
  --accent-light:   #EEF2FF;   /* indigo-50 — fond hover/badge léger */

  /* Accent secondaire — ambre (le ".ch" du wordmark) */
  --accent-warm:        #F59E0B;
  --accent-warm-hover:  #D97706;
  --accent-warm-light:  #FFFBEB;

  /* États sémantiques */
  --blue:         #0EA5E9;     /* sky-500 — info, distinct de l'indigo primaire */
  --blue-light:   #E0F2FE;
  --green:        #10B981;     /* emerald-500 — succès */
  --green-light:  #ECFDF5;
  --danger:       #EF4444;     /* red-500 */
  --danger-light: #FEF2F2;
  --warning:      #F59E0B;     /* alias ambre — usage warning */
  --warning-light:#FFFBEB;

  /* Gradients (cohérents avec le site public) */
  --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --gradient-soft:    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);

  /* Sizing */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    14px;
  --radius-xl:    20px;
  --shadow-sm:    0 1px 3px rgba(15,23,42,0.04);
  --shadow-md:    0 4px 16px rgba(15,23,42,0.06);
  --shadow-lg:    0 8px 32px rgba(15,23,42,0.08);

  /* Transition */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-hover); }

/* ══════════════════════════════════════
   NAVBAR
   ══════════════════════════════════════ */
.navbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 60px;
  display: flex;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.92) !important;
  box-shadow: none;
}

.navbar .container-fluid { max-width: 100%; padding: 0; }

.navbar-brand {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text) !important;
  letter-spacing: -0.02em;
}

.navbar .navbar-nav .nav-link {
  color: var(--text-secondary) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px !important;
  border-radius: var(--radius-sm);
  transition: all 0.2s var(--ease);
}

.navbar .navbar-nav .nav-link:hover {
  color: var(--accent) !important;
  background: var(--accent-light);
}

.navbar .navbar-nav .nav-link.active { color: var(--accent) !important; }

.navbar-toggler { border-color: var(--border) !important; padding: 4px 8px; flex-shrink: 0; }
.navbar-toggler:focus { box-shadow: none; }
.navbar-toggler-icon {
  filter: none; width: 1.2em; height: 1.2em;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(71,85,105,1)' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

@media (max-width: 991.98px) {
  .navbar { height: auto; padding: 10px 16px; }
  .navbar .container-fluid { flex-wrap: wrap; }
  .navbar-collapse {
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    margin-top: 10px;
    padding: 12px 0 8px;
  }
  .navbar-collapse .navbar-nav { gap: 2px; }
  .navbar-collapse .nav-link { padding: 10px 12px !important; }
}

.dropdown-menu {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  background: var(--surface);
}

.dropdown-item {
  font-size: 13px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  transition: all 0.15s var(--ease);
}

.dropdown-item:hover { background: var(--accent-light); color: var(--accent); }

/* L'entrée courante d'un menu (marque active, etc.). Sans cette règle, Bootstrap
   posait son bleu #0d6efd, seule couleur de la page à ne venir d'aucun token.
   Fond teinté plutôt que pavé plein : la coche dit déjà laquelle est active. */
.dropdown-item.active {
  background: var(--accent-light);
  color: var(--accent-hover);
  font-weight: 600;
}
/* « Ajouter une marque » : une action, pas un statut. Elle se distingue par la
   couleur d'accent, pas par le vert Bootstrap qui n'appartient à aucune palette. */
.dropdown-item-add { color: var(--accent); }
.dropdown-item-add:hover { color: var(--accent-hover); }

/* ══════════════════════════════════════
   MAIN
   ══════════════════════════════════════ */
main.container-fluid { flex: 1; padding: 24px 32px; max-width: 100%; }

/* ══════════════════════════════════════
   HEADINGS
   ══════════════════════════════════════ */
h1, h2 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

h5, h6 { font-weight: 600; font-size: 13px; letter-spacing: 0.02em; color: var(--text); }

/* Page header compat : h1 + actions sur la même ligne */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
  flex-wrap: wrap;
}
.page-header h1 { margin: 0; }
.page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════
   CARDS
   ══════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border-light);
  padding: 12px 20px;
}

.card-header h5, .card-header h6 { margin: 0; }

.card-body { padding: 20px; }

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  /* Bordure TRANSPARENTE plutôt qu'absente : sans elle, un `.btn-outline-*` qui ajoute
     `border: 1px` mesurait 2 px de plus qu'un bouton plein, et deux boutons côte à côte
     ne s'alignaient jamais. Les variantes ne changent désormais que la couleur. */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease);
  white-space: nowrap;
}

.btn-dark,
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(99,102,241,0.3);
}

.btn-dark:hover,
.btn-primary:hover {
  background: var(--accent-hover);
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
  transform: translateY(-1px);
  color: #fff;
}

.btn-outline-dark {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline-dark:hover {
  background: var(--surface-alt);
  border-color: var(--text-secondary);
  color: var(--text);
}

.btn-outline-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-outline-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--text-secondary);
  color: var(--text);
}

.btn-outline-danger {
  background: var(--danger-light);
  color: var(--danger);
  border: 1px solid rgba(239,68,68,0.2);
}
.btn-outline-danger:hover {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

.btn-outline-warning {
  background: var(--warning-light);
  color: var(--warning);
  border: 1px solid rgba(245,158,11,0.2);
}
.btn-outline-warning:hover {
  background: var(--warning);
  color: #fff;
}

.btn-outline-info {
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid rgba(14,165,233,0.2);
}
.btn-outline-info:hover {
  background: var(--blue);
  color: #fff;
}

.btn-outline-success {
  background: var(--green-light);
  color: var(--green);
  border: 1px solid rgba(16,185,129,0.2);
}
.btn-outline-success:hover {
  background: var(--green);
  color: #fff;
}

.btn-success {
  background: var(--green);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(16,185,129,0.3);
}
.btn-success:hover {
  background: #2e8550;
  color: #fff;
  transform: translateY(-1px);
}

.btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--radius-sm); }
.btn-lg { padding: 10px 24px; font-size: 14px; }

/* Compat : .btn-secondary devient outline-secondary */
.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}
.btn-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--text-secondary);
  color: var(--text);
}

/* ══════════════════════════════════════
   BADGES
   ══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.badge.bg-warning, .badge.text-bg-warning {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(245,158,11,0.2);
}

.badge.bg-success, .badge.text-bg-success {
  background: var(--green-light) !important;
  color: var(--green) !important;
  border: 1px solid rgba(16,185,129,0.2);
}

.badge.bg-secondary, .badge.text-bg-secondary {
  background: var(--surface-alt) !important;
  color: var(--muted) !important;
  border: 1px solid var(--border);
}

.badge.bg-dark, .badge.text-bg-dark {
  background: var(--text) !important;
  color: #fff !important;
}

.badge.bg-info, .badge.text-bg-info {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(14,165,233,0.2);
}

.badge.bg-danger, .badge.text-bg-danger {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  border: 1px solid rgba(239,68,68,0.2);
}

.badge.bg-light { background: var(--surface) !important; color: var(--text) !important; }

/* Compat : badge-status historiques */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.badge-status.status-success { background: var(--green-light); color: var(--green); border: 1px solid rgba(16,185,129,0.2); }
.badge-status.status-pending { background: var(--warning-light); color: var(--warning); border: 1px solid rgba(245,158,11,0.2); }
.badge-status.status-error   { background: var(--danger-light);  color: var(--danger);  border: 1px solid rgba(239,68,68,0.2); }

/* ══════════════════════════════════════
   TABLES
   ══════════════════════════════════════ */
.table { font-size: 13px; }

.table th {
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-light);
  padding: 10px 16px;
  background: var(--surface-alt);
}

.table td {
  vertical-align: middle;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
}

.table-hover > tbody > tr:hover > td { background: var(--surface-alt); }

.table-sm th, .table-sm td { padding: 8px 12px; }

/* ══════════════════════════════════════
   FORMS
   ══════════════════════════════════════ */
.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text);
  letter-spacing: 0.02em;
}

label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: var(--text);
  letter-spacing: 0.02em;
}

.form-control,
.form-select {
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  width: 100%;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}

.form-control::placeholder { color: var(--muted); }

.form-control-sm,
.form-select-sm {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

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

.form-text { font-size: 11px; color: var(--muted); margin-top: 4px; }

.form-check-input { border-color: var(--border); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }

/* ══════════════════════════════════════
   ALERTS
   ══════════════════════════════════════ */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.5;
}

.alert-danger { background: var(--danger-light); border: 1px solid rgba(239,68,68,0.2); color: var(--danger); }
.alert-success { background: var(--green-light); border: 1px solid rgba(16,185,129,0.2); color: var(--green); }
.alert-info { background: var(--blue-light); border: 1px solid rgba(14,165,233,0.2); color: var(--blue); }
.alert-warning { background: var(--warning-light); border: 1px solid rgba(245,158,11,0.2); color: var(--warning); }

/* ══════════════════════════════════════
   DASHBOARD CARDS
   ══════════════════════════════════════ */
.card.text-bg-dark {
  background: var(--text) !important;
  border-color: var(--text);
}

.card.text-bg-warning {
  background: var(--warning-light) !important;
  color: var(--warning) !important;
  border: 1px solid rgba(245,158,11,0.2);
}
.card.text-bg-warning .card-title { color: var(--warning); }
.card.text-bg-warning .card-text { color: var(--text-secondary); }

.card.text-bg-info {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(14,165,233,0.2);
}
.card.text-bg-info .card-title { color: var(--blue); }
.card.text-bg-info .card-text { color: var(--text-secondary); }

.card.text-bg-secondary {
  background: var(--surface-alt) !important;
  color: var(--text) !important;
  border: 1px solid var(--border);
}
.card.text-bg-secondary .card-title { color: var(--text); }
.card.text-bg-secondary .card-text { color: var(--text-secondary); }

.card.text-bg-success {
  background: var(--green-light) !important;
  color: var(--green) !important;
  border: 1px solid rgba(16,185,129,0.2);
}
.card.text-bg-success .card-title { color: var(--green); }
.card.text-bg-success .card-text { color: var(--text-secondary); }

.card .card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 28px;
  font-weight: 700;
}

/* ══════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════ */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-state .emoji { font-size: 36px; margin-bottom: 10px; }
.empty-state p { font-size: 14px; margin: 0; }

/* ══════════════════════════════════════
   KBD
   ══════════════════════════════════════ */
kbd {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text-secondary);
  box-shadow: 0 1px 0 var(--border);
}

/* ══════════════════════════════════════
   MODALS
   ══════════════════════════════════════ */
.modal-content {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.modal-header {
  border-bottom: 1px solid var(--border-light);
  padding: 20px 24px 16px;
}

.modal-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.modal-body { padding: 20px 24px; }
.modal-footer { border-top: 1px solid var(--border-light); padding: 16px 24px 20px; }

#appAlertModal .modal-content,
#appConfirmModal .modal-content {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.modal-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-icon-wrap.icon-info { background: var(--blue-light); color: var(--blue); }
.modal-icon-wrap.icon-success { background: var(--green-light); color: var(--green); }
.modal-icon-wrap.icon-danger { background: var(--danger-light); color: var(--danger); }
.modal-icon-wrap.icon-warning { background: var(--warning-light); color: var(--warning); }

#appConfirmModal .btn-danger-confirm {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
#appConfirmModal .btn-danger-confirm:hover { background: #c13040; border-color: #c13040; }

/* ══════════════════════════════════════
   TOAST
   ══════════════════════════════════════ */
#appToast {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
#appToast.toast-success { background: var(--green); color: #fff; }
#appToast.toast-error { background: var(--danger); color: #fff; }
#appToast.toast-info { background: var(--text); color: #fff; }

/* ══════════════════════════════════════
   SPINNER
   ══════════════════════════════════════ */
.spinner-border { color: var(--accent); }

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin { display: inline-block; animation: spin 1s linear infinite; }

/* ══════════════════════════════════════
   DARK MODE
   ══════════════════════════════════════ */
[data-theme="dark"] {
  /* Dark mode — slate dark, indigo conservé */
  --bg:             #0F172A;   /* slate-900 */
  --surface:        #1E293B;   /* slate-800 */
  --surface-alt:    #334155;   /* slate-700 */
  --text:           #F8FAFC;   /* slate-50 */
  --text-secondary: #CBD5E1;   /* slate-300 */
  --muted:          #64748B;   /* slate-500 */
  --border:         #334155;   /* slate-700 */
  --border-light:   #1E293B;   /* slate-800 */

  --accent-light:      rgba(99,102,241,0.18);
  --accent-warm-light: rgba(245,158,11,0.18);
  --blue-light:        rgba(14,165,233,0.18);
  --green-light:       rgba(16,185,129,0.18);
  --danger-light:      rgba(239,68,68,0.18);
  --warning-light:     rgba(245,158,11,0.18);

  --gradient-soft: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);

  /* Pont vers les variables Bootstrap 5.3 : les composants (.card, .table, …) font
     cascader leur couleur de texte depuis --bs-body-color (noir par défaut). Sans ce
     pont, tout texte brut dans une card est quasi noir sur fond sombre. */
  --bs-body-color:      var(--text);
  --bs-body-bg:         var(--bg);
  --bs-emphasis-color:  var(--text);
  --bs-secondary-color: var(--text-secondary);
  --bs-tertiary-color:  var(--muted);
  --bs-border-color:    var(--border);
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }

/* Navbar dark — override forcé du `!important` light mode (ligne ~86) */
[data-theme="dark"] .navbar {
  background: rgba(15,23,42,0.92) !important;   /* slate-900 translucide */
  border-bottom-color: var(--border);
  backdrop-filter: blur(12px);
}
[data-theme="dark"] .card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .card-header { background: var(--surface-alt); border-bottom-color: var(--border); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--text);
}
[data-theme="dark"] .table th { background: var(--surface-alt); color: var(--muted); border-bottom-color: var(--border); }
[data-theme="dark"] .table td { color: var(--text); border-bottom-color: var(--border); }
[data-theme="dark"] .table-hover > tbody > tr:hover > td { background: var(--surface-alt); }
[data-theme="dark"] .dropdown-menu { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .dropdown-item { color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .modal-content { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .btn-outline-dark,
[data-theme="dark"] .btn-secondary {
  border-color: var(--border);
  color: var(--text);
  background: var(--surface-alt);
}
[data-theme="dark"] .btn-outline-dark:hover,
[data-theme="dark"] .btn-secondary:hover { background: var(--border); }
[data-theme="dark"] .btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--surface-alt);
}
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--border); color: var(--text); }
[data-theme="dark"] .bg-light { background: var(--bg) !important; }
[data-theme="dark"] .text-muted { color: var(--muted) !important; }
[data-theme="dark"] .text-secondary { color: var(--text-secondary) !important; }
[data-theme="dark"] kbd { background: var(--surface-alt); border-color: var(--border); color: var(--text-secondary); }
[data-theme="dark"] .list-group-item { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .btn-close { filter: invert(1); }
[data-theme="dark"] .form-check-input { background-color: var(--surface-alt); border-color: var(--border); }
[data-theme="dark"] .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .navbar-toggler-icon { filter: invert(1); }
@media (max-width: 991.98px) {
  [data-theme="dark"] .navbar-collapse { background: var(--surface); border-top-color: var(--border); }
}

/* ══════════════════════════════════════
   DASHBOARD CARDS — adaptations dark mode
   En light : .text-bg-dark a un fond noir et texte blanc.
   En dark  : on inverse, fond clair-discret + texte clair (sinon les
   cards stat deviennent toutes blanches car `var(--text)` ≈ blanc).
   ══════════════════════════════════════ */
[data-theme="dark"] .card.text-bg-dark {
  background: var(--surface-alt) !important;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .card.text-bg-dark .card-title { color: var(--text); }
[data-theme="dark"] .card.text-bg-dark .card-text  { color: var(--text-secondary); }

/* Badges .text-bg-dark : en dark, var(--text) ≈ blanc comme fond + color #fff figé
   = pilule blanche illisible. On garde la pilule claire mais texte sombre (inversion). */
[data-theme="dark"] .badge.bg-dark,
[data-theme="dark"] .badge.text-bg-dark {
  color: var(--bg) !important;
}

/* Les `text-bg-info / -warning / -success` utilisent déjà des fonds
   semi-transparents (rgba 0.18) qui se rendent OK sur dark, mais on force
   le texte primaire pour assurer le contraste. */
[data-theme="dark"] .card.text-bg-info,
[data-theme="dark"] .card.text-bg-warning,
[data-theme="dark"] .card.text-bg-success,
[data-theme="dark"] .card.text-bg-secondary {
  border-color: var(--border);
}
[data-theme="dark"] .card.text-bg-info .card-text,
[data-theme="dark"] .card.text-bg-warning .card-text,
[data-theme="dark"] .card.text-bg-success .card-text,
[data-theme="dark"] .card.text-bg-secondary .card-text { color: var(--text-secondary); }

/* Inputs Bootstrap : la règle de base couvrait .form-control + .form-select.
   On ajoute les variantes (input groups, search, etc.). */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] textarea {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: var(--muted); }

/* Boutons primary : indigo OK en light, à conserver en dark (le contraste blanc
   sur indigo reste lisible). On force juste le hover pour qu'il reste lisible. */
[data-theme="dark"] .btn-dark,
[data-theme="dark"] .btn-primary {
  color: #fff;
}

/* Alerts Bootstrap natifs : grâce à `data-bs-theme="dark"` (sync via JS), Bootstrap
   gère seul. On laisse, mais on patche les variantes custom si besoin plus tard. */

/* Badges : les `.text-bg-*` Bootstrap sont OK avec data-bs-theme. Pour les badges
   custom (.badge-status.status-*) on assure le contraste. */
[data-theme="dark"] .badge { color: var(--text); }
[data-theme="dark"] .badge.bg-warning, [data-theme="dark"] .badge.text-bg-warning,
[data-theme="dark"] .badge.bg-success, [data-theme="dark"] .badge.text-bg-success,
[data-theme="dark"] .badge.bg-info,    [data-theme="dark"] .badge.text-bg-info,
[data-theme="dark"] .badge.bg-danger,  [data-theme="dark"] .badge.text-bg-danger,
[data-theme="dark"] .badge.bg-secondary, [data-theme="dark"] .badge.text-bg-secondary {
  background: var(--surface-alt) !important;
  border: 1px solid var(--border);
}

/* Liens dans le contenu : restent en accent indigo, OK sur fond dark */
[data-theme="dark"] a { color: var(--accent); }
[data-theme="dark"] a:hover { color: #818CF8; /* indigo-400 plus clair pour hover sur dark */ }

/* Le wordmark Plumeo (SVG inline) : currentColor déjà correct via .plumeo-brand */
[data-theme="dark"] .plumeo-brand .plumeo-logo-svg { color: var(--text); }

/* Form-text et small text utilitaires */
[data-theme="dark"] .form-text,
[data-theme="dark"] small.text-muted,
[data-theme="dark"] small.text-secondary { color: var(--muted) !important; }

/* Hr et séparateurs */
[data-theme="dark"] hr { border-color: var(--border); opacity: 1; }

/* Border helpers Bootstrap */
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-start,
[data-theme="dark"] .border-end { border-color: var(--border) !important; }

/* ══════════════════════════════════════
   MOBILE
   ══════════════════════════════════════ */
@media (max-width: 767.98px) {
  main.container-fluid { padding: 16px; }
  h1, h2 { font-size: 22px; }
  .btn { padding: 6px 12px; font-size: 12px; }
  .btn-lg { padding: 8px 16px; font-size: 13px; }
  .btn-sm { padding: 4px 8px; font-size: 11px; }
  td .btn-sm { padding: 3px 6px; font-size: 11px; }
  .table td, .table th { padding: 8px 10px; font-size: 12px; }
  .card-body { padding: 14px; }
  .card-header { padding: 10px 14px; }
}

/* ══════════════════════════════════════
   PRINT
   ══════════════════════════════════════ */
@media print {
  .navbar, .btn, .no-print { display: none !important; }
  .card { box-shadow: none; border: 1px solid #ddd; }
}

/* ══════════════════════════════════════
   LOGO ERGOPIX (couleur)
   ══════════════════════════════════════ */
/* Wordmark Plumeo : couleur du `.ch` en accent ambre, déjà géré inline + via .plumeo-brand */

/* ══════════════════════════════════════
   DROPDOWN OUTILS ERGOPIX
   ══════════════════════════════════════ */
.ergopix-brand-dropdown {
  position: relative;
  margin-left: -10px;
}
.ergopix-brand-toggle {
  background: transparent;
  border: none;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.ergopix-brand-toggle:hover,
.ergopix-brand-toggle:focus,
.ergopix-brand-toggle[aria-expanded="true"] {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}
.ergopix-brand-text { display: inline-flex; align-items: baseline; }
[data-theme="dark"] .ergopix-brand-toggle:hover,
[data-theme="dark"] .ergopix-brand-toggle:focus,
[data-theme="dark"] .ergopix-brand-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.06); }

.ergopix-brand-chevron {
  font-size: 11px;
  color: var(--muted);
  transition: transform 0.2s var(--ease);
}
.ergopix-brand-toggle[aria-expanded="true"] .ergopix-brand-chevron { transform: rotate(180deg); }

.ergopix-tools-menu.dropdown-menu {
  min-width: 320px;
  padding: 8px;
  margin-top: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.ergopix-tools-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding: 8px 12px 6px;
}

.ergopix-tool-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s var(--ease), transform 0.15s var(--ease);
}
.ergopix-tool-item:hover { background: var(--accent-light); color: var(--text); }
.ergopix-tool-item:hover .ergopix-tool-icon { color: var(--accent); transform: translate(1px, -1px); }

.ergopix-tool-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.15s var(--ease), transform 0.15s var(--ease);
}

.ergopix-tool-text { min-width: 0; flex: 1; }
.ergopix-tool-name { font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.ergopix-tool-current { font-weight: 500; font-size: 11px; color: var(--accent); letter-spacing: 0; }
.ergopix-tool-desc { font-size: 11px; color: var(--muted); margin-top: 1px; }

.ergopix-tool-item--active { background: var(--accent-light); cursor: default; }
.ergopix-tool-item--active .ergopix-tool-icon { background: var(--accent); color: #fff; border-color: var(--accent); }
.ergopix-tool-item--active:hover { background: var(--accent-light); transform: none; }
.ergopix-tool-item--active:hover .ergopix-tool-icon { transform: none; color: #fff; }

[data-theme="dark"] .ergopix-tool-icon { background: var(--bg); border-color: var(--border); }
[data-theme="dark"] .ergopix-tool-item--active .ergopix-tool-icon { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ══════════════════════════════════════
   LOGO CLIENT — vignette settings
   ══════════════════════════════════════ */
.brand-logo-thumb {
  width: 64px; height: 64px;
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 24px; color: var(--accent);
  overflow: hidden; flex-shrink: 0;
}
.brand-logo-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }

/* ══════════════════════════════════════
   LOGO CLIENT DANS LA NAVBAR
   ══════════════════════════════════════ */
.ergopix-client-brand {
  /* Pas de padding en plus du .navbar-brand Bootstrap → s'aligne sur la
     marque texte des autres variantes (admin / client sans logo). */
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: opacity 0.2s var(--ease);
}
.ergopix-client-brand:hover { opacity: 0.75; }
.ergopix-client-logo {
  height: 24px;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════
   SWEET SPOT BAR — preview cards posts
   ══════════════════════════════════════ */
.sweet-bar {
  position: relative;
  height: 6px;
  background: var(--surface-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}
.sweet-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s var(--ease);
}
.sweet-bar-marker {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--text);
  opacity: 0.35;
  pointer-events: none;
}
[data-theme="dark"] .sweet-bar-marker { background: var(--text-secondary); opacity: 0.4; }

.sweet-state-sweet { color: var(--green); font-weight: 600; }
.sweet-state-long  { color: var(--warning); font-weight: 600; }
.sweet-state-over  { color: var(--danger); font-weight: 600; }
.sweet-state-short { color: var(--text-secondary); }

/* ══════════════════════════════════════
   CALENDRIER ÉDITORIAL
   ══════════════════════════════════════ */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.calendar-head {
  padding: 8px 12px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}
.calendar-cell {
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  min-height: 124px;
  padding: 6px 8px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
}
.calendar-cell:nth-child(7n) { border-right: none; }
.calendar-cell-out { background: var(--surface-alt); color: var(--muted); }
.calendar-cell-today { background: var(--accent-light); }
.calendar-cell-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.calendar-cell-today .calendar-cell-date { color: var(--accent); }

.calendar-cell-posts { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.calendar-post {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  text-decoration: none;
  transition: background 0.15s var(--ease);
  overflow: hidden;
}
.calendar-post > i { flex-shrink: 0; margin-top: 1px; }
.calendar-post:hover { background: var(--accent); color: #fff; }
.calendar-post-label {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 767.98px) {
  .calendar-cell { min-height: 60px; padding: 4px 6px; }
  .calendar-post-label { display: none; }
}

/* Calendrier — différencier les réseaux + heure */
.calendar-post-time { font-weight: 600; opacity: 0.8; flex-shrink: 0; }
.calendar-post-linkedin  { background: rgba(10, 102, 194, 0.12); border-left: 2px solid #0a66c2; }
.calendar-post-instagram { background: rgba(228, 64, 95, 0.12); border-left: 2px solid #e4405f; }
.calendar-post-facebook  { background: rgba(24, 119, 242, 0.12); border-left: 2px solid #1877f2; }
.calendar-post-linkedin:hover  { background: #0a66c2; color: #fff; }
.calendar-post-instagram:hover { background: #e4405f; color: #fff; }
.calendar-post-facebook:hover  { background: #1877f2; color: #fff; }
/* Programmé (pas encore publié) : liseré pointillé + léger fond ambré */
.calendar-post-pending { border-style: dashed !important; background: rgba(245, 158, 11, 0.10); }

/* Vignette image sur une entrée */
.calendar-post-thumb {
  width: 16px; height: 16px; border-radius: 3px; object-fit: cover; flex-shrink: 0;
}

/* En-tête de cellule : numéro du jour + bouton "+" (ajout d'événement au survol) */
.calendar-cell-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.calendar-cell-add {
  border: none; background: transparent; color: var(--muted);
  width: 18px; height: 18px; border-radius: 4px; line-height: 1; padding: 0;
  font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s;
}
.calendar-cell:hover .calendar-cell-add { opacity: 1; }
.calendar-cell-add:hover { background: var(--accent); color: #fff; }

/* Événement manuel : chip distinct (drapeau + couleur perso via --event-color) */
.calendar-event {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px; border-radius: var(--radius-sm);
  font-size: 12px; overflow: hidden;
  background: color-mix(in srgb, var(--event-color, #6366F1) 14%, transparent);
  border-left: 3px solid var(--event-color, #6366F1);
  color: var(--text);
}
.calendar-event-main { display: flex; align-items: center; gap: 5px; }
.calendar-event-main > i { color: var(--event-color, #6366F1); flex-shrink: 0; }
.calendar-event-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.calendar-event-note {
  font-size: 11px; color: var(--muted); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.calendar-event-del { display: inline; margin-left: auto; }
.calendar-event-del button {
  border: none; background: transparent; color: var(--muted); padding: 0 0 0 2px;
  line-height: 1; cursor: pointer; font-size: 12px; opacity: 0; transition: opacity .12s;
}
.calendar-event:hover .calendar-event-del button { opacity: 1; }
.calendar-event-del button:hover { color: var(--danger); }

/* Légende */
.calendar-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 12px; color: var(--muted); }
.calendar-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend-linkedin  i { color: #0a66c2; }
.calendar-legend-instagram i { color: #e4405f; }
.calendar-legend-facebook  i { color: #1877f2; }
.calendar-legend-sep { width: 1px; height: 16px; background: var(--border); }

/* Vue liste / agenda (mobile-friendly) */
.calendar-list-day { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.calendar-list-entries { display: flex; flex-wrap: wrap; gap: 6px; }
.calendar-list-entries .calendar-post,
.calendar-list-entries .calendar-event { white-space: normal; max-width: 100%; }

@media (max-width: 767.98px) {
  /* En vue grille sur mobile, on masque labels + note ; la vue liste reste lisible. */
  .calendar-event-label,
  .calendar-event-note { display: none; }
  .calendar-list-entries .calendar-event-label,
  .calendar-list-entries .calendar-post-label { display: inline; }
  .calendar-list-entries .calendar-event-note { display: -webkit-box; }
  .calendar-cell-add { opacity: 1; }
}

/* Voice corpus : visuellement distinguer les auto-published */
.list-group-item-published {
    background: var(--green-light);
}

/* Image attachée à un post (1 par couple post × réseau) */
.post-image-card { background: var(--surface-alt); border-color: var(--border); }
.post-image-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: #fff;
    flex-shrink: 0;
}
.post-image-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 22px;
    background: var(--surface);
}
.preview-image {
    margin-top: 8px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
}
.preview-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Calendrier — variation programmée mais non encore publiée */
.calendar-post-pending {
    border-style: dashed;
    background: rgba(255, 193, 7, 0.10) !important;
    border-color: rgba(255, 193, 7, 0.6) !important;
    border-left-width: 2px;
}
.calendar-post-pending:hover {
    background: rgba(255, 193, 7, 0.25) !important;
    color: var(--text);
}

/* ══════════════════════════════════════
   PLUMEO BRAND (wordmark navbar app)
   ══════════════════════════════════════ */
.plumeo-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  color: inherit;
}
.plumeo-brand-name { color: var(--text); }
.plumeo-brand-tld  { color: var(--accent); font-weight: 800; }
.plumeo-brand:hover { opacity: 0.85; color: inherit; }

/* Logo client (alias des anciennes classes ergopix-client-*) */
.plumeo-client-brand {
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  transition: opacity 0.2s var(--ease);
}
.plumeo-client-brand:hover { opacity: 0.75; }
.plumeo-client-logo {
  height: 24px;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

/* ══════════════════════════════════════
   LOGO PLUMEO (SVG inline via partial)
   ══════════════════════════════════════ */
.plumeo-brand .plumeo-logo-svg {
  height: 26px;
  width: auto;
  display: block;
  color: var(--text);
}
.plumeo-brand:hover .plumeo-logo-svg { color: var(--text); opacity: 0.85; }

/* Login page : logo plus grand, centré */
.login-logo .plumeo-logo-svg {
  height: 44px;
  width: auto;
  display: inline-block;
  color: var(--text);
}

/* ══════════════════════════════════════
   TRIAL BANNER (V3.x)
   ══════════════════════════════════════ */
.trial-banner {
  width: 100%;
  padding: 10px 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
.trial-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.trial-banner-inner .bi { margin-right: 6px; }
.trial-banner .btn-light { background: #fff; color: var(--text); border: none; font-weight: 600; }
.trial-banner .btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5); }
.trial-banner .btn-outline-light:hover { background: rgba(255,255,255,0.15); color: #fff; }

/* Niveaux d'urgence */
.trial-banner-normal   { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); }
.trial-banner-warning  { background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%); }
.trial-banner-critical { background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%); }
.trial-banner-expired  { background: var(--text); }

@media (max-width: 768px) {
  .trial-banner-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 16px; }
  .trial-banner-inner .btn { align-self: stretch; }
}

/* Bandeau « connecté en tant que » (impersonation admin) */
.impersonation-banner {
  width: 100%;
  padding: 8px 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED 0%, #4F46E5 100%);
}
.impersonation-banner-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
.impersonation-banner-inner .bi { margin-right: 6px; }
.impersonation-banner .btn-light { background: #fff; color: var(--text); border: none; font-weight: 600; }
@media (max-width: 768px) {
  .impersonation-banner-inner { flex-direction: column; align-items: stretch; gap: 8px; padding: 0 16px; }
  .impersonation-banner-inner .btn { align-self: stretch; }
}

/* ══════════════════════════════════════
   ONBOARDING WIZARD (V3.x)
   ══════════════════════════════════════ */
.onboarding-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 32px auto 24px;
  max-width: 600px;
}
.onboarding-progress-step { text-align: center; flex-shrink: 0; }
.onboarding-progress-circle {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-alt); color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  border: 2px solid var(--border);
  margin: 0 auto 8px;
  transition: all .25s var(--ease);
}
.onboarding-progress-step.is-active .onboarding-progress-circle {
  background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
}
.onboarding-progress-step.is-done .onboarding-progress-circle {
  background: var(--green); color: #fff; border-color: var(--green);
}
.onboarding-progress-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.onboarding-progress-step.is-active .onboarding-progress-label { color: var(--text); font-weight: 600; }
.onboarding-progress-line {
  flex: 1; height: 2px; background: var(--border); margin: 0 12px; max-width: 100px;
  margin-bottom: 30px;
  transition: background .25s var(--ease);
}
.onboarding-progress-line.is-done { background: var(--green); }

.onboarding-card {
  max-width: 720px;
  margin: 0 auto 60px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 40px;
  box-shadow: var(--shadow-md);
}
.onboarding-card h2 {
  font-size: 24px; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.02em;
}

.onboarding-connect-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface);
}
.onboarding-connect-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; flex-shrink: 0;
}

.onboarding-action-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); text-decoration: none; color: var(--text);
  text-align: left; cursor: pointer; width: 100%;
  transition: all .2s var(--ease);
}
.onboarding-action-card:hover {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: var(--shadow-md); color: var(--text);
}
.onboarding-action-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* ══════════════════════════════════════
   PLAN CARDS (page /billing/upgrade)
   ══════════════════════════════════════ */
.plan-card { transition: all .2s var(--ease); }
.plan-card-popular {
  border-color: var(--accent) !important;
  border-width: 2px;
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.plan-card-ribbon {
  background: var(--gradient-primary);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 8px 12px;
}

/* ─────── Sélecteur de langue (dropdown vanilla, marche app + marketing) ─────── */
.lang-switcher {
    position: relative;
    display: inline-block;
    font-family: inherit;
}
.lang-switcher-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-secondary, #64748b);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.lang-switcher-toggle:hover,
.lang-switcher-toggle:focus-visible {
    background: var(--surface-alt, #f1f5f9);
    color: var(--text, #0f172a);
    border-color: var(--border, #e2e8f0);
    outline: none;
}
.lang-switcher-toggle .bi-translate { font-size: 14px; opacity: 0.75; }
.lang-switcher-current { letter-spacing: 0.02em; }
.lang-switcher-caret {
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}
.lang-switcher.is-open .lang-switcher-caret { transform: rotate(180deg); }
.lang-switcher.is-open .lang-switcher-toggle {
    background: var(--surface-alt, #f1f5f9);
    color: var(--text, #0f172a);
    border-color: var(--border, #e2e8f0);
}

.lang-switcher-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    margin: 0;
    padding: 6px;
    list-style: none !important;        /* défensif : marketing CSS n'a pas de reset Bootstrap */
    background: #fff;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 1050;
}
.lang-switcher-menu li {
    list-style: none !important;
    padding: 0;
    margin: 0;
}
.lang-switcher-menu li::before,
.lang-switcher-menu li::marker { content: none !important; display: none !important; }
.lang-switcher.is-open .lang-switcher-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--text, #0f172a);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.12s ease;
    line-height: 1.2;
}
.lang-switcher-item:hover,
.lang-switcher-item:focus-visible {
    background: var(--surface-alt, #f1f5f9);
    color: var(--text, #0f172a);
    outline: none;
}
.lang-switcher-item.is-current {
    background: var(--surface-alt, #f1f5f9);
    font-weight: 600;
}
.lang-switcher-code {
    display: inline-block;
    min-width: 24px;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted, #94a3b8);
    letter-spacing: 0.04em;
}
.lang-switcher-item.is-current .lang-switcher-code { color: var(--accent, #6366f1); }
.lang-switcher-label { flex-grow: 1; }
.lang-switcher-check { color: var(--accent, #6366f1); font-size: 14px; }

/* Dark mode (app connectée seulement) */
[data-theme="dark"] .lang-switcher-menu {
    background: var(--surface, #1e293b);
    border-color: var(--border, #334155);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════
   Mobile improvements (< 768 px)
   Patch responsive ciblé : tactile, alignements, débordements.
   Ne touche pas au desktop.
   ══════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* Évite le zoom iOS au focus (inputs < 16px déclenchent un auto-zoom) */
  .form-control,
  .form-select,
  textarea.form-control {
    font-size: 16px;
    padding: 11px 13px;
  }
  .form-control-sm,
  .form-select-sm { font-size: 14px; padding: 8px 11px; }

  /* Padding global plus serré pour gagner de la place */
  main.container-fluid { padding: 16px 12px; }
  .navbar { padding: 8px 12px; }

  /* Tactile : 44 px min de hauteur sur les boutons et nav-links */
  .btn { min-height: 40px; padding: 9px 14px; }
  .btn-sm { min-height: 34px; padding: 6px 10px; }
  .navbar .navbar-nav .nav-link { min-height: 44px; display: flex; align-items: center; }

  /* Lang switcher : se met sur la largeur dispo dans le menu burger */
  .navbar-collapse .lang-switcher,
  .navbar-collapse .lang-switcher-toggle { width: 100%; }
  .navbar-collapse .lang-switcher-menu { left: 0; right: auto; min-width: 220px; }

  /* Dropdown user (Compte) : ne déborde plus à droite */
  .navbar .dropdown-menu-end { right: auto; left: 0; }

  /* En-tête de page (col + col-auto) : empile proprement et étire les actions */
  .row.mb-4 > .col-auto {
    width: 100%;
    margin-top: 12px;
  }
  .row.mb-4 > .col-auto.d-flex { flex-wrap: wrap; }
  .row.mb-4 > .col-auto.d-flex > .btn,
  .row.mb-4 > .col-auto.d-flex > .dropdown { flex: 1 1 auto; }

  /* Trio Historique / Variante / Nouveau sur posts/show : plus compact + stack */
  .post-header-actions { flex-wrap: wrap; gap: 8px !important; width: 100%; }
  .post-header-actions > .btn,
  .post-header-actions > .dropdown { min-width: 0 !important; flex: 1 1 calc(50% - 4px); }
  .post-header-actions > .dropdown > .btn { width: 100%; }

  /* Section réseau header — l'image-info à droite ne doit pas écraser le titre */
  .network-section-header { padding: 14px 16px; gap: 12px; }
  .network-section-image { width: 100%; padding: 8px 10px; }
  .network-image-info { min-width: 0; flex: 1; }
  .network-section-title h3 { font-size: 1.15rem; }
  .network-section-icon { width: 38px; height: 38px; font-size: 18px; border-radius: 10px; }

  /* Carousel strip Insta : thumbs un peu plus grandes pour le drag tactile */
  .carousel-strip-item { width: 96px; height: 96px; }
  .network-carousel-strip { padding: 12px 16px 14px; }
  .carousel-strip-items { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
  .carousel-strip-item { scroll-snap-align: start; }

  /* Batch regen bar — ne déborde pas, full-width avec gouttière */
  .batch-regen-bar {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Toast container : laisse de l'air en bas pour ne pas masquer la batch-bar */
  .toast-container { padding: 12px !important; }

  /* Modales centrées : marge latérale */
  .modal-dialog { margin: 12px; }

  /* Trial banner : texte + bouton stack */
  .trial-banner-inner {
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    text-align: center;
  }

  /* Calendrier — encore un poil plus compact, et police lisible */
  .calendar-cell { min-height: 56px; padding: 4px 4px; font-size: 11px; }
  .calendar-cell-date { font-size: 11px; margin-bottom: 2px; }
  .calendar-head { font-size: 10px; padding: 6px 4px; }
  .calendar-post { padding: 2px 4px; font-size: 10px; }

  /* Évite le scroll horizontal involontaire causé par des min-width sur des btn */
  .btn-group.w-100 { flex-wrap: wrap; }
  .btn-group.w-100 > .btn { flex: 1 1 50%; min-width: 0; }

  /* Carte upgrade plan : pas de hover-translate (gêne en tactile) */
  .plan-card:hover { transform: none; }
}

/* Très petits écrans (< 576 px) — finitions */
@media (max-width: 575.98px) {
  h1, h2 { font-size: 22px; }
  .card-body { padding: 16px; }
  .card-header { padding: 10px 16px; }

  /* Trio actions du post : passe en colonne sur très petit pour cliquer plus facilement */
  .post-header-actions > .btn,
  .post-header-actions > .dropdown { flex: 1 1 100%; }

  /* Dropdown menus : largeur calée sur le viewport pour ne pas créer de scroll horizontal */
  .dropdown-menu { max-width: calc(100vw - 24px); }
}

/* ─────── Cluster mobile dans la navbar app : help + lang + dark mode ─────── */
.navbar-mobile-cluster { /* visible uniquement < lg via classes Bootstrap d-flex d-lg-none */
    margin-right: 4px;
}
.navbar-mobile-cluster > * { flex-shrink: 0; }
.navbar-mobile-cluster .nav-link {
    color: var(--text-secondary) !important;
    border-radius: var(--radius-sm);
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}
.navbar-mobile-cluster .nav-link:hover {
    background: var(--accent-light);
    color: var(--accent) !important;
}
.navbar-mobile-cluster .navbar-mobile-cluster-darkmode { border: none; background: transparent; }

@media (min-width: 992px) {
    /* Desktop : jamais visible (Bootstrap d-lg-none gère déjà mais on durcit) */
    .navbar-mobile-cluster { display: none !important; }
}

/* ─────── Boutons icônes navbar (help, dark mode, etc.) — tailles cohérentes ─────── */
.navbar .nav-icon-link,
.navbar-mobile-cluster .nav-link,
.navbar-mobile-cluster .navbar-mobile-cluster-darkmode {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    border-radius: var(--radius-sm);
    color: var(--text-secondary) !important;
    transition: background 0.15s, color 0.15s;
}
.navbar .nav-icon-link:hover,
.navbar-mobile-cluster .nav-link:hover,
.navbar-mobile-cluster .navbar-mobile-cluster-darkmode:hover {
    background: var(--accent-light);
    color: var(--accent) !important;
}
.navbar .nav-icon-link i,
.navbar-mobile-cluster .nav-link i,
.navbar-mobile-cluster .navbar-mobile-cluster-darkmode i {
    font-size: 16px;
    line-height: 1;
}

/* ─────── Chevrons dropdown navbar (Marque, User menu) — même style que le sélecteur de langue ─────── */
.navbar .dropdown-toggle::after {
    /* Override le caret triangulaire Bootstrap par un chevron Bootstrap Icon (cohérent avec lang-switcher-caret) */
    border: none !important;
    width: auto;
    height: auto;
    vertical-align: middle;
    margin-left: 4px;
    font-family: "bootstrap-icons" !important;
    content: "\F282" !important; /* bi-chevron-down */
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.2s var(--ease);
    display: inline-block;
}
.navbar .dropdown.show > .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 0.75;
}

/* ══════════════════════════════════════
   Indicateur global de file d'attente (générations en cours)
   ══════════════════════════════════════ */
#gen-queue .gen-queue-toggle { color: var(--warning) !important; display: inline-flex; align-items: center; }
#gen-queue .gen-queue-toggle:hover { color: var(--accent-warm, #f59e0b) !important; }
#gen-queue .gen-queue-toggle::after { display: none; }  /* pas de caret sur ce dropdown */
.gen-queue-spin { display: inline-block; animation: gen-queue-spin 1.4s linear infinite; }
@keyframes gen-queue-spin { to { transform: rotate(360deg); } }
.gen-queue-count {
    font-size: 10px;
    padding: 2px 6px;
    margin-left: 3px;
    vertical-align: text-top;
}
.gen-queue-menu .dropdown-item { white-space: normal; }

/* ══════════════════════════════════════
   Carte de complétude de configuration (dashboard)
   ══════════════════════════════════════ */
.setup-card { border: 1px solid var(--border); }
.setup-item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.setup-item > i:first-child { font-size: 16px; flex-shrink: 0; }
.setup-item:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.setup-item.is-done { color: var(--muted); background: var(--surface-alt); }
.setup-item.is-done > i:first-child { color: var(--green); }
.setup-item.is-done:hover { border-color: var(--border); box-shadow: none; }

/* ══════════════════════════════════════
   BRAND KIT — blocs thématiques et progression
   Treize champs identiques empilés se lisent comme une corvée. On donne donc à la page
   ce qui lui manquait : un état d'avancement, des groupes qui disent à quoi ils servent,
   et une hiérarchie entre l'essentiel et le bonus.
   ══════════════════════════════════════ */
.bk-progress {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; margin-bottom: 22px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.bk-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.bk-ring svg { transform: rotate(-90deg); }
.bk-ring span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--text);
}

.bk-block {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-sm);
  scroll-margin-top: 90px;
}
.bk-block-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.bk-block-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 17px;
}
.bk-block-head h3 { font-size: 1.03rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.bk-block-head .why { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }
.bk-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.bk-count.done { color: var(--green); }
.bk-body { padding: 18px 20px; }

.bk-field { margin-bottom: 16px; }
.bk-field > label { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; display: block; }
/* Les aides passent de --muted (quasi illisible) à --text-secondary : elles portent
   l'essentiel de la pédagogie de cette page, autant qu'on puisse les lire. */
.bk-field .form-text { color: var(--text-secondary); font-size: 12px; }
.bk-req {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 5px; margin-left: 6px;
  background: var(--accent-light); color: var(--accent-hover);
}
.bk-opt { font-size: 11px; color: var(--muted); margin-left: 6px; font-weight: 500; }
/* Champ vide = bordure en pointillé : on repère les trous sans rien lire. */
.bk-empty textarea, .bk-empty input[type="text"] { border-style: dashed; }
.bk-assist {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin: -6px 0 16px;
  border: 1px solid var(--accent); border-radius: 10px;
  background: var(--accent-light); font-size: 13px;
}
.bk-assist > .bi { color: var(--accent-hover); }

/* « Ce que ça produit » — relie l'effort de remplissage au résultat. La coche verte
   dit ce qui part déjà dans les prompts, le cercle vide ce qui manque encore. */
.bk-effect { border-color: var(--accent); }
.bk-effect .card-header { background: var(--accent-light); }
.bk-effect .card-header .bi { color: var(--accent-hover); }
.bk-effect-list { list-style: none; margin: 0; padding: 0; }
.bk-effect-list li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 4px 0; color: var(--text);
}
.bk-effect-list li > .bi { color: var(--green); flex-shrink: 0; margin-top: 2px; }
.bk-effect-list li.off { color: var(--muted); }
.bk-effect-list li.off > .bi { color: var(--muted); }

/* Barre d'enregistrement : le bouton était en haut à droite, hors de vue après
   1 200 px de défilement. */
.bk-save {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px; justify-content: flex-end;
  padding: 12px 16px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.07);
}
@media (max-width: 767.98px) {
  .bk-block-head { padding: 13px 14px; }
  .bk-body { padding: 14px; }
}

/* ══════════════════════════════════════
   PROFIL SOCIAL (titre, à propos, bio)
   Même grammaire que les blocs du brand kit : ce sont deux pages de configuration
   de la marque, elles doivent se ressembler.
   ══════════════════════════════════════ */
.pa-block {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  margin-bottom: 18px; overflow: hidden; box-shadow: var(--shadow-sm);
  scroll-margin-top: 90px;
}
.pa-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 20px; background: var(--surface-alt); border-bottom: 1px solid var(--border);
}
.pa-icon {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
}
.pa-linkedin  { background: #0a66c2; }
.pa-instagram { background: #e4405f; }
.pa-facebook  { background: #1877f2; }
.pa-head h3 { font-size: 1.03rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.pa-why { font-size: 12px; color: var(--text-secondary); margin: 2px 0 0; }
.pa-limit { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.pa-body { padding: 18px 20px; }

/* L'analyse de l'existant vient AVANT les propositions : on ne remplace pas d'un bloc
   un titre qu'on a depuis trois ans, on veut d'abord savoir ce qui cloche. */
.pa-audit { padding-bottom: 4px; }
.pa-audit-label { font-weight: 600; font-size: 0.875rem; margin-bottom: 4px; display: block; }
.pa-audit-label .bi { color: var(--muted); }

/* Pas de barre de couleur sur le côté : le badge de verdict et le fond teinté disent
   déjà le niveau, et l'accumulation de liserés alourdit la page. */
.pa-verdict {
  margin: 14px 0 4px; padding: 12px 14px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  font-size: 0.9rem;
}
.pa-verdict-success { background: var(--green-light);   border-color: var(--green); }
.pa-verdict-warning { background: var(--warning-light); border-color: var(--warning); }
.pa-verdict-danger  { background: var(--danger-light);  border-color: var(--danger); }
.pa-verdict-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pa-verdict-section { margin-bottom: 8px; }
.pa-verdict-section strong { font-size: 0.82rem; }
.pa-verdict-section ul { margin: 4px 0 0; padding-left: 20px; }
.pa-verdict-section li { margin-bottom: 3px; }
/* La conséquence pour le lecteur, en retrait : c'est elle qui rend le reproche utile. */
.pa-why-inline { color: var(--text-secondary); }
.pa-fix {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.pa-generated { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.pa-generated-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-bottom: 10px;
}

/* Sous-groupe dans une carte réseau : profil personnel / page / bannière. */
.pa-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 4px 0 10px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.pa-item { margin-bottom: 22px; }
.pa-item:last-child { margin-bottom: 6px; }
.pa-item-head { display: flex; align-items: baseline; gap: 10px; }
.pa-item-head h4 { font-size: 0.95rem; font-weight: 700; margin: 0; }
.pa-item-head .pa-limit { margin-left: auto; }

.pa-variant-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.pa-variant-n {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted);
}
/* Chiffres alignés : le compteur bouge à chaque frappe, il ne doit pas danser. */
.pa-count { font-size: 11px; font-variant-numeric: tabular-nums; }
.pa-actions { display: flex; gap: 6px; margin-top: 8px; }

/* Version retenue : deux propositions sont générées, une seule part chez le client.
   Fond teinté + badge, jamais de liseré latéral. La bordure transparente au repos
   réserve la place, sinon le bloc sauterait de 2 px au moment du choix. */
.pa-variant {
  padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.pa-variant.is-chosen { background: var(--green-light); border-color: var(--green); }

/* ══════════════════════════════════════
   PACK DE PROFIL (page publique, lecture seule)
   Même grammaire que les blocs de la page /settings/profile, mais sans aucune action
   d'édition : le destinataire copie, il ne décide pas.
   ══════════════════════════════════════ */
.pack-block {
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface);
  margin-bottom: 18px; padding: 18px 20px; box-shadow: var(--shadow-sm);
}
.pack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pack-section-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin: 4px 0 10px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}
.pack-item { margin-bottom: 22px; }
.pack-item:last-child { margin-bottom: 2px; }
.pack-item-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.pack-count { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
/* Où coller le texte : c'est ce qui rend la page actionnable pour quelqu'un qui
   n'est pas du métier et ne sait pas où se cache le champ « titre ». */
.pack-where { font-size: 12px; color: var(--text-secondary); margin: 0 0 8px; }
.pack-where .bi { color: var(--muted); }
/* Le texte tel qu'il sera collé : sauts de ligne conservés, sinon une bio Instagram
   en trois lignes s'affiche en un bloc et on ne voit plus ce qu'on copie. */
.pack-text {
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 0.94rem; line-height: 1.55;
}

@media (max-width: 767.98px) {
  .pa-head { padding: 13px 14px; }
  .pa-body { padding: 14px; }
  .pack-block { padding: 14px; }
}

/* ══════════════════════════════════════
   PERFORMANCE D'UNE PUBLICATION (saisie manuelle)
   Deux champs sur une ligne, sous la bannière « publié ». Discret par construction :
   c'est un geste facultatif, il ne doit pas concurrencer les actions du post.
   ══════════════════════════════════════ */
.metric-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 7px 10px;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--bg);
}
.metric-label { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.metric-input { width: 88px; font-size: 12px; }
.metric-input::placeholder { color: var(--muted); }

/* ══════════════════════════════════════
   DICTÉE (entrée par l'idée)
   ══════════════════════════════════════ */
/* En enregistrement, le bouton doit être impossible à confondre avec un bouton au repos :
   on tient un micro ouvert, l'utilisateur doit le voir sans y penser. */
.btn.is-recording {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  animation: dictate-pulse 1.4s ease-in-out infinite;
}
.btn.is-recording:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
@keyframes dictate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* Respect de « réduire les animations » : le rouge suffit à porter l'information. */
@media (prefers-reduced-motion: reduce) {
  .btn.is-recording { animation: none; }
}

/* ══════════════════════════════════════
   PILIERS ÉDITORIAUX DÉTECTÉS
   ══════════════════════════════════════ */
.pillar-card { transition: opacity .15s var(--ease); }
/* Décoché ≠ supprimé : on l'atténue pour qu'il reste possible de revenir dessus. */
.pillar-card.is-off { opacity: .45; }
.pillar-excerpts summary { cursor: pointer; }
.pillar-excerpts ul { padding-left: 18px; }
.pillar-detect {
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--bg);
}

/* ══════════════════════════════════════
   ONGLETS DE SOURCE (idée / URL / texte / PDF)
   Même segmented control que les « Déclinaisons » d'un post : deux endroits où l'on
   choisit une forme, une seule grammaire visuelle.
   ══════════════════════════════════════ */
.src-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  padding: 4px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.src-tab {
  display: flex; align-items: center; gap: 9px;
  min-width: 0;
  padding: 8px 12px 8px 8px;
  background: transparent; border: 1px solid transparent; border-radius: 11px;
  color: var(--text-secondary); text-align: left; cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.src-tab:hover { background: var(--surface); color: var(--text); }
.btn-check:checked + .src-tab,
.src-tab.active {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn-check:focus-visible + .src-tab,
.src-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Onglet « idée » actif : le radio coché garde sa valeur mais perd son apparence d'actif. */
.src-tabs.is-idea .btn-check:checked + .src-tab {
  background: transparent; color: var(--text-secondary);
  border-color: transparent; box-shadow: none;
}
.src-tabs.is-idea .btn-check:checked + .src-tab .src-tab-icon { background: var(--muted); }
.src-tab-icon {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); color: #fff; font-size: 15px;
  transition: background 0.15s var(--ease);
}
.btn-check:checked + .src-tab .src-tab-icon,
.src-tab.active .src-tab-icon { background: var(--accent); }
.src-tab-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.src-tab-label { font-size: 0.875rem; font-weight: 600; }
.src-tab-meta {
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* « Générer » est neutralisé sur l'onglet idée (ce parcours a son propre bouton) :
   on l'atténue au lieu de le laisser croire qu'il va marcher. */
.btn.is-idea-blocked { opacity: 0.45; }

/* Rangée d'actions d'en-tête. Un <form> y est un simple porteur de bouton : en tant
   qu'élément flex il s'étire à la hauteur de la rangée, mais son bouton restait à sa
   taille naturelle et se calait en haut. On le rend flex à son tour. */
.action-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.action-row > form { display: flex; margin: 0; }
.action-row > form > .btn { width: 100%; }

/* ══════════════════════════════════════
   PAGE DE REVUE CLIENT (publique, sans compte)
   ══════════════════════════════════════ */
.review-body { background: var(--bg); }
.review-container { max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.review-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  margin-bottom: 8px;
}
.review-brand-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
@media (max-width: 576px) {
  .review-container { padding-left: 14px; padding-right: 14px; }
}

/* Validation client — c'est un ÉTAT du post : il se lit dans un badge d'en-tête, à
   côté de « n publiée ». Le détail (lien, fil, resoumission) vit dans un panneau
   replié qu'on ouvre depuis ce badge. Aucune bande ne pousse plus le contenu. */
.review-badge {
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  vertical-align: middle;
}
.review-badge-idle {
  background: var(--surface); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.review-badge-idle:hover { color: var(--text-secondary); }
.review-badge-caret { font-size: 0.65em; opacity: 0.75; transition: transform .2s; }
.review-badge[aria-expanded="true"] .review-badge-caret { transform: rotate(180deg); }

.review-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  max-width: 1024px;
  margin-left: auto; margin-right: auto;
}
.review-panel-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.review-panel-head .bi { color: var(--muted); }
.review-panel-body { padding: 14px 16px; }
/* La page peut réduire ses sections à 880px pour laisser vivre le sommaire sticky :
   le panneau suit, sinon il déborde de la colonne de contenu. */
@media (min-width: 1480px) and (max-width: 1679.98px) {
  .review-panel { max-width: 880px; }
}

/* Retour du client, DANS la section du réseau concerné. Une remarque sur le Facebook
   n'a de sens qu'à côté du Facebook. */
.network-review {
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.network-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.network-review-date { color: var(--muted); font-size: 0.82rem; }
.network-review-quote {
  margin: 8px 0 0; padding-left: 12px;
  border-left: 2px solid currentColor;
  font-style: italic;
}
.network-review-changes {
  background: var(--warning-light);
}
.network-review-changes .network-review-head .bi { color: var(--accent-warm-hover); }
.network-review-changes .btn { margin-top: 10px; }
.network-review-approved {
  background: var(--green-light);
}
.network-review-approved .network-review-head .bi { color: var(--green); }
.network-review-pending { background: var(--bg); color: var(--muted); }
@media (max-width: 767.98px) {
  .network-review { padding: 12px 16px; }
}
.review-feedback-list { border-top: 1px dashed var(--border); padding-top: 10px; }
.review-feedback-item { border-left: 2px solid var(--accent); padding: 4px 0 4px 10px; margin-bottom: 8px; }
.review-feedback-item:last-child { margin-bottom: 0; }
.review-thread-round {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); margin: 10px 0 6px;
}
.review-feedback-item.is-agency { border-left-color: var(--muted); opacity: 0.85; }
.review-resubmit { padding: 10px; border: 1px dashed var(--accent); border-radius: 8px; }
.review-previous {
  padding: 10px 12px; border-radius: 8px;
  background: var(--bg); border: 1px dashed var(--border);
}
/* Badge réseau dans le fil de validation — dit de quel post parle chaque remarque */
.review-net-badge { color: #fff; font-weight: 600; }
.review-net-facebook  { background: #1877f2; }
.review-net-instagram { background: #e4405f; }
.review-net-linkedin  { background: #0a66c2; }

/* ══════════════════════════════════════
   PLAN ÉDITORIAL (V4)
   ══════════════════════════════════════ */
.plan-days { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-preview { font-size: 0.86rem; }
.plan-preview li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.plan-preview li:last-child { border-bottom: 0; }
.plan-preview-date { min-width: 78px; color: var(--muted); font-variant-numeric: tabular-nums; }
.plan-preview-pillar { font-weight: 500; }
/* La forme, à droite du sujet : deux axes de rotation, deux poids typographiques —
   le pilier porte le contenu, l'angle n'est qu'une indication de traitement. */
.plan-preview-angle {
  margin-left: auto; padding-left: 8px;
  font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap;
}
.plan-slot-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
}
.plan-slot-date { min-width: 78px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.86rem; }
/* Créneaux du plan dans le calendrier — pointillé = intention, pas contenu */
.calendar-slot {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 6px; margin-bottom: 3px;
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 6px; background: transparent;
  color: var(--muted); font-size: 11px; text-decoration: none;
  transition: border-color .12s, color .12s;
}
.calendar-slot:hover { border-color: var(--accent); color: var(--accent); }
.calendar-slot-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-slot.is-filled { border-style: solid; border-color: var(--accent); color: var(--accent); }
.calendar-slot.is-skipped { opacity: .5; text-decoration: line-through; }

/* ══════════════════════════════════════
   SCRIPTS MULTI-FORMAT (carrousel / Reel)
   ══════════════════════════════════════ */
/* La section « Déclinaisons » emprunte la coque de .network-section (cf.
   preview-card-styles.php) : un script est un livrable, pas un outil. Elle n'a pas de
   couleur de marque — on retombe donc sur l'indigo produit. */
.network-section-scripts { --network-color: var(--accent); --network-tint: var(--accent-light); }
.decl-body { padding: 18px 24px 22px; }
@media (max-width: 767.98px) { .decl-body { padding: 14px 16px 18px; } }

/* Onglets : segmented control. Piste creusée, pastille active surélevée — on lit
   d'un coup d'œil combien de formats existent et lequel est ouvert. */
.decl-tabs {
  display: inline-flex; gap: 4px; flex-wrap: wrap;
  padding: 4px; margin-bottom: 16px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.decl-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 8px;
  background: transparent; border: 1px solid transparent; border-radius: 11px;
  color: var(--text-secondary); text-align: left; cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.decl-tab:hover { background: var(--surface); color: var(--text); }
.decl-tab.active {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.decl-tab-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); color: #fff; font-size: 15px;
  transition: background 0.15s var(--ease);
}
.decl-tab.active .decl-tab-icon { background: var(--accent); }
.decl-tab-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.decl-tab-label { font-size: 0.875rem; font-weight: 600; }
.decl-tab-meta { font-size: 11px; color: var(--muted); }

.decl-pane { display: none; }
.decl-pane.active { display: block; }
.decl-pane-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px dashed var(--border);
}
.decl-pane-title { font-size: 1rem; }

.decl-empty { padding: 18px 0; text-align: center; }
.decl-empty-icon { font-size: 30px; color: var(--muted); display: block; margin-bottom: 10px; }

.script-blocks { list-style: none; margin: 0; padding: 12px 0 0; counter-reset: none; }
.script-block { padding: 8px 0 8px 12px; border-left: 2px solid var(--border); margin-bottom: 8px; }
.script-block:last-child { margin-bottom: 0; }
.script-block-cover, .script-block-hook { border-left-color: var(--accent); }
.script-block-cta { border-left-color: var(--muted); }
.script-block-onscreen { border-left-style: dashed; }
.script-block-kind {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--muted); margin-bottom: 3px;
}
.script-block-title { font-weight: 600; margin-bottom: 2px; }
.script-block-body { font-size: 0.92rem; }

/* Éditeur du profil de voix : monospace compact sur grand écran, mais jamais sous
   16 px sur mobile (la règle média plus bas s'en charge, cf. zoom iOS). */
.voice-editor { font-size: 12px; line-height: 1.5; }

/* ══════════════════════════════════════
   MOBILE — corrections issues de l'audit en 375 px
   Rien de cosmétique ici : chaque règle répond à un défaut mesuré sur l'écran.
   ══════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* Zoom automatique de Safari iOS.
     Un champ de saisie ou une liste déroulante sous 16 px fait zoomer la page à la
     mise au point, et iOS ne dézoome jamais ensuite : l'utilisateur se retrouve
     coincé dans une vue agrandie. Les listes de la page « Nouveau post » étaient à
     14 px. Deux pixels de plus valent mieux qu'une page qui saute. */
  input[type="text"], input[type="email"], input[type="password"], input[type="url"],
  input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
  input[type="datetime-local"], input[type="time"],
  textarea, select, .form-control, .form-select {
    font-size: 16px;
  }

  /* Cible tactile minimale.
     Un bouton d'icône en `p-0` mesurait 13 px de large : impossible à viser au doigt.
     On agrandit la zone sensible sans toucher au poids visuel de l'icône. */
  .btn-link.p-0,
  .pa-verdict-head .btn-link,
  .btn-sm:has(> i.bi:only-child) {
    min-width: 34px;
    min-height: 34px;
  }
  .pa-verdict-head .btn-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Les trois actions d'une proposition de profil (retenir, copier, enregistrer)
     tiennent mal côte à côte : on autorise le retour à la ligne plutôt que
     d'écraser le dernier bouton. */
  .pa-actions { flex-wrap: wrap; }
  .pa-actions .btn { min-height: 34px; }

  /* L'éditeur de voix garde sa classe, donc la règle 16 px ci-dessus s'applique.
     Explicite quand même : c'est le champ le plus long de l'app, on ne veut pas
     qu'un futur style inline le fasse rebasculer sous le seuil. */
  .voice-editor { font-size: 16px; }

  /* Cases à cocher et boutons radio : le libellé ne mesurait que 18 px de haut,
     il faut viser une ligne de texte au doigt. On épaissit la zone sensible sans
     déplacer la case, pour ne pas casser l'alignement de Bootstrap. */
  .form-check-label {
    display: inline-block;
    padding-top: 7px;
    padding-bottom: 7px;
  }
}

/* Le bouton d'action du tiroir n'existe qu'en mobile : au-dessus de lg, la navbar
   porte déjà « Nouveau post » et l'afficher deux fois brouille la lecture. */
.navbar-drawer-cta { display: none; }

/* ══════════════════════════════════════
   TIROIR DE NAVIGATION (mobile)
   Le menu vient de la DROITE plutôt que de pousser le contenu vers le bas :
   sur un téléphone tenu à une main, le pouce est en bas à droite, et un menu
   déplié en haut oblige à remonter l'écran pour naviguer.
   Même pattern que sezam.ch. Au-dessus de lg, Bootstrap neutralise l'offcanvas
   et la barre redevient une navbar classique : un seul balisage, deux rendus.
   ══════════════════════════════════════ */
@media (max-width: 991.98px) {
  /* ⚠️ `backdrop-filter` sur la navbar crée un BLOC CONTENEUR pour les descendants
     en `position: fixed`. Le tiroir, imbriqué dans la barre, s'y retrouvait piégé :
     il s'ouvrait à gauche, large de 45 px, au lieu de couvrir la hauteur d'écran
     depuis la droite. On retire l'effet en dessous de lg, là où le tiroir sert ;
     le verre dépoli reste sur desktop, où il n'y a pas d'offcanvas. */
  .navbar,
  [data-theme="dark"] .navbar { backdrop-filter: none; }

  .navbar-drawer.offcanvas {
    width: min(88vw, 360px);
    background: var(--surface);
    border-left: 1px solid var(--border);
  }
  /* En-tête : qui je suis, pour quelle marque je travaille. Léger dégradé pour
     que le tiroir s'ouvre sur quelque chose d'accueillant plutôt qu'un bandeau gris. */
  .navbar-drawer-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--border);
    background:
      radial-gradient(120% 100% at 100% 0%, var(--accent-light) 0%, transparent 70%),
      var(--surface-alt);
  }
  .navbar-drawer-identity {
    display: flex; align-items: center; gap: 12px; min-width: 0;
  }
  .navbar-drawer-avatar {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: var(--gradient-primary);
    color: #fff; font-size: 1.15rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28);
  }
  .navbar-drawer-avatar img { width: 100%; height: 100%; object-fit: cover; }
  /* Un logo client se suffit à lui-même. Le dégradé et l'ombre habillent l'icône par
     défaut ; derrière une image, ils débordaient par les coins transparents et
     dessinaient un liseré violet autour du logo. */
  .navbar-drawer-avatar.has-logo {
    background: none;
    box-shadow: none;
  }
  .navbar-drawer-avatar.has-logo img { object-fit: contain; }
  .navbar-drawer-names { min-width: 0; display: flex; flex-direction: column; }
  .navbar-drawer-title {
    font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .navbar-drawer-sub {
    font-size: 12px; color: var(--text-secondary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Action principale : ce qu'on vient faire, pas un lien parmi douze.
     Marges latérales alignées sur celles des rangées (10 px) : deux largeurs
     presque identiques se lisent comme un défaut d'alignement, pas comme une
     hiérarchie. La marge basse, elle, sépare franchement l'action de la liste. */
  .navbar-drawer-cta {
    display: flex !important; align-items: center; justify-content: center; gap: 8px;
    margin: 14px 10px 16px;
    min-height: 48px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
  }
  .navbar-drawer-cta:active { transform: translateY(1px); }
  .navbar-drawer-close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 1rem;
    cursor: pointer;
  }
  .navbar-drawer-close:active { background: var(--surface-alt); }

  .navbar-drawer-body { padding: 8px 0 20px; overflow-y: auto; }

  /* Les liens deviennent des rangées pleine largeur, confortables au pouce. */
  .navbar-drawer-body .navbar-nav { width: 100%; }
  .navbar-drawer-body .nav-link,
  .navbar-drawer-body .dropdown-item {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px;
    margin: 2px 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 0.97rem;
    color: var(--text);
  }
  /* Icônes en pastille : elles deviennent des repères qu'on retrouve d'un coup d'œil,
     au lieu de glyphes flottants alignés à gauche du texte. */
  .navbar-drawer-body .nav-link > .bi,
  .navbar-drawer-body .dropdown-item > .bi {
    flex: 0 0 auto;
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0 !important;
    border-radius: 9px;
    background: var(--surface-alt);
    color: var(--text-secondary);
    font-size: 0.95rem;
  }
  .navbar-drawer-body .nav-link:active,
  .navbar-drawer-body .dropdown-item:active { background: var(--surface-alt); }

  /* État actif : sur un téléphone on perd vite le fil de sa position.
     `.dropdown-item.active` (la marque courante) reçoit le même traitement : les
     règles de rangée sont plus spécifiques que la règle générale et reprenaient
     sinon le dessus sur la couleur d'accent. */
  .navbar-drawer-body .is-active,
  .navbar-drawer-body .dropdown-item.active {
    background: var(--accent-light);
    color: var(--accent-hover);
    font-weight: 600;
  }
  .navbar-drawer-body .dropdown-item-add { color: var(--accent); }
  .navbar-drawer-body .is-active > .bi {
    background: var(--accent);
    color: #fff;
  }
  /* Les sous-menus s'affichent à plat : dans un tiroir, un menu déroulant dans un
     menu déroulant demande deux gestes pour atteindre une page. */
  .navbar-drawer-body .dropdown-menu {
    position: static !important;
    display: block !important;
    float: none;
    width: 100%;
    margin: 0;
    padding: 0 0 4px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transform: none !important;
  }
  .navbar-drawer-body .dropdown-toggle::after { display: none; }
  .navbar-drawer-body .dropdown-item { margin-left: 22px; }

  /* Sections : petites capitales discrètes, avec un filet pour aérer la liste. */
  .navbar-drawer-body .nav-item.dropdown { margin-top: 10px; }
  .navbar-drawer-body .nav-item.dropdown:first-of-type { margin-top: 4px; }

  /* La zone du compte, en bas, se distingue du reste de la navigation. */
  .navbar-drawer-body > .navbar-nav:last-child {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  /* En-têtes de section : ce ne sont pas des liens, ils ne doivent donc pas
     porter la même pastille que les rangées cliquables. */
  .navbar-drawer-body .nav-item.dropdown > .nav-link {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted);
    min-height: 28px; margin-bottom: 0; padding: 4px 12px;
    pointer-events: none; gap: 8px;
  }
  .navbar-drawer-body .nav-item.dropdown > .nav-link > .bi {
    width: auto; height: auto;
    background: none; border-radius: 0;
    color: var(--muted); font-size: 0.85rem;
  }

  /* « Nouveau post » est déjà le bouton en haut du tiroir : le répéter dans la
     liste fait douter qu'il s'agisse de la même chose. */
  .navbar-drawer-body .navbar-nav > .nav-item > a.nav-link[href="/posts/new"] { display: none; }
  .navbar-drawer-body .dropdown-divider { margin: 6px 20px; }
  .navbar-drawer-body .dropdown-header { padding: 8px 20px; }

  /* ── « Installer l'application » ──
     Tout en bas du tiroir : c'est une proposition, pas une étape du parcours.
     Discrète par défaut (fond teinté, pas de dégradé) pour ne pas concurrencer
     le bouton « Nouveau post » qui, lui, est l'action du jour. */
  .navbar-drawer-install {
    margin: 12px 16px 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .navbar-drawer-install-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 52px;
    padding: 8px 12px;
    text-align: left;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
  }
  .navbar-drawer-install-btn:active { background: var(--bg); transform: translateY(1px); }
  .navbar-drawer-install-btn > .bi {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border-radius: 9px;
    color: var(--accent); font-size: 1rem;
  }
  .navbar-drawer-install-text { display: flex; flex-direction: column; min-width: 0; }
  .navbar-drawer-install-title { font-size: 14px; font-weight: 600; }
  .navbar-drawer-install-sub   { font-size: 12px; color: var(--text-secondary); }
  .navbar-drawer-install-hint {
    margin: 8px 2px 0;
    font-size: 12px; line-height: 1.45;
    color: var(--text-secondary);
  }
  .navbar-drawer-install-hint > .bi { color: var(--accent); }
}

/* ── Calendrier : la largeur d'écran choisit la vue ──
   Quand aucune vue n'est demandée explicitement, la page rend la grille ET la liste.
   Une grille de sept colonnes sur 375 px oblige à défiler horizontalement pour lire
   une semaine ; la liste répond directement à la question qu'on se pose sur un
   téléphone (« qu'est-ce qui arrive ? »). Le choix explicite reste prioritaire :
   ces classes ne sont posées qu'en mode automatique. */
.calendar-auto-list { display: none; }
@media (max-width: 767.98px) {
  .calendar-auto-grid { display: none; }
  .calendar-auto-list { display: block; }
}

/* ══════════════════════════════════════
   TITRE DE POST ET PROVENANCE
   Un post s'appelait « #71 » : la liste devait donc afficher un extrait de sa
   source, et dix posts tirés de la même page devenaient dix lignes identiques.
   ══════════════════════════════════════ */

.post-title-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }

/* Le titre s'édite sur place. Le pointeur et le soulignement au survol sont le
   seul indice qu'il est modifiable : un champ de saisie permanent alourdirait une
   page qu'on ouvre pour lire des posts, pas pour les renommer. */
.post-title-editable { cursor: text; border-radius: 4px; padding: 0 2px; }
.post-title-editable:hover {
  background: var(--accent-light);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.post-title-id { font-size: 0.75em; font-weight: 400; }
.post-title-edit-btn { color: var(--muted); text-decoration: none; }
.post-title-edit-btn:hover { color: var(--accent); }

.post-title-form { display: flex; align-items: center; gap: 6px; flex: 1 1 22rem; }
.post-title-form input { font-size: 1rem; }

.post-origin-toggle { cursor: pointer; border: 1px solid var(--border); }
.post-origin-toggle:hover { background: var(--accent-light); color: var(--accent); }

/* La source peut être longue : on la borne et on laisse défiler, plutôt que de
   pousser tout le reste de la page vers le bas. */
.post-origin-text {
  max-height: 16rem;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

@media (max-width: 575.98px) {
  /* En mobile, le formulaire prend toute la largeur : un champ de titre coincé
     à côté de deux boutons devient inutilisable. */
  .post-title-form { flex-basis: 100%; }
}