/* =========================================================================
   ADMIN.CSS — charte graphique SORA × Paris Aéroport (G3.16)
   Source : maquettes/maquettes-completes-v2.html (validée pilotage).
   Pas de SASS / preprocessor V1. Pas de framework. Variables CSS natives.
   ========================================================================= */

:root {
  /* Couleurs officielles Paris Aéroport (logo officiel) */
  --pa-blue: #1F2D5A;
  --pa-blue-light: #E5E8F0;
  --pa-blue-dark: #14204A;
  --pa-red: #E94E1B;
  --pa-red-light: #FCEBE3;

  /* Couleurs officielles SORA — R40 V41 B125 / CMJN 100/95/0/10 */
  --sora-blue: #28297D;
  --sora-blue-light: #EDEDF4;
  --sora-blue-dark: #1E1E5D;
  --sora-orange: #E85D2C;
  --sora-orange-light: #FEEBE0;

  /* États */
  --green: #10B981;
  --yellow: #F59E0B;
  --red: #DC2626;

  /* Niveaux de gris */
  --gray-900: #111827;
  --gray-800: #1F2937;
  --gray-700: #374151;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50: #F9FAFB;

  /* Ombres */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  background: #FAFBFC;
  color: var(--gray-900);
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--sora-blue); }
a:hover { color: var(--sora-orange); }

/* =========================================================================
   LAYOUT MAÎTRE
   ========================================================================= */
.admin-app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: #FAFBFC;
}

.admin-sidebar {
  background: var(--sora-blue-dark);
  color: white;
  padding: 24px 0;
}

.admin-logo {
  padding: 0 24px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-logo-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.admin-logo-circle {
  width: 36px; height: 36px;
  background: var(--sora-orange);
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 800;
  color: white;
  font-size: 14px;
  overflow: hidden;
}

.admin-logo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-logo-text {
  font-size: 16px;
  font-weight: 700;
}

.admin-logo-subtitle {
  font-size: 11px;
  color: rgba(255,255,255,0.6);
}

/* =========================================================================
   NAVIGATION SIDEBAR
   ========================================================================= */
.admin-nav { padding: 24px 0; }

.admin-nav-section {
  padding: 0 24px 8px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  letter-spacing: 1px;
  margin-top: 16px;
}

.admin-nav-section:first-child { margin-top: 0; }

.admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  border-left: 3px solid transparent;
  text-decoration: none;
}

.admin-nav-item:hover {
  color: white;
  background: rgba(255,255,255,0.05);
}

.admin-nav-item.active {
  background: rgba(232, 93, 44, 0.15);
  color: white;
  border-left-color: var(--sora-orange);
}

.admin-nav-icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font-size: 16px;
}

.admin-nav-badge {
  margin-left: auto;
  background: var(--sora-orange);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.admin-nav-badge.warning { background: var(--yellow); }

/* =========================================================================
   MAIN CONTENT (header + zone contenu)
   ========================================================================= */
.admin-main { padding: 24px 32px; }

.admin-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 24px;
}

.admin-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
}

.admin-page-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
}

.admin-user-avatar {
  width: 36px; height: 36px;
  background: var(--sora-blue);
  color: white;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

/* =========================================================================
   TABLEAUX
   ========================================================================= */
.data-table {
  width: 100%;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  border-collapse: collapse;
  overflow: hidden;
}

.data-table th {
  background: var(--gray-50);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gray-500);
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--gray-200);
}

.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 13px;
}

.data-table tr:hover { background: var(--gray-50); }
.data-table tr:last-child td { border-bottom: none; }

/* =========================================================================
   FORMULAIRES
   ========================================================================= */
.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-900);
  background: white;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40, 41, 125, 0.1);
}

.form-help {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* =========================================================================
   BOUTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: filter 0.15s ease;
}

.btn:hover { filter: brightness(0.92); }

.btn-primary {
  background: var(--sora-orange);
  color: white;
}

.btn-secondary {
  background: white;
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.btn-danger {
  background: var(--red);
  color: white;
}

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* =========================================================================
   FLASH MESSAGES
   ========================================================================= */
.flash {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid transparent;
}

.flash-success {
  background: #ECFDF5;
  color: #065F46;
  border-color: #A7F3D0;
}

.flash-error {
  background: #FEF2F2;
  color: #991B1B;
  border-color: #FECACA;
}

.flash-warning {
  background: #FFFBEB;
  color: #92400E;
  border-color: #FDE68A;
}

.flash-info {
  background: var(--sora-blue-light);
  color: var(--sora-blue-dark);
  border-color: rgba(40, 41, 125, 0.2);
}

/* =========================================================================
   UTILITIES
   ========================================================================= */
.card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.stack > * + * { margin-top: 12px; }

code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--gray-800);
}

details summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-700);
}

details pre {
  margin-top: 8px;
  padding: 10px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.text-muted { color: var(--gray-500); }
.text-small { font-size: 12px; }
.text-strong { font-weight: 700; }

/* =========================================================================
   G3.17 LOT A — composants enrichis dashboard 2.2 + login 2.1
   ========================================================================= */

/* --- ALERTES bandeau (dashboard chantier bloque) --- */
.admin-alert {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  border-left: 4px solid var(--gray-400);
  background: var(--gray-100);
  margin-bottom: 20px;
}
.admin-alert-icon { font-size: 22px; line-height: 1; }
.admin-alert-content { flex: 1; }
.admin-alert-title { font-size: 13px; font-weight: 700; color: var(--gray-900); }
.admin-alert-detail { font-size: 12px; color: var(--gray-700); margin-top: 2px; }
.admin-alert-cta { flex-shrink: 0; }

.admin-alert-danger {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  border-left-color: var(--red);
}
.admin-alert-danger .admin-alert-title { color: #7F1D1D; }
.admin-alert-danger .admin-alert-detail { color: #991B1B; }

.admin-alert-warning {
  background: #FFFBEB;
  border-left-color: var(--yellow);
}
.admin-alert-info {
  background: var(--sora-blue-light);
  border-left-color: var(--sora-blue);
}

/* --- KPI CARDS (4 colonnes responsive) --- */
.admin-stat-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}

@media (max-width: 1100px) {
  .admin-stat-card-grid { grid-template-columns: repeat(2, 1fr); }
}

.admin-stat-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: 10px;
  padding: 18px;
}
.admin-stat-card-label {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--gray-500);
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.admin-stat-card-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--gray-900);
  line-height: 1;
}
.admin-stat-card-detail {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 6px;
}

.admin-stat-card-blue   { border-left-color: var(--sora-blue); }
.admin-stat-card-green  { border-left-color: var(--green); }
.admin-stat-card-orange { border-left-color: var(--sora-orange); }
.admin-stat-card-red    { border-left-color: var(--red); }

/* --- GRILLE 2 colonnes (activite recente + equipe) --- */
.admin-content-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

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

.admin-section-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 20px;
}
.admin-section-card-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.admin-section-card-link {
  font-size: 12px;
  color: var(--sora-blue);
  text-decoration: none;
  font-weight: 500;
}
.admin-section-card-link:hover { color: var(--sora-orange); }

.admin-empty-state {
  text-align: center;
  color: var(--gray-500);
  font-size: 13px;
  padding: 24px 8px;
}

/* --- ACTIVITE RECENTE rows --- */
.admin-activity-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gray-100);
  margin-bottom: 12px;
}
.admin-activity-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.admin-activity-text { flex: 1; min-width: 0; }
.admin-activity-title { font-size: 13px; color: var(--gray-900); }
.admin-activity-meta { font-size: 11px; color: var(--gray-500); margin-top: 2px; }

.tech-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: var(--sora-blue);
  flex-shrink: 0;
}
.tech-avatar-lg { width: 36px; height: 36px; font-size: 13px; }

/* --- BADGES status (cohérence maquette) --- */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.status-completed   { background: #D1FAE5; color: #065F46; }
.status-in-progress { background: var(--sora-blue-light); color: var(--sora-blue-dark); }
.status-blocked     { background: #FEE2E2; color: var(--red); }
.status-postponed   { background: #FEF3C7; color: #92400E; }

.ot-badge {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 2px 6px;
  border-radius: 4px;
}

/* M164=B : "Sans N° OT" libelle gris italique discret (cas B vraie absence
   metier intervention interne/urgence/depannage). Style align avec ot-badge
   dimensions/spacing pour eviter saut de mise en page entre cards. */
.ot-empty {
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--gray-500);
  padding: 2px 0;
}

/* --- LOGIN 2.1 carte centree fond gradient --- */
.admin-login-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--sora-blue-dark) 0%, var(--sora-blue) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
}
.admin-login-card {
  background: white;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.admin-login-header {
  text-align: center;
  margin-bottom: 32px;
}
.admin-login-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.admin-login-brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--sora-blue);
  padding: 4px;
}
.admin-login-brand-mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.admin-login-brand-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--sora-blue-dark);
  text-align: left;
}
.admin-login-brand-subtitle {
  font-size: 11px;
  color: var(--gray-500);
}
.admin-login-tagline {
  color: var(--gray-700);
  font-size: 14px;
  margin-top: 12px;
}

/* Header user pre-rempli (post-step1) */
.admin-login-user {
  background: var(--sora-blue-light);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.admin-login-user-avatar {
  width: 32px;
  height: 32px;
  background: var(--sora-blue);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.admin-login-user-info { flex: 1; min-width: 0; }
.admin-login-user-name { font-size: 13px; font-weight: 600; color: var(--sora-blue-dark); }
.admin-login-user-email { font-size: 11px; color: var(--gray-500); overflow:hidden; text-overflow:ellipsis; }
.admin-login-user-status { font-size: 11px; color: var(--green); flex-shrink: 0; }

/* Bouton login pleine largeur */
.btn-login {
  width: 100%;
  padding: 14px;
  background: var(--sora-orange);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(232,93,44,0.3);
  font-family: inherit;
}
.btn-login:hover { filter: brightness(0.95); }

.admin-login-footer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-200);
  text-align: center;
}
.admin-login-footer a {
  color: var(--sora-blue);
  font-size: 12px;
  text-decoration: none;
}

.admin-login-form-group {
  margin-bottom: 16px;
}
.admin-login-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  display: block;
  margin-bottom: 8px;
}
.admin-login-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--gray-900);
  background: white;
}
.admin-login-input:focus {
  outline: none;
  border-color: var(--sora-blue);
  box-shadow: 0 0 0 3px rgba(40,41,125,0.1);
}

/* TOTP 6-digit input row */
.admin-totp-row {
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.admin-totp-input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  border: 2px solid var(--gray-300);
  border-radius: 10px;
  font-family: inherit;
  color: var(--gray-900);
  background: white;
}
.admin-totp-input:focus {
  outline: none;
  border-color: var(--sora-blue);
  background: var(--sora-blue-light);
  color: var(--sora-blue-dark);
}
.admin-totp-help {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 8px;
  text-align: center;
}

/* =========================================================================
   G3.17 LOT B — composants planning 2.3 / 2.4 / 2.5 + rapports placeholder
   ========================================================================= */

/* --- FILTRES barre de pills (D118 V1 décoratif sans JS) --- */
.planning-filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.planning-filter-pill {
  padding: 6px 12px;
  background: white;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.planning-filter-pill.active {
  background: var(--sora-blue);
  color: white;
  border-color: var(--sora-blue);
  font-weight: 600;
}

/* --- GROUPES de jour (chronologique) --- */
.planning-day-group { margin-bottom: 20px; }

.planning-day-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-200);
}
.planning-day-header-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
}
.planning-day-header-title.today { color: var(--sora-blue); }
.planning-day-header-date {
  font-size: 12px;
  color: var(--gray-500);
  margin-left: 8px;
}
.planning-day-header-count {
  font-size: 11px;
  color: var(--gray-500);
  background: var(--gray-100);
  padding: 2px 8px;
  border-radius: 10px;
}

/* --- CARDS intervention (D117) --- */
.planning-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--gray-300);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px;
  align-items: center;
  text-decoration: none;
  color: var(--gray-900);
}
.planning-card:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

.planning-card-completed   { border-left-color: var(--green); }
.planning-card-in-progress { border-left-color: var(--sora-orange); }
.planning-card-planned     { border-left-color: var(--sora-blue); }
.planning-card-blocked     { border-left-color: var(--red); background: linear-gradient(to right,#FEF2F2 0%, white 8%); }
.planning-card-cancelled   { background: var(--gray-50); opacity: 0.55; }
.planning-card-postponed   { border-left-color: var(--yellow); }
.planning-card-draft       { border-left-color: var(--gray-400); }

.planning-card-time {
  text-align: center;
  min-width: 50px;
}
.planning-card-time-start { font-size: 14px; font-weight: 700; }
.planning-card-time-end   { font-size: 10px; color: var(--gray-500); }

.planning-card-info { min-width: 0; }
.planning-card-info-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.planning-card-info-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}
.planning-card-info-meta.danger {
  color: var(--red);
  font-weight: 600;
}

.planning-card-tech {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

/* --- STATUS BADGES (extension Lot A : ajout planned + cancelled + draft) --- */
.status-planned     { background: var(--sora-blue-light); color: var(--sora-blue-dark); }
.status-cancelled   { background: var(--gray-200); color: var(--gray-700); }
.status-draft       { background: var(--gray-100); color: var(--gray-500); }

/* --- FORMULAIRE 2.4 sections (D117) --- */
.form-section {
  margin-bottom: 22px;
}
.form-section-title {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gray-100);
}

.form-grid-2cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.form-grid-2cols-full { grid-column: 1 / -1; }

@media (max-width: 700px) {
  .form-grid-2cols { grid-template-columns: 1fr; }
}

.form-required { color: var(--red); }

/* M164=B : hint discret pour champs optionnels (cas B numero_ot facultatif) */
.form-optional-hint {
  color: var(--gray-500);
  font-weight: 400;
  font-size: 12px;
  font-style: italic;
}

/* --- FORM file zone V1 (input file simple, pas de drag&drop) --- */
.form-file-zone {
  border: 2px dashed var(--gray-300);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  background: var(--gray-50);
}
.form-file-zone-icon { font-size: 28px; color: var(--gray-400); margin-bottom: 6px; }
.form-file-zone-help { font-size: 10px; color: var(--gray-500); margin-top: 3px; }

.form-file-zone-input {
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  font-family: inherit;
}

/* --- DETAIL 2.5 grid identité --- */
.detail-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
  margin-bottom: 20px;
}
@media (max-width: 700px) { .detail-info-grid { grid-template-columns: 1fr; } }

.detail-info-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gray-500);
  margin-bottom: 2px;
}
.detail-info-value { font-size: 13px; color: var(--gray-900); }

/* --- DETAIL 2.5 blocs contextuels (codes / contact / notes) --- */
.detail-context-block {
  border-radius: 7px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.detail-context-block-title {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 3px;
}
.detail-context-block-body { font-size: 13px; }
.detail-context-block-body pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  margin: 0;
  white-space: pre-wrap;
  background: transparent;
  padding: 0;
  border: none;
}

.detail-context-codes {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
}
.detail-context-codes .detail-context-block-title { color: #92400E; }

.detail-context-contact {
  background: #DBEAFE;
  border: 1px solid #93C5FD;
}
.detail-context-contact .detail-context-block-title { color: #1E40AF; }

.detail-context-notes {
  background: #FCE7F3;
  border: 1px solid #F9A8D4;
}
.detail-context-notes .detail-context-block-title { color: #9D174D; }

/* --- DETAIL 2.5 historique interruption (D119 lecture seule JSON) --- */
.interruption-block {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--red);
  border-radius: 7px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.interruption-block-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
}
.interruption-block-body {
  font-size: 12px;
  color: var(--gray-800);
}
.interruption-block-body pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 4px;
  padding: 8px;
  margin-top: 6px;
  overflow-x: auto;
  white-space: pre-wrap;
}

.interruption-block.is-reporte    { border-left-color: var(--yellow); }
.interruption-block.is-reporte    .interruption-block-title { color: #92400E; }
.interruption-block.is-annule     { border-left-color: var(--gray-500); }
.interruption-block.is-annule     .interruption-block-title { color: var(--gray-700); }

/* --- LISTE PIÈCES JOINTES placeholder V1 (pas encore de table attachments admin) --- */
.attachment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  margin-bottom: 6px;
}
.attachment-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.attachment-icon-pdf { background: var(--sora-blue-light); color: var(--sora-blue); }
.attachment-icon-img { background: var(--sora-orange-light); color: var(--sora-orange); }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name { font-size: 12px; font-weight: 500; }
.attachment-meta { font-size: 10px; color: var(--gray-500); }

/* --- HEADER CTA (titre + bouton action droite) --- */
.admin-page-header-action {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* =========================================================================
   G3.17 LOT C — composants supports 2.9 + techniciens 2.10
   ========================================================================= */

/* --- ONGLETS (border-bottom underline style, maquette 2.10) --- */
.admin-tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 18px;
}

.admin-tab {
  padding: 10px 16px;
  background: transparent;
  border: none;
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
}

.admin-tab:hover { color: var(--gray-700); }

.admin-tab.active {
  color: var(--sora-blue);
  font-weight: 600;
  border-bottom-color: var(--sora-blue);
}

.admin-tab-count {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  color: var(--gray-500);
  font-weight: 500;
}

/* --- FILTRES PILLS sous-onglets statut (Actifs / Désactivés / Supprimés) --- */
.admin-statut-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* --- USER CARDS (maquette 2.10) --- */
.user-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) { .user-card-grid { grid-template-columns: 1fr; } }

.user-card {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px;
}

.user-card-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.user-card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 700;
  color: white;
  background: var(--sora-blue);
  flex-shrink: 0;
}

.user-card-avatar-admin { background: #7C3AED; } /* violet pour admin/super_admin */

.user-card-identity { flex: 1; min-width: 0; }
.user-card-name { font-size: 15px; font-weight: 700; color: var(--gray-900); }
.user-card-email {
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-card-badges {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.user-card-badge {
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 600;
}

.user-card-badge-active { background: var(--green); color: white; }
.user-card-badge-deactivated { background: var(--gray-200); color: var(--gray-700); }
.user-card-badge-deleted { background: var(--red); color: white; }
.user-card-badge-totp-on { background: var(--sora-blue-light); color: var(--sora-blue); }
.user-card-badge-totp-off { background: #FEF3C7; color: #92400E; }

/* Stats grid 2x2 */
.user-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 11px;
}

.user-card-stat-label {
  color: var(--gray-500);
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.user-card-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-900);
  margin-top: 2px;
}

.user-card-stat-value-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  margin-top: 2px;
}

.user-card-stat-placeholder {
  font-size: 18px;
  font-weight: 700;
  color: var(--gray-400);
}

/* Stat hint inline tooltip-like (D126 placeholder R9) */
.user-card-stat-hint {
  display: block;
  font-size: 9px;
  color: var(--gray-400);
  margin-top: 2px;
  font-weight: 500;
}

.user-card-actions {
  border-top: 1px solid var(--gray-100);
  margin-top: 14px;
  padding-top: 12px;
  display: flex;
  gap: 8px;
}

.user-card-action-btn {
  flex: 1;
  padding: 7px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  color: var(--gray-700);
  text-align: center;
  font-family: inherit;
}

.user-card-action-btn:hover {
  background: var(--gray-50);
  color: var(--gray-900);
}

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

/* --- SUPPORTS 2.9 — drag handle décoratif (D128 V1, pas de JS) --- */
.support-drag-handle {
  display: inline-block;
  cursor: grab;
  opacity: 0.4;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gray-500);
  user-select: none;
}

.support-code-badge {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--gray-800);
}

.support-row-deactivated { opacity: 0.55; }

/* --- BADGE PILL générique (cohérent maquette 2.9 supports) --- */
.badge-pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-pill-active { background: #D1FAE5; color: #065F46; }
.badge-pill-inactive { background: var(--gray-200); color: var(--gray-700); }

/* Empty state générique réutilisable */
.admin-empty-card {
  text-align: center;
  padding: 40px 24px;
  background: white;
  border: 1px dashed var(--gray-300);
  border-radius: 10px;
  color: var(--gray-500);
}

/* =========================================================================
   G3.17 LOT D — composants 2.11 RGPD whitelist + 2.12 catégories + 2.13 audit
   ========================================================================= */

/* --- ROW URGENCE EXPIRATION (vue 2.11 a-expirer) --- */
.contact-row-urgent {
  background: #FEF2F2; /* rouge très clair */
}

.contact-row-warning {
  background: #FEF7E6; /* jaune très clair */
}

.urgency-badge {
  font-weight: 600;
  white-space: nowrap;
}

.urgency-badge-critical { color: var(--red); }
.urgency-badge-warning  { color: var(--sora-orange); }
.urgency-badge-normal   { color: var(--gray-700); }

/* --- TIMELINE EVENTS audit 2.13 (D131bis) --- */
.audit-timeline {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px;
}

.audit-event {
  display: grid;
  grid-template-columns: 90px 30px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--gray-100);
  align-items: start;
}

.audit-event:last-child { border-bottom: none; }

.audit-event-time {
  font-size: 11px;
  color: var(--gray-500);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}

.audit-event-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: white;
  background: var(--gray-500);
  flex-shrink: 0;
}

.audit-event-icon-success  { background: var(--green); }
.audit-event-icon-warning  { background: var(--sora-orange); }
.audit-event-icon-danger   { background: var(--red); }
.audit-event-icon-info     { background: var(--sora-blue); }
.audit-event-icon-admin    { background: #7C3AED; }
.audit-event-icon-neutral  { background: var(--gray-500); }

.audit-event-body { min-width: 0; }

.audit-event-title {
  font-size: 13px;
  color: var(--gray-900);
}

.audit-event-meta {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
  word-break: break-word;
}

.audit-event-totp-flag {
  background: var(--sora-blue-light);
  color: var(--sora-blue);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}

/* Filtres journal audit (cohérent maquette 4 inputs alignés) */
.audit-filters-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.audit-filters-bar .form-input,
.audit-filters-bar .form-select {
  width: auto;
  flex: 1 1 180px;
  min-width: 180px;
  max-width: 280px;
}

/* =========================================================================
   G3.17 LOT E — composants auth (TOTP setup + recovery codes + password)
   ========================================================================= */

/* --- Variant largeur carte auth (login 2.1 = 420px ; TOTP/recovery plus larges) --- */
.admin-login-card-wide {
  max-width: 560px;
}

.admin-login-card-x-wide {
  max-width: 720px;
}

/* --- TOTP SETUP : QR + secret côte à côte --- */
.totp-setup-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 18px;
}

@media (max-width: 600px) {
  .totp-setup-grid { grid-template-columns: 1fr; }
}

.totp-qr-frame {
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  place-items: center;
}

.totp-qr-frame img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 200px;
}

.totp-setup-text {
  min-width: 0;
}

.totp-setup-step-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.totp-setup-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 8px;
}

.totp-setup-step-help {
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.6;
}

.totp-secret-fallback {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-300);
}

.totp-secret-display {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  background: var(--sora-blue-light);
  color: var(--sora-blue-dark);
  padding: 10px 14px;
  border-radius: 8px;
  user-select: text;
  word-break: break-all;
  letter-spacing: 1px;
}

.totp-issuer-tag {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  margin-bottom: 6px;
}

/* --- RECOVERY CODES : grille 2x4 + impression --- */
.recovery-codes-warning {
  background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
  border-left: 4px solid var(--red);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

.recovery-codes-warning-title {
  font-size: 13px;
  font-weight: 700;
  color: #7F1D1D;
  margin-bottom: 4px;
}

.recovery-codes-warning-detail {
  font-size: 12px;
  color: #991B1B;
  line-height: 1.5;
}

.recovery-codes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}

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

.recovery-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  font-weight: 700;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  color: var(--gray-900);
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  letter-spacing: 1px;
  user-select: all;
}

/* <code> enfant hérite du parent (contract test regex <code>...</code>
   matche bien la structure plain <code>XXXXX-XXXXX</code>) */
.recovery-code code {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  border-radius: 0;
  border: none;
}

.recovery-codes-meta {
  font-size: 11px;
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 14px;
}

.recovery-codes-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .recovery-codes-actions { flex-direction: column; }
}

/* Impression : masque tout sauf la zone d'impression */
@media print {
  body, .admin-login-bg {
    background: white !important;
    color: black !important;
    padding: 0 !important;
  }
  .admin-login-card {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px !important;
    max-width: 100% !important;
  }
  .recovery-codes-actions,
  .admin-login-footer,
  .admin-login-tagline,
  .recovery-codes-warning {
    display: none !important;
  }
  .recovery-code {
    background: white !important;
    border: 1px solid #888 !important;
    page-break-inside: avoid;
  }
}

/* =============================================================================
   M163=delta -- Dev mode banner (APP_ENV=local + HTTP_HOST whitelist + .env)
   Banner rouge sticky en haut de TOUTES les pages admin pour empecher tout
   deploiement accidentel en prod avec config dev (TOTP skip + session 30j).
   ============================================================================= */
.admin-dev-banner {
  position: sticky;
  top: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(153, 27, 27, 0.35);
  border-bottom: 2px solid #7f1d1d;
}

.admin-dev-banner-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.admin-dev-banner-text {
  flex: 1;
}

.admin-dev-banner-text strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-dev-banner-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
}

/* Quand le banner est present (admin-app-dev sur .admin-app), decaler la
   sidebar fixed pour eviter overlap avec banner sticky. */
.admin-app-dev .admin-sidebar {
  top: 42px;
}

/* =========================================================================
   G5.1 — MODULE 2 RAPPORTS (additif, ecrans 2.7 liste + 2.8 detail)
   Reuse vocabulary G3.17 : .btn[-primary/-secondary], .card, .data-table,
   .flash[-success/-error/-warning/-info], .status-badge + .status-{draft|completed}.
   Classes propres au module (additif, pas de modif existantes).
   ========================================================================= */

/* --- Foundation additif (5 nouvelles + 2 orphelines refacto 7.a) --- */

.admin-back-link {
  margin-bottom: 16px;
  font-size: 13px;
}

.admin-list-summary {
  margin: 16px 0 12px;
  font-size: 13px;
  color: var(--gray-700);
}

.admin-btn-link {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--sora-blue);
  text-decoration: underline;
}
.admin-btn-link:hover { color: var(--sora-orange); }

.admin-btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

.admin-table-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
}

/* --- Filtres GET form (D173 inputs date HTML5, wrap mobile) --- */

.admin-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px;
  background: white;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
}

.admin-filters select,
.admin-filters input[type="date"] {
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: white;
  color: var(--gray-900);
}

.admin-filters-pa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
}

/* --- Pagination Prev/Next + label central (D175) --- */

.admin-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  gap: 12px;
}

.admin-pagination-label {
  font-size: 13px;
  color: var(--gray-700);
}

/* --- 2.8 detail rapport : grid 2 cols 60/40 desktop + 1fr mobile (D176) --- */

.admin-rapport-show-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  margin-bottom: 24px;
}

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

.admin-rapport-visibility {
  margin-top: 0;
}

.admin-show-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 12px 0;
  font-size: 13px;
}
.admin-show-dl dt { color: var(--gray-500); font-weight: 500; }
.admin-show-dl dd { color: var(--gray-900); }

.admin-show-meta {
  display: block;
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 2px;
}

.admin-show-comment {
  margin-top: 8px;
  padding: 12px;
  background: var(--gray-50);
  border-left: 3px solid var(--sora-blue);
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-800);
}

.admin-show-empty {
  margin: 8px 0;
  font-size: 12px;
  font-style: italic;
  color: var(--gray-500);
}

/* --- Photos grid responsive (auto-fit, mini-galerie) ---
 * G5.1-PDF (D-WEB-1) : cadre fixe fond gris #f0f1f3 + object-fit:contain.
 * Plus aucun crop : portrait et paysage centrés, ratio préservé. */

.admin-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 8px 0 16px;
}

.admin-photo {
  margin: 0;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}
.admin-photo-frame {
  display: block;
  width: 100%;
  height: 180px;
  background: #f0f1f3;
  position: relative;
}
.admin-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.admin-photo figcaption {
  padding: 4px 6px;
  font-size: 10px;
  color: var(--gray-500);
  background: white;
  border-top: 1px solid var(--gray-200);
}

/* --- G5.1-PDF (D-WEB-2) : carte Leaflet localisation rapport admin --- */
.admin-rapport-map-card { margin-top: 16px; }
.admin-rapport-map {
  width: 100%;
  height: 360px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  overflow: hidden;
  background: #eef0f3;
}
.admin-rapport-map-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--gray-600);
}
.admin-rapport-map-coords {
  font-family: 'IBM Plex Mono', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
  color: var(--gray-700);
}
.admin-rapport-map-link {
  font-size: 12px;
  color: var(--sora-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.admin-rapport-map-link:hover { color: var(--sora-orange); }

/* ============================================================================
 * V2-E1 — multi-techniciens + plage de dates (form admin planning)
 * ========================================================================== */
.form-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  padding: 10px 12px;
  background: var(--gray-50, #F9FAFB);
  border: 1px solid var(--gray-200, #E5E7EB);
  border-radius: 6px;
}
.form-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700, #374151);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 4px;
}
.form-checkbox-label:hover {
  background: white;
}

/* ============================================================================
 * V2-E3a-css -- bloc intervention calendrier (vues semaine + mois)
 * Mutualise le rendu visuel pour rendre lisible la duree (hauteur du bloc
 * en vue semaine, presence en vue mois). La couleur de bordure gauche est
 * injectee via custom property --cal-status-color (statut metier).
 * Contraste texte #111827 sur fond #F0F4FA = ~16.9:1 (WCAG AAA).
 * ========================================================================== */
.cal-block {
  display: block;
  text-decoration: none;
  background: #F0F4FA;
  border: 1px solid #DDE5F0;
  border-left: 4px solid var(--cal-status-color, #9CA3AF);
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.2;
  color: #111827;
  overflow: hidden;
  transition: background-color 0.12s ease;
}
.cal-block:hover {
  background: #E0E8F5;
}
.cal-block-time {
  font-weight: 600;
  color: var(--cal-status-color, #374151);
}
.cal-block-label {
  color: #1F2937;
}

/* ============================================================================
 * V2-E3c-1 -- Responsive admin "mobilite CP"
 * ----------------------------------------------------------------------------
 * Socle layout maitre : sidebar off-canvas <=768px (iPad portrait inclus),
 * burger top-left, backdrop semi-transparent. Desktop >=769px = inchange.
 * Pas de regression desktop, additif strict.
 * ========================================================================== */

/* Burger : cache desktop, visible mobile uniquement */
.admin-burger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1010;
  width: 44px;
  height: 44px;
  background: var(--sora-blue);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.admin-burger:active { transform: scale(0.97); }
.admin-burger-line {
  display: block;
  width: 22px;
  height: 2px;
  background: white;
  border-radius: 1px;
}

/* Backdrop sidebar : cache par defaut, affiche quand sidebar open mobile */
.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1000;
  display: block; /* visible if [hidden] removed */
  animation: admin-backdrop-fade 0.18s ease-out;
}
.admin-sidebar-backdrop[hidden] { display: none; }
@keyframes admin-backdrop-fade { from { opacity: 0; } to { opacity: 1; } }

/* Breakpoint mobile (iPhone + iPad portrait) */
@media (max-width: 768px) {
  /* Layout maitre 1 colonne */
  .admin-app {
    grid-template-columns: 1fr;
  }

  /* Sidebar off-canvas */
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    z-index: 1005;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body.is-sidebar-open .admin-sidebar {
    transform: translateX(0);
  }
  body.is-sidebar-open {
    overflow: hidden; /* lock scroll arriere-plan */
  }

  /* Affiche le burger uniquement mobile */
  .admin-burger {
    display: flex;
  }

  /* Laisse la place au burger en haut */
  .admin-main {
    padding-top: 8px;
  }
  .admin-page-header {
    padding-left: 64px; /* evite collision avec burger */
  }
}

/* ============================================================================
 * V2-E3c-2 -- Wrap auto-scroll horizontal pour les tables larges (8 vues).
 * Pattern : <div class="data-table-wrap"><table class="data-table">...</table></div>
 * En desktop : invisible (le tableau tient). En mobile : scroll horizontal
 * isole AU tableau, ne pousse pas la page entiere.
 * ========================================================================== */
.data-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
}
@media (max-width: 768px) {
  .data-table-wrap {
    margin: 0 -16px; /* bord-a-bord mobile pour gagner de la place */
    padding: 0 16px;
  }
}

/* ============================================================================
 * V2-E3c-4 -- Planning liste mobile (ecran pivot CP)
 * .planning-card : grid 4-cols desktop -> stack vertical mobile.
 * .planning-filter-pill : padding tap-friendly sur mobile.
 * .planning-filters-bar : deja flex-wrap, rien a faire.
 * ========================================================================== */
@media (max-width: 768px) {
  .planning-card {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 10px 12px;
  }
  .planning-card-time {
    text-align: left;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .planning-card-time-end {
    font-size: 11px;
  }
  .planning-card-info-title {
    white-space: normal;        /* autorise wrap mobile */
    word-break: break-word;
  }
  .planning-filter-pill {
    padding: 8px 14px;          /* tap target plus genereux mobile */
    font-size: 13px;
  }
  /* Bandeau alerte interventions bloquees : padding reduit + CTA pleine largeur */
  .admin-alert.admin-alert-danger {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .admin-alert .admin-alert-cta {
    align-self: stretch;
    text-align: center;
  }
}

/* ============================================================================
 * V2-E3c-6 -- Fiche chantier mobile (planning/show.php)
 * .detail-info-grid : breakpoint elargi 700 -> 768 pour coherence.
 * Sections context (codes_acces / contact / notes) : padding mobile reduit.
 * Boutons supprimer / restaurer en bas de fiche : stack vertical mobile.
 * ========================================================================== */
@media (max-width: 768px) {
  .detail-info-grid {
    grid-template-columns: 1fr; /* coherent 768 vs ancien 700 */
  }
  .detail-info-value {
    font-size: 14px;
    word-break: break-word;
  }
  .detail-context-block {
    padding: 10px 12px;
  }
  .detail-context-block-body pre {
    font-size: 12px;
    word-break: break-all;       /* JSON codes_acces ne deborde pas */
    white-space: pre-wrap;
  }
  /* Section Suppression / Restauration en bas de fiche : stack mobile */
  .card[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
  }
  .card[style*="justify-content:space-between"] form {
    align-self: stretch;
  }
  .card[style*="justify-content:space-between"] .btn {
    width: 100%;
  }
  /* details summary (modale "Modifier le chantier") : tap target mobile */
  details > summary {
    padding: 12px 0;
    font-size: 14px;
  }
}

/* ============================================================================
 * V2-E3c-3 -- Dashboard mobile (responsive 768px)
 * Stat-card-grid : deja 1100 -> 2 cols. On ajoute 1 col <=480 (iPhone).
 * Stat-card-value : 28px -> 22px mobile (lisible mais moins agressif).
 * Section-card : padding reduit mobile.
 * ========================================================================== */
@media (max-width: 768px) {
  .admin-stat-card { padding: 14px; }
  .admin-stat-card-value { font-size: 22px; }
  .admin-section-card { padding: 14px; }
}
@media (max-width: 480px) {
  .admin-stat-card-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
 * V2-E3c-7 -- Form chantier mobile (responsive 768px)
 * Anti-zoom iOS Safari : font-size:16px sur les inputs en mobile.
 * Stack 1 col harmonise au breakpoint socle 768 (existant a 700).
 * Boutons submit pleine largeur mobile.
 * ========================================================================== */
@media (max-width: 768px) {
  /* Anti-zoom iOS Safari : tout input < 16px declenche un zoom au focus.
     On force a 16px en mobile uniquement, le rendu desktop reste a 14px. */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px;
    padding: 10px 12px; /* hauteur tap target ~42px */
  }
  /* Harmonisation breakpoint : 2-cols -> 1-col deja a 700, etendu a 768 socle */
  .form-grid-2cols {
    grid-template-columns: 1fr;
  }
  /* Boutons submit / actions du formulaire pleine largeur mobile */
  .form-section + .form-section { margin-top: 14px; }
  form .btn,
  form button[type="submit"] {
    min-height: 44px; /* WCAG 2.5.5 touch target */
  }
  /* Footer formulaire (boutons d'actions) : stack vertical pleine largeur */
  form > div[style*="justify-content:flex-end"],
  form > div[style*="justify-content: flex-end"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
  form > div[style*="justify-content:flex-end"] .btn,
  form > div[style*="justify-content: flex-end"] .btn {
    width: 100%;
  }
}

/* ============================================================================
 * V2-E3c-CAL -- Calendrier admin responsive mobile (mois + semaine)
 * ----------------------------------------------------------------------------
 * Vraies grilles mobiles sous 768px (remplace l'ancien redirect liste).
 * Mois : pastilles 6px par intervention, tap jour -> panneau detail sous grille.
 * Semaine : colonne horaire fixe + 7 cols 120px, scroll horizontal.
 * Desktop >=769px STRICTEMENT INCHANGE.
 * !important justifie : override des styles inline desktop legacy des vues
 * (min-height, padding, grid-template-columns), localise au breakpoint mobile.
 * ========================================================================== */

/* Elements mobile-only caches par defaut (desktop) */
.cal-mois-mobile-tap,
.cal-pastilles,
.planning-calendrier-mois-mobile,
.planning-calendrier-week-mobile-hint,
.cal-day-name-short {
  display: none;
}

@media (max-width: 768px) {
  /* ===== Vue MOIS mobile ===== */
  .planning-calendrier-grid [role="gridcell"] {
    position: relative;
    min-height: 46px !important;
    padding: 3px 2px !important;
    overflow: hidden;
  }
  /* Numero du jour compact */
  .planning-calendrier-grid [role="gridcell"] > div:first-of-type {
    font-size: 10px !important;
    line-height: 1.1;
    position: relative;
    z-index: 1;
  }
  /* Cache le libelle "Aujourd'hui" (place insuffisante, indicateur visuel suffit) */
  .planning-calendrier-grid [role="gridcell"] > div:first-of-type > span {
    display: none;
  }
  /* Cache les cal-blocks desktop dans les cellules (remplaces par pastilles) */
  .planning-calendrier-grid [role="gridcell"] > .cal-block {
    display: none;
  }
  /* Tap target pleine cellule -> ancre vers detail jour */
  .planning-calendrier-grid .cal-mois-mobile-tap {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
    overflow: hidden;
  }
  .planning-calendrier-grid .cal-mois-mobile-tap > span {
    position: absolute;
    left: -9999px;
  }
  /* Pastilles statut (6px ronds, max 2 lignes visibles) */
  .planning-calendrier-grid .cal-pastilles {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 2px;
    position: relative;
    z-index: 1;
    max-height: 20px;
    overflow: hidden;
  }
  .cal-pastille {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pastille-color, #9CA3AF);
    flex-shrink: 0;
  }
  /* Jour courant mis en evidence */
  .planning-calendrier-grid [role="gridcell"][data-cal-today="1"] {
    box-shadow: inset 0 0 0 2px #E85D2C;
  }

  /* Panneau detail jour + legende sous la grille */
  .planning-calendrier-mois-mobile {
    display: block;
    margin-top: 14px;
  }
  .planning-calendrier-mois-mobile-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 0;
    border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    font-size: 11px;
    color: #4B5563;
  }
  .planning-calendrier-mois-mobile-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .planning-calendrier-mois-mobile-hint {
    padding: 8px 0 4px;
    font-size: 11px;
    color: #6B7280;
    font-style: italic;
  }
  .cal-mois-mobile-day {
    padding: 10px 4px;
    border-top: 1px solid #E5E7EB;
    scroll-margin-top: 12px;
  }
  .cal-mois-mobile-day:target {
    background: #FFFBEB;
    border-radius: 6px;
    padding: 10px;
    margin: 0 -6px;
  }
  .cal-mois-mobile-day-header {
    font-size: 13px;
    font-weight: 600;
    color: #28297D;
    margin-bottom: 8px;
  }
  .cal-mois-mobile-day-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  /* Cal-blocks dans le panneau detail mobile : pleine largeur, lisibles */
  .cal-mois-mobile-day-list .cal-block {
    font-size: 13px;
    padding: 10px;
    min-height: 44px; /* WCAG 2.5.5 touch target */
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cal-mois-mobile-day-list .cal-block .cal-block-time {
    flex-shrink: 0;
  }
  .planning-calendrier-mois-mobile-empty {
    padding: 12px 4px;
    font-size: 12px;
    color: #9CA3AF;
    text-align: center;
    border-top: 1px solid #E5E7EB;
  }

  /* ===== Vue SEMAINE mobile ===== */
  .planning-calendrier-week-mobile-hint {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    color: #6B7280;
    font-style: italic;
  }
  /* Force colonnes pixel + scroll horizontal */
  .planning-calendrier-week {
    grid-template-columns: 54px repeat(7, 120px) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  /* Bascule libelles jour : "Lundi 5 jan" desktop -> "LUN 5" mobile */
  .cal-day-name-long,
  .cal-day-month {
    display: none;
  }
  .cal-day-name-short {
    display: block;
  }
}