/* =====================================================
   WAVESTONE CR MASTER – FEUILLE DE STYLE PRINCIPALE
   Charte graphique : Bleu Marine #002D72 / Blanc / Gris
   ===================================================== */

/* ---- Variables CSS ---- */
:root {
  --primary:       #002D72;
  --primary-light: #0050B3;
  --primary-dark:  #001B4E;
  --accent:        #E8007D;
  --white:         #FFFFFF;
  --gray-50:       #F8F9FB;
  --gray-100:      #F0F2F5;
  --gray-200:      #E4E8EE;
  --gray-300:      #CBD2DC;
  --gray-400:      #9AA3B0;
  --gray-500:      #6B7585;
  --gray-600:      #515B6B;
  --gray-700:      #3A4253;
  --gray-800:      #252D3A;
  --gray-900:      #1A2032;
  --success:       #0E9E6E;
  --warning:       #F59E0B;
  --danger:        #EF4444;
  --sidebar-w:     280px;
  --topbar-h:      60px;
  --radius:        10px;
  --radius-sm:     6px;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.08);
  --shadow:        0 2px 12px rgba(0,0,0,.10);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.14);
  --font:          'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-size:     14px;
  --transition:    .2s ease;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size); scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--gray-50);
  color: var(--gray-900);
  height: 100vh;
  overflow: hidden;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  transition: width var(--transition), min-width var(--transition);
  z-index: 100;
  position: relative;
}

.sidebar.collapsed {
  width: 0;
  min-width: 0;
}

/* Header Sidebar */
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: var(--primary);
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  background: transparent;
  width: 160px;
  min-width: 160px;
}

.sidebar-logo {
  width: 160px;
  height: auto;
  max-height: 24px;
  display: block;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  /* Logo blanc sur fond bleu : visible directement, pas de filtre */
  filter: none;
  mix-blend-mode: normal;
}

.sidebar-app-name {
  color: rgba(255,255,255,.55);
  font-weight: 600;
  font-size: .72rem;
  white-space: nowrap;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-left: 1px solid rgba(255,255,255,.25);
  padding-left: 8px;
  flex-shrink: 0;
}

/* Actions */
.sidebar-actions {
  padding: 14px 14px 6px;
  flex-shrink: 0;
}

.btn-new-cr {
  width: 100%;
  background: var(--accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background var(--transition), transform var(--transition);
}

.btn-new-cr:hover { background: #c9006b; transform: translateY(-1px); }

/* Search */
.sidebar-search {
  margin: 8px 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
}

.sidebar-search i { color: rgba(255,255,255,.5); font-size: .8rem; }

.sidebar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--white);
  font-size: .85rem;
  width: 100%;
}

.sidebar-search input::placeholder { color: rgba(255,255,255,.4); }

/* Nav */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

.nav-section-label {
  color: rgba(255,255,255,.4);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 10px 18px 6px;
}

/* Project Item */
.project-item {
  cursor: pointer;
}

.project-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  color: rgba(255,255,255,.8);
  font-size: .875rem;
  transition: background var(--transition), color var(--transition);
  user-select: none;
}

.project-header:hover { background: rgba(255,255,255,.07); color: var(--white); }
.project-header.active { background: rgba(255,255,255,.12); color: var(--white); }

.project-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.project-name { flex: 1; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.project-toggle { font-size: .65rem; color: rgba(255,255,255,.4); transition: transform var(--transition); }
.project-toggle.open { transform: rotate(90deg); }

/* CR list in project */
.project-cr-list {
  display: none;
  background: rgba(0,0,0,.12);
}

.project-cr-list.open { display: block; }

.cr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px 7px 38px;
  color: rgba(255,255,255,.65);
  font-size: .82rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-item:hover { background: rgba(255,255,255,.06); color: var(--white); }
.cr-item.active { color: var(--white); background: rgba(255,255,255,.1); }

.cr-item i { font-size: .7rem; color: rgba(255,255,255,.3); flex-shrink: 0; }

.cr-badge {
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 600;
  flex-shrink: 0;
  margin-left: auto;
}
.cr-badge.draft    { background: rgba(245,158,11,.2); color: #F59E0B; }
.cr-badge.final    { background: rgba(14,158,110,.2); color: #0E9E6E; }
.cr-badge.archived { background: rgba(107,117,133,.2); color: var(--gray-400); }

/* Add project button */
.btn-add-project {
  margin: 10px 14px 4px;
  width: calc(100% - 28px);
  background: transparent;
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.55);
  font-size: .82rem;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--transition);
}

.btn-add-project:hover { background: rgba(255,255,255,.06); color: var(--white); border-color: rgba(255,255,255,.4); }

/* Footer */
.sidebar-footer {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.btn-settings {
  width: 100%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  padding: 9px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.btn-settings:hover { background: rgba(255,255,255,.07); color: var(--white); }

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Topbar */
.topbar {
  height: var(--topbar-h);
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
  z-index: 50;
}

.btn-toggle-sidebar {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--gray-500);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: all var(--transition);
  flex-shrink: 0;
}

.btn-toggle-sidebar:hover { background: var(--gray-100); color: var(--primary); }

.topbar-breadcrumb {
  flex: 1;
  font-size: .9rem;
  color: var(--gray-500);
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-breadcrumb span { color: var(--gray-700); font-weight: 500; }
.topbar-breadcrumb .sep { color: var(--gray-300); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Content area */
.content-area {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

/* Views */
.view { display: none; }
.view.active { display: block; }

/* =====================================================
   DASHBOARD VIEW
   ===================================================== */
.dashboard-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  border-radius: var(--radius);
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.dashboard-hero::before {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
}

.dashboard-hero::after {
  content: '';
  position: absolute;
  right: 80px; bottom: -80px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.04);
}

.hero-text h1 {
  color: var(--white);
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.3;
}

.hero-text h1 span { color: rgba(255,255,255,.75); }

.hero-text p { color: rgba(255,255,255,.7); font-size: .95rem; }

.hero-stats {
  display: flex;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.stat-card {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius);
  padding: 16px 22px;
  text-align: center;
  min-width: 90px;
}

.stat-card .stat-val {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card .stat-label { font-size: .72rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .8px; }

/* Dashboard grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* =====================================================
   PROJECT CARD — nouveau design avec logo client
   ===================================================== */
.project-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Nouvelle carte premium */
.project-card.pc-new {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.07);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: default;
}
.project-card.pc-new:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  transform: translateY(-3px);
  border-color: rgba(0,0,0,.1);
}

/* Barre de couleur latérale */
.pc-color-bar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

/* En-tête : logo + actions */
.pc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  gap: 10px;
}

/* Zone logo client */
.pc-logo-wrap {
  display: flex;
  align-items: center;
  position: relative;
}
.pc-client-logo {
  height: 36px;
  width: auto;
  max-width: 110px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 3px 6px;
  border: 1px solid var(--gray-200);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: block;
}
.pc-client-initials {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: .5px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

/* Boutons actions (+ et trash) */
.pc-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity .18s ease;
}
.project-card.pc-new:hover .pc-header-actions {
  opacity: 1;
}
.pc-action-btn {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.pc-action-btn:hover {
  background: var(--primary);
  color: #fff;
}
.pc-action-btn.pc-action-delete:hover {
  background: #EF4444;
  color: #fff;
}
.pc-shared-badge {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(99,102,241,.1);
  color: #6366F1;
  font-size: .65rem;
}

/* Corps de la carte */
.pc-body {
  padding: 4px 16px 12px;
  flex: 1;
  cursor: pointer;
}
.pc-name {
  font-size: .97rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 5px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pc-desc {
  font-size: .78rem;
  color: var(--gray-500);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pied de carte */
.pc-footer {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--gray-100);
  cursor: pointer;
}
.pc-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pc-cr-total {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray-600);
  background: var(--gray-100);
  padding: 3px 9px;
  border-radius: 20px;
}
.pc-cr-total i { font-size: .7rem; }
.pc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
}
.pc-badge i { font-size: .65rem; }
.pc-badge-final {
  background: rgba(5,150,105,.1);
  color: #059669;
}
.pc-badge-draft {
  background: rgba(234,179,8,.1);
  color: #B45309;
}
.pc-last-update {
  font-size: .72rem;
  color: var(--gray-400);
}

/* Barre de progression finalisation */
.pc-progress-bar {
  height: 3px;
  background: var(--gray-100);
  width: 100%;
}
.pc-progress-fill {
  height: 100%;
  border-radius: 0 2px 2px 0;
  transition: width .4s ease;
  opacity: .7;
}

/* Dark mode */
.dark-mode .project-card.pc-new {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
.dark-mode .pc-client-logo {
  background: var(--gray-100);
  border-color: var(--gray-200);
}
.dark-mode .pc-footer {
  border-color: var(--gray-200);
}
.dark-mode .pc-cr-total {
  background: var(--gray-200);
  color: var(--gray-600);
}
.dark-mode .pc-progress-bar {
  background: var(--gray-200);
}

.project-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.project-card-top {
  height: 5px;
}

.project-card-body {
  padding: 20px;
}

.project-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--gray-900);
  margin-bottom: 6px;
}

.project-card-desc {
  font-size: .82rem;
  color: var(--gray-500);
  margin-bottom: 14px;
  min-height: 36px;
}

.project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: var(--gray-400);
}

.project-card-footer .cr-count {
  background: var(--gray-100);
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  color: var(--gray-700);
}

/* =====================================================
   VIEW HEADER (liste CRs d'un projet)
   ===================================================== */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.view-header h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--gray-900);
}

/* CR Card list */
.cr-card {
  background: var(--white);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.cr-card:hover { box-shadow: var(--shadow); border-color: var(--gray-300); }

.cr-card-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--white);
  flex-shrink: 0;
}

.cr-card-info { flex: 1; min-width: 0; }

.cr-card-title {
  font-weight: 600;
  font-size: .95rem;
  color: var(--gray-900);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-card-meta {
  font-size: .8rem;
  color: var(--gray-400);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.cr-card-meta span { display: flex; align-items: center; gap: 4px; }

.cr-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* =====================================================
   FORMULAIRE CR (Editor View)
   ===================================================== */
.import-zone {
  margin-bottom: 22px;
}

.import-drop-area {
  border: 2px dashed var(--gray-300);
  border-radius: var(--radius);
  background: var(--white);
  padding: 22px 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  transition: border-color var(--transition), background var(--transition);
  cursor: default;
}

.import-drop-area.drag-over {
  border-color: var(--primary);
  background: rgba(0,45,114,.04);
}

.import-drop-area i {
  font-size: 1.8rem;
  color: var(--gray-300);
}

.import-drop-area span {
  flex: 1;
  color: var(--gray-500);
  font-size: .9rem;
  min-width: 180px;
}

.import-drop-area span strong { color: var(--gray-700); }

/* Form sections */
.form-section {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  margin-bottom: 20px;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}

.section-icon {
  width: 32px; height: 32px;
  background: var(--primary);
  color: var(--white);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
}

.section-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  letter-spacing: .3px;
}

.section-body {
  padding: 22px;
}

/* Form groups */
.form-row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.form-row:last-child { margin-bottom: 0; }

.form-row.two-col   { grid-template-columns: 1fr 1fr; }
.form-row.three-col { grid-template-columns: 1fr 1fr 1fr; }

.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-group label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-group input,
.form-group select,
.form-group textarea {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: .9rem;
  font-family: var(--font);
  color: var(--gray-900);
  background: var(--white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
}

/* Participants */
.participants-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }

.participant-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr 1fr 36px;
  gap: 10px;
  align-items: center;
}

/* Avatar circulaire dans la ligne participant */
.participant-row-avatar-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}

.participant-row-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 2px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.participant-row-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
  user-select: none;
}

.participant-row input {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: .87rem;
  font-family: var(--font);
  color: var(--gray-900);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.participant-row input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
}

/* Actions Table */
.actions-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  margin-bottom: 12px;
}

.actions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}

.actions-table thead tr {
  background: var(--primary);
}

.actions-table thead th {
  color: var(--white);
  font-weight: 600;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 11px 14px;
  text-align: left;
  white-space: nowrap;
}

.actions-table tbody tr:nth-child(even) { background: var(--gray-50); }
.actions-table tbody tr:hover { background: rgba(0,45,114,.04); }

.actions-table td {
  padding: 6px 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200);
}

.actions-table td input,
.actions-table td select {
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  font-size: .87rem;
  font-family: var(--font);
  color: var(--gray-900);
  background: transparent;
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.actions-table td input:focus,
.actions-table td select:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
}

.action-status-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}

.status-todo     { background: rgba(245,158,11,.15); color: #92660C; }
.status-wip      { background: rgba(0,80,179,.15); color: var(--primary); }
.status-done     { background: rgba(14,158,110,.15); color: #0A7A55; }
.status-blocked  { background: rgba(239,68,68,.15); color: #B91C1C; }

/* Add row buttons */
.btn-add-row {
  background: none;
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-500);
  font-size: .85rem;
  padding: 9px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}

.btn-add-row:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,45,114,.04); }

/* Save Bar */
.form-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 0 4px;
}

/* Quill overrides */
.ql-container { border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important; border-color: var(--gray-200) !important; font-family: var(--font) !important; font-size: .9rem !important; }
.ql-toolbar { border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important; border-color: var(--gray-200) !important; background: var(--gray-50); }
.ql-editor { min-height: 260px; }
.ql-editor p { margin-bottom: 0.5em; }

/* Export Bar */
.export-bar {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.export-label {
  color: var(--gray-700);
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 6px;
}

.btn-export {
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 2px solid transparent;
  transition: all var(--transition);
}

.btn-email { background: rgba(232,0,125,.1); color: var(--accent); border-color: var(--accent); }
.btn-email:hover { background: var(--accent); color: var(--white); }

.btn-word  { background: rgba(0,45,114,.1); color: var(--primary); border-color: var(--primary); }
.btn-word:hover  { background: var(--primary); color: var(--white); }

.btn-pdf   { background: rgba(239,68,68,.1); color: var(--danger); border-color: var(--danger); }
.btn-pdf:hover   { background: var(--danger); color: var(--white); }

/* =====================================================
   BOUTONS GÉNÉRAUX
   ===================================================== */
.btn-primary {
  background: var(--primary);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}

.btn-primary:hover { background: var(--primary-light); box-shadow: 0 4px 12px rgba(0,45,114,.3); }

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}

.btn-secondary:hover { background: var(--gray-200); }

.btn-outline {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: .85rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
}

.btn-outline:hover { background: rgba(0,45,114,.07); }

.btn-icon {
  background: none;
  border: none;
  width: 34px; height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--gray-400);
  font-size: .9rem;
}

.btn-icon:hover { background: var(--gray-100); color: var(--danger); }

.btn-icon.edit:hover { color: var(--primary); }

/* =====================================================
   MODALES
   ===================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  backdrop-filter: blur(3px);
}

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn .2s ease;
}

.modal.modal-wide { max-width: 820px; }

@keyframes modalIn {
  from { opacity: 0; transform: translateY(-20px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--gray-200);
}

.modal-header h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-header h3 i { color: var(--primary); }

.modal-close {
  background: none;
  border: none;
  color: var(--gray-400);
  font-size: 1rem;
  cursor: pointer;
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all var(--transition);
}

.modal-close:hover { background: var(--gray-100); color: var(--danger); }

.modal-body {
  padding: 22px 24px;
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--gray-200);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Settings grid */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.settings-group { display: flex; flex-direction: column; gap: 8px; }

/* Full-width settings group (spans both columns) */
.settings-group--full {
  grid-column: 1 / -1;
}

/* ---- Font Picker ---- */
.font-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}

.font-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  background: var(--white);
  overflow: hidden;
}

.font-option:hover {
  border-color: var(--primary);
  background: rgba(0,45,114,.03);
}

.font-option.selected {
  border-color: var(--primary);
  background: rgba(0,45,114,.06);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
}

.font-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-sample {
  font-size: .82rem;
  color: var(--gray-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.font-option.selected .font-name { color: var(--primary); }
.font-option.selected .font-sample { color: var(--primary-light); }

.font-check {
  position: absolute;
  top: 6px; right: 7px;
  font-size: .65rem;
  color: var(--primary);
  opacity: 0;
  transition: opacity var(--transition);
}

.font-option.selected .font-check { opacity: 1; }

.settings-group label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.settings-group input[type="text"],
.settings-group select {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .875rem;
  font-family: var(--font);
  color: var(--gray-900);
  outline: none;
  transition: border-color var(--transition);
}

.settings-group input:focus,
.settings-group select:focus { border-color: var(--primary); }

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-picker-row input[type="color"] {
  width: 44px; height: 36px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 2px;
  cursor: pointer;
}

.range-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.range-row input[type="range"] { flex: 1; accent-color: var(--primary); }
.range-row span { font-size: .85rem; color: var(--gray-700); width: 40px; }

.logo-upload-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.logo-upload-area img {
  max-width: 180px;
  max-height: 50px;
  object-fit: contain;
  /* Fond sombre pour que le logo blanc soit visible dans la preview */
  background: var(--primary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  border: 1px solid var(--gray-200);
}

/* Email preview */
.email-preview-wrap {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
  background: var(--gray-50);
  font-size: .82rem;
  color: var(--gray-500);
  margin-top: 12px;
}

.helper-text {
  font-size: .87rem;
  color: var(--gray-500);
  background: rgba(0,45,114,.05);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.helper-text i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* =====================================================
   TOAST
   ===================================================== */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--gray-900);
  color: var(--white);
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  transform: translateY(80px);
  opacity: 0;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 360px;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }
.toast.warning { background: var(--warning); color: var(--gray-900); }

/* =====================================================
   EMPTY STATE
   ===================================================== */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--gray-400);
}

.empty-state i { font-size: 3rem; margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 1.1rem; color: var(--gray-500); margin-bottom: 8px; }
.empty-state p  { font-size: .875rem; margin-bottom: 20px; }

/* =====================================================
   LOADING / SPINNER
   ===================================================== */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Import progress */
.import-progress {
  background: var(--primary);
  color: var(--white);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .85rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 200; transform: translateX(0); transition: transform var(--transition); }
  .sidebar.collapsed { transform: translateX(-100%); width: var(--sidebar-w); min-width: var(--sidebar-w); }
  .content-area { padding: 16px; }
  .form-row.two-col, .form-row.three-col { grid-template-columns: 1fr; }
  .participant-row { grid-template-columns: 44px 1fr 36px; }
  .participant-row input:nth-child(3), .participant-row input:nth-child(4) { display: none; }
  .dashboard-hero { flex-direction: column; gap: 20px; }
  .hero-stats { justify-content: center; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .content-area { padding: 12px; }
  .form-save-bar { flex-direction: column; }
  .export-bar { flex-direction: column; align-items: stretch; }
  .btn-export { justify-content: center; }
}

/* =====================================================
   SCROLLBAR STYLE
   ===================================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* =====================================================
   STATUS BADGES
   ===================================================== */
.status-badge {
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.status-badge.draft    { background: rgba(245,158,11,.15); color: #92660C; }
.status-badge.final    { background: rgba(14,158,110,.15); color: #0A7A55; }
.status-badge.archived { background: rgba(107,117,133,.15); color: var(--gray-500); }

/* =====================================================
   SIDEBAR — boutons actions sur projets & CRs
   ===================================================== */
.project-header { position: relative; }

.sidebar-action-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0);
  font-size: .72rem;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  padding: 0;
}

.project-header:hover .sidebar-action-btn {
  color: rgba(255,255,255,.45);
}

.sidebar-action-btn:hover {
  background: rgba(239,68,68,.25) !important;
  color: #FCA5A5 !important;
}

.cr-item { position: relative; }

.cr-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cr-item-actions {
  display: none;
  gap: 2px;
  align-items: center;
  flex-shrink: 0;
}

.cr-item:hover .cr-item-actions { display: flex; }

.sidebar-cr-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: .68rem;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
}

.sidebar-cr-btn.dup-cr-btn:hover { background: rgba(14,158,110,.3); color: #6EE7B7; }
.sidebar-cr-btn.del-cr-btn:hover { background: rgba(239,68,68,.3); color: #FCA5A5; }

.sidebar-empty-cr {
  padding: 6px 18px 6px 38px;
  font-size: .78rem;
  color: rgba(255,255,255,.3);
}

/* =====================================================
   DASHBOARD — boutons sur les cartes projet
   ===================================================== */
.project-card { position: relative; overflow: visible; }

.project-card-menu {
  position: absolute;
  top: 10px; right: 10px;
  display: none;
  gap: 4px;
  z-index: 2;
}

.project-card:hover .project-card-menu { display: flex; }

.btn-card-action {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: .8rem;
  color: var(--gray-500);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.btn-card-action:hover { background: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-card-action.btn-card-delete:hover { background: var(--danger); color: var(--white); border-color: var(--danger); }

/* =====================================================
   MODALE SM
   ===================================================== */
.modal.modal-sm { max-width: 420px; }

/* Bouton danger */
.btn-danger {
  background: var(--danger) !important;
  color: var(--white) !important;
}
.btn-danger:hover { background: #B91C1C !important; }

/* =====================================================
   USER WIDGET (sidebar bas)
   ===================================================== */
.user-widget {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.07);
  border-radius: var(--radius-sm);
  margin-top: 8px;
  cursor: default;
}

.user-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  color: var(--white);
  flex-shrink: 0;
  letter-spacing: .5px;
  user-select: none;
}

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

.user-name {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-job {
  font-size: .72rem;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =====================================================
   MON ESPACE MODALE
   ===================================================== */
.myspace-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.myspace-stat {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
}

.myspace-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 4px;
}

.myspace-stat-label {
  font-size: .72rem;
  color: var(--gray-400);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-weight: 600;
}

.myspace-grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 20px;
  align-items: start;
}

.myspace-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.myspace-avatar-preview {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
  box-shadow: var(--shadow);
  user-select: none;
  transition: background var(--transition);
}

.myspace-userid {
  font-size: .7rem;
  color: var(--gray-400);
  text-align: center;
  margin-top: 4px;
}

.myspace-userid code {
  display: block;
  background: var(--gray-100);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .65rem;
  color: var(--gray-500);
  word-break: break-all;
  margin-top: 2px;
}

.myspace-info-box {
  display: flex;
  gap: 8px;
  background: rgba(0,45,114,.06);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .8rem;
  color: var(--gray-500);
  margin-top: 8px;
  line-height: 1.5;
}

.myspace-info-box i { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* =====================================================
   IMPORT ZONE améliorée
   ===================================================== */
.import-drop-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 160px;
}

.import-drop-text span { font-size: .9rem; color: var(--gray-700); font-weight: 500; }
.import-drop-text small { font-size: .8rem; color: var(--gray-400); }

.import-drop-btns {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* =====================================================
   TOPBAR ACTIONS — espacement boutons
   ===================================================== */
.topbar-actions .btn-secondary {
  font-size: .82rem;
  padding: 7px 14px;
}

/* =====================================================
   RESPONSIVE — nouvelles sections
   ===================================================== */
@media (max-width: 900px) {
  .myspace-grid { grid-template-columns: 1fr; }
  .myspace-stats { grid-template-columns: repeat(2,1fr); }
  .myspace-avatar-col { flex-direction: row; }
}

@media (max-width: 600px) {
  .myspace-stats { grid-template-columns: repeat(2,1fr); }
  .cr-item-actions { display: flex; }
}

/* =====================================================
   SIDEBAR — Mon Espace raccourci
   ===================================================== */
.sidebar-myspace-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  margin: 0 10px 4px;
  background: rgba(232,0,125,.12);
  border: 1px solid rgba(232,0,125,.2);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  width: calc(100% - 20px);
  text-align: left;
}
.sidebar-myspace-btn i { color: var(--accent); font-size: .85rem; }
.sidebar-myspace-btn:hover {
  background: rgba(232,0,125,.22);
  border-color: rgba(232,0,125,.4);
  color: #fff;
  transform: translateX(2px);
}

/* =====================================================
   SIDEBAR — amélioration bouton supprimer projet
   ===================================================== */
.project-header { display: flex; align-items: center; gap: 4px; }
.project-name { flex: 1; min-width: 0; }

/* Tooltip sur boutons sidebar */
.sidebar-action-btn[title],
.sidebar-cr-btn[title] {
  position: relative;
}

/* Amélioration visuelle cr-item avec actions */
.cr-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cr-badge { flex-shrink: 0; }

/* =====================================================
   DASHBOARD — Card actions améliorées
   ===================================================== */
.project-card-menu {
  background: transparent;
  padding: 4px;
  border-radius: 8px;
}

/* =====================================================
   MODAL CONFIRM — amélioration visuelle
   ===================================================== */
.modal.modal-sm .modal-body p {
  line-height: 1.65;
}
.modal.modal-sm .modal-body strong {
  color: var(--gray-900);
}

/* =====================================================
   IMPORT — feedback amélioré
   ===================================================== */
.import-drop-area.drag-over {
  border-color: var(--primary);
  background: rgba(0,45,114,.06);
  transform: scale(1.01);
}

.import-success-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(14,158,110,.1);
  border: 1px solid rgba(14,158,110,.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .85rem;
  color: #0A7A55;
  margin-top: 8px;
}
.import-success-banner i { color: #0E9E6E; flex-shrink: 0; }

/* =====================================================
   VIEW — Mon Espace (vue dédiée)
   ===================================================== */
#viewMySpace .myspace-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border-radius: var(--radius);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  color: var(--white);
}
#viewMySpace .myspace-hero-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; font-weight: 800;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.25);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
#viewMySpace .myspace-hero-name { font-size: 1.3rem; font-weight: 700; }
#viewMySpace .myspace-hero-role { font-size: .9rem; opacity: .75; margin-top: 2px; }
#viewMySpace .myspace-hero-id {
  font-size: .7rem; opacity: .45; margin-top: 6px;
  font-family: monospace;
}

/* =====================================================
   CR CARD — icône dupliquer visible au hover
   ===================================================== */
.cr-card-actions .btn-icon {
  opacity: 0;
  transition: opacity var(--transition), background var(--transition);
}
.cr-card:hover .cr-card-actions .btn-icon { opacity: 1; }

/* Sur mobile, toujours visible */
@media (max-width: 768px) {
  .cr-card-actions .btn-icon { opacity: 1; }
}

/* =====================================================
   TOPBAR — Bouton supprimer projet (rouge discret)
   ===================================================== */
.topbar-actions .btn-secondary {
  transition: all var(--transition);
}
.topbar-actions .btn-secondary:has(.fa-trash-can):hover {
  background: var(--danger);
  color: var(--white);
  border-color: var(--danger);
}

/* =====================================================
   TOAST — amélioration visibilité
   ===================================================== */
.toast.warning {
  background: linear-gradient(135deg, #92400E, #B45309);
}

/* =====================================================
   LAYOUT GLOBAL — appRoot + loginScreen
   ===================================================== */
#appRoot {
  display: none; /* caché jusqu'à connexion */
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* =====================================================
   ÉCRAN DE CONNEXION — redesign moderne
   ===================================================== */
#loginScreen {
  position: fixed;
  inset: 0;
  background: #000e2c;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  /* Fond animé : dégradé radial + formes flottantes via pseudo-éléments */
}

/* Fond animé avec bulles de lumière */
#loginScreen::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, rgba(0,80,200,.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(0,50,140,.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 10%, rgba(255,120,0,.12) 0%, transparent 50%);
  animation: loginBgPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Grille de points subtile en surimpression */
#loginScreen::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

@keyframes loginBgPulse {
  0%   { opacity: .9; }
  50%  { opacity: 1; }
  100% { opacity: .85; }
}

/* Cercles décoratifs flottants */
.login-bg-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 12s ease-in-out infinite;
}
.login-bg-orb-1 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(0,100,255,.25) 0%, transparent 70%);
  top: -120px; left: -100px;
  animation-delay: 0s;
}
.login-bg-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,140,0,.15) 0%, transparent 70%);
  bottom: -80px; right: -80px;
  animation-delay: -4s;
}
.login-bg-orb-3 {
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,200,180,.12) 0%, transparent 70%);
  top: 50%; right: 15%;
  animation-delay: -8s;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(.96); }
}

.login-screen-wrap {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  background: #000e2c;
}
.login-screen-wrap::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 30%, rgba(0,80,200,.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 70%, rgba(0,50,140,.4) 0%, transparent 55%);
  pointer-events: none;
}

/* Carte de connexion — glassmorphism élégant */
.login-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  box-shadow:
    0 32px 80px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.15),
    inset 0 1px 0 rgba(255,255,255,.6);
  overflow: hidden;
  animation: loginSlideIn .4s cubic-bezier(.16,1,.3,1);
  margin: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(20px);
}

@keyframes loginSlideIn {
  from { opacity:0; transform: translateY(28px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* En-tête de carte — gradient riche avec motif */
.login-logo {
  background: linear-gradient(160deg, #001233 0%, #002D72 45%, #0050C8 100%);
  padding: 32px 36px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* Motif décoratif dans l'en-tête */
.login-logo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.07) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(0,100,255,.2) 0%, transparent 40%);
  pointer-events: none;
}
.login-logo::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to bottom right, transparent 49%, rgba(255,255,255,.97) 50%);
}

.login-logo-img {
  height: 36px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: none;
  mix-blend-mode: normal;
  margin-bottom: 16px;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

.login-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: .6px;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.login-subtitle {
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  position: relative;
  z-index: 1;
  letter-spacing: .3px;
}

/* Onglets — design affiné */
.login-tabs {
  display: flex;
  border-bottom: 1.5px solid #e8edf5;
  background: #f7f9fc;
}

.login-tab {
  flex: 1;
  padding: 14px 16px;
  background: none;
  border: none;
  font-size: .88rem;
  font-weight: 500;
  color: #8a97b0;
  cursor: pointer;
  transition: all .2s ease;
  border-bottom: 3px solid transparent;
  margin-bottom: -1.5px;
  font-family: var(--font);
  letter-spacing: .2px;
}
.login-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 700;
  background: rgba(0,45,114,.03);
}
.login-tab:hover:not(.active) {
  color: var(--gray-700);
  background: rgba(0,0,0,.02);
}

/* Badge 2FA obligatoire — bien intégré */
.login-mfa-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 24px 0;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(0,45,114,.07) 0%, rgba(0,80,200,.05) 100%);
  border: 1.5px solid rgba(0,45,114,.18);
  border-radius: 10px;
  font-size: .78rem;
  color: #002D72;
  line-height: 1.45;
}
.login-mfa-notice > i {
  font-size: 1rem;
  color: var(--primary);
  flex-shrink: 0;
}
.dark-mode .login-mfa-notice {
  background: rgba(0,80,200,.12);
  border-color: rgba(100,150,255,.25);
  color: #a0b8ff;
}
.dark-mode .login-mfa-notice > i { color: #6699ff; }

#loginForm, #registerForm {
  padding: 20px 28px 16px;
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  background: #fff;
}

.login-form-group {
  margin-bottom: 16px;
}
.login-form-group label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 7px;
  letter-spacing: .2px;
}
.login-form-group input {
  width: 100%;
  padding: 11px 15px;
  border: 1.5px solid #e2e8f4;
  border-radius: 10px;
  font-size: .9rem;
  color: #1a2540;
  background: #f8faff;
  font-family: var(--font);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.login-form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,45,114,.1);
  background: #fff;
}
  font-size: .9rem;
  color: var(--gray-900);
  background: var(--gray-50);
  font-family: var(--font);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.login-form-group input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,45,114,.12);
  background: #fff;
}

.login-pass-wrap {
  position: relative;
}
.login-pass-wrap input {
  padding-right: 42px;
}
.toggle-password {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--gray-400);
  cursor: pointer;
  font-size: .85rem;
  padding: 4px;
  transition: color var(--transition);
}
.toggle-password:hover { color: var(--primary); }

.btn-login {
  width: 100%;
  padding: 13px 20px;
  background: linear-gradient(135deg, #002D72 0%, #0050C8 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  transition: all .2s ease;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: .3px;
  box-shadow: 0 6px 20px rgba(0,45,114,.35);
  position: relative;
  overflow: hidden;
}
.btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .2s ease;
}
.btn-login:hover  {
  background: linear-gradient(135deg, #001B4E 0%, #003B99 100%);
  box-shadow: 0 8px 28px rgba(0,45,114,.5);
  transform: translateY(-1px);
}
.btn-login:hover::before { opacity: 1; }
.btn-login:active { transform: scale(.98) translateY(0); box-shadow: 0 4px 12px rgba(0,45,114,.3); }
.btn-login:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.login-error {
  font-size: .82rem;
  color: var(--danger);
  margin: -8px 0 12px;
  min-height: 18px;
  line-height: 1.4;
}

.login-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: linear-gradient(135deg, rgba(0,45,114,.04) 0%, rgba(0,80,200,.03) 100%);
  border-top: 1px solid #e8edf5;
  padding: 14px 24px;
  font-size: .76rem;
  color: #7a8aaa;
  line-height: 1.5;
}
.login-info i { color: var(--primary); flex-shrink: 0; margin-top: 2px; }

/* Select dans le login */
.login-select {
  width: 100%;
  padding: 11px 15px;
  border: 1.5px solid #e2e8f4;
  border-radius: 10px;
  font-size: .9rem;
  color: #1a2540;
  background: #f8faff;
  font-family: var(--font);
  transition: border-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  appearance: auto;
}
.login-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(0,45,114,.1);
  background: #fff;
}

/* =====================================================
   BOUTON DÉCONNEXION (outline danger)
   ===================================================== */
.btn-danger-outline {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.btn-danger-outline:hover {
  background: var(--danger) !important;
  color: #fff !important;
}

/* =====================================================
   RESPONSIVE LOGIN
   ===================================================== */
@media (max-width: 480px) {
  .login-card { border-radius: 16px; }
  .login-logo { padding: 24px 20px 20px; }
  #loginForm, #registerForm { padding: 16px 16px 14px; max-height: calc(100vh - 200px); }
  .login-mfa-notice { margin: 10px 16px 0; }
}
@media (max-height: 700px) {
  #loginScreen { align-items: flex-start; padding: 12px; }
  .login-card  { margin: 12px auto; }
  #loginForm, #registerForm { max-height: calc(100vh - 200px); }
}

/* =====================================================
   MOT DE PASSE OUBLIÉ
   ===================================================== */
.login-forgot-link {
  display: block;
  text-align: right;
  font-size: .78rem;
  color: var(--primary);
  text-decoration: none;
  margin-top: -8px;
  margin-bottom: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: color .2s ease;
  opacity: .85;
}
.login-forgot-link:hover { color: #0050C8; opacity: 1; text-decoration: underline; }

#forgotPanel {
  padding: 20px 28px 16px;
}
#forgotPanel .forgot-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--primary);
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
}
#forgotPanel .forgot-back:hover { color: var(--accent); }
.forgot-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 6px;
}
.forgot-desc {
  font-size: .82rem;
  color: var(--gray-500);
  margin-bottom: 18px;
  line-height: 1.5;
}
.forgot-step {
  display: none;
}
.forgot-step.active {
  display: block;
}
.forgot-security-question {
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.forgot-success-box {
  background: #D1FAE5;
  border: 1.5px solid #10B981;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: .86rem;
  color: #065F46;
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.forgot-success-box i { flex-shrink: 0; margin-top: 1px; }

/* =====================================================
   TABLEAU DE BORD PROJET
   ===================================================== */

/* --- KPI Grid --- */
.pd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.pd-kpi-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  transition: box-shadow var(--transition), transform var(--transition);
}
.pd-kpi-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.pd-kpi-icon { font-size: 1.3rem; margin-bottom: 2px; }
.pd-kpi-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.pd-kpi-label { font-size: .75rem; color: var(--gray-500); font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.pd-kpi-sub   { font-size: .72rem; color: var(--gray-400); }

/* Progress card */
.pd-progress-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  grid-column: span 2;
}
.pd-progress-title { font-size: .8rem; font-weight: 700; color: var(--gray-700); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
.pd-progress-bar-wrap { background: var(--gray-100); border-radius: 10px; height: 10px; overflow: hidden; margin-bottom: 10px; }
.pd-progress-bar-inner { height: 100%; border-radius: 10px; transition: width .5s ease; }
.pd-progress-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-leg { display: flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--gray-600); }
.pd-leg .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* --- Sections --- */
.pd-section {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  margin-bottom: 24px;
  overflow: hidden;
}
.pd-section-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--gray-700);
  padding: 14px 20px;
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-section-title i { color: var(--primary); }

/* --- Participants Grid --- */
.pd-participants-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  padding: 16px 20px;
}
.pd-participant-card {
  background: var(--gray-50);
  border-radius: var(--radius);
  border: 1px solid var(--gray-200);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  transition: box-shadow var(--transition);
}
.pd-participant-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary);
}
.pd-participant-avatar-wrap {
  position: relative;
  margin-bottom: 2px;
}
.pd-participant-avatar,
.pd-participant-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pd-participant-count {
  position: absolute;
  bottom: -2px;
  right: -4px;
  background: var(--primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  border: 1.5px solid var(--white);
  white-space: nowrap;
}
.pd-participant-name    { font-size: .85rem; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.pd-participant-role    { font-size: .72rem; color: var(--primary); font-weight: 500; }
.pd-participant-company { font-size: .72rem; color: var(--gray-500); }
.pd-participant-presence {
  width: 100%;
  height: 4px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
  margin: 2px 0;
}
.pd-presence-bar {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width .4s ease;
}
.pd-participant-actions { display: flex; gap: 6px; }
.pd-btn-sm {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-500);
  font-size: .72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.pd-btn-sm:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.pd-btn-sm.pd-btn-danger:hover { background: #EF4444; color: #fff; border-color: #EF4444; }

/* --- Actions Table --- */
.pd-actions-table-wrap {
  overflow-x: auto;
  padding: 0 20px 20px;
}
.pd-actions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.pd-actions-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--gray-50);
  color: var(--gray-600);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 2px solid var(--gray-200);
  white-space: nowrap;
}
.pd-actions-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gray-100);
  vertical-align: middle;
}
.pd-actions-table tr:hover td { background: var(--gray-50); }
.pd-row-overdue td { background: #FFF5F5 !important; }
.pd-row-overdue:hover td { background: #FEE2E2 !important; }
.pd-overdue-date { color: var(--danger); font-weight: 700; }

/* Filter buttons */
.pd-filter-btn {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  font-size: .75rem;
  font-weight: 500;
  color: var(--gray-600);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font);
}
.pd-filter-btn.active,
.pd-filter-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* Badges */
.pd-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
}
.pd-badge-todo    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.pd-badge-wip     { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.pd-badge-done    { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.pd-badge-blocked { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* --- Status Select (inline change) --- */
.pd-status-select {
  border: none;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font);
  outline: none;
  transition: box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}
.pd-status-select:focus { box-shadow: 0 0 0 2px rgba(0,45,114,.25); }
.pd-status-select:disabled { opacity: .6; cursor: wait; }
.pd-status-select.pd-status-todo    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.pd-status-select.pd-status-wip     { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.pd-status-select.pd-status-done    { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.pd-status-select.pd-status-blocked { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* Agenda todo-row select */
.agenda-status-select {
  border: none;
  border-radius: 10px;
  font-size: .72rem;
  font-weight: 700;
  padding: 3px 8px;
  cursor: pointer;
  font-family: var(--font);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .15s;
}
.agenda-status-select:focus { box-shadow: 0 0 0 2px rgba(0,45,114,.25); }
.agenda-status-select:disabled { opacity: .6; cursor: wait; }
.agenda-status-select.agenda-st-todo    { background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.agenda-status-select.agenda-st-wip     { background: #DBEAFE; color: #1E40AF; border: 1px solid #93C5FD; }
.agenda-status-select.agenda-st-done    { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.agenda-status-select.agenda-st-blocked { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* --- Deadlines --- */
.pd-deadline-group { padding: 14px 20px; }
.pd-deadline-group + .pd-deadline-group { border-top: 1px solid var(--gray-100); }
.pd-deadline-group-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pd-deadline-group-title.urgent { color: var(--danger); }
.pd-count {
  background: var(--gray-200);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .7rem;
  color: var(--gray-600);
}
.pd-deadline-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-deadline-item {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  min-width: 200px;
  max-width: 280px;
  flex: 1;
}
.pd-deadline-item.overdue { background: #FFF5F5; border-color: #FCA5A5; }
.pd-deadline-item.soon    { background: #FFFBEB; border-color: #FCD34D; }
.pd-deadline-date { font-size: .75rem; font-weight: 700; color: var(--gray-500); margin-bottom: 4px; }
.pd-deadline-item.overdue .pd-deadline-date { color: var(--danger); }
.pd-deadline-item.soon    .pd-deadline-date { color: #D97706; }
.pd-deadline-action { font-size: .85rem; font-weight: 600; color: var(--gray-900); margin-bottom: 3px; line-height: 1.3; }
.pd-deadline-meta   { font-size: .72rem; color: var(--gray-500); }
.pd-empty { padding: 20px; color: var(--gray-400); font-style: italic; font-size: .85rem; text-align: center; }

/* =====================================================
   MODALE PROFIL PARTICIPANT
   ===================================================== */
.pp-avatar-section {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 20px;
}
.pp-photo-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.pp-photo, .pp-photo-placeholder {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gray-200);
}
.pp-photo-placeholder {
  background: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--gray-400);
}
.pp-photo-btn {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  cursor: pointer;
  border: 2px solid var(--white);
  transition: background var(--transition);
}
.pp-photo-btn:hover { background: var(--accent); }
.pp-color-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-color-input {
  width: 40px;
  height: 32px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 2px;
}
.pp-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(0,45,114,.05);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: .78rem;
  color: var(--gray-500);
  margin-top: 8px;
}
.pp-info i { color: var(--primary); flex-shrink: 0; margin-top: 1px; }

/* =====================================================
   MODE SOMBRE
   ===================================================== */
.dark-mode {
  --primary:       #4D8BFF;
  --primary-light: #6BA3FF;
  --primary-dark:  #2D6BE0;
  --accent:        #FF4DB8;
  --white:         #1E293B;
  --gray-50:       #0F172A;
  --gray-100:      #1E293B;
  --gray-200:      #334155;
  --gray-300:      #475569;
  --gray-400:      #64748B;
  --gray-500:      #94A3B8;
  --gray-700:      #CBD5E1;
  --gray-900:      #F8FAFC;
  --shadow-sm:     0 1px 4px rgba(0,0,0,.4);
  --shadow:        0 2px 12px rgba(0,0,0,.5);
  --shadow-lg:     0 8px 32px rgba(0,0,0,.6);
}
.dark-mode body {
  background: var(--gray-50);
  color: var(--gray-900);
}
.dark-mode .modal,
.dark-mode .pd-kpi-card,
.dark-mode .pd-participant-card,
.dark-mode .pd-section,
.dark-mode .pd-deadline-item,
.dark-mode .pd-actions-table td,
.dark-mode .pd-actions-table th,
.dark-mode .form-section {
  background: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}
.dark-mode .participant-row input {
  background: var(--gray-200) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-900) !important;
}
.dark-mode .participant-row-avatar {
  border-color: var(--gray-300) !important;
}
.dark-mode .sidebar  { background: var(--gray-50) !important; border-color: var(--gray-200) !important; }
.dark-mode .topbar   { background: var(--gray-100) !important; border-color: var(--gray-200) !important; }
.dark-mode .login-card { background: #1E293B !important; }
.dark-mode .login-form-group input,
.dark-mode .login-form-group select,
.dark-mode .login-select { background: var(--gray-200) !important; color: var(--gray-900) !important; border-color: var(--gray-300) !important; }
.dark-mode .form-group input,
.dark-mode .form-group select,
.dark-mode .form-group textarea { background: var(--gray-200) !important; color: var(--gray-900) !important; border-color: var(--gray-300) !important; }

/* Bouton toggle dark mode */
.btn-dark-mode {
  background: none;
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  font-family: var(--font);
  white-space: nowrap;
}
.btn-dark-mode:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.5); }

/* =====================================================
   AGENDA / PLANNING VIEW
   ===================================================== */

/* ---- Conteneur calendrier ---- */
.agenda-calendar-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 16px 20px 20px;
  margin-bottom: 20px;
  border: 1px solid var(--gray-200);
}

.agenda-cal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.agenda-month-label {
  flex: 1;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gray-900);
  text-transform: capitalize;
}

.agenda-nav-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-700);
  cursor: pointer;
  padding: 6px 10px;
  font-size: .8rem;
  transition: var(--transition);
  font-family: var(--font);
}
.agenda-nav-btn:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

/* ---- Grille calendrier ---- */
.agenda-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}
.agenda-weekday {
  text-align: center;
  font-size: .7rem;
  font-weight: 600;
  color: var(--gray-500);
  text-transform: uppercase;
  padding: 4px 0;
}

.agenda-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.agenda-day {
  min-height: 64px;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 4px 5px;
  cursor: pointer;
  position: relative;
  transition: background .15s;
  background: var(--gray-50);
}
.agenda-day:hover { background: var(--gray-100); }
.agenda-day.empty { background: transparent; border-color: transparent; cursor: default; }
.agenda-day.today {
  background: rgba(0,45,114,.08);
  border-color: var(--primary);
}
.agenda-day.past { opacity: .6; }

.agenda-day-num {
  font-size: .72rem;
  font-weight: 600;
  color: var(--gray-700);
  display: block;
  margin-bottom: 3px;
}
.agenda-day.today .agenda-day-num {
  color: var(--primary);
}

.agenda-day-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.agenda-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.agenda-dot-more {
  font-size: .58rem;
  color: var(--gray-500);
  font-weight: 600;
}

.agenda-day-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  background: var(--primary);
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 4px;
  line-height: 1.4;
}

/* ---- Section liste ---- */
.agenda-list-section {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  padding: 16px 20px;
}

.agenda-filter-group {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.agenda-select {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  font-size: .8rem;
  font-family: var(--font);
  color: var(--gray-700);
  background: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.agenda-select:focus { outline: none; border-color: var(--primary); }

/* ---- Groupe ---- */
.agenda-group {
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--gray-200);
}

.agenda-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--gray-50);
  font-size: .85rem;
  color: var(--gray-700);
  border-bottom: 1px solid var(--gray-200);
}
.agenda-group-header.urgent {
  background: #FEF3C7;
  color: #92400E;
}

.agenda-group-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.agenda-group-body { padding: 4px 0; }

/* ---- Ligne to-do ---- */
.agenda-todo-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--gray-100);
  transition: background .15s;
}
.agenda-todo-row:last-child { border-bottom: none; }
.agenda-todo-row:hover { background: var(--gray-50); }
.agenda-todo-row.overdue { background: #FEF2F2; }
.agenda-todo-row.overdue:hover { background: #FEE2E2; }

.agenda-todo-color-bar {
  width: 3px;
  min-height: 36px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}

.agenda-todo-main {
  flex: 1;
  min-width: 0;
}

.agenda-todo-action {
  font-size: .85rem;
  font-weight: 500;
  color: var(--gray-900);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agenda-todo-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .73rem;
  color: var(--gray-500);
}
.agenda-todo-meta span { display: flex; align-items: center; gap: 3px; }

.agenda-todo-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.agenda-todo-date {
  font-size: .75rem;
  color: var(--gray-600);
  white-space: nowrap;
}

/* ---- Export ICS ---- */
.ics-preview-box {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
  background: var(--gray-50);
  padding: 8px;
  margin-top: 6px;
}

.ics-preview-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--gray-100);
  font-size: .8rem;
}
.ics-preview-row:last-child { border-bottom: none; }

.ics-preview-action {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-800);
  font-weight: 500;
}

.ics-preview-meta {
  font-size: .72rem;
  color: var(--gray-500);
  white-space: nowrap;
}

.agenda-check-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--gray-700);
  cursor: pointer;
  padding: 4px 8px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  background: var(--white);
  transition: var(--transition);
}
.agenda-check-label:hover { background: var(--gray-50); }
.agenda-check-label input[type="checkbox"] { margin: 0; }

.agenda-project-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---- Dark mode overrides ---- */
.dark-mode .agenda-calendar-wrap,
.dark-mode .agenda-list-section,
.dark-mode .agenda-day,
.dark-mode .agenda-group,
.dark-mode .agenda-group-header,
.dark-mode .agenda-group-body,
.dark-mode .ics-preview-box,
.dark-mode .agenda-check-label {
  background: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
  color: var(--gray-900) !important;
}
.dark-mode .agenda-day:hover,
.dark-mode .agenda-todo-row:hover { background: var(--gray-200) !important; }
.dark-mode .agenda-todo-row.overdue { background: rgba(239,68,68,.15) !important; }
.dark-mode .agenda-select {
  background: var(--gray-200) !important;
  border-color: var(--gray-300) !important;
  color: var(--gray-900) !important;
}



/* =====================================================
   CO-ÉDITION / COLLABORATION
   ===================================================== */

/* ----- Sidebar : bouton invitations ----- */
#sidebarInvitationsWrap {
  padding: 0 10px 4px;
}
.sidebar-invitations-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: rgba(232, 0, 125, 0.12);
  border: 1px solid rgba(232, 0, 125, 0.25);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,.85);
  font-size: .78rem;
  cursor: pointer;
  transition: background .15s;
}
.sidebar-invitations-btn:hover {
  background: rgba(232, 0, 125, 0.22);
}
.invitations-badge-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #E8007D;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
  margin-left: auto;
}

/* ----- Sidebar : bouton collaborateurs icône ----- */
.collab-sidebar-btn {
  color: rgba(255,255,255,.4) !important;
}
.collab-sidebar-btn:hover {
  color: rgba(255,255,255,.8) !important;
}

/* ----- Bouton collaborateurs dans le header tableau de bord projet ----- */
.btn-collab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(0,45,114,.08);
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  color: var(--primary);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-collab:hover {
  background: var(--primary);
  color: #fff;
}
.collab-members-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--primary);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  border-radius: 999px;
}
.btn-collab:hover .collab-members-count {
  background: rgba(255,255,255,.3);
}

/* ----- Bouton Inviter dans section dashboard projet ----- */
.pd-collab-invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.pd-collab-invite-btn:hover { opacity: .85; }

/* ----- Grille collaborateurs dashboard projet ----- */
.pd-collab-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 0;
  min-height: 48px;
  align-items: flex-start;
}
.pd-collab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  text-align: center;
  cursor: default;
  position: relative;
}
.pd-collab-card.pending { opacity: .7; }
.pd-collab-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.pd-collab-pending-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  background: #F59E0B;
  border: 2px solid #fff;
  border-radius: 50%;
}
.pd-collab-name {
  font-size: .72rem;
  font-weight: 500;
  color: var(--gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}
.pd-collab-role {
  font-size: .65rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 6px;
}
.pd-collab-role.owner  { background: rgba(0,45,114,.1); color: #002D72; }
.pd-collab-role.editor { background: rgba(0,166,118,.12); color: #00A676; }
.pd-collab-role.viewer { background: rgba(245,158,11,.12); color: #B45309; }
.pd-collab-pending-label { font-weight: 400; opacity: .7; }
.pd-collab-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 80px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s;
}
.pd-collab-add-card:hover { opacity: 1; }
.pd-collab-add-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px dashed var(--gray-400);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  color: var(--gray-500);
}
.pd-collab-empty {
  font-size: .82rem;
  color: var(--gray-500);
  padding: 8px 0;
}
.pd-collab-empty a { color: var(--primary); text-decoration: underline; cursor: pointer; }

/* ----- Modale collaborateurs ----- */
.collab-section-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-500);
  margin-bottom: 10px;
}
.collab-members-list {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-height: 60px;
  max-height: 300px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.collab-loading {
  text-align: center;
  color: var(--gray-400);
  font-size: .82rem;
  padding: 16px 0;
}
.collab-empty {
  text-align: center;
  color: var(--gray-400);
  font-size: .82rem;
  padding: 16px 8px;
  line-height: 1.5;
}
.collab-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--gray-200);
  transition: background .12s;
}
.collab-member-row:hover { background: var(--gray-50); }
.collab-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.collab-member-info { flex: 1; min-width: 0; }
.collab-member-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  gap: 5px;
}
.collab-you-badge {
  font-size: .65rem;
  background: rgba(0,45,114,.1);
  color: var(--primary);
  border-radius: 999px;
  padding: 1px 6px;
  font-weight: 700;
}
.collab-member-sub {
  font-size: .72rem;
  color: var(--gray-500);
  margin-top: 1px;
}
.collab-member-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.collab-status-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.collab-status-badge.accepted { background: rgba(0,166,118,.12); color: #00A676; }
.collab-status-badge.pending  { background: rgba(245,158,11,.12); color: #B45309; }
.collab-status-badge.declined { background: rgba(220,38,38,.1);   color: #DC2626; }

.collab-role-badge {
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.collab-role-badge.owner  { background: rgba(0,45,114,.1);   color: #002D72; }
.collab-role-badge.editor { background: rgba(0,166,118,.12); color: #00A676; }
.collab-role-badge.viewer { background: rgba(245,158,11,.12); color: #B45309; }

.collab-role-select {
  font-size: .75rem;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--gray-700);
  cursor: pointer;
}
.collab-remove-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gray-400);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, color .12s;
  font-size: .8rem;
}
.collab-remove-btn:hover {
  background: rgba(220,38,38,.1);
  color: #DC2626;
}

/* ----- Section invitation ----- */
.collab-invite-section { margin-top: 4px; }
.collab-invite-hint {
  font-size: .8rem;
  color: var(--gray-500);
  margin-bottom: 10px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  line-height: 1.5;
}
.collab-invite-hint i { margin-top: 2px; color: var(--primary); }
.collab-invite-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.collab-invite-input {
  flex: 1;
  min-width: 160px;
  padding: 7px 12px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  outline: none;
  transition: border-color .15s;
}
.collab-invite-input:focus { border-color: var(--primary); }
.collab-role-select-invite {
  padding: 7px 10px;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: .82rem;
  background: #fff;
  cursor: pointer;
}
.collab-invite-error {
  font-size: .78rem;
  color: #DC2626;
  margin-top: 6px;
  min-height: 18px;
}
.collab-roles-legend {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  flex-wrap: wrap;
}
.collab-role-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  color: var(--gray-600);
}

/* ----- Panneau invitations dans Mon Espace ----- */
.collab-empty-invitations {
  text-align: center;
  color: var(--gray-400);
  font-size: .85rem;
  padding: 24px;
  line-height: 1.5;
}
.collab-invitation-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: box-shadow .15s;
}
.collab-invitation-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.collab-invitation-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.collab-invitation-info { flex: 1; min-width: 0; }
.collab-invitation-project {
  font-size: .88rem;
  font-weight: 700;
  color: var(--gray-800);
}
.collab-invitation-meta {
  font-size: .78rem;
  color: var(--gray-500);
  margin-top: 2px;
}
.collab-invitation-date {
  font-size: .72rem;
  color: var(--gray-400);
  margin-top: 2px;
}
.collab-invitation-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.btn-collab-accept {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: #00A676;
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s;
}
.btn-collab-accept:hover { opacity: .85; }
.btn-collab-decline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.btn-collab-decline:hover {
  border-color: #DC2626;
  color: #DC2626;
}

/* ----- Dark mode pour collab ----- */
.dark-mode .collab-members-list,
.dark-mode .collab-member-row,
.dark-mode .collab-invitation-card {
  background: var(--gray-100) !important;
  border-color: var(--gray-200) !important;
}
.dark-mode .collab-roles-legend { background: var(--gray-100) !important; }
.dark-mode .collab-invite-input { background: var(--gray-100); color: var(--gray-900); }
.dark-mode .collab-role-select-invite { background: var(--gray-100); color: var(--gray-900); }
.dark-mode .pd-collab-add-icon { border-color: var(--gray-400); color: var(--gray-400); }
.dark-mode .pd-collab-name { color: var(--gray-700); }

/* ----- Badge "Partagé" dans le sous-titre du dashboard ----- */
.pd-shared-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(124,58,237,.1);
  color: #7C3AED;
  border-radius: 999px;
  vertical-align: middle;
}

/* =====================================================
   ÉDITEUR DE TEMPLATE — panneau module personnalisé
   ===================================================== */

/* Modal plus large pour l'éditeur enrichi */
.tpl-editor-modal { max-width: 1100px !important; }
.tpl-editor-body  { position: relative; overflow: hidden; padding: 0 !important; }

/* Bouton "Créer un module" dans le catalogue */
.tpl-create-custom-module-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; margin-left: auto;
  background: var(--primary); border: none; border-radius: 8px;
  color: #fff; font-size: .72rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.tpl-create-custom-module-btn:hover { opacity: .85; }

/* Chip module avec bouton éditer */
.tpl-module-chip .cme-edit-chip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: none; border-radius: 4px;
  background: rgba(0,0,0,.08); color: var(--gray-600); cursor: pointer;
  font-size: .65rem; margin-right: 2px; transition: background .15s;
}
.tpl-module-chip .cme-edit-chip-btn:hover { background: rgba(0,45,114,.15); color: var(--primary); }

/* ── Panneau latéral éditeur de module ── */
.cme-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 520px;
  background: #fff;
  border-left: 2px solid var(--gray-200);
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
  overflow-y: auto;
  z-index: 10;
  animation: cmePanelIn .25s cubic-bezier(.16,1,.3,1);
  display: flex;
  flex-direction: column;
}
@keyframes cmePanelIn {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.dark-mode .cme-panel {
  background: var(--gray-50);
  border-color: var(--gray-200);
}

/* Header du panneau */
.cme-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--gray-200);
  position: sticky; top: 0;
  background: #fff; z-index: 2;
}
.dark-mode .cme-panel-header { background: var(--gray-50); }
.cme-panel-title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1rem; font-weight: 700; color: var(--gray-900);
}
.cme-panel-title > i { color: var(--primary); }
.cme-panel-close {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: var(--gray-100); color: var(--gray-500); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.cme-panel-close:hover { background: var(--gray-200); color: var(--gray-800); }

/* Sections du panneau */
.cme-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--gray-100);
}
.cme-section-title {
  font-size: .82rem; font-weight: 700; color: var(--gray-700);
  margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px;
}
.cme-section-sub {
  font-size: .72rem; font-weight: 400; color: var(--gray-400);
}

/* Champs */
.cme-row { display: flex; gap: 12px; margin-bottom: 12px; }
.cme-field { display: flex; flex-direction: column; gap: 5px; }
.cme-field label { font-size: .78rem; font-weight: 600; color: var(--gray-600); }
.cme-field input[type="text"],
.cme-field input[type="number"],
.cme-field textarea {
  padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: 8px;
  font-size: .85rem; color: var(--gray-900); background: var(--gray-50);
  font-family: var(--font); transition: border-color .15s;
}
.cme-field input:focus, .cme-field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,45,114,.1);
}

/* Sélecteur d'icônes */
.cme-icon-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.cme-icon-opt {
  width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; cursor: pointer; transition: all .15s;
  background: var(--gray-50); color: var(--gray-600);
}
.cme-icon-opt:hover { border-color: var(--primary); color: var(--primary); }
.cme-icon-opt.selected {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* Barre d'ajout de blocs */
.cme-blocks-toolbar {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px;
}
.cme-add-block-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  border: 1.5px solid var(--gray-200); border-radius: 8px;
  background: #fff; color: var(--gray-600);
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.cme-add-block-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,45,114,.04); }
.cme-add-block-btn i { font-size: .7rem; }

/* Liste des blocs */
.cme-blocks-list {
  display: flex; flex-direction: column; gap: 10px;
}

/* Bloc générique */
.cme-block {
  border: 1.5px solid var(--gray-200); border-radius: 10px;
  overflow: hidden; background: #fff;
  transition: border-color .15s;
}
.cme-block:hover { border-color: var(--gray-300); }
.dark-mode .cme-block { background: var(--gray-100); }

.cme-block-header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--gray-50); border-bottom: 1px solid var(--gray-100);
  cursor: grab;
}
.dark-mode .cme-block-header { background: var(--gray-200); }
.cme-block-header-icon {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: #fff;
}
.cme-block-header-label {
  font-size: .78rem; font-weight: 600; color: var(--gray-700); flex: 1;
}
.cme-block-remove {
  border: none; background: none; color: var(--gray-400); cursor: pointer;
  font-size: .75rem; padding: 2px 4px; border-radius: 4px;
  transition: color .15s, background .15s;
}
.cme-block-remove:hover { color: #EF4444; background: rgba(239,68,68,.1); }

.cme-block-body { padding: 12px; }

/* Bloc texte libre */
.cme-block-text textarea {
  width: 100%; border: 1.5px solid var(--gray-200); border-radius: 6px;
  padding: 8px 10px; font-size: .82rem; font-family: var(--font);
  resize: vertical; min-height: 60px; background: var(--gray-50);
}
.cme-block-text textarea:focus { outline: none; border-color: var(--primary); }

/* Bloc tableau */
.cme-block-table .cme-table-builder { width: 100%; }
.cme-table-controls {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap;
}
.cme-table-controls label { font-size: .74rem; color: var(--gray-500); }
.cme-table-controls input[type="number"] {
  width: 50px; padding: 4px 6px; border: 1.5px solid var(--gray-200); border-radius: 6px;
  font-size: .8rem; text-align: center;
}
.cme-table-preview {
  width: 100%; border-collapse: collapse; font-size: .78rem;
}
.cme-table-preview th, .cme-table-preview td {
  border: 1px solid var(--gray-200); padding: 5px 8px; text-align: left;
}
.cme-table-preview th {
  background: var(--gray-100); font-weight: 700; font-size: .73rem;
  text-transform: uppercase; letter-spacing: .04em;
}
.cme-table-preview td input {
  border: none; background: none; width: 100%; font-size: .78rem;
  font-family: var(--font); color: var(--gray-700); outline: none;
}

/* Bloc checklist */
.cme-block-checklist .cme-checklist-items { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; }
.cme-checklist-item {
  display: flex; align-items: center; gap: 8px;
}
.cme-checklist-item input[type="text"] {
  flex: 1; border: 1.5px solid var(--gray-200); border-radius: 6px;
  padding: 5px 8px; font-size: .8rem; background: var(--gray-50);
}
.cme-checklist-item-remove {
  border: none; background: none; color: var(--gray-400); cursor: pointer; font-size: .75rem;
}
.cme-add-checklist-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; color: var(--primary);
  background: none; border: none; cursor: pointer; padding: 2px 0;
}

/* Bloc 2 colonnes */
.cme-block-columns .cme-columns-wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.cme-col-input {
  border: 1.5px dashed var(--gray-200); border-radius: 8px; padding: 8px; text-align: center;
  background: var(--gray-50);
}
.cme-col-input label { font-size: .72rem; color: var(--gray-400); display: block; margin-bottom: 4px; }
.cme-col-input input {
  border: 1.5px solid var(--gray-200); border-radius: 6px;
  padding: 5px 8px; font-size: .8rem; width: 100%;
}

/* Bloc KPI */
.cme-block-kpi .cme-kpi-row {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px;
}
.cme-kpi-item {
  display: flex; flex-direction: column; gap: 4px; min-width: 100px;
  border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 8px;
  background: var(--gray-50); position: relative;
}
.cme-kpi-item input { border: none; background: none; outline: none; font-family: var(--font); }
.cme-kpi-item .cme-kpi-label { font-size: .7rem; color: var(--gray-500); font-weight: 600; text-transform: uppercase; }
.cme-kpi-item .cme-kpi-val { font-size: 1.1rem; font-weight: 800; color: var(--gray-900); }
.cme-kpi-remove {
  position: absolute; top: 4px; right: 4px;
  background: none; border: none; color: var(--gray-300); cursor: pointer; font-size: .65rem;
}
.cme-add-kpi {
  align-self: center; border: 1.5px dashed var(--gray-300); border-radius: 8px;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  color: var(--gray-400); cursor: pointer; font-size: .8rem; background: none;
  transition: border-color .15s;
}
.cme-add-kpi:hover { border-color: var(--primary); color: var(--primary); }

/* Bloc séparateur */
.cme-block-separator .cme-sep-preview {
  text-align: center; padding: 6px;
}
.cme-sep-line {
  height: 2px; background: var(--gray-200); border-radius: 1px; width: 100%;
}

/* Actions en bas du panneau */
.cme-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--gray-100);
  position: sticky; bottom: 0; background: #fff; z-index: 2;
}
.dark-mode .cme-actions { background: var(--gray-50); }

/* Chip module custom dans la structure */
.tpl-module-chip.custom-built {
  border-left: 3px solid var(--primary);
}

/* Responsive panneau module */
@media (max-width: 900px) {
  .cme-panel { width: 100%; position: fixed; }
  .tpl-editor-modal { max-width: 100% !important; }
}


/* ----- Bouton "Quitter le projet" ----- */
.btn-leave-project {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  border: 1.5px solid #EF4444;
  border-radius: var(--radius-sm);
  color: #EF4444;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-leave-project:hover {
  background: #EF4444;
  color: #fff;
}

/* =====================================================
   LANGUE / i18n TOGGLE
   ===================================================== */
.btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: rgba(0,45,114,.07);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-lang:hover { background: var(--gray-100); border-color: var(--primary); }
.lang-flag { font-size: 1rem; line-height: 1; }

/* =====================================================
   MFA – Écran de vérification login
   ===================================================== */
.mfa-login-box { text-align: center; padding: 10px 0 20px; }
.mfa-login-icon {
  font-size: 2.5rem;
  color: var(--primary);
  margin-bottom: 12px;
}
.mfa-login-title { font-size: 1.15rem; font-weight: 700; margin-bottom: 8px; }
.mfa-login-sub {
  font-size: .85rem;
  color: var(--gray-500);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Modale setup MFA ── */
.mfa-setup-steps { display: flex; flex-direction: column; gap: 20px; }
.mfa-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.mfa-step-num {
  width: 32px; height: 32px; flex-shrink: 0;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .9rem;
}
.mfa-step-content { flex: 1; }
.mfa-step-content strong { display: block; margin-bottom: 10px; font-size: .9rem; }
.mfa-app-links { display: flex; gap: 8px; flex-wrap: wrap; }
.mfa-app-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px;
  background: #fff; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  color: var(--gray-700); font-size: .78rem; font-weight: 500;
  text-decoration: none;
  transition: border-color .15s;
}
.mfa-app-btn:hover { border-color: var(--primary); color: var(--primary); }
.mfa-qr-wrap { display: flex; justify-content: center; margin: 12px 0; }
.mfa-qr-img {
  width: 160px; height: 160px;
  border: 3px solid var(--gray-200); border-radius: var(--radius-sm);
}
.mfa-manual-details summary {
  cursor: pointer; font-size: .78rem; color: var(--primary);
  margin-bottom: 8px;
}
.mfa-secret-wrap {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 8px 10px;
}
.mfa-secret {
  font-family: monospace; font-size: .85rem;
  color: var(--gray-700); word-break: break-all; flex: 1;
}
.mfa-verify-row { display: flex; gap: 8px; align-items: center; }
.mfa-code-input {
  width: 140px; text-align: center;
  font-size: 1.3rem; letter-spacing: .2em;
  padding: 8px 10px;
  border: 2px solid var(--gray-300); border-radius: var(--radius-sm);
  font-weight: 700;
}
.mfa-code-input:focus { border-color: var(--primary); outline: none; }
.mfa-setup-error { font-size: .78rem; color: #EF4444; margin-top: 6px; min-height: 18px; }

/* ── Carte de login élargie (écran setup 2FA) ── */
.login-card--wide {
  max-width: 620px !important;
}

/* ── Bandeau "2FA obligatoire" ── */
.mfa-mandatory-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(234,88,12,.08);
  border: 1.5px solid rgba(234,88,12,.3);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  color: #9a3412;
}
.dark-mode .mfa-mandatory-banner {
  background: rgba(234,88,12,.15);
  border-color: rgba(234,88,12,.4);
  color: #fdba74;
}
.mfa-mandatory-banner > i {
  font-size: 1.3rem;
  margin-top: 2px;
  flex-shrink: 0;
  color: #ea580c;
}
.mfa-mandatory-banner strong { font-size: .9rem; display: block; margin-bottom: 2px; }

/* ── Footer informatif ── */
.mfa-mandatory-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  font-size: .75rem;
  color: var(--gray-500);
  line-height: 1.4;
}
.dark-mode .mfa-mandatory-footer {
  background: var(--gray-100);
  color: var(--gray-400);
}
.mfa-mandatory-footer > i { color: var(--primary); flex-shrink: 0; }

/* ── Steps inline (écran obligatoire, disposition verticale compacte) ── */
.mfa-setup-steps--inline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mfa-setup-steps--inline .mfa-step {
  padding: 12px 14px;
}
.mfa-setup-steps--inline .mfa-qr-wrap {
  margin: 6px 0;
}
.mfa-setup-steps--inline .mfa-qr-img {
  width: 140px;
  height: 140px;
}

/* ── Mon Espace : statut MFA ── */
.mfa-status {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
}
.mfa-status > i { font-size: 1.4rem; flex-shrink: 0; }
.mfa-status > div { flex: 1; }
.mfa-active {
  background: rgba(5,150,105,.06); border-color: rgba(5,150,105,.25);
}
.mfa-active > i { color: #059669; }
.mfa-inactive {
  background: var(--gray-50);
}

/* =====================================================
   TEMPLATES CR – Bibliothèque
   ===================================================== */
.modal-fullwide { max-width: 860px !important; }

.tpl-section-title {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--gray-500); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.tpl-create-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; margin-left: auto;
  background: var(--primary); border: none;
  border-radius: var(--radius-sm); color: #fff;
  font-size: .75rem; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.tpl-create-btn:hover { opacity: .85; }

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.tpl-card {
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s, transform .12s;
  background: #fff;
  display: flex; flex-direction: column;
}
.tpl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); transform: translateY(-2px); }
.tpl-card-header {
  padding: 20px; text-align: center;
  font-size: 1.5rem; color: #fff;
}
.tpl-card-body { padding: 12px 14px; flex: 1; }
.tpl-card-name { font-size: .88rem; font-weight: 700; color: var(--gray-800); margin-bottom: 5px; }
.tpl-card-desc { font-size: .75rem; color: var(--gray-500); margin-bottom: 8px; line-height: 1.4; }
.tpl-card-modules { font-size: .68rem; color: var(--gray-400); font-style: italic; }
.tpl-use-btn {
  display: block; width: 100%;
  padding: 8px; text-align: center;
  background: var(--primary); border: none;
  color: #fff; font-size: .78rem; font-weight: 600;
  cursor: pointer; transition: opacity .15s;
}
.tpl-use-btn:hover { opacity: .85; }
.tpl-card-actions {
  display: flex; padding: 6px 8px; gap: 4px;
  border-top: 1px solid var(--gray-100);
}
.tpl-edit-btn, .tpl-delete-btn {
  flex: 1; padding: 6px; text-align: center;
  border: none; border-radius: var(--radius-sm);
  font-size: .75rem; cursor: pointer;
}
.tpl-edit-btn   { background: var(--gray-100); color: var(--gray-600); }
.tpl-delete-btn { background: rgba(239,68,68,.1); color: #EF4444; }
.tpl-edit-btn:hover   { background: var(--gray-200); }
.tpl-delete-btn:hover { background: rgba(239,68,68,.2); }
.tpl-empty {
  text-align: center; color: var(--gray-400);
  font-size: .85rem; padding: 28px;
  border: 2px dashed var(--gray-200); border-radius: var(--radius-sm);
}

/* ── Éditeur de template ─────────────────────────── */
.tpl-editor-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
  min-height: 400px;
}
.tpl-editor-left {
  border-right: 1px solid var(--gray-200);
  padding-right: 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.tpl-editor-right { display: flex; flex-direction: column; gap: 10px; }
.tpl-editor-section { display: flex; flex-direction: column; gap: 6px; }
.tpl-editor-label {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--gray-500);
}
.tpl-name-input {
  padding: 8px 10px; border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm); font-size: .9rem;
}
.tpl-name-input:focus { border-color: var(--primary); outline: none; }
.tpl-desc-input {
  padding: 8px 10px; border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm); font-size: .82rem;
  resize: vertical;
}
.tpl-desc-input:focus { border-color: var(--primary); outline: none; }

/* Catalogue modules */
.tpl-module-catalog {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tpl-catalog-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color .12s, background .12s;
  background: #fff; position: relative;
}
.tpl-catalog-item:hover { border-color: var(--primary); background: rgba(0,45,114,.04); }
.tpl-catalog-item.active { border-color: #059669; background: rgba(5,150,105,.05); }
.tpl-catalog-icon {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; flex-shrink: 0;
}
.tpl-catalog-label { font-size: .72rem; font-weight: 500; color: var(--gray-700); flex: 1; line-height: 1.2; }
.tpl-add-dot, .tpl-active-dot {
  font-size: .6rem; flex-shrink: 0;
}
.tpl-add-dot { color: var(--gray-400); }
.tpl-active-dot { color: #059669; }

/* Modules actifs (zone drag & drop) */
.tpl-active-modules {
  flex: 1; display: flex; flex-direction: column; gap: 6px;
  padding: 10px; min-height: 200px;
  background: var(--gray-50); border: 2px dashed var(--gray-200);
  border-radius: var(--radius-sm);
}
.tpl-drop-hint {
  text-align: center; color: var(--gray-400); font-size: .82rem;
  padding: 24px; margin: auto;
}
.tpl-module-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #fff; border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  cursor: grab; user-select: none;
  transition: box-shadow .12s, opacity .12s;
}
.tpl-module-chip:active { cursor: grabbing; }
.tpl-module-chip.required { cursor: default; background: var(--gray-50); }
.tpl-module-chip.dragging { opacity: .5; }
.tpl-module-chip.drag-over { box-shadow: 0 0 0 2px var(--primary); }
.tpl-module-chip span { flex: 1; font-size: .82rem; font-weight: 500; }
.tpl-chip-remove {
  width: 20px; height: 20px; border-radius: 50%;
  border: none; background: transparent; color: var(--gray-400);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .65rem; transition: background .12s, color .12s;
}
.tpl-chip-remove:hover { background: rgba(239,68,68,.1); color: #EF4444; }
.tpl-required-badge {
  font-size: .6rem; background: rgba(0,45,114,.1); color: var(--primary);
  padding: 1px 6px; border-radius: 999px; font-weight: 600;
}

/* ── Barre template dans le CR ───────────────────── */
.cr-template-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 6px;
}
.btn-template-choose {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  background: rgba(99,102,241,.08); border: 1.5px solid rgba(99,102,241,.3);
  border-radius: var(--radius-sm); color: #6366F1;
  font-size: .8rem; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-template-choose:hover { background: rgba(99,102,241,.14); }
.cr-template-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  background: rgba(99,102,241,.1); color: #6366F1;
  border-radius: 999px; font-size: .72rem; font-weight: 600;
}

/* ── Section optionnelle des CRs ─────────────────── */
.optional-section-textarea {
  width: 100%; padding: 10px 12px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: .85rem; font-family: var(--font); line-height: 1.5;
  resize: vertical;
}
.optional-section-textarea:focus { border-color: var(--primary); outline: none; }

/* ── Section custom (icone colorée) ───────────────── */
.section-icon[style*="background"] i { display: block; }

/* ── Responsive éditeur template ─────────────────── */
@media (max-width: 640px) {
  .tpl-editor-layout { grid-template-columns: 1fr; }
  .tpl-editor-left { border-right: none; border-bottom: 1px solid var(--gray-200); padding-right: 0; padding-bottom: 16px; }
  .tpl-module-catalog { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Dark mode templates & MFA ────────────────────── */
.dark-mode .tpl-card { background: var(--gray-100); border-color: var(--gray-200); }
.dark-mode .tpl-module-chip,
.dark-mode .tpl-catalog-item { background: var(--gray-100); border-color: var(--gray-200); }
.dark-mode .tpl-active-modules { background: rgba(0,0,0,.2); }
.dark-mode .mfa-step { background: var(--gray-100); border-color: var(--gray-200); }
.dark-mode .mfa-secret-wrap { background: var(--gray-100); }
.dark-mode .tpl-name-input,
.dark-mode .tpl-desc-input { background: var(--gray-100); color: var(--gray-900); }
.dark-mode .btn-lang { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.8); }


/* ----- Bouton "Quitter" dans la liste membres (icône) ----- */
.collab-leave-btn {
  color: #D97706 !important;
}
.collab-leave-btn:hover {
  background: rgba(217,119,6,.1) !important;
  color: #D97706 !important;
}

/* =====================================================
   ÉDITEURS QUILL SECTIONS OPTIONNELLES
   ===================================================== */
.optional-quill-editor {
  min-height: 120px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.optional-quill-editor .ql-toolbar {
  background: var(--gray-50);
  border: none;
  border-bottom: 1px solid var(--gray-200);
  padding: 4px 8px;
}
.optional-quill-editor .ql-container {
  border: none;
  font-family: var(--font);
  font-size: .85rem;
}
.optional-quill-editor .ql-editor {
  min-height: 100px;
  padding: 10px 12px;
  color: var(--gray-800);
}
.optional-quill-editor .ql-editor.ql-blank::before {
  color: var(--gray-400);
  font-style: italic;
  font-size: .82rem;
}
.dark-mode .optional-quill-editor { border-color: var(--gray-300); }
.dark-mode .optional-quill-editor .ql-toolbar {
  background: var(--gray-200);
  border-color: var(--gray-300);
}
.dark-mode .optional-quill-editor .ql-editor { color: var(--gray-900); }

/* =====================================================
   LOGO DYNAMIQUE PROJET — STATUTS ET SUGGESTIONS
   ===================================================== */
.proj-logo-status {
  display: flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 4px 0;
  transition: color .2s;
  min-height: 20px;
}
.proj-logo-status.found { color: #059669; }
.proj-logo-status.not-found { color: var(--gray-400); }
.proj-logo-status.searching { color: var(--primary); }

.proj-company-input-wrap {
  position: relative;
}
.proj-company-input-wrap input {
  width: 100%;
}

.proj-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
}
.dark-mode .proj-suggestions {
  background: var(--gray-100);
  border-color: var(--gray-300);
}

.proj-suggestion-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-size: .82rem; font-weight: 500;
  color: var(--gray-700);
  cursor: pointer;
  transition: background .12s;
}
.proj-suggestion-item:hover {
  background: rgba(99,102,241,.06);
  color: var(--primary);
}

.proj-logo-preview-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
}
.proj-logo-preview-img {
  width: 44px; height: 44px; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--gray-200);
  background: #fff; padding: 4px;
}
.proj-logo-preview-info {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.proj-logo-clear-btn {
  width: 24px; height: 24px; border: none; border-radius: 6px;
  background: var(--gray-200); color: var(--gray-500);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: .7rem; transition: background .12s;
}
.proj-logo-clear-btn:hover { background: var(--gray-300); color: var(--gray-800); }