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

  :root {
    /* ── Thème clair aligné sur le reste du site (index/astreintes/reglages/...) ── */
    --bg:  #E7EDEC;
    --bg2: #FFFFFF;
    --bg3: #DCE8E7;
    --bg4: #CDE0DF;
    --bg-planning: #E7EDEC;
    --border: #C9D8D7;
    --border2: #B3C6C5;
    --text: #182B2C;
    --text2: #4C6264;
    --text3: #7E9294;
    --accent: #184A4C;
    --accent2: #0B2A2C;
    --accent-glow: rgba(24,74,76,0.14);
    --green: #3B7A55;
    --green-bg: rgba(59,122,85,0.12);
    --amber: #C97D26;
    --amber-bg: rgba(201,125,38,0.12);
    --red: #BE4139;
    --red-bg: rgba(190,65,57,0.12);
    --blue: #3B6EA5;
    --blue-bg: rgba(59,110,165,0.12);
    --purple: #7A5BA6;
    --purple-bg: rgba(122,91,166,0.12);
    --pink: #B15C7A;
    --pink-bg: rgba(177,92,122,0.12);
    --teal: #2A9D8F;
    --teal-bg: rgba(42,157,143,0.12);
    --slate: #64748B;
    --slate-bg: rgba(100,116,139,0.12);
    --cyan: #1B8CA8;
    --cyan-bg: rgba(27,140,168,0.12);
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'IBM Plex Mono', monospace;
    --r: 10px;
    --r2: 16px;
  }

  body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; font-size: 14px; line-height: 1.5; }

  /* Lecture seule tant que le code d'accès n'a pas été saisi */
  body.locked .edit-only { display: none !important; }
  #btn-access { display: flex; align-items: center; gap: 6px; }

  /* ── TOP BAR ── */
  .topbar { background: var(--bg2); border-bottom: 1px solid var(--border); padding: 0 24px; height: 58px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 100; }
  .logo { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--accent2); letter-spacing: 0.04em; display: flex; align-items: center; gap: 8px; }
  .logo i { font-size: 20px; }
  .topbar-sep { width: 1px; height: 24px; background: var(--border2); }
  .nav-tabs { display: flex; gap: 2px; }
  .nav-tab { padding: 6px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text2); cursor: pointer; transition: all 0.15s; border: none; background: none; font-family: var(--font); display: flex; align-items: center; gap: 6px; }
  .nav-tab:hover { background: var(--bg3); color: var(--text); }
  .nav-tab.active { background: var(--accent-glow); color: var(--accent2); }
  .nav-tab i { font-size: 16px; }
  .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
  .btn-primary { background: var(--accent); color: #fff; border: none; padding: 7px 16px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: opacity 0.15s; }
  .btn-primary:hover { opacity: 0.85; }
  .btn-ghost { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); padding: 6px 12px; border-radius: 8px; font-family: var(--font); font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
  .btn-ghost:hover { border-color: var(--border2); color: var(--text); background: var(--bg4); }

  /* ── LAYOUT ── */
  .app-body { display: flex; flex: 1; overflow: hidden; height: calc(100vh - 58px); height: calc(100dvh - 58px); }
  .sidebar { width: 240px; background: var(--bg2); border-right: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
  .main { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

  /* ── SIDEBAR ── */
  .sidebar-section label { font-size: 11px; font-weight: 600; color: var(--text3); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; display: block; }
  .tech-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; transition: background 0.12s; }
  .tech-item:hover { background: var(--bg3); }
  .tech-item.active { background: var(--bg4); }
  .avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
  .tech-name { font-size: 13px; font-weight: 500; color: var(--text); }
  .tech-role { font-size: 11px; color: var(--text3); }
  .site-chip { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--text2); transition: all 0.12s; }
  .site-chip:hover { background: var(--bg3); color: var(--text); }
  .site-chip.active { background: var(--bg4); color: var(--text); }
  .site-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .legend { display: flex; flex-direction: column; gap: 6px; }
  .legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
  .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
  .mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .mini-stat { background: var(--bg3); border-radius: 8px; padding: 10px; }
  .mini-stat-val { font-size: 20px; font-weight: 600; color: var(--text); font-family: var(--mono); }
  .mini-stat-lbl { font-size: 11px; color: var(--text3); margin-top: 2px; }

  /* ── CALENDAR HEADER ── */
  .cal-header { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--border); background: var(--bg2); flex-shrink: 0; }
  .week-label { font-size: 16px; font-weight: 600; color: var(--text); font-family: var(--mono); }
  .cal-nav { display: flex; gap: 2px; }
  .cal-nav button { background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); width: 32px; height: 32px; border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; font-family: var(--font); transition: all 0.12s; }
  .cal-nav button:hover { color: var(--text); background: var(--bg4); }
  .view-toggle { display: flex; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-left: auto; }
  .view-btn { padding: 6px 14px; font-size: 12px; font-weight: 500; color: var(--text3); cursor: pointer; border: none; background: none; font-family: var(--font); transition: all 0.12s; }
  .view-btn.active { background: var(--bg4); color: var(--accent2); }
  .today-btn { padding: 6px 14px; background: var(--bg3); border: 1px solid var(--border2); color: var(--text2); border-radius: 8px; font-family: var(--font); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.12s; }
  .today-btn:hover { color: var(--text); background: var(--bg4); }

  /* ── CALENDAR GRID ── */
  .cal-grid { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; position: relative; min-height: 0; scrollbar-width: auto; scrollbar-color: var(--accent2) var(--bg3); }
  .cal-grid::-webkit-scrollbar { width: 14px; height: 14px; }
  .cal-grid::-webkit-scrollbar-track { background: var(--bg3); }
  .cal-grid::-webkit-scrollbar-thumb { background: var(--accent2); border-radius: 8px; border: 3px solid var(--bg3); }
  .cal-grid::-webkit-scrollbar-thumb:hover { background: var(--accent); }
  .cal-grid::-webkit-scrollbar-corner { background: var(--bg3); }
  .cal-table { display: grid; }
  .col-header-row { display: contents; }
  .time-gutter { width: 56px; flex-shrink: 0; background: var(--bg2); border-right: 1px solid var(--border); position: sticky; left: 0; z-index: 10; }
  .day-header { padding: 10px 12px; border-bottom: 2px solid var(--border); border-right: 1px solid var(--border); text-align: center; background: var(--bg2); position: sticky; top: 0; z-index: 5; }
  .day-name { font-size: 11px; font-weight: 600; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
  .day-num { font-size: 22px; font-weight: 600; font-family: var(--mono); color: var(--text); }
  .day-num.today { color: var(--accent2); }
  .day-num-circle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; }
  .day-num-circle.today { background: var(--accent-glow); }

  /* time slots */
  .time-slot-row { display: contents; }
  .time-label { height: 60px; display: flex; align-items: flex-start; padding: 4px 8px 0; font-size: 10px; color: var(--text3); font-family: var(--mono); position: sticky; left: 0; background: var(--bg2); border-right: 1px solid var(--border); z-index: 4; }
  .day-cell { height: 60px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); position: relative; cursor: pointer; transition: background 0.1s; }
  .day-cell:hover { background: rgba(24,74,76,0.06); }
  .day-cell.half-hour { border-bottom: 1px dashed rgba(15,54,56,0.08); }
  .current-time-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); z-index: 8; pointer-events: none; }
  .current-time-line::before { content: ''; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

  /* events */
  .event { position: absolute; left: 4px; right: 4px; border-radius: 6px; padding: 4px 8px; font-size: 11px; cursor: pointer; overflow: hidden; transition: opacity 0.12s, transform 0.12s; z-index: 6; display: flex; flex-direction: column; gap: 2px; }
  .event:hover { opacity: 0.9; transform: scale(1.01); z-index: 7; }
  /* Fine ombre portée derrière les lettres — lisibilité garantie quelle que
     soit la couleur de fond (technicien) derrière le titre. */
  .event-title, .allday-event {
    text-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.55);
  }
  .event-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .event-meta { font-size: 10px; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .event-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; margin-right: 4px; }

  /* NOTE : le fond de l'événement (= techniciens), la couleur du texte (= type)
     et les puces de site sont désormais calculés dynamiquement en JS
     (voir techEventStyle() / siteDotsHtml() dans app.js) et appliqués en inline-style. */

  /* puces de site — un petit rond de couleur par site affecté, en haut à droite de l'événement */
  .event-site-dots { position: absolute; top: 3px; right: 4px; display: flex; gap: 2px; z-index: 2; }
  .site-chip { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(15,54,56,0.3); flex-shrink: 0; }

  /* ── MODAL ── */
  .modal-overlay { position: fixed; inset: 0; background: rgba(24,43,44,0.45); z-index: 200; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .modal-overlay.open { opacity: 1; pointer-events: all; }
  .modal { background: var(--bg2); border: 1px solid var(--border2); border-radius: 20px; width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto; transform: translateY(10px); transition: transform 0.2s; box-shadow: 0 20px 60px rgba(15,54,56,0.18); }
  .modal-overlay.open .modal { transform: translateY(0); }
  .modal-header { padding: 20px 24px 0; display: flex; align-items: center; gap: 12px; }
  .modal-header h2 { font-size: 16px; font-weight: 600; }
  .modal-close { margin-left: auto; background: var(--bg3); border: none; color: var(--text2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; font-family: var(--font); transition: all 0.12s; }
  .modal-close:hover { color: var(--text); background: var(--bg4); }
  .modal-body { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .form-group { display: flex; flex-direction: column; gap: 6px; }
  .form-group label { font-size: 12px; font-weight: 500; color: var(--text2); }
  .form-group input, .form-group select, .form-group textarea { background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; color: var(--text); font-family: var(--font); font-size: 13px; padding: 8px 12px; outline: none; transition: border-color 0.15s; }
  .form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent); }
  .form-group select option { background: var(--bg3); }
  .form-group textarea { resize: vertical; min-height: 72px; }
  .type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .type-btn { padding: 8px 6px; border-radius: 8px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text2); cursor: pointer; font-size: 12px; font-weight: 500; font-family: var(--font); text-align: center; transition: all 0.12s; display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .type-btn i { font-size: 18px; }
  .type-btn.selected { border-color: currentColor; opacity: 1; }
  .type-btn.t-intervention { color: var(--green); }
  .type-btn.t-intervention.selected { background: var(--green-bg); }
  .type-btn.t-rdv { color: var(--blue); }
  .type-btn.t-rdv.selected { background: var(--blue-bg); }
  .type-btn.t-reunion { color: var(--purple); }
  .type-btn.t-reunion.selected { background: var(--purple-bg); }
  .type-btn.t-maintenance { color: var(--amber); }
  .type-btn.t-maintenance.selected { background: var(--amber-bg); }
  .type-btn.t-urgence { color: var(--red); }
  .type-btn.t-urgence.selected { background: var(--red-bg); }
  .type-btn.t-formation { color: var(--pink); }
  .type-btn.t-formation.selected { background: var(--pink-bg); }
  .type-btn.t-livraison { color: var(--teal); }
  .type-btn.t-livraison.selected { background: var(--teal-bg); }
  .type-btn.t-autre { color: var(--slate); }
  .type-btn.t-autre.selected { background: var(--slate-bg); }
  .type-btn.t-astreinte { color: var(--cyan); }
  .type-btn.t-astreinte.selected { background: var(--cyan-bg); }
  .modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 4px; }
  .btn-danger { background: var(--red-bg); color: var(--red); border: 1px solid rgba(190,65,57,0.3); padding: 7px 16px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.15s; margin-right: auto; }
  .btn-danger:hover { background: rgba(190,65,57,0.2); }
  .btn-secondary { background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); padding: 7px 16px; border-radius: 8px; font-family: var(--font); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
  .btn-secondary:hover { color: var(--text); background: var(--bg4); }

  /* ── PIÈCES JOINTES (événements) ── */
  .attach-list { display: flex; flex-direction: column; gap: 6px; }
  .attach-empty { font-size: 12px; color: var(--text3); }
  .attach-item { display: flex; align-items: center; gap: 8px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 10px; }
  .attach-item i.ti-paperclip { color: var(--text3); font-size: 15px; flex-shrink: 0; }
  .attach-item .attach-name { flex: 1; min-width: 0; color: var(--text); text-decoration: none; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .attach-item .attach-name:hover { text-decoration: underline; color: var(--accent2); }
  .attach-item .attach-size { color: var(--text3); font-size: 11px; white-space: nowrap; flex-shrink: 0; }
  .attach-item .attach-remove { background: none; border: none; cursor: pointer; color: var(--text3); padding: 2px 4px; display: flex; flex-shrink: 0; }
  .attach-item .attach-remove:hover { color: var(--red); }
  .attach-upload-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
  .attach-upload-row #attach-upload-status { font-size: 12px; color: var(--text2); }
  .attach-hint { font-size: 12px; color: var(--text3); background: var(--bg3); border: 1px dashed var(--border2); border-radius: 8px; padding: 10px 12px; }

  /* ── TOGGLE SWITCH ── */
  .toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:var(--bg3); border:1px solid var(--border2); border-radius:8px; }
  .toggle-row label { font-size:13px; font-weight:500; color:var(--text); display:flex; align-items:center; gap:8px; cursor:pointer; }
  .toggle-row label i { font-size:16px; color:var(--accent2); }
  .toggle { position:relative; width:36px; height:20px; flex-shrink:0; }
  .toggle input { opacity:0; width:0; height:0; position:absolute; }
  .toggle-track { position:absolute; inset:0; background:var(--bg4); border-radius:10px; transition:background 0.2s; cursor:pointer; }
  .toggle input:checked + .toggle-track { background:var(--accent); }
  .toggle-track::after { content:''; position:absolute; width:14px; height:14px; background:#fff; border-radius:50%; top:3px; left:3px; transition:transform 0.2s; }
  .toggle input:checked + .toggle-track::after { transform:translateX(16px); }

  /* ── ALL-DAY BANNER ── */
  .allday-row { display:flex; gap:4px; border-bottom:1px solid var(--border); background:var(--bg2); min-height:28px; position:sticky; top:0; z-index:9; }
  .allday-gutter { width:56px; flex-shrink:0; border-right:1px solid var(--border); }
  .allday-cell { flex:1; position:relative; border-right:1px solid var(--border); min-height:28px; }
  .allday-event { position:relative; margin:2px 3px; padding:3px 22px 3px 7px; border-radius:4px; font-size:11px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
  .allday-event:hover { opacity:.85; }
  .allday-event .event-site-dots { top:50%; transform:translateY(-50%); right:5px; }

  /* ── RECURRENCE SECTION ── */
  .recur-section { background:var(--bg3); border:1px solid var(--border2); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
  .recur-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .recur-row label { font-size:12px; color:var(--text2); white-space:nowrap; }
  .recur-row select, .recur-row input[type=number], .recur-row input[type=date] { background:var(--bg4); border:1px solid var(--border2); border-radius:6px; color:var(--text); font-family:var(--font); font-size:12px; padding:5px 8px; outline:none; }
  .recur-row select:focus, .recur-row input:focus { border-color:var(--accent); }
  .recur-days { display:flex; gap:4px; flex-wrap:wrap; }
  .recur-day-btn { width:30px; height:30px; border-radius:50%; font-size:11px; font-weight:600; border:1px solid var(--border2); background:var(--bg4); color:var(--text2); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all 0.12s; font-family:var(--font); }
  .recur-day-btn.sel { background:var(--accent); color:#fff; border-color:var(--accent); }
  .recur-badge { display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:12px; font-size:10px; font-weight:600; background:var(--accent-glow); color:var(--accent2); border:1px solid rgba(24,74,76,0.32); }

  /* ── MULTI SELECT CHIPS ── */
  .multi-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 8px; min-height: 42px; cursor: default; transition: border-color 0.15s; }
  .multi-chips:focus-within { border-color: var(--accent); }
  .chip-option { display: flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; background: var(--bg4); color: var(--text2); transition: all 0.12s; user-select: none; }
  .chip-option:hover { color: var(--text); border-color: var(--border2); }
  .chip-option.selected { color: #fff; border-color: transparent; }
  .chip-option .chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .chip-option .chip-check { font-size: 11px; display: none; }
  .chip-option.selected .chip-check { display: inline; }

  /* ── EVENT DETAIL MODAL ── */
  .detail-type-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }

  /* ── TOAST ── */
  .toast { position: fixed; bottom: 24px; right: 24px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 18px; font-size: 13px; color: var(--text); z-index: 300; display: flex; align-items: center; gap: 10px; transform: translateY(10px); opacity: 0; transition: all 0.25s; box-shadow: 0 8px 32px rgba(15,54,56,0.18); }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast i { font-size: 18px; }
  .toast.success i { color: var(--green); }
  .toast.error i { color: var(--red); }

  /* scrollbar */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }

  /* hidden panels */
  .view-panel { display: none; }
  .view-panel.active { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; background: var(--bg-planning); }

  /* list view */
  .list-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
  .list-event { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: all 0.12s; }
  .list-event:hover { border-color: var(--border2); background: var(--bg3); }
  .list-event-color { width: 4px; border-radius: 2px; align-self: stretch; flex-shrink: 0; }
  .list-event-info { flex: 1; }
  .list-event-title { font-size: 14px; font-weight: 600; color: var(--text); }
  .list-event-meta { font-size: 12px; color: var(--text2); margin-top: 3px; display: flex; gap: 12px; flex-wrap: wrap; }
  .list-event-meta span { display: flex; align-items: center; gap: 4px; }
  .list-event-time { font-family: var(--mono); font-size: 13px; color: var(--text2); white-space: nowrap; }
  .list-date-group { font-size: 12px; font-weight: 600; color: var(--text3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; margin-bottom: 4px; }

  /* dashboard view */
  .dash-container { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; padding: 20px 24px; }
  .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 24px; }
  .dash-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
  .dash-card h3 { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
  .dash-card h3 i { font-size: 16px; color: var(--accent2); }
  .tech-workload { display: flex; flex-direction: column; gap: 10px; }
  .workload-row { display: flex; align-items: center; gap: 10px; }
  .workload-name { font-size: 13px; color: var(--text); width: 80px; flex-shrink: 0; font-weight: 500; }
  .workload-bar-bg { flex: 1; height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
  .workload-bar { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
  .workload-count { font-size: 12px; color: var(--text2); font-family: var(--mono); width: 20px; text-align: right; }
  .site-activity { display: flex; flex-direction: column; gap: 8px; }
  .site-row { display: flex; align-items: center; gap: 10px; }
  .site-name { font-size: 13px; color: var(--text); flex: 1; }
  .site-count { font-size: 12px; font-family: var(--mono); color: var(--text2); }
  .site-bar-bg { width: 80px; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
  .site-bar { height: 100%; border-radius: 2px; }
  .upcoming-list { display: flex; flex-direction: column; gap: 8px; }
  .upcoming-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--bg3); border-radius: 8px; }
  .upcoming-item-info { flex: 1; }
  .upcoming-item-title { font-size: 13px; font-weight: 500; }
  .upcoming-item-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
  .upcoming-item-time { font-size: 11px; font-family: var(--mono); color: var(--text3); }
  .big-stat { display: flex; flex-direction: column; gap: 6px; }
  .big-stat-row { display: flex; gap: 12px; }
  .big-stat-item { flex: 1; background: var(--bg3); border-radius: 8px; padding: 12px; }
  .big-stat-val { font-size: 28px; font-weight: 600; font-family: var(--mono); }
  .big-stat-lbl { font-size: 11px; color: var(--text3); }

  /* ══════════════════════════════════════════
     TABLETTE — de 601px à 1024px
     (sidebar en tiroir comme sur mobile pour laisser la place au
     calendrier, mais on garde les libellés et une taille de texte
     confortable puisque l'espace le permet davantage que sur téléphone)
  ══════════════════════════════════════════ */
  @media (min-width: 601px) and (max-width: 1024px) {
    /* Sidebar en tiroir, comme sur mobile */
    .sidebar {
      position: fixed; left: 0; top: 58px; bottom: 0; z-index: 150;
      width: 280px; transform: translateX(-100%);
      transition: transform 0.25s ease; box-shadow: 4px 0 24px rgba(15,54,56,0.15);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-backdrop {
      display: none; position: fixed; inset: 0; top: 58px;
      background: rgba(24,43,44,0.4); z-index: 140; backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show { display: block; }
    #btn-hamburger { display: flex !important; }

    /* Calendrier : largeur minimale réduite pour limiter le défilement
       horizontal une fois la sidebar libérée, tout en restant lisible */
    /* Largeur du calendrier désormais calculée dynamiquement en JS
       (voir buildCalendar) selon le nombre de jours affichés. */
    .cal-header { padding: 12px 16px; }

    /* Zones tactiles un peu plus grandes qu'au clavier/souris */
    .cal-nav button { width: 38px; height: 38px; }
    .today-btn, .view-btn { padding: 8px 14px; }
    .nav-tab { padding: 8px 12px; }

    /* Formulaire modale en colonne unique — plus confortable au doigt */
    .form-row { grid-template-columns: 1fr; }
    .modal { max-width: 92vw; }
  }

  /* ══════════════════════════════════════════
     MOBILE — 600px et moins
  ══════════════════════════════════════════ */
  @media (max-width: 600px) {
    /* Layout global */
    html, body { overflow: hidden; }
    .app-body { height: calc(100vh - 64px); height: calc(100dvh - 64px); }

    /* Barres de défilement du calendrier bien visibles et faciles à saisir */
    .cal-grid::-webkit-scrollbar { width: 18px; height: 18px; }
    .cal-grid::-webkit-scrollbar-thumb { border-radius: 9px; border-width: 4px; }

    /* Topbar agrandie pour plus de lisibilité et de confort tactile */
    .topbar { padding: 0 10px; height: 64px; gap: 8px; }
    .logo span, .logo > span { display: none; }
    .logo { gap: 0; font-size: 0; }
    .logo i { font-size: 26px; }
    .topbar-sep { display: none; }
    .nav-tabs { gap: 4px; }
    .nav-tab span { display: none; }
    .nav-tab { padding: 12px; font-size: 0; gap: 0; min-width: 48px; min-height: 48px; border-radius: 10px; }
    .nav-tab i { font-size: 23px; }
    .topbar-right { gap: 6px; }
    .btn-ghost span, .btn-primary span { display: none; }
    .btn-ghost { padding: 11px; min-width: 44px; min-height: 44px; }
    .btn-primary { padding: 11px; min-width: 44px; min-height: 44px; }
    .btn-ghost i, .btn-primary i { font-size: 19px; }
    #sync-label { display: none; }
    .sync-badge { padding: 10px; min-width: 44px; min-height: 44px; }
    #btn-hamburger { min-width: 44px; min-height: 44px; }
    #btn-hamburger i { font-size: 21px; }

    /* Sidebar en drawer */
    .sidebar {
      position: fixed; left: 0; top: 64px; bottom: 0; z-index: 150;
      width: 260px; transform: translateX(-100%);
      transition: transform 0.25s ease; box-shadow: 4px 0 24px rgba(15,54,56,0.15);
    }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-backdrop {
      display: none; position: fixed; inset: 0; top: 64px;
      background: rgba(24,43,44,0.4); z-index: 140; backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.show { display: block; }

    /* Calendrier : vue Jour par défaut, scroll horizontal masqué */
    .cal-header { padding: 10px 12px; gap: 8px; flex-wrap: wrap; }
    .week-label { font-size: 13px; }
    /* Largeur du calendrier désormais calculée dynamiquement en JS
       (voir buildCalendar) : plus de forçage à 100%, ce qui permet
       enfin le défilement horizontal en vue Semaine sur téléphone. */
    .view-toggle { margin-left: 0; }
    .today-btn { padding: 8px 12px; font-size: 12px; }
    .cal-nav button { width: 38px; height: 38px; }

    /* Formulaire en colonne unique */
    .form-row { grid-template-columns: 1fr; }

    /* Modale plein écran */
    .modal {
      width: 100% !important;
      max-width: 100vw !important;
      max-height: 95vh !important;
      border-radius: 16px 16px 0 0 !important;
    }
    .modal-overlay { align-items: flex-end; }

    /* Vue liste plus compacte */
    .list-event { padding: 10px 12px; }
    .list-event-time { font-size: 11px; }

    /* Dashboard responsive */
    .dash-grid { grid-template-columns: 1fr !important; }

    /* Hamburger visible */
    #btn-hamburger { display: flex !important; }

    /* Events plus lisibles */
    .event { font-size: 10px; padding: 3px 6px; }
    .event-meta { display: none; }
  }

  /* ── Sync badge ── */
  .sync-badge { display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid;transition:all 0.15s; }
  .sync-local { background:var(--bg3);color:var(--text3);border-color:var(--border2); }
  .sync-local:hover { color:var(--text2); }
  .sync-connecting { background:var(--amber-bg);color:var(--amber);border-color:rgba(201,125,38,0.3);animation:pulse 1.2s infinite; }
  .sync-online { background:var(--green-bg);color:var(--green);border-color:rgba(59,122,85,0.3); }
  .sync-error { background:var(--red-bg);color:var(--red);border-color:rgba(190,65,57,0.3); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

  /* ── Portail d'accès — page désormais réservée aux comptes autorisés
     (auparavant en consultation libre, seule la saisie était verrouillée) ── */
  .access-gate{position:fixed;inset:0;z-index:1000;background:var(--accent2, #0B2A2C);display:flex;align-items:center;justify-content:center;padding:20px;}
  .access-gate.unlocked{display:none;}
  .access-card{background:#fff;border-radius:16px;padding:32px 30px;width:380px;max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,0.35);text-align:left;font-family:var(--font);}
  .access-card .brand-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;display:block;}
  .access-card h2{font-family:var(--font);font-size:21px;color:var(--accent2);margin:4px 0 10px;font-weight:600;}
  .access-card p{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:18px;}
  .access-card .btn-primary-gate{display:block;text-align:center;text-decoration:none;padding:10px;border-radius:8px;background:var(--accent2);color:#fff;font-weight:600;font-size:14px;}
  .access-back{display:block;margin-top:16px;font-size:12.5px;color:var(--text2);text-decoration:none;}
  .access-back:hover{color:var(--accent2);}