/* ============================================
   GEST PROTECT - Feuille de style principale
   assets/css/style.css
   ============================================ */

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

:root {
  --primary:        #C8102E;
  --primary-dark:   #9B0D23;
  --primary-light:  #E8304A;
  --secondary:      #1A1A2E;
  --accent:         #F5A623;
  --surface:        #F8F9FB;
  --surface-alt:    #EDEEF2;
  --card-bg:        #FFFFFF;
  --text-main:      #1C1C2E;
  --text-sub:       #5C607A;
  --text-muted:     #9CA3AF;
  --border:         #DDE0EC;
  --success:        #10B981;
  --warning:        #F59E0B;
  --danger:         #EF4444;
  --info:           #3B82F6;

  /* Type events */
  --fmpa:     #7C3AED;
  --formation:#0EA5E9;
  --paps:     #10B981;
  --dpspe:    #F59E0B;
  --dpsme:    #EF4444;
  --dpsge:    #C8102E;

  --sidebar-w: 260px;
  --header-h:  64px;
  --radius:    10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow:    0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.14);
  --transition: all .2s ease;
}

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

html { font-size:16px; scroll-behavior:smooth; }

body {
  font-family: 'Source Sans 3', sans-serif;
  background: var(--surface);
  color: var(--text-main);
  min-height: 100vh;
  line-height: 1.6;
}

/* ============================================
   PAGE DE CONNEXION
   ============================================ */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  background: var(--secondary);
}

.login-visual {
  flex: 1;
  background: linear-gradient(145deg, var(--secondary) 0%, #2D1B69 50%, var(--primary-dark) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  position: relative;
  overflow: hidden;
}

.login-visual::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 1px solid rgba(200,16,46,.2);
  top: -100px; right: -100px;
  animation: pulse-ring 6s ease-in-out infinite;
}
.login-visual::after {
  content: '';
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(200,16,46,.15);
  bottom: -50px; left: -50px;
  animation: pulse-ring 8s ease-in-out infinite reverse;
}

@keyframes pulse-ring {
  0%,100% { transform: scale(1); opacity:.6; }
  50% { transform: scale(1.1); opacity:1; }
}

.login-logo {
  width: 90px; height: 90px;
  background: rgba(200,16,46,.15);
  border: 2px solid var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 2rem;
  position: relative; z-index: 1;
  box-shadow: 0 0 40px rgba(200,16,46,.3);
}

.login-visual h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 3px;
  text-align: center;
  position: relative; z-index: 1;
}

.login-visual p {
  color: rgba(255,255,255,.6);
  text-align: center;
  margin-top: .5rem;
  font-size: 1rem;
  position: relative; z-index: 1;
}

.login-visual .features {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative; z-index: 1;
  width: 100%;
  max-width: 320px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255,255,255,.75);
  font-size: .9rem;
}

.feature-item .fi {
  width: 36px; height: 36px;
  background: rgba(200,16,46,.2);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-light);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.login-panel {
  width: 440px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.5rem 3rem;
}

.login-panel h2 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--text-main);
}

.login-panel .sub {
  color: var(--text-sub);
  margin-bottom: 2rem;
  font-size: .95rem;
}

.role-selector {
  display: flex;
  gap: .5rem;
  margin-bottom: 2rem;
  background: var(--surface-alt);
  border-radius: var(--radius);
  padding: .3rem;
}

.role-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: .6rem;
  border-radius: 8px;
  font-family: 'Rajdhani', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  color: var(--text-sub);
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}

.role-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.form-group {
  margin-bottom: 1.2rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .4rem;
  color: var(--text-sub);
  text-transform: uppercase;
  letter-spacing: .5px;
}

.form-control {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Source Sans 3', sans-serif;
  font-size: .95rem;
  color: var(--text-main);
  transition: var(--transition);
  background: var(--surface);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200,16,46,.08);
}

.input-icon-wrap {
  position: relative;
}

.input-icon-wrap .form-control { padding-left: 2.8rem; }
.input-icon-wrap .icon {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 1rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 15px rgba(200,16,46,.35);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface-alt);
  color: var(--text-main);
}
.btn-secondary:hover { background: var(--border); }

.btn-success { background: var(--success); color:#fff; }
.btn-success:hover { background: #059669; }

.btn-warning { background: var(--warning); color:#fff; }
.btn-danger  { background: var(--danger); color:#fff; }
.btn-info    { background: var(--info); color:#fff; }

.btn-sm { padding: .4rem .9rem; font-size: .85rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn-outline {
  background: transparent;
  border: 2px solid var(--border);
  color: var(--text-sub);
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* ============================================
   LAYOUT PRINCIPAL
   ============================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-w);
  background: var(--secondary);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  z-index: 100;
  transition: transform .3s ease;
  overflow-y: auto;
  scrollbar-width: none;
}
.sidebar::-webkit-scrollbar { display:none; }

.sidebar-brand {
  padding: 1.5rem 1.2rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
}

.sidebar-brand .logo {
  width: 38px; height: 38px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.sidebar-brand .brand-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  line-height: 1.2;
}

.sidebar-brand .brand-text span {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: rgba(255,255,255,.5);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.sidebar-user {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  gap: .8rem;
}

.avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: #fff;
  flex-shrink: 0;
  text-transform: uppercase;
}

.avatar-lg {
  width: 52px; height: 52px;
  font-size: 1.2rem;
}

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

.sidebar-user-info .name {
  font-weight: 600;
  font-size: .88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info .role-tag {
  font-size: .72rem;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-nav {
  flex: 1;
  padding: 1rem 0;
}

.nav-section {
  padding: 0 .8rem .4rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.3);
  margin-top: 1rem;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .65rem 1.2rem;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  border-left: 3px solid transparent;
  transition: var(--transition);
  margin: .1rem 0;
}

.nav-item:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.nav-item.active {
  background: rgba(200,16,46,.15);
  color: #fff;
  border-left-color: var(--primary);
}

.nav-item .ni {
  width: 20px;
  text-align: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.nav-badge {
  margin-left: auto;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: .1rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
}

.sidebar-footer {
  padding: 1rem 1.2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Main content */
.main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--header-h);
  background: #fff;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-sm);
}

.topbar-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: .5px;
}

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .8rem;
}

.notif-btn {
  position: relative;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-sub);
  font-size: 1rem;
  transition: var(--transition);
  text-decoration: none;
}
.notif-btn:hover { border-color: var(--primary); color: var(--primary); }

.notif-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid #fff;
}

.page-content {
  padding: 1.5rem;
  flex: 1;
}

/* ============================================
   CARDS & STATS
   ============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: var(--transition);
}

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

.stat-icon {
  width: 50px; height: 50px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stat-icon.red   { background: rgba(200,16,46,.1); color: var(--primary); }
.stat-icon.blue  { background: rgba(59,130,246,.1); color: var(--info); }
.stat-icon.green { background: rgba(16,185,129,.1); color: var(--success); }
.stat-icon.gold  { background: rgba(245,166,35,.1); color: var(--accent); }
.stat-icon.purple{ background: rgba(139,92,246,.1); color: #8B5CF6; }

.stat-number {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-main);
}

.stat-label {
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .2rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Cards génériques */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.card-header {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface);
}

.card-header h3 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--text-main);
  flex: 1;
}

.card-body { padding: 1.4rem; }

/* ============================================
   TABLES
   ============================================ */
.table-wrapper { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.data-table thead th {
  background: var(--surface-alt);
  padding: .75rem 1rem;
  text-align: left;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-sub);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.data-table tbody td {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text-main);
}

.data-table tbody tr:hover { background: rgba(59,130,246,.03); }
.data-table tbody tr:last-child td { border-bottom: none; }

/* ============================================
   BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .7rem;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-fmpa     { background: rgba(124,58,237,.12); color: var(--fmpa); }
.badge-formation{ background: rgba(14,165,233,.12); color: var(--formation); }
.badge-paps     { background: rgba(16,185,129,.12); color: var(--paps); }
.badge-dpspe    { background: rgba(245,158,11,.12); color: var(--dpspe); }
.badge-dpsme    { background: rgba(239,68,68,.12);  color: var(--dpsme); }
.badge-dpsge    { background: rgba(200,16,46,.12);  color: var(--dpsge); }

.statut-planifie { background: rgba(59,130,246,.12); color: var(--info); }
.statut-confirme { background: rgba(16,185,129,.12); color: var(--success); }
.statut-annule   { background: rgba(239,68,68,.12);  color: var(--danger); }
.statut-termine  { background: rgba(107,114,128,.12);color: #6B7280; }
.statut-attente  { background: rgba(245,158,11,.12); color: var(--warning); }
.statut-valide   { background: rgba(16,185,129,.12); color: var(--success); }
.statut-refuse   { background: rgba(239,68,68,.12);  color: var(--danger); }

/* Compétences */
.comp-badge {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  border-radius: 6px;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  margin: .1rem;
  letter-spacing: .3px;
}

/* ============================================
   FORMULAIRES
   ============================================ */
.form-row {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C607A' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.5rem;
}

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

.form-hint { font-size: .8rem; color: var(--text-muted); margin-top: .3rem; }
.form-error { font-size: .8rem; color: var(--danger); margin-top: .3rem; }

/* Checkbox custom */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .3rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.checkbox-item input[type=checkbox] {
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--primary);
}

.checkbox-item label { cursor: pointer; font-size: .88rem; }

/* ============================================
   PLANNING / CALENDRIER
   ============================================ */
.planning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.event-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: var(--transition);
}

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

.event-card-header {
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.event-type-indicator {
  width: 4px;
  border-radius: 4px;
  align-self: stretch;
  flex-shrink: 0;
}

.event-card-body { padding: 0 1rem 1rem; }
.event-card-footer {
  padding: .8rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.event-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--text-sub);
  margin-top: .3rem;
}

.event-meta i { color: var(--text-muted); font-size: .75rem; }

/* Progress bar */
.progress-bar {
  height: 4px;
  background: var(--surface-alt);
  border-radius: 4px;
  overflow: hidden;
  margin-top: .5rem;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
  transition: width .3s ease;
}

/* ============================================
   FEUILLE DE ROUTE
   ============================================ */
.roadmap-header {
  background: linear-gradient(135deg, var(--secondary) 0%, #2D1B69 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.roadmap-header::before {
  content: '🛡️';
  position: absolute;
  font-size: 8rem;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  opacity: .08;
}

.roadmap-event {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
}

.roadmap-event h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.roadmap-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin-top: .8rem;
}

.roadmap-detail {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .85rem;
}

.roadmap-detail i { color: var(--primary); margin-top: .1rem; }
.roadmap-detail .label { color: var(--text-muted); font-size: .75rem; }
.roadmap-detail .value { font-weight: 500; }

/* ============================================
   ALERTES & MESSAGES
   ============================================ */
.alert {
  padding: .9rem 1.2rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: .9rem;
  border: 1px solid transparent;
}

.alert-success { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); color: #065F46; }
.alert-danger   { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.3);  color: #991B1B; }
.alert-warning  { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.3); color: #92400E; }
.alert-info     { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.3); color: #1E40AF; }

/* ============================================
   MODALES
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform .3s ease;
  box-shadow: var(--shadow-lg);
}

.modal-overlay.open .modal { transform: translateY(0); }

.modal-header {
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .8rem;
  position: sticky; top: 0;
  background: var(--card-bg);
  z-index: 1;
}

.modal-header h4 {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  flex: 1;
}

.modal-close {
  width: 32px; height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem;
  color: var(--text-sub);
  transition: var(--transition);
}
.modal-close:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.modal-body { padding: 1.4rem; }
.modal-footer {
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .8rem;
  background: var(--surface);
}

/* ============================================
   SEARCH & FILTERS
   ============================================ */
.filter-bar {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.search-input-wrap input {
  width: 100%;
  padding: .55rem .9rem .55rem 2.4rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .9rem;
  background: var(--surface);
  color: var(--text-main);
  transition: var(--transition);
}
.search-input-wrap input:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
}

.search-input-wrap i {
  position: absolute;
  left: .8rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: .85rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
.hamburger {
  display: none;
  width: 38px; height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.hamburger span {
  display: block;
  height: 2px;
  background: var(--text-main);
  border-radius: 2px;
  transition: var(--transition);
}

@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    margin-left: 0;
  }
  .hamburger { display: flex; }
  .login-visual { display: none; }
  .login-panel { width: 100%; padding: 2rem 1.5rem; }
  .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .planning-grid { grid-template-columns: 1fr; }
  .page-content { padding: 1rem; }
  .modal { max-width: 100%; }
  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 99;
  }
}

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

/* ============================================
   PRINT (feuille de route)
   ============================================ */
@media print {
  .sidebar, .topbar, .no-print { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff; }
  .page-content { padding: 0; }
  .roadmap-event { break-inside: avoid; }
}

/* ============================================
   UTILITAIRES
   ============================================ */
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .4rem; }
.gap-2 { gap: .8rem; }
.gap-3 { gap: 1.2rem; }
.mt-1 { margin-top: .4rem; }
.mt-2 { margin-top: .8rem; }
.mt-3 { margin-top: 1.2rem; }
.mb-1 { margin-bottom: .4rem; }
.mb-2 { margin-bottom: .8rem; }
.mb-3 { margin-bottom: 1.2rem; }
.text-muted { color: var(--text-muted); }
.text-sub   { color: var(--text-sub); }
.text-small { font-size: .8rem; }
.fw-600 { font-weight: 600; }
.text-center { text-align: center; }
.w-100 { width: 100%; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}
.empty-state i { font-size: 3rem; margin-bottom: 1rem; display: block; }
.empty-state p { font-size: .95rem; }

/* ============================================
   AJOUTS v2
   ============================================ */
table.table { width:100%; border-collapse:collapse; font-size:.9rem; }
.table thead th { background:var(--surface-alt); padding:.75rem 1rem; text-align:left; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text-sub); border-bottom:2px solid var(--border); white-space:nowrap; }
.table tbody td { padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tbody tr:hover { background:rgba(59,130,246,.03); }
.table-responsive { overflow-x:auto; }

.status-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .7rem; border-radius:20px; font-size:.75rem; font-weight:700; white-space:nowrap; }
.status-green  { background:rgba(16,185,129,.12); color:#047857; }
.status-gold   { background:rgba(245,158,11,.14); color:#B45309; }
.status-red    { background:rgba(239,68,68,.12);  color:#B91C1C; }
.status-gray   { background:rgba(107,114,128,.12);color:#4B5563; }
.status-blue   { background:rgba(59,130,246,.12); color:#1D4ED8; }
.status-purple { background:rgba(124,58,237,.12); color:#6D28D9; }
.badge-default { background:var(--surface-alt); color:var(--text-sub); }

.form-label { display:block; font-size:.85rem; font-weight:600; color:var(--text-sub); margin-bottom:.35rem; }
.form-control-sm { padding:.45rem .7rem !important; font-size:.85rem !important; }
select.form-control { cursor:pointer; }
textarea.form-control { resize:vertical; }
.btn-icon { padding:.4rem .55rem !important; min-width:32px; }
.btn:disabled, .btn[disabled] { opacity:.5; cursor:not-allowed; }
.btn-link { background:none; border:none; color:var(--info); padding:0; cursor:pointer; font:inherit; text-decoration:underline; }
.inline-form { display:inline; }
.actions { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center; }
.notif-count { background:var(--primary); color:#fff; border-radius:20px; padding:.05rem .55rem; font-size:.75rem; margin-left:.4rem; }
a.avatar:hover { opacity:.85; }

.tabs { display:flex; gap:.3rem; border-bottom:2px solid var(--border); margin-bottom:1.2rem; flex-wrap:wrap; }
.tabs a { padding:.6rem 1rem; text-decoration:none; color:var(--text-sub); font-weight:600; border-bottom:3px solid transparent; margin-bottom:-2px; font-family:'Rajdhani',sans-serif; font-size:1rem; }
.tabs a.active, .tabs a:hover { color:var(--primary); border-bottom-color:var(--primary); }
.tabs a .notif-count { font-family:'Source Sans 3',sans-serif; }

.kv { display:grid; grid-template-columns: 160px 1fr; gap:.4rem 1rem; font-size:.9rem; }
.kv dt { color:var(--text-sub); font-weight:600; }
.list-row { padding:.8rem 1.2rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.list-row:last-child { border-bottom:none; }
.alert a { color:inherit; font-weight:700; }
.alert-list { margin:.3rem 0 0 1.1rem; }
.pw-meter { height:4px; border-radius:2px; margin-top:.4rem; width:0; transition:all .3s; background:var(--border); }
.hint { font-size:.75rem; color:var(--text-muted); margin-top:.25rem; }
.hp-field { position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden; }
.login-links { margin-top:1rem; text-align:center; font-size:.88rem; }
.login-links a { color:var(--primary); text-decoration:none; font-weight:600; }
.session-warning { position:fixed; bottom:1rem; right:1rem; z-index:2000; background:var(--secondary); color:#fff; padding:.8rem 1.1rem; border-radius:var(--radius); box-shadow:var(--shadow-lg); font-size:.9rem; }
.session-warning a { color:var(--accent); margin-left:.4rem; font-weight:700; }
.text-danger { color:var(--danger); }
.text-success { color:var(--success); }
.text-warning { color:#B45309; }
.mono { font-family:ui-monospace,Consolas,monospace; font-size:.82rem; }
.pagination { display:flex; gap:.3rem; justify-content:center; padding:1rem; flex-wrap:wrap; }
.pagination a, .pagination span { padding:.35rem .75rem; border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--text-main); font-size:.85rem; }
.pagination .current { background:var(--primary); color:#fff; border-color:var(--primary); }
.temp-password { font-family:ui-monospace,Consolas,monospace; font-size:1.05rem; background:#fff; padding:.15rem .5rem; border-radius:6px; border:1px dashed currentColor; user-select:all; }
@media (max-width: 768px) { .kv { grid-template-columns: 1fr; } }
@media print { .session-warning { display:none !important; } }

/* ============================================
   v3 – Application installable, notifications, messagerie, réservations
   ============================================ */
[hidden] { display: none !important; }
.avatar-sm { width: 34px; height: 34px; font-size: .8rem; }
.check-inline { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .9rem; }
.check-inline input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.notif-num { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px;
  background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center; border: 2px solid #fff; }
@media (max-width: 480px) { .hide-xs { display: none; } }

/* Mode application (iPhone avec encoche, Android plein écran) */
.is-standalone .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
.is-standalone .sidebar { padding-top: env(safe-area-inset-top); }
.is-standalone .page-content { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
body.has-pwa-banner .page-content, body.has-pwa-banner .login-panel { padding-bottom: 7rem; }

/* ----- Bandeau d'installation / notifications ----- */
.pwa-banner { position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom)); z-index: 3000;
  display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; max-width: 560px; margin: 0 auto;
  background: var(--secondary); color: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
  border: 2px solid var(--primary); transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.pwa-banner.show { transform: translateY(0); animation: pwaPulse 2.4s ease-in-out 1s 2; }
.pwa-banner img { border-radius: 11px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; line-height: 1.25; }
.pwa-banner-text strong { display: block; font-size: .95rem; }
.pwa-banner-text span { display: block; font-size: .78rem; color: rgba(255,255,255,.72); margin-top: .15rem; }
.pwa-banner .btn { white-space: nowrap; flex-shrink: 0; }
.pwa-banner-close { background: none; border: 0; color: rgba(255,255,255,.6); font-size: 1.05rem; padding: .3rem; cursor: pointer; flex-shrink: 0; }
.pwa-bell { width: 44px; height: 44px; border-radius: 11px; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; animation: pwaRing 2s ease-in-out 1s 3; }
@keyframes pwaPulse { 0%,100% { box-shadow: 0 12px 40px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 0 6px rgba(200,16,46,.35), 0 12px 40px rgba(0,0,0,.35); } }
@keyframes pwaRing { 0%,100% { transform: rotate(0); } 10%,30% { transform: rotate(-14deg); } 20%,40% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
@media (max-width: 420px) { .pwa-banner-text span { display: none; } }

/* Encart sur la page de connexion */
.pwa-login-card { margin-top: 1.5rem; }
.pwa-login-inner { display: flex; align-items: center; gap: .9rem; padding: 1rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--secondary), #2a2a48); color: #fff; border: 2px solid var(--primary);
  box-shadow: 0 8px 24px rgba(200,16,46,.25); }
.pwa-login-inner img { border-radius: 12px; flex-shrink: 0; }
.pwa-login-inner div { flex: 1; line-height: 1.3; }
.pwa-login-inner strong { display: block; font-size: .98rem; }
.pwa-login-inner span { display: block; font-size: .8rem; color: rgba(255,255,255,.75); margin-top: .2rem; }
@media (max-width: 400px) { .pwa-login-inner { flex-wrap: wrap; } .pwa-login-inner .btn { width: 100%; } }

/* Guide d'installation */
.pwa-sheet-overlay { position: fixed; inset: 0; z-index: 4000; background: rgba(10,10,25,.6); display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; transition: opacity .25s; padding: 0 0 env(safe-area-inset-bottom); }
.pwa-sheet-overlay.open { opacity: 1; }
.pwa-sheet { position: relative; width: 100%; max-width: 520px; background: #fff; color: var(--text-main); border-radius: 22px 22px 0 0;
  padding: 1.4rem 1.3rem 1.3rem; box-shadow: 0 -10px 40px rgba(0,0,0,.3); transform: translateY(30px); transition: transform .3s; max-height: 88vh; overflow-y: auto; }
.pwa-sheet-overlay.open .pwa-sheet { transform: translateY(0); }
@media (min-width: 700px) { .pwa-sheet-overlay { align-items: center; } .pwa-sheet { border-radius: 22px; } }
.pwa-sheet-close { position: absolute; top: .8rem; right: .8rem; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--surface-alt); cursor: pointer; }
.pwa-sheet-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; padding-right: 2rem; }
.pwa-sheet-head img { border-radius: 13px; }
.pwa-sheet-head strong { display: block; font-family: 'Rajdhani', sans-serif; font-size: 1.35rem; }
.pwa-sheet-head span { display: block; font-size: .82rem; color: var(--text-sub); }
.pwa-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.pwa-steps li { display: flex; gap: .8rem; align-items: flex-start; padding: .7rem 0; border-bottom: 1px solid var(--border); font-size: .95rem; line-height: 1.45; }
.pwa-steps li:last-child { border-bottom: 0; }
.pwa-steps .n { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pwa-steps small { color: var(--text-sub); }
.ios-share { vertical-align: -4px; color: #007AFF; }
.ios-add { display: inline-flex; color: #007AFF; font-size: 1.1rem; vertical-align: -2px; }
.pwa-arrow { position: fixed; left: 50%; bottom: calc(6px + env(safe-area-inset-bottom)); transform: translateX(-50%); color: #fff; font-size: 2.2rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5); animation: pwaBounce 1.1s ease-in-out infinite; pointer-events: none; z-index: 4001; }
.pwa-arrow.up { top: calc(6px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 22px; transform: none; animation-name: pwaBounceUp; }
@keyframes pwaBounce { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }
@keyframes pwaBounceUp { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.pwa-toast { position: fixed; left: 50%; top: calc(1rem + env(safe-area-inset-top)); transform: translate(-50%, -150%); z-index: 5000; max-width: 92vw;
  padding: .75rem 1.1rem; border-radius: 12px; background: var(--secondary); color: #fff; font-size: .9rem; box-shadow: var(--shadow-lg); transition: transform .35s; }
.pwa-toast.show { transform: translate(-50%, 0); }
.pwa-toast-success { background: #047857; } .pwa-toast-danger { background: #B91C1C; } .pwa-toast-warning { background: #B45309; }

/* Préférences de notification (profil) */
.switch-row { display: flex; align-items: flex-start; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.switch-row input { appearance: none; -webkit-appearance: none; width: 44px; height: 24px; border-radius: 12px; background: var(--border); position: relative; flex-shrink: 0; cursor: pointer; transition: background .2s; margin-top: 2px; }
.switch-row input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch-row input:checked { background: var(--success); }
.switch-row input:checked::after { left: 23px; }
.push-device { margin-top: 1rem; padding: .9rem 1rem; background: var(--surface); border-radius: var(--radius); font-size: .88rem; }

/* ----- Messagerie ----- */
.msg-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; height: calc(100vh - var(--header-h) - 3rem); min-height: 480px; }
.is-standalone .msg-layout { height: calc(100vh - var(--header-h) - 3rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.msg-list, .msg-thread { display: flex; flex-direction: column; overflow: hidden; margin: 0; }
.msg-search { position: relative; padding: .75rem; border-bottom: 1px solid var(--border); }
.msg-search i { position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.msg-search input { width: 100%; padding: .6rem .8rem .6rem 2.3rem; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); font: inherit; }
.msg-list-items { overflow-y: auto; flex: 1; }
.msg-item { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.msg-item:hover { background: var(--surface); }
.msg-item.active { background: rgba(200,16,46,.07); box-shadow: inset 3px 0 0 var(--primary); }
.msg-item-body { flex: 1; min-width: 0; }
.msg-item-top { display: flex; gap: .5rem; align-items: baseline; }
.msg-item-title { flex: 1; font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item-date { font-size: .72rem; color: var(--text-muted); flex-shrink: 0; }
.msg-item-preview { font-size: .8rem; color: var(--text-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item.unread .msg-item-title, .msg-item.unread .msg-item-preview { font-weight: 700; color: var(--text-main); }
.msg-thread-head { display: flex; align-items: center; gap: .6rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.msg-thread-title { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-thread-sub { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-back { display: none; }
.msg-messages { flex: 1; overflow-y: auto; padding: 1rem; background: var(--surface); display: flex; flex-direction: column; gap: .35rem; -webkit-overflow-scrolling: touch; }
.msg-day { align-self: center; font-size: .72rem; color: var(--text-sub); background: var(--surface-alt); padding: .2rem .7rem; border-radius: 10px; margin: .6rem 0 .3rem; }
.msg-bubble { max-width: min(78%, 560px); align-self: flex-start; background: #fff; border: 1px solid var(--border); border-radius: 16px 16px 16px 4px; padding: .5rem .8rem .35rem; box-shadow: var(--shadow-sm); }
.msg-bubble.mine { align-self: flex-end; background: var(--primary); color: #fff; border-color: var(--primary); border-radius: 16px 16px 4px 16px; }
.msg-bubble.mine a { color: #fff; }
.msg-author { font-size: .74rem; font-weight: 700; color: var(--primary); margin-bottom: .1rem; }
.msg-text { font-size: .93rem; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; }
.msg-time { font-size: .66rem; opacity: .65; text-align: right; margin-top: .15rem; }
.msg-seen { align-self: flex-end; font-size: .7rem; color: var(--text-muted); min-height: 1em; }
.msg-compose { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem; border-top: 1px solid var(--border); background: #fff; padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
.msg-compose textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: .6rem 1rem; font: inherit; font-size: 1rem; max-height: 160px; background: var(--surface); }
.msg-compose textarea:focus { outline: none; border-color: var(--primary); background: #fff; }
.msg-compose .btn { border-radius: 50%; width: 44px; height: 44px; flex-shrink: 0; }
@media (max-width: 860px) {
  .msg-layout { grid-template-columns: 1fr; height: calc(100vh - var(--header-h) - 2rem); }
  .msg-layout.has-thread .msg-list { display: none; }
  .msg-layout:not(.has-thread) .msg-thread { display: none; }
  .msg-back { display: inline-flex; }
  .msg-bubble { max-width: 88%; }
}
.picker-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); margin-top: .5rem; }
.picker-item { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--border); cursor: pointer; font-size: .9rem; }
.picker-item:last-child { border-bottom: 0; }
.picker-item:hover { background: var(--surface); }
.picker-item input { width: 17px; height: 17px; accent-color: var(--primary); }

/* ----- Réservations ----- */
.resa-h { font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; margin: 1rem 0 .5rem; color: var(--text-main); }
.resa-h i { color: var(--primary); }
.resa-ul { margin: 0 0 .8rem 1.1rem; padding: 0; font-size: .9rem; }
.resa-ul li { margin-bottom: .3rem; }
.resa-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.resa-row:hover { background: var(--surface); }
.resa-date { width: 52px; text-align: center; background: var(--secondary); color: #fff; border-radius: 10px; padding: .3rem 0; font-size: .7rem; text-transform: uppercase; flex-shrink: 0; }
.resa-date span { display: block; font-family: 'Rajdhani', sans-serif; font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.resa-veh-list, .resa-mat-list { border: 1px solid var(--border); border-radius: var(--radius); max-height: 260px; overflow-y: auto; }
.resa-veh, .resa-mat { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.resa-veh:last-child, .resa-mat:last-child { border-bottom: 0; }
.resa-veh.selected, .resa-mat.selected { background: rgba(16,185,129,.07); }
.resa-veh.unavailable, .resa-mat.unavailable { opacity: .55; }
.resa-cond { width: auto; max-width: 220px; padding: .35rem .5rem; font-size: .85rem; }
.resa-mat input[type=number] { width: 80px; flex-shrink: 0; text-align: center; }
.resa-dispo-status { min-height: 1.2em; margin-bottom: .3rem; }
/* Le bandeau ne doit jamais masquer une fenêtre ouverte */
body:has(.modal-overlay.open) .pwa-banner, body:has(.pwa-sheet-overlay) .pwa-banner { display: none; }
body:has(.msg-layout.has-thread) .pwa-banner { display: none; }
@media (max-width: 480px) {
  .topbar { padding: 0 .8rem; gap: .5rem; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 1.05rem; }
  .topbar-right { gap: .4rem; }
  .is-standalone .topbar { padding-top: env(safe-area-inset-top); }
}

/* ============================================
   Agenda (vues mois / semaine / jour / liste)
   ============================================ */
.view-switch-bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.view-switch { display: inline-flex; background: var(--surface-alt); border-radius: 10px; padding: 3px; gap: 2px; }
.vs-btn { border: 0; background: transparent; padding: .45rem .9rem; border-radius: 8px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--text-sub); text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.vs-btn:hover { color: var(--text-main); }
.vs-btn.active { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }

.agenda-card { overflow: hidden; }
.agenda-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.agenda-nav { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.agenda-title { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 0 0 0 .4rem; }
.agenda-filters { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.ag-chip { cursor: pointer; user-select: none; }
.ag-chip input { display: none; }
.ag-chip span { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; border-radius: 20px; font-size: .78rem; font-weight: 700; border: 2px solid var(--c, var(--border)); color: var(--c, var(--text-sub)); background: #fff; opacity: .55; transition: all .15s; }
.ag-chip span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--text-muted)); }
.ag-chip input:checked + span { background: var(--c); color: #fff; opacity: 1; }
.ag-chip input:checked + span::before { background: #fff; }
.ag-chip-mine span { --c: var(--secondary); }
.ag-chip-mine span::before { display: none; }
.agenda { position: relative; min-height: 300px; }
.agenda.is-loading { opacity: .5; pointer-events: none; }
.agenda-loading { padding: 3rem; text-align: center; color: var(--text-muted); }

/* Éléments */
.ag-ev { --c: #6B7280; font: inherit; text-align: left; cursor: pointer; border: 0; }
.ag-ev.is-cancel { text-decoration: line-through; opacity: .55; }
.ag-ev.is-done { opacity: .7; }
.ag-ev.is-pending { background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255,255,255,.35) 6px 12px) !important; }
.ag-ev.is-mine { box-shadow: inset 0 0 0 2px var(--secondary); }
.ag-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Mois */
.ag-month-head, .ag-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-month-head div { padding: .5rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: var(--text-sub); text-align: center; border-bottom: 1px solid var(--border); }
.ag-cell { min-height: 112px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: .25rem; cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-cell:nth-child(7n) { border-right: 0; }
.ag-cell:hover { background: var(--surface); }
.ag-cell.out { background: #fafafb; }
.ag-cell.out .ag-daynum { color: var(--text-muted); }
.ag-daynum { align-self: flex-end; border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 700; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; color: var(--text-main); }
.ag-daynum:hover { background: var(--surface-alt); }
.ag-cell.today .ag-daynum { background: var(--primary); color: #fff; }
.ag-cell-items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-chipev { display: block; width: 100%; padding: .15rem .4rem; border-radius: 5px; font-size: .74rem; line-height: 1.35; background: var(--c); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-chipev .t { font-weight: 700; opacity: .9; }
.ag-chipev.is-resa { background: #fff; color: var(--c); border: 1px dashed var(--c); }
.ag-more { border: 0; background: none; font: inherit; font-size: .72rem; font-weight: 700; color: var(--text-sub); text-align: left; padding: 0 .3rem; cursor: pointer; }
.ag-more:hover { color: var(--primary); }
.ag-dots { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; align-items: center; margin-top: 2px; }
.ag-dots small { font-size: .62rem; color: var(--text-sub); }

/* Semaine / jour */
.ag-tg { --hh: 44px; }
.ag-tg-head, .ag-tg-allday { display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.ag-tg-gutter { display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: .68rem; }
.ag-tg-dayhead { border: 0; border-left: 1px solid var(--border); background: none; font: inherit; padding: .45rem 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; color: var(--text-sub); }
.ag-tg-dayhead span { font-size: .72rem; text-transform: uppercase; font-weight: 700; }
.ag-tg-dayhead strong { font-size: 1.15rem; color: var(--text-main); width: 34px; height: 34px; line-height: 34px; border-radius: 50%; }
.ag-tg-dayhead.today strong { background: var(--primary); color: #fff; }
.ag-tg-allcell { border-left: 1px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-tg-body { position: relative; display: grid; grid-template-columns: 52px repeat(var(--cols), minmax(0, 1fr)); height: min(65vh, 640px); overflow-y: auto; }
.ag-tg-hours { grid-column: 1; }
.ag-tg-hour { height: var(--hh); position: relative; }
.ag-tg-hour span { position: absolute; top: -7px; right: 6px; font-size: .68rem; color: var(--text-muted); }
.ag-tg-col { position: relative; border-left: 1px solid var(--border); height: calc(var(--hh) * 24); cursor: pointer;
  background-image: linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size: 100% var(--hh); }
.ag-tg-col.today { background-color: rgba(200,16,46,.03); }
.ag-block { position: absolute; border-radius: 6px; padding: .2rem .4rem; background: var(--c); color: #fff; overflow: hidden; font-size: .74rem; line-height: 1.25; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.15); border-left: 3px solid rgba(0,0,0,.25); z-index: 1; }
.ag-block:hover { z-index: 3; filter: brightness(1.05); }
.ag-block .t { font-size: .68rem; opacity: .9; }
.ag-block strong { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-block .l { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-block.is-resa { background: #fff; color: var(--c); border: 1px dashed var(--c); border-left: 3px solid var(--c); }
.ag-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--primary); z-index: 4; pointer-events: none; }
.ag-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }

/* Liste */
.ag-list { padding: .3rem 0; }
.ag-list-day { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem .4rem; font-weight: 700; font-size: .85rem; color: var(--text-sub); text-transform: capitalize; position: sticky; top: 0; background: #fff; z-index: 1; }
.ag-list-day span { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-alt); color: var(--text-main); display: flex; align-items: center; justify-content: center; }
.ag-list-day.today span { background: var(--primary); color: #fff; }
.ag-row { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .65rem 1rem .65rem .9rem; background: #fff; border-bottom: 1px solid var(--border); border-left: 4px solid var(--c); }
.ag-row:hover { background: var(--surface); }
.ag-row.is-pending { background: #fff !important; border-left-style: dashed; }
.ag-row.is-mine { box-shadow: none; }
.ag-row-time { width: 118px; flex-shrink: 0; font-size: .8rem; font-weight: 700; color: var(--text-sub); }
.ag-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ag-row-main strong { font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row-main small { font-size: .76rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-tag { display: inline-block; padding: .12rem .55rem; border-radius: 10px; font-size: .7rem; font-weight: 700; background: var(--surface-alt); color: var(--text-sub); white-space: nowrap; }
.ag-tag.mine { background: rgba(16,185,129,.14); color: #047857; }
.ag-tag.cancel { background: rgba(239,68,68,.12); color: #B91C1C; }
.ag-tag.pending { background: rgba(245,158,11,.15); color: #B45309; }
.ag-daypanel { border-top: 1px solid var(--border); }
.ag-daypanel-head { padding: .7rem 1rem; font-weight: 700; text-transform: capitalize; font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; }
.ag-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .8rem 1rem; }
.ag-day-actions .ag-actions { flex-direction: column; padding: 0; }
.ag-day-actions .ag-actions .btn { justify-content: center; }
.ag-detail p { margin: 0 0 .55rem; font-size: .92rem; }
.ag-detail p i { width: 18px; color: var(--text-muted); }
#agModal .modal-header .ag-dot { width: 14px; height: 14px; }

@media (max-width: 700px) {
  .agenda-toolbar { padding: .7rem; }
  .agenda-title { width: 100%; margin: .3rem 0 0; font-size: 1.15rem; order: 5; }
  .agenda-views { width: 100%; }
  .agenda-views .vs-btn { flex: 1; justify-content: center; padding: .45rem .3rem; }
  .agenda-filters { flex-wrap: nowrap; overflow-x: auto; padding: .6rem .7rem; -webkit-overflow-scrolling: touch; }
  .ag-chip span { white-space: nowrap; }
  .ag-cell { min-height: 58px; padding: 2px; align-items: center; }
  .ag-daynum { align-self: center; }
  .ag-cell.selected { background: rgba(200,16,46,.08); box-shadow: inset 0 0 0 2px var(--primary); }
  .ag-tg-head, .ag-tg-allday, .ag-tg-body { grid-template-columns: 40px repeat(var(--cols), minmax(0, 1fr)); }
  .ag-tg-body { height: 62vh; }
  .ag-block { padding: .15rem .25rem; font-size: .68rem; }
  .ag-block .l { display: none; }
  .ag-row-time { width: 86px; font-size: .74rem; }
  .view-switch-bar { justify-content: stretch; }
  .view-switch-bar .view-switch { width: 100%; }
  .view-switch-bar .vs-btn { flex: 1; justify-content: center; }
}
.main-content { min-width: 0; }
#agModal .modal-footer { flex-wrap: wrap; gap: .5rem; }
@media (max-width: 700px) { #agModal .modal-footer .btn { flex: 1 1 auto; justify-content: center; } }

/* ============================================
   v3.2 – Corrections responsive
   ============================================ */
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
.rt-v { min-width: 0; }

/* Tablette / téléphone */
@media (max-width: 768px) {
  .card-header { flex-wrap: wrap; padding: .85rem 1rem; gap: .6rem; }
  .card-header h3 { flex: 1 1 150px; min-width: 0; }
  .card-body { padding: 1rem; }
  .roadmap-header { padding: 1.3rem; }
  .roadmap-header h2 { font-size: 1.45rem !important; }
  .filter-bar { gap: .5rem; }
  .filter-bar .form-control, .filter-bar select { flex: 1 1 140px; width: auto !important; min-width: 0; }
  .filter-bar .search-input-wrap { flex: 1 1 100%; }
  /* Fenêtres : en feuille depuis le bas, bouton d'enregistrement toujours visible */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100% !important; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .modal-header { padding: 1rem; }
  .modal-body { padding: 1rem; }
  .modal-footer { position: sticky; bottom: 0; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
  .kv { grid-template-columns: 1fr; }
}

/* Téléphone */
@media (max-width: 700px) {
  /* Évite le zoom automatique d'iOS sur les champs */
  .form-control, input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
  input[type=search], input[type=date], input[type=datetime-local], input[type=month], select, textarea { font-size: 16px !important; }

}

@media (max-width: 600px) {
  /* Barre du haut : pictogrammes seuls pour laisser la place au titre */
  .topbar-right > .btn, .topbar-right > a.btn, .topbar-right > form .btn { font-size: 0 !important; padding: .5rem .65rem !important; gap: 0; min-width: 38px; height: 38px; justify-content: center; }
  .topbar-right > .btn i, .topbar-right > a.btn i, .topbar-right > form .btn i { font-size: .95rem; }
  .topbar-right > .btn .hide-xs { display: none; }
  .topbar-right .avatar { width: 34px; height: 34px; }
  .notif-btn { width: 36px; height: 36px; }
}

@media (max-width: 480px) {
  /* Statistiques : 2 par ligne, compactes */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
  .stat-card { padding: .75rem; gap: .6rem; flex-direction: column; align-items: flex-start; }
  .stat-icon { width: 34px; height: 34px; font-size: .95rem; border-radius: 9px; }
  .stat-number { font-size: 1.5rem; }
  .stat-label { font-size: .68rem; }
  .page-content { padding: .75rem; }
  .btn { padding: .6rem 1rem; }
  .btn-sm { padding: .45rem .8rem; }
}


/* Tableaux affichés en cartes quand ils ne tiennent pas dans la largeur
   (classe ajoutée par assets/js/app.js : téléphone, tablette, fenêtre étroite) */
.table-wrapper.has-cards, .table-responsive.has-cards { overflow-x: visible; }
table.rt.rt-cards, table.rt.rt-cards tbody, table.rt.rt-cards tr, table.rt.rt-cards td { display: block; width: 100%; }
table.rt.rt-cards thead { display: none; }
table.rt.rt-cards tbody tr { position: relative; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
table.rt.rt-cards tbody tr:last-child { border-bottom: 0; }
table.rt.rt-cards tbody td { border: 0 !important; padding: .28rem 0 !important; min-width: 0 !important; white-space: normal !important;
  display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; text-align: right; }
table.rt.rt-cards tbody td::before { content: attr(data-label); flex: 0 0 auto; max-width: 42%; text-align: left; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--text-sub); padding-top: .2rem; }
table.rt.rt-cards tbody td > .rt-v { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
table.rt.rt-cards tbody td > .rt-v > * { max-width: 100%; }
table.rt.rt-cards tbody td .progress-bar { width: 100%; max-width: 160px; }
table.rt.rt-cards tbody td.rt-title { text-align: left; padding-bottom: .45rem !important; padding-right: 2rem !important; font-size: 1rem; }
table.rt.rt-cards tbody td.rt-title::before { display: none; }
table.rt.rt-cards tbody td.rt-title > .rt-v { align-items: flex-start; }
table.rt.rt-cards tbody td.rt-title > .rt-v > :first-child { display: flex; align-items: center; gap: .6rem; }
table.rt.rt-cards tbody td.rt-nolabel { position: absolute; top: .75rem; right: 1rem; width: auto; padding: 0 !important; }
table.rt.rt-cards tbody td.rt-nolabel::before { display: none; }
table.rt.rt-cards tbody td.rt-actions { margin-top: .4rem; padding-top: .6rem !important; border-top: 1px dashed var(--border) !important; }
table.rt.rt-cards tbody td.rt-actions::before { display: none; }
table.rt.rt-cards tbody td.rt-actions > .rt-v { align-items: stretch; }
table.rt.rt-cards tbody td.rt-actions .actions { justify-content: flex-end; }
table.rt.rt-cards tbody td.rt-actions .btn-icon { min-width: 40px; min-height: 36px; }
table.rt.rt-cards tbody td.rt-full { display: block; text-align: center; }
table.rt.rt-cards tbody td.rt-full::before { display: none; }
table.rt.rt-cards tbody td input.form-control-sm, table.rt.rt-cards tbody td select { max-width: 100%; }
table.rt.rt-cards tbody tr:hover { background: transparent; }
table.rt.rt-cards tbody tr { display: flex; flex-direction: column; }
table.rt.rt-cards tbody td.rt-title { order: -1; }
@media (max-width: 700px) {
  .ag-row { flex-wrap: wrap; row-gap: .25rem; }
  .ag-row-main { flex: 1 1 calc(100% - 100px); }
  .ag-row .ag-tag { margin-left: calc(86px + .8rem); }
  .ag-row .ag-tag + .ag-tag { margin-left: 0; }
}