*,*::before,*::after{box-sizing:border-box}
  :root {
    --primary: #6554c0; --primary-light: #eae6ff; --success: #36b37e; --warning: #ff8b00;
    --danger: #de350b; --bg-1: #f4f5f7; --bg-2: #fff; --bg-3: #ebecf0;
    --text-1: #172b4d; --text-2: #5e6c84; --text-3: #97a0af; --border: #dfe1e6;
  }
  
  /* Mode sombre classique */
  body.dark-mode {
    --bg-1: #0d1117;
    --bg-2: #161b22;
    --bg-3: #21262d;
    --text-1: #e6edf3;
    --text-2: #8b949e;
    --text-3: #6e7681;
    --border: #30363d;
    --primary-light: rgba(101, 84, 192, 0.2);
  }

  /* ✨ MODE GLASS EFFECT ✨ */
  body.glass-mode {
    background: linear-gradient(160deg, #e4eaf7 0%, #ede8f8 100%);
    --bg-2: rgba(255, 255, 255, 0.55);
    --bg-3: rgba(255, 255, 255, 0.35);
    --bg-1: rgba(255, 255, 255, 0.25);
    --text-1: #172b4d;
    --text-2: rgba(23, 43, 77, 0.75);
    --border: rgba(255, 255, 255, 0.6);
  }

  body.glass-mode.dark-mode {
    background: linear-gradient(160deg, #0a0f1e 0%, #131926 100%);
    --bg-2: rgba(255, 255, 255, 0.07);
    --bg-3: rgba(255, 255, 255, 0.04);
    --bg-1: rgba(255, 255, 255, 0.03);
    --text-1: #e6edf3;
    --text-2: rgba(230, 237, 243, 0.7);
    --border: rgba(255, 255, 255, 0.1);
  }

  /* Application de l'effet flou (blur) sur les éléments du CRM */
  body.glass-mode .card,
  body.glass-mode .stat-card,
  body.glass-mode .client-card,
  body.glass-mode .franchise-item,
  body.glass-mode .calendar,
  body.glass-mode .calendar-day,
  body.glass-mode .task-card,
  body.glass-mode .modal,
  body.glass-mode .dropdown-menu,
  body.glass-mode .filters-bar,
  body.glass-mode .nav-tabs,
  body.glass-mode .sync-timer,
  body.glass-mode .user-badge {
    background: var(--bg-2);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
  }
  
  body.glass-mode .header {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    z-index: 400;
  }
  
  body.glass-mode.dark-mode .header {
    background: rgba(0, 0, 0, 0.2);
  }

  body.glass-mode input, 
  body.glass-mode select, 
  body.glass-mode textarea {
    background: var(--bg-1);
    backdrop-filter: blur(4px);
    color: var(--text-1);
  }

  body.glass-mode header h1 { color: var(--text-1); }

  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg-1);color:var(--text-1);min-height:100vh;transition:background 0.5s ease, color 0.3s;}
  
  /* Écran de chargement Global */
  #globalLoader {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg-1); backdrop-filter: blur(10px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s;
  }
  #globalLoader.hidden {
    opacity: 0; visibility: hidden;
  }
  .loader-spinner {
    font-size: 40px; margin-bottom: 15px; animation: bounce 1s infinite alternate;
  }
  .loader-text {
    font-size: 16px; font-weight: 600; color: var(--text-1);
  }
  .loader-bar-container {
    width: 200px; height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; margin-top: 15px;
  }
  .loader-bar {
    height: 100%; width: 30%; background: var(--primary); border-radius: 3px;
    animation: loadBar 1.5s ease-in-out infinite alternate;
  }
  @keyframes loadBar {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
  }
  @keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
  }

  /* Header */
  .header{background:var(--bg-2);border-bottom:2px solid var(--border);padding:16px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;transition:all 0.3s;position:relative;z-index:200;overflow:visible;}
  .header h1{margin:0;font-size:22px}
  .header-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  
  /* Toggles (Dark + Glass) */
  .toggle-btn {width:44px;height:24px;background:var(--border);border-radius:12px;position:relative;cursor:pointer;transition:background 0.3s; display:flex; align-items:center; justify-content:center; font-size:12px;}
  .toggle-btn.active{background:var(--primary)}
  .toggle-btn .toggle-thumb{position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform 0.3s;box-shadow:0 2px 4px rgba(0,0,0,0.2)}
  .toggle-btn.active .toggle-thumb{transform:translateX(20px)}
  #glassModeToggle.active { background: #6554c0; }

  /* User badge */
  .user-badge{display:flex;align-items:center;gap:10px;padding:6px 16px;background:var(--bg-1);border-radius:30px;font-weight:600;position:relative;cursor:pointer;border:1px solid transparent}
  .user-badge:hover{background:var(--border)}
  .user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;background-size:cover;background-position:center}
  
  /* Dropdown menu */
  .dropdown{position:relative;display:inline-block}
  .dropdown-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.2);min-width:220px;z-index:10000;border:1px solid var(--border)}
  .dropdown-menu.show{display:block}
  .dropdown-item{padding:12px 16px;cursor:pointer;transition:background 0.2s;display:flex;align-items:center;gap:8px;font-size:14px}
  .dropdown-item:hover{background:var(--bg-1)}
  .dropdown-divider{height:1px;background:var(--border);margin:4px 0}
  
  /* Status dot */
  .status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:8px}
  .status-active{background:#36b37e}
  .status-inactive{background:var(--danger)}
  
  /* Sync timer */
  .sync-timer{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--bg-1);border-radius:6px;font-size:13px;color:var(--text-2);border:1px solid transparent}
  .sync-timer-icon{animation:spin 2s linear infinite}
  
  /* Tabs (Responsive horizontal scrolling) */
  .nav-tabs{display:flex;gap:4px;background:var(--bg-2);padding:0 24px;border-bottom:2px solid var(--border);overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; transition:all 0.3s;}
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tab{padding:14px 20px;cursor:pointer;font-weight:500;border-bottom:3px solid transparent;display:flex;align-items:center;gap:6px;}
  .nav-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
  .nav-tab:hover{background:var(--bg-1)}
  /* Desktop : icône et label en ligne */
  .tab-icon  { font-size: 16px; line-height: 1; }
  .tab-label { font-size: 14px; font-weight: 500; }
  
  /* Container */
  .container{max-width:1400px;margin:0 auto;padding:24px}
  
  /* Buttons */
  button{cursor:pointer;font-weight:600;border:none;border-radius:6px;padding:10px 16px;display:inline-flex;align-items:center;gap:8px;transition:all 0.2s; justify-content:center;}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:#5243aa;transform:translateY(-1px)}
  .btn-secondary{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border)}
  .btn-secondary:hover{background:var(--border)}
  .btn-success{background:var(--success);color:#fff}
  .btn-danger{background:var(--danger);color:#fff}
  .btn-small{padding:6px 12px;font-size:13px}
  
  /* Cards */
  .card{background:var(--bg-2);border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.1);margin-bottom:20px;transition:all 0.3s;}
  
  /* Stats grid */
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}
  .stat-card{background:var(--bg-2);padding:20px;border-radius:8px;border-left:4px solid var(--primary);box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:all 0.3s;}
  .stat-label{font-size:13px;color:var(--text-2);margin-bottom:4px}
  .stat-value{font-size:28px;font-weight:700;color:var(--text-1)}
  
  /* Filters Bar */
  .filters-bar{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap;align-items:center;background:var(--bg-2);padding:12px 16px;border-radius:8px;border:1px solid var(--border);box-shadow:0 1px 3px rgba(0,0,0,0.05);transition:all 0.3s;}
  .search-box{flex:1;min-width:200px}

  /* ✨ BOUTONS DE FILTRES ✨ */
  .filter-group { display: flex; gap: 4px; background: var(--bg-1); padding: 4px; border-radius: 8px; border: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .filter-group::-webkit-scrollbar { display: none; }
  .filter-btn { background: transparent; color: var(--text-2); border: none; padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
  .filter-btn:hover { color: var(--text-1); }
  .filter-btn.active { background: var(--bg-2); color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,0.1); font-weight: 600; }
  body.glass-mode .filter-group { background: rgba(0,0,0,0.1); border-color: var(--border); }
  body.glass-mode .filter-btn { color: var(--text-1); }
  body.glass-mode .filter-btn.active { background: var(--bg-2); }

  /* Grids */
  .clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  .tasks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
  
  /* Client Card */
  .client-card{background:var(--bg-2);border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);cursor:pointer;border:2px solid transparent;transition:all 0.2s}
  .client-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.15); z-index: 10;}
  .client-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:8px}
  .client-name{font-weight:600;font-size:16px;color:var(--text-1)}
  .client-meta{display:flex;gap:4px;flex-wrap:wrap}
  .client-badge{background:var(--primary-light);color:var(--primary);padding:3px 8px;border-radius:12px;font-size:11px;font-weight:bold}
  .badge-vip{background:#ffebe6;color:var(--danger)}
  .client-info{font-size:13px;color:var(--text-2);margin-top:8px}
  .client-info div{margin-bottom:4px}
  
  /* ✨ Task Card ✨ */
  .task-card{background:var(--bg-2);border-radius:8px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,0.1);border-left:4px solid var(--primary);display:flex;flex-direction:column;gap:12px;transition:all 0.2s}
  .task-card.overdue{border-left-color:var(--danger)}
  body.glass-mode .task-card { border-left-width: 4px; border-left-color: var(--primary); }
  body.glass-mode .task-card.overdue { border-left-color: var(--danger); }
  
  /* Modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}
  .modal-overlay.show{display:flex}
  .modal{background:var(--bg-2);border-radius:12px;max-width:1000px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3);transition:all 0.3s;}
  .modal-header{padding:20px 24px;border-bottom:2px solid var(--border);display:flex;justify-content:space-between;align-items:center}
  .modal-header h2{margin:0;font-size:20px}
  .modal-close{background:transparent;border:none;font-size:28px;cursor:pointer;color:var(--text-2);padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}
  .modal-close:hover{background:var(--bg-1);color:var(--text-1)}
  .modal-body{padding:24px}
  .modal-footer{padding:16px 24px;border-top:2px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
  
  /* Forms */
  .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .form-group{margin-bottom:16px}
  .form-group.full-width{grid-column:1/-1}
  .form-label{display:block;font-weight:600;margin-bottom:6px;font-size:13px;color:var(--text-1)}
  .form-control{width:100%;padding:8px 12px;border:2px solid var(--border);border-radius:6px;font-size:14px;font-family:inherit;background:var(--input-bg);color:var(--text-1)}
  .form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
  textarea.form-control{resize:vertical;min-height:80px}
  select.form-control{cursor:pointer}
  
  /* Section divider */
  .section-divider{grid-column:1/-1;margin:16px 0;border-bottom:2px solid var(--border);padding-bottom:8px}
  .section-divider h3{margin:0;color:var(--primary);font-size:16px}
  
  /* Tabs inside modal */
  .modal-tabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:2px solid var(--border)}
  .modal-tab{padding:10px 16px;cursor:pointer;font-weight:500;border-bottom:3px solid transparent;margin-bottom:-2px}
  .modal-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
  .tab-content{display:none}
  .tab-content.active{display:block}
  
  /* Timeline (historique) */
  .timeline{position:relative;padding-left:30px}
  .timeline-item{position:relative;padding-bottom:24px}
  .timeline-item::before{content:'';position:absolute;left:-30px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--bg-2);box-shadow:0 0 0 2px var(--border)}
  .timeline-item:not(:last-child)::after{content:'';position:absolute;left:-24px;top:16px;width:2px;height:calc(100% - 8px);background:var(--border)}
  .timeline-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .timeline-type{font-weight:600;font-size:14px}
  .timeline-date{font-size:12px;color:var(--text-2)}
  .timeline-content{background:var(--bg-1);padding:10px 12px;border-radius:6px;font-size:13px;transition:all 0.3s;}
  .timeline-empty{text-align:center;color:var(--text-3);padding:40px;font-size:14px}
  
  /* ✨ CALENDRIER INTERACTIF (INTERACTIONS / RENDEZ-VOUS) ✨ */
  .calendar{background:var(--bg-2);border-radius:8px;padding:24px;transition:all 0.3s;box-shadow:0 1px 3px rgba(0,0,0,0.1)}
  .calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
  .calendar-month{font-weight:700;font-size:20px;color:var(--text-1);text-transform:capitalize}
  .calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
  .calendar-day{min-height:100px;display:flex;flex-direction:column;padding:8px;border-radius:8px;background:var(--bg-1);border:1px solid var(--border);transition:all 0.2s;cursor:pointer;overflow:hidden}
  .calendar-day:hover:not(.empty){transform:translateY(-2px);z-index:10;box-shadow:0 6px 16px rgba(0,0,0,0.1);border-color:var(--primary)}
  .calendar-day.empty{background:transparent;border-color:transparent;cursor:default}
  .calendar-day-number{align-self:flex-end;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:13px;font-weight:600;margin-bottom:8px}
  .calendar-day.today .calendar-day-number{background:var(--primary);color:#fff}
  .calendar-events{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:80px}
  .calendar-event{font-size:11px;padding:4px 6px;border-radius:4px;background:var(--primary-light);color:var(--primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;cursor:pointer}
  .calendar-event:hover{filter:brightness(0.95)}
  
  /* Franchises */
  .franchise-list{display:flex;flex-direction:column;gap:8px}
  .franchise-item{background:var(--bg-1);padding:10px 12px;border-radius:6px;display:flex;justify-content:space-between;align-items:center;transition:all 0.3s;}
  .franchise-name{font-weight:600;font-size:14px}
  
  /* Charts */
  .chart-container{position:relative;height:300px}
  
  /* Toast notifications */
  .toast{position:fixed;bottom:20px;right:20px;background:var(--text-1);color:#fff;padding:12px 20px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.3);z-index:2000;animation:slideIn 0.3s ease-out}
  @keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
  
/* ================================================================
   MOBILE — Design natif iOS / PWA (≤ 768px)
   ================================================================ */
@media(max-width: 768px) {

  /* ── Safe areas iOS ── */
  /* On applique l'inset directement sur le header (même fond) pour éviter
     le joint de couleur entre body (--bg-1) et header (--bg-2). */
  body { padding: 0; }
  .header {
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    flex-wrap: nowrap;
    gap: 8px;
  }
  .header h1 { font-size: 16px; font-weight: 700; white-space: nowrap; }
  .sync-timer { display: none; }
  .toggle-btn { width: 34px; height: 20px; flex-shrink: 0; }
  .toggle-btn .toggle-thumb { width: 14px; height: 14px; }
  .toggle-btn.active .toggle-thumb { transform: translateX(14px); }
  .header-actions { gap: 6px; flex-wrap: nowrap; }
  .user-badge { padding: 6px 10px; gap: 6px; font-size: 13px; border-radius: 20px; }

  /* ── Barre de navigation : tab bar iOS fixe en bas ── */
  .nav-tabs {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    border-bottom: none;
    display: flex;
    justify-content: space-around;
    z-index: 500;
    box-shadow: 0 -1px 0 var(--border), 0 -4px 16px rgba(0,0,0,0.06);
    overflow: visible;
    white-space: normal;
  }
  .nav-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 2px 6px;
    border-bottom: none;
    gap: 3px;
    min-height: 54px;
    transition: color 0.15s;
  }
  .tab-icon  { font-size: 21px; line-height: 1; }
  .tab-label { font-size: 10px; font-weight: 600; color: var(--text-3); }
  .nav-tab.active .tab-label,
  .nav-tab.active .tab-icon { color: var(--primary); }
  .nav-tab:hover { background: transparent; }

  /* ── Zone de contenu : espace pour la tab bar ── */
  .container {
    padding: 14px;
    padding-bottom: calc(66px + env(safe-area-inset-bottom));
  }

  /* ── Dashboard : stats en 2 colonnes propres ── */
  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
  }
  .stat-card {
    padding: 14px 12px;
    border-left-width: 3px;
    border-radius: 10px;
  }
  .stat-value { font-size: 24px; line-height: 1.1; }
  .stat-label { font-size: 11px; }

  /* ── Charts : hauteur réduite ── */
  .chart-container { height: 200px; }

  /* ── Cards ── */
  .card { padding: 14px; border-radius: 10px; margin-bottom: 14px; }

  /* ── Filtres clients ── */
  .filters-bar {
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
  }
  .search-box { width: 100%; min-width: 0; }
  .filter-group { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .filter-btn   { padding: 8px 12px; white-space: nowrap; }

  /* ── Grilles ── */
  .clients-grid { grid-template-columns: 1fr; }
  .tasks-grid   { grid-template-columns: 1fr; }

  /* ── Client card : plus lisible ── */
  .client-card { padding: 14px; border-radius: 10px; }
  .client-name { font-size: 15px; }

  /* ── Calendrier : compact mais lisible ── */
  .calendar-container { padding: 10px; border-radius: 10px; }
  .calendar-header-v3 { margin-bottom: 12px; }
  .calendar-header-v3 h3 { font-size: 15px; }
  .calendar-grid-v3 { gap: 2px; margin-top: 6px; }
  .calendar-day-header { padding: 4px 1px; font-size: 9px; font-weight: 700; }
  .calendar-grid-v3 { grid-auto-rows: 70px; }
  .calendar-day-v3 { padding: 3px 2px; border-radius: 5px; }
  .calendar-day-number-v3 { font-size: 11px; font-weight: 700; margin-bottom: 1px; }
  .calendar-event-v3 {
    font-size: 8px;
    padding: 1px 3px;
    border-radius: 3px;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Commandes non traitées ── */
  .pending-order-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    border-radius: 10px;
  }

  /* ── Clients inactifs : table → liste ── */
  .inactive-clients-table thead { display: none; }
  .inactive-clients-table tr { display: block; background: var(--bg-1); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
  .inactive-clients-table td { display: block; padding: 2px 0; font-size: 13px; border: none; }
  .inactive-clients-table td:first-child { font-weight: 700; font-size: 14px; margin-bottom: 4px; }

  /* ── Dropdown notifs : pleine largeur ── */
  .notif-dropdown {
    width: calc(100vw - 20px);
    right: -48px;
    max-height: 65vh;
    border-radius: 12px;
  }

  /* ── Modals : sheet iOS (glisse du bas) ── */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    border-radius: 20px 20px 0 0;
    max-height: 93vh;
    max-width: 100%;
    width: 100%;
    margin: 0;
    animation: crmSlideUp 0.3s cubic-bezier(0.32,0.72,0,1);
  }
  @keyframes crmSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Drag handle visuel en haut de la sheet */
  .modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 12px auto 0;
  }
  .modal-header { padding: 12px 20px 16px; }
  .modal-body   { padding: 0 20px 20px; }
  .modal-footer { padding: 12px 20px; flex-direction: column; gap: 8px; flex-wrap: wrap; }
  .modal-footer button { width: 100%; justify-content: center; min-height: 48px; border-radius: 12px; }
  .form-grid { grid-template-columns: 1fr; }

  /* ── Boutons : touch targets conformes Apple HIG ── */
  button { min-height: 44px; border-radius: 8px; }
  .btn-small { min-height: 36px; font-size: 12px; }
  .btn-primary, .btn-secondary, .btn-success, .btn-danger { border-radius: 10px; }

  /* ── User select (participants rendez-vous) ── */
  .user-select-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .user-select-item  { padding: 8px 6px; border-radius: 8px; }
  .user-select-avatar { width: 38px; height: 38px; font-size: 15px; }
  .user-select-name  { font-size: 11px; }

  /* ── Horaires rendez-vous ── */
  .event-time-inputs { grid-template-columns: 1fr 1fr; }

  /* ── Toast : au-dessus de la tab bar ── */
  .toast {
    bottom: calc(70px + env(safe-area-inset-bottom));
    left: 12px; right: 12px;
    text-align: center;
    border-radius: 12px;
  }
}

/* ========== NOUVEAUX STYLES V3 ========== */

/* Notifications */
.notif-badge{position:relative}
.notif-badge .badge{position:absolute;top:-8px;right:-8px;background:var(--danger);color:#fff;border-radius:10px;padding:2px 6px;font-size:11px;font-weight:700;min-width:18px;text-align:center}
.notif-dropdown{position:absolute;right:0;top:calc(100% + 8px);background:var(--bg-2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,0.15);width:350px;max-height:400px;overflow-y:auto;z-index:1000;border:1px solid var(--border);display:none}
.notif-dropdown.show{display:block}
.notif-header{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.notif-item{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.2s}
.notif-item:hover{background:var(--bg-1)}
.notif-item.unread{background:var(--primary-light)}
.notif-item-title{font-weight:600;margin-bottom:4px;font-size:14px}
.notif-item-message{font-size:12px;color:var(--text-2);margin-bottom:4px}
.notif-item-time{font-size:11px;color:var(--text-3)}
.notif-empty{padding:40px 20px;text-align:center;color:var(--text-2)}

/* Tableau clients inactifs */
.inactive-clients-table{width:100%;border-collapse:collapse;margin-top:16px}
.inactive-clients-table thead{background:var(--bg-3)}
.inactive-clients-table th{padding:12px;text-align:left;font-weight:600;font-size:13px;border-bottom:2px solid var(--border)}
.inactive-clients-table td{padding:12px;border-bottom:1px solid var(--border);font-size:14px}
.inactive-clients-table tbody tr:hover{background:var(--bg-1);cursor:pointer}
#shopifyBody tr:hover{background:var(--bg-2)}
.inactive-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:11px;font-weight:700}
.inactive-warning{background:#fff4e6;color:#ff8b00}
.inactive-danger{background:#ffebe6;color:#de350b}

/* Calendrier V3 */
.calendar-container{background:var(--bg-2);border-radius:8px;padding:20px;box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:all 0.3s;}
.calendar-header-v3{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.calendar-nav{display:flex;gap:8px;align-items:center}
.calendar-grid-v3{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:120px;gap:8px;margin-top:12px}
.calendar-day-header{text-align:center;font-weight:700;font-size:12px;color:var(--text-2);padding:8px}
.calendar-day-v3{overflow:hidden;box-sizing:border-box;background:var(--bg-1);border-radius:6px;padding:8px;border:1px solid var(--border);cursor:pointer;transition:background 0.2s,border-color 0.2s;position:relative;display:flex;flex-direction:column}
.calendar-day-v3:hover{background:var(--bg-3);border-color:var(--primary)}
.calendar-day-v3.today{border:2px solid var(--primary);background:var(--primary-light)}
.calendar-day-v3.other-month{opacity:0.4}
.calendar-day-number-v3{font-weight:700;font-size:14px;margin-bottom:4px}
.calendar-event-v3{font-size:11px;background:var(--primary);color:#fff;padding:4px 6px;border-radius:4px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.calendar-event-v3:hover{filter:brightness(0.9)}
.calendar-event-v3.multi-user{background:var(--success)}

/* Vue jour calendrier */
#calendarDays:not(.calendar-grid-v3){border:1px solid var(--border);border-radius:8px;overflow:hidden;background:var(--bg-1)}

/* User select */
.user-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:12px}
.user-select-item{padding:12px;background:var(--bg-1);border-radius:6px;text-align:center;cursor:pointer;border:2px solid transparent;transition:all 0.2s}
.user-select-item:hover{background:var(--bg-3)}
.user-select-item.selected{border-color:var(--primary);background:var(--primary-light)}
.user-select-avatar{width:48px;height:48px;border-radius:50%;margin:0 auto 8px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:20px}
.user-select-name{font-size:13px;font-weight:600}

/* Event modal */
.event-time-inputs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ics-download-btn{background:linear-gradient(45deg,#667eea,#764ba2);color:#fff;margin-top:12px}
.ics-download-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,0.4)}

/* Users management */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.user-card{background:var(--bg-2);border-radius:8px;padding:20px;border:1px solid var(--border);text-align:center;transition:all 0.3s}
.user-card:hover{border-color:var(--primary);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.user-card-avatar{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:32px}
.user-card-name{font-weight:700;font-size:16px;margin-bottom:4px}
.user-card-role{font-size:13px;color:var(--text-2);margin-bottom:12px}
.user-card-actions{display:flex;gap:8px;justify-content:center}
/* Pending Orders Dashboard */
.pending-orders-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.pending-order-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-1);border-radius:8px;border-left:4px solid var(--warning);transition:all 0.2s;gap:12px}
.pending-order-item:hover{background:var(--border)}
.pending-order-info{flex:1;min-width:0}
.pending-order-name{font-weight:600;font-size:14px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pending-order-meta{font-size:12px;color:var(--text-2);margin-top:2px}
.pending-order-amount{font-weight:700;font-size:15px;color:var(--text-1);white-space:nowrap}
.pending-order-status{padding:3px 10px;border-radius:12px;font-size:11px;font-weight:700;white-space:nowrap}
.status-unfulfilled{background:#fff3cd;color:#856404}
.status-pending{background:#d1ecf1;color:#0c5460}
.stat-card-orders-pending{font-size:12px;color:var(--warning);font-weight:600;margin-top:4px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.stat-card-orders-pending:hover{color:#cc7000}