/* ==========================================================================
   GestPlan bureau · Habillage iOS / iPadOS  (couche de transition)
   Redéfinit l'aspect des composants EXISTANTS d'app.html (app.css) avec les
   tokens du kit iOS. Langage iPadOS : barre latérale claire, listes et cartes
   groupées, feuilles centrées. La grille du planning RESTE dense.
   Actif seulement si <html data-skin="ios"> (interrupteur : ?skin=classic).
   À charger APRÈS app.css, gestplan-ios.css et les <style> de la page.
   ========================================================================== */

/* 1 · Variables d'app.css -> tokens iOS */
html[data-skin="ios"]{
  --brand-50: color-mix(in srgb, var(--ios-tint) 10%, transparent);
  --brand-100: color-mix(in srgb, var(--ios-tint) 16%, transparent);
  --brand-500: var(--ios-tint); --brand-600: var(--ios-tint); --brand-700: var(--ios-tint); --brand-800: var(--ios-tint);
  --primary: var(--ios-tint); --primary-dark: var(--ios-tint);
  --blue: var(--ios-tint); --blue-mid: var(--ios-tint); --blue-dark: var(--ios-tint); --blue-light: color-mix(in srgb, var(--ios-tint) 12%, transparent);
  --green: var(--ios-green);  --green-600: var(--ios-green);  --green-light: color-mix(in srgb, var(--ios-green) 14%, transparent);
  --red: var(--ios-red);      --red-600: var(--ios-red);      --red-light: color-mix(in srgb, var(--ios-red) 14%, transparent);
  --amber: var(--ios-orange); --amber-600: var(--ios-orange); --orange: var(--ios-orange);
  --amber-light: color-mix(in srgb, var(--ios-orange) 14%, transparent); --orange-light: color-mix(in srgb, var(--ios-orange) 14%, transparent);
  --teal: var(--ios-teal);    --teal-600: var(--ios-teal);    --teal-light: color-mix(in srgb, var(--ios-teal) 14%, transparent);
  --purple: var(--ios-purple); --violet-600: var(--ios-purple); --purple-light: color-mix(in srgb, var(--ios-purple) 14%, transparent);
  --bg: var(--ios-bg-cell); --bg-alt: var(--ios-fill-3); --bg-subtle: var(--ios-fill-3); --bg-body: var(--ios-bg-grouped);
  --surface: var(--ios-bg-cell); --sidebar-bg: var(--ios-bg-grouped);
  --text: var(--ios-label); --text-muted: var(--ios-label-2); --text-hint: var(--ios-label-2);
  --border: var(--ios-sep); --border-md: var(--ios-sep);
  --slate-50: var(--ios-fill-3); --slate-100: var(--ios-fill-3); --slate-200: var(--ios-sep);
  --slate-500: var(--ios-label-2); --slate-600: var(--ios-label-2); --slate-700: var(--ios-label); --slate-800: var(--ios-label); --slate-900: var(--ios-label);
  --radius: 10px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 14px;
  --shadow-xs: none; --shadow-sm: none; --shadow-md: 0 8px 30px rgba(0,0,0,.12); --shadow-lg: 0 10px 50px rgba(0,0,0,.22);
  --font-sans: var(--ios-font); --font: var(--ios-font); --font-mono: var(--ios-font-mono);
  --topbar-height: 52px; --topbar-h: 52px;
}
/* le mode sombre de l'app (body.dark-mode) pilote les tokens iOS */
html[data-skin="ios"] body.dark-mode{
  --ios-blue:#0a84ff; --ios-green:#30d158; --ios-red:#ff453a; --ios-orange:#ff9f0a; --ios-yellow:#ffd60a; --ios-purple:#bf5af2; --ios-teal:#40c8e0; --ios-indigo:#5e5ce6;
  --ios-bg:#000; --ios-bg-grouped:#000; --ios-bg-cell:#1c1c1e; --ios-bg-elevated:#2c2c2e; --ios-bg-sheet:#1c1c1e; --ios-bg-sheet-cell:#2c2c2e;
  --ios-label:#fff; --ios-label-2:rgba(235,235,245,.6); --ios-label-3:rgba(235,235,245,.3); --ios-placeholder:rgba(235,235,245,.3);
  --ios-sep:rgba(84,84,88,.65); --ios-fill:rgba(120,120,128,.36); --ios-fill-2:rgba(120,120,128,.32); --ios-fill-3:rgba(118,118,128,.24);
  --ios-material:rgba(29,29,31,.78); --ios-material-menu:rgba(37,37,40,.82); --ios-backdrop:rgba(0,0,0,.5);
  --bg: var(--ios-bg-cell); --surface: var(--ios-bg-cell); --text: var(--ios-label); --text-muted: var(--ios-label-2);
  --text-hint: var(--ios-label-2); --border: var(--ios-sep); --border-md: var(--ios-sep); --sidebar-bg: var(--ios-bg-grouped);
}
@media (prefers-color-scheme: dark){
  html[data-skin="ios"] body:not(.dark-mode){
    --ios-blue:#007aff; --ios-green:#34c759; --ios-red:#ff3b30; --ios-orange:#ff9500; --ios-purple:#af52de; --ios-teal:#30b0c7;
    --ios-bg:#fff; --ios-bg-grouped:#f2f2f7; --ios-bg-cell:#fff; --ios-bg-elevated:#fff; --ios-bg-sheet:#f2f2f7; --ios-bg-sheet-cell:#fff;
    --ios-label:#000; --ios-label-2:rgba(60,60,67,.6); --ios-label-3:rgba(60,60,67,.3); --ios-placeholder:rgba(60,60,67,.3);
    --ios-sep:rgba(60,60,67,.29); --ios-fill:rgba(120,120,128,.2); --ios-fill-2:rgba(120,120,128,.16); --ios-fill-3:rgba(118,118,128,.12);
    --ios-material:rgba(249,249,249,.8); --ios-material-menu:rgba(250,250,250,.82); --ios-backdrop:rgba(0,0,0,.3);
  }
}

/* 2 · Base */
html[data-skin="ios"] body, html[data-skin="ios"] button, html[data-skin="ios"] input, html[data-skin="ios"] select, html[data-skin="ios"] textarea{
  font-family: var(--ios-font); letter-spacing: -.005em;
}
html[data-skin="ios"] body{ background: var(--ios-bg-grouped); color: var(--ios-label); -webkit-font-smoothing: antialiased; }
html[data-skin="ios"] .main-area, html[data-skin="ios"] .page-content, html[data-skin="ios"] .main-content{ background: var(--ios-bg-grouped); }
html[data-skin="ios"] .tnum, html[data-skin="ios"] .stat-value, html[data-skin="ios"] .kpi-value{ font-variant-numeric: tabular-nums; }

/* 3 · Barre latérale façon iPadOS : claire, groupée, sélection teintée */
html[data-skin="ios"] .sidebar{ background: var(--ios-bg-grouped); border-right: .5px solid var(--ios-sep); box-shadow: none; color: var(--ios-label); }
html[data-skin="ios"] .sidebar::-webkit-scrollbar-thumb{ background: var(--ios-fill); }
html[data-skin="ios"] .sidebar-logo{ border-bottom: 0; }
html[data-skin="ios"] .logo-icon{ background: var(--ios-tint); box-shadow: none; border-radius: 10px; }
html[data-skin="ios"] .logo-text{ color: var(--ios-label); font-weight: 700; }
html[data-skin="ios"] .logo-sub{ color: var(--ios-label-2); }
html[data-skin="ios"] .nav-section > .nav-label{ font: var(--ios-footnote); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ios-label-2); }
html[data-skin="ios"] .nav-section > .nav-label:hover{ color: var(--ios-label); }
html[data-skin="ios"] .nav-item{ font: 400 15px/20px var(--ios-font); color: var(--ios-label); border-radius: 9px; min-height: 36px; }
html[data-skin="ios"] .nav-item svg{ opacity: 1; color: var(--ios-tint); width: 18px; height: 18px; }
html[data-skin="ios"] .nav-item:hover{ background: var(--ios-fill-3); color: var(--ios-label); }
html[data-skin="ios"] .nav-item.active{ background: var(--ios-tint); color: #fff; font-weight: 600; box-shadow: none; }
html[data-skin="ios"] .nav-item.active svg{ color: #fff; }
html[data-skin="ios"] .nav-item.active::before{ display: none; }
html[data-skin="ios"] .nav-badge, html[data-skin="ios"] .nav-badge-count{ background: var(--ios-red); color: #fff; font: 400 12px/18px var(--ios-font); min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; }
html[data-skin="ios"] .nav-item.active .nav-badge{ background: rgba(255,255,255,.28); }
html[data-skin="ios"] .sidebar-sep{ background: var(--ios-sep); height: .5px; }
html[data-skin="ios"] .sidebar-user{ border-top: .5px solid var(--ios-sep); background: transparent; }
html[data-skin="ios"] .sidebar-avatar, html[data-skin="ios"] .user-avatar{ background: linear-gradient(180deg,#a5abb8,#858994); color: #fff; border-radius: 50%; box-shadow: none; }
html[data-skin="ios"] .sidebar-user-name, html[data-skin="ios"] .user-name{ color: var(--ios-label); }
html[data-skin="ios"] .sidebar-user-role, html[data-skin="ios"] .user-role{ color: var(--ios-label-2); }
html[data-skin="ios"] .sidebar-logout-btn{ color: var(--ios-label-2); }
html[data-skin="ios"] .sidebar-toggle{ color: var(--ios-tint); background: transparent; border: 0; }

/* 4 · Barre du haut : matière translucide */
html[data-skin="ios"] .topbar, html[data-skin="ios"] .header-bar{
  background: var(--ios-material); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur);
  border-bottom: .5px solid var(--ios-sep); box-shadow: none;
}
html[data-skin="ios"] .topbar-title{ font: var(--ios-title-3); letter-spacing: -.02em; color: var(--ios-label); }
html[data-skin="ios"] .topbar-btn, html[data-skin="ios"] .notif-btn, html[data-skin="ios"] .dark-toggle{
  border: 0; background: var(--ios-fill-3); color: var(--ios-tint); border-radius: 50%; width: 34px; height: 34px;
}
html[data-skin="ios"] .topbar-btn:hover, html[data-skin="ios"] .notif-btn:hover, html[data-skin="ios"] .dark-toggle:hover{ background: var(--ios-fill-2); color: var(--ios-tint); border: 0; }
html[data-skin="ios"] .topbar-search input, html[data-skin="ios"] .search-input{
  height: 34px; border: 0; border-radius: 10px; background: var(--ios-fill-3); font: 400 15px/20px var(--ios-font); color: var(--ios-label); box-shadow: none;
}
html[data-skin="ios"] .topbar-search input:focus, html[data-skin="ios"] .search-input:focus{ background: var(--ios-fill-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-tint) 30%, transparent); border: 0; }
html[data-skin="ios"] .topbar-search input::placeholder, html[data-skin="ios"] .search-input::placeholder{ color: var(--ios-label-2); }

/* 5 · Cartes, compteurs */
html[data-skin="ios"] .card, html[data-skin="ios"] .kpi-card, html[data-skin="ios"] .stat-card, html[data-skin="ios"] .table-container,
html[data-skin="ios"] .detail-section, html[data-skin="ios"] .filter-bar, html[data-skin="ios"] .calendar-toolbar{
  border: 0; box-shadow: none; border-radius: var(--ios-r-group); background: var(--ios-bg-cell);
}
html[data-skin="ios"] .kpi-card:hover, html[data-skin="ios"] .stat-card:hover, html[data-skin="ios"] .card:hover{ box-shadow: none; transform: none; }
html[data-skin="ios"] .card-title, html[data-skin="ios"] .section-title{ font: var(--ios-headline); letter-spacing: -.01em; color: var(--ios-label); text-transform: none; }
html[data-skin="ios"] .stat-label, html[data-skin="ios"] .kpi-label{ font: var(--ios-footnote); text-transform: none; letter-spacing: 0; color: var(--ios-label-2); }
html[data-skin="ios"] .stat-value, html[data-skin="ios"] .kpi-value{ font: 700 28px/34px var(--ios-font-rounded); letter-spacing: -.01em; }

/* 6 · Boutons */
html[data-skin="ios"] .btn{
  font: 600 14px/18px var(--ios-font); min-height: 34px; border-radius: 9px; border: 0; box-shadow: none;
  background: var(--ios-fill-3); color: var(--ios-tint); transition: opacity .12s, background .12s;
}
html[data-skin="ios"] .btn:hover{ background: var(--ios-fill-2); transform: none; box-shadow: none; border: 0; color: var(--ios-tint); }
html[data-skin="ios"] .btn:active{ opacity: .7; }
html[data-skin="ios"] .btn:disabled{ background: var(--ios-fill-3); color: var(--ios-label-3); opacity: 1; }
html[data-skin="ios"] .btn-primary, html[data-skin="ios"] .btn-primary:hover{ background: var(--ios-tint); color: #fff; }
html[data-skin="ios"] .btn-success, html[data-skin="ios"] .btn-success:hover{ background: var(--ios-green); color: #fff; }
html[data-skin="ios"] .btn-danger, html[data-skin="ios"] .btn-danger:hover{ background: color-mix(in srgb, var(--ios-red) 14%, transparent); color: var(--ios-red); }
html[data-skin="ios"] .btn-warning, html[data-skin="ios"] .btn-warning:hover{ background: color-mix(in srgb, var(--ios-orange) 16%, transparent); color: var(--ios-orange); }
html[data-skin="ios"] .btn-primary:hover, html[data-skin="ios"] .btn-success:hover{ filter: brightness(1.06); }
html[data-skin="ios"] .btn-sm{ min-height: 28px; font-size: 13px; border-radius: var(--ios-r-pill); padding-inline: 12px; }
html[data-skin="ios"] .btn-lg{ min-height: 44px; font: var(--ios-headline); border-radius: var(--ios-r-btn); }
html[data-skin="ios"] .btn-icon{ border-radius: 50%; }
html[data-skin="ios"] .today-btn, html[data-skin="ios"] .week-nav-btn{ border: 0; background: var(--ios-fill-3); color: var(--ios-tint); border-radius: 9px; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* 7 · Onglets et filtres -> contrôle segmenté / capsules */
html[data-skin="ios"] .tabs{ display: inline-flex; gap: 0; padding: 2px; border: 0; border-radius: 9px; background: var(--ios-fill-3); }
html[data-skin="ios"] .tab{ border: 0; background: transparent; border-radius: 7px; font: 500 13px/18px var(--ios-font); color: var(--ios-label); padding: 5px 14px; margin: 0; }
html[data-skin="ios"] .tab.active{ background: var(--ios-bg-elevated); color: var(--ios-label); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
html[data-skin="ios"] body.dark-mode .tab.active{ background: #636366; }
html[data-skin="ios"] .filter-chip{ border: 0; background: var(--ios-fill-3); color: var(--ios-label); border-radius: var(--ios-r-pill); font: 500 13px/18px var(--ios-font); }
html[data-skin="ios"] .filter-chip.active{ background: var(--ios-tint); color: #fff; }

/* 8 · Formulaires */
html[data-skin="ios"] .form-label{ font: var(--ios-footnote); text-transform: none; letter-spacing: 0; color: var(--ios-label-2); margin-left: 2px; }
html[data-skin="ios"] .form-input, html[data-skin="ios"] .form-select, html[data-skin="ios"] .form-textarea,
html[data-skin="ios"] body.dark-mode .form-input, html[data-skin="ios"] body.dark-mode .form-select, html[data-skin="ios"] body.dark-mode .form-textarea{
  border: 0; border-radius: 9px; background: var(--ios-fill-3); color: var(--ios-label); box-shadow: none;
  font: 400 15px/20px var(--ios-font); min-height: 36px; caret-color: var(--ios-tint);
}
html[data-skin="ios"] .form-input:focus, html[data-skin="ios"] .form-select:focus, html[data-skin="ios"] .form-textarea:focus{
  border: 0; background: var(--ios-fill-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-tint) 30%, transparent);
}
html[data-skin="ios"] .form-input::placeholder, html[data-skin="ios"] .form-textarea::placeholder{ color: var(--ios-placeholder); }
/* liste déroulante maison (custom-select.js) : bouton pop-up + menu iOS, la recherche est conservée */
html[data-skin="ios"] .cs-trigger{ border: 0; border-radius: 9px; background: var(--ios-fill-3); color: var(--ios-label); font: 400 15px/20px var(--ios-font); min-height: 36px; box-shadow: none; }
html[data-skin="ios"] .cs-trigger:hover{ border: 0; background: var(--ios-fill-2); }
html[data-skin="ios"] .cs-trigger:focus, html[data-skin="ios"] .cs-wrap.cs-open .cs-trigger{ border: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-tint) 30%, transparent); }
html[data-skin="ios"] .cs-drop{
  border: 0; border-radius: var(--ios-r-menu); background: var(--ios-material-menu);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 10px 50px rgba(0,0,0,.22), 0 0 0 .5px rgba(0,0,0,.08);
}
html[data-skin="ios"] .cs-search{ border: 0; border-bottom: .5px solid var(--ios-sep); background: transparent; font: 400 15px/20px var(--ios-font); color: var(--ios-label); }
html[data-skin="ios"] .cs-opt{ font: 400 15px/20px var(--ios-font); color: var(--ios-label); min-height: 34px; border-bottom: .5px solid var(--ios-sep); }
html[data-skin="ios"] .cs-opt:hover, html[data-skin="ios"] .cs-opt.cs-hl{ background: var(--ios-fill-2); color: var(--ios-label); }
html[data-skin="ios"] .cs-opt.cs-sel{ background: transparent; color: var(--ios-tint); font-weight: 600; }

/* 9 · Tableaux : denses, mais aux couleurs et filets iOS */
html[data-skin="ios"] table{ font: 400 13px/18px var(--ios-font); }
html[data-skin="ios"] thead tr, html[data-skin="ios"] body.dark-mode thead tr{ background: transparent; }
html[data-skin="ios"] th{ font: 600 12px/16px var(--ios-font); text-transform: none; letter-spacing: 0; color: var(--ios-label-2) !important; border-bottom: .5px solid var(--ios-sep); }
html[data-skin="ios"] td{ border-bottom: .5px solid var(--ios-sep); color: var(--ios-label); }
html[data-skin="ios"] tr:hover td, html[data-skin="ios"] body.dark-mode tr:hover td{ background: var(--ios-fill-3); }

/* 10 · Pastilles */
html[data-skin="ios"] .badge{ font: 600 12px/20px var(--ios-font); height: 20px; padding: 0 8px; border-radius: 10px; border: 0; text-transform: none; letter-spacing: 0; }
html[data-skin="ios"] .badge-confirmed, html[data-skin="ios"] .badge-success, html[data-skin="ios"] .badge-realise{ color: var(--ios-green); background: color-mix(in srgb, var(--ios-green) 15%, transparent); }
html[data-skin="ios"] .badge-completed{ color: var(--ios-label-2); background: var(--ios-fill-3); }
html[data-skin="ios"] .badge-reserved, html[data-skin="ios"] .badge-warning{ color: var(--ios-orange); background: color-mix(in srgb, var(--ios-orange) 15%, transparent); }
html[data-skin="ios"] .badge-pending, html[data-skin="ios"] .badge-info{ color: var(--ios-blue); background: color-mix(in srgb, var(--ios-blue) 15%, transparent); }
html[data-skin="ios"] .badge-cancelled, html[data-skin="ios"] .badge-danger, html[data-skin="ios"] .badge-urgent{ color: var(--ios-red); background: color-mix(in srgb, var(--ios-red) 15%, transparent); }

/* 11 · Listes d'interventions et lignes de détail : séparateurs fins */
html[data-skin="ios"] .inter-item{ border: 0; border-bottom: .5px solid var(--ios-sep); border-radius: 0; box-shadow: none; background: transparent; }
html[data-skin="ios"] .inter-item:last-child{ border-bottom: 0; }
html[data-skin="ios"] .inter-item:hover{ background: var(--ios-fill-3); transform: none; box-shadow: none; }
html[data-skin="ios"] .inter-item-title{ font: var(--ios-subhead); font-weight: 600; color: var(--ios-label); }
html[data-skin="ios"] .inter-item-meta{ font: var(--ios-footnote); color: var(--ios-label-2); }
html[data-skin="ios"] .detail-row{ border-bottom: .5px solid var(--ios-sep); }
html[data-skin="ios"] .detail-row-label{ color: var(--ios-label-2); }
html[data-skin="ios"] .detail-section-title{ font: var(--ios-footnote); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ios-label-2); }

/* 12 · Fenêtres -> feuilles centrées iPadOS */
html[data-skin="ios"] .modal-overlay{ background: var(--ios-backdrop); -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-skin="ios"] .modal-box{ border: 0; border-radius: var(--ios-r-sheet); background: var(--ios-bg-sheet); box-shadow: 0 20px 70px rgba(0,0,0,.3); }
html[data-skin="ios"] .modal-header{ border-bottom: .5px solid var(--ios-sep); background: transparent; }
html[data-skin="ios"] .modal-title{ font: var(--ios-headline); color: var(--ios-label); }
html[data-skin="ios"] .modal-footer{ border-top: .5px solid var(--ios-sep); background: transparent; }
html[data-skin="ios"] .modal-close{ border: 0; background: var(--ios-fill-3); color: var(--ios-label-2); border-radius: 50%; width: 30px; height: 30px; }
html[data-skin="ios"] .modal-box .card, html[data-skin="ios"] .modal-box .detail-section{ background: var(--ios-bg-sheet-cell); }

/* 13 · Messages */
html[data-skin="ios"] .toast{ border: 0; border-radius: var(--ios-r-pill); background: var(--ios-material-menu); color: var(--ios-label);
  -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: 0 8px 30px rgba(0,0,0,.18); font: 600 14px/18px var(--ios-font); }
html[data-skin="ios"] .alert{ border: 0; border-radius: var(--ios-r-group); font: var(--ios-subhead); }
html[data-skin="ios"] .alert-info{ background: color-mix(in srgb, var(--ios-blue) 12%, transparent); color: var(--ios-label); }
html[data-skin="ios"] .alert-success{ background: color-mix(in srgb, var(--ios-green) 14%, transparent); color: var(--ios-label); }
html[data-skin="ios"] .alert-warning{ background: color-mix(in srgb, var(--ios-orange) 14%, transparent); color: var(--ios-label); }
html[data-skin="ios"] .alert-danger{ background: color-mix(in srgb, var(--ios-red) 14%, transparent); color: var(--ios-label); }
html[data-skin="ios"] .empty-title{ font: var(--ios-title-3); color: var(--ios-label); }
html[data-skin="ios"] .empty-text{ font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .spinner{ border-color: var(--ios-fill); border-top-color: var(--ios-gray); }

@media (prefers-reduced-motion: reduce){ html[data-skin="ios"] *{ transition-duration: .01ms !important; } }

/* 14 · Tableau de bord : barre de période -> contrôle segmenté (le HTML porte des styles inline) */
html[data-skin="ios"] #dash-period-bar{ border: 0 !important; background: transparent !important; padding: 0 0 4px !important; }
html[data-skin="ios"] #dash-period-bar > span:first-child{ font: var(--ios-footnote) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ios-label-2) !important; }
html[data-skin="ios"] #dash-period-bar > div:nth-of-type(1){ background: var(--ios-fill-3) !important; border-radius: 9px !important; padding: 2px !important; gap: 0 !important; }
html[data-skin="ios"] #dash-period-bar [data-dash-period]{ min-height: 28px; padding: 5px 16px; border-radius: 7px; background: transparent; color: var(--ios-label); font: 500 13px/18px var(--ios-font); }
html[data-skin="ios"] #dash-period-bar [data-dash-period]:hover{ background: transparent; }
html[data-skin="ios"] #dash-period-bar [data-dash-period].dash-period-active{ background: var(--ios-bg-elevated); color: var(--ios-label); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
html[data-skin="ios"] body.dark-mode #dash-period-bar [data-dash-period].dash-period-active{ background: #636366; }
html[data-skin="ios"] #dash-period-bar [onclick^="dashNav"]{ text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; background: var(--ios-fill-3); color: var(--ios-tint); }
html[data-skin="ios"] #dash-period-label{ color: var(--ios-label-2) !important; font: var(--ios-subhead) !important; font-weight: 600 !important; }

/* 15 · iOS-7 : liste des interventions en mode sombre — fonds clairs codés en dur (interventions.js, app.js) */
html[data-skin="ios"]{ --gray-light: var(--ios-fill-3); --amber-dark: var(--ios-orange); }
html[data-skin="ios"] body.dark-mode #view-interventions tr[style*="background:#f6fdf8"], html[data-skin="ios"] body.dark-mode tr[style*="background:#f6fdf8"]{ background: color-mix(in srgb, var(--ios-green) 9%, transparent) !important; }
html[data-skin="ios"] body.dark-mode tr[style*="background:#faf5ff"]{ background: color-mix(in srgb, var(--ios-purple) 10%, transparent) !important; }
html[data-skin="ios"] body.dark-mode td [style*="background:#eaf3fb"]{ background: color-mix(in srgb, var(--ios-tint) 16%, transparent) !important; border-color: transparent !important; color: var(--ios-tint) !important; }
html[data-skin="ios"] body.dark-mode td, html[data-skin="ios"] body.dark-mode td [style*="color:#0"], html[data-skin="ios"] body.dark-mode td [style*="color:#1"]{ color: var(--ios-label) !important; }
html[data-skin="ios"] body.dark-mode td [style*="color:var(--text-muted)"], html[data-skin="ios"] body.dark-mode td small{ color: var(--ios-label-2) !important; }

/* 16 · iOS-12 : vue « Équipe » de la semaine (js/planning-equipe.js) — techniciens × jours + panneau de détail */
html[data-skin="ios"] .gp-eq-seg{ display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 2px; border-radius: 9px; background: var(--ios-fill-3); margin-right: 10px; }
html[data-skin="ios"] .gp-eq-seg button{ height: 28px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--ios-label); font: 500 13px/18px var(--ios-font); cursor: pointer; }
html[data-skin="ios"] .gp-eq-seg button[aria-pressed="true"]{ background: var(--ios-bg-elevated); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
html[data-skin="ios"] body.dark-mode .gp-eq-seg button[aria-pressed="true"]{ background: #636366; }
html[data-skin="ios"] .gp-eq{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
html[data-skin="ios"] .gp-eq-grid{ display: grid; background: var(--ios-bg-cell); border-radius: var(--ios-r-group); overflow: hidden; min-width: 0; }
html[data-skin="ios"] .gp-eq-jour{ padding: 8px 10px; display: flex; align-items: baseline; gap: 6px; border-left: .5px solid var(--ios-sep); }
html[data-skin="ios"] .gp-eq-jour span{ font: var(--ios-footnote); color: var(--ios-label-2); } html[data-skin="ios"] .gp-eq-jour b{ font: 600 17px/22px var(--ios-font); color: var(--ios-label); }
html[data-skin="ios"] .gp-eq-jour.is-today b{ color: var(--ios-tint); font-weight: 700; }
html[data-skin="ios"] .gp-eq-tech{ border-top: .5px solid var(--ios-sep); padding: 10px 12px; display: flex; align-items: center; gap: 10px; font: 500 15px/20px var(--ios-font); color: var(--ios-label); min-width: 0; }
html[data-skin="ios"] .gp-eq-tech > span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-skin="ios"] .gp-eq-av{ width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font: 600 12px/1 var(--ios-font); }
html[data-skin="ios"] .gp-eq-av--vide{ border: 1.5px dashed var(--ios-gray); box-sizing: border-box; }
html[data-skin="ios"] .gp-eq-case{ border-top: .5px solid var(--ios-sep); border-left: .5px solid var(--ios-sep); min-height: 86px; padding: 3px; display: flex; flex-direction: column; gap: 3px; cursor: cell; min-width: 0; }
html[data-skin="ios"] .gp-eq-case.is-we{ background: var(--ios-fill-3); } html[data-skin="ios"] .gp-eq-case.is-today{ background: color-mix(in srgb, var(--ios-tint) 5%, transparent); }
html[data-skin="ios"] .gp-eq-case:hover{ background: color-mix(in srgb, var(--ios-tint) 8%, transparent); }
html[data-skin="ios"] .gp-eq--green{ --_c: var(--ios-green); } html[data-skin="ios"] .gp-eq--blue{ --_c: var(--ios-blue); } html[data-skin="ios"] .gp-eq--orange{ --_c: var(--ios-orange); }
html[data-skin="ios"] .gp-eq--red{ --_c: var(--ios-red); } html[data-skin="ios"] .gp-eq--purple{ --_c: var(--ios-purple); } html[data-skin="ios"] .gp-eq--gray{ --_c: var(--ios-gray); }
html[data-skin="ios"] .gp-eq-ev{ appearance: none; text-align: left; border: 0; border-left: 3px solid var(--_c); border-radius: 8px; padding: 5px 8px; cursor: pointer; min-width: 0;
  background: color-mix(in srgb, var(--_c) 14%, var(--ios-bg-cell)); display: flex; flex-direction: column; gap: 1px; font-family: var(--ios-font); }
html[data-skin="ios"] .gp-eq-ev:hover{ background: color-mix(in srgb, var(--_c) 22%, var(--ios-bg-cell)); }
html[data-skin="ios"] .gp-eq-ev.is-sel{ box-shadow: 0 0 0 2px var(--ios-tint); }
html[data-skin="ios"] .gp-eq-ev__h{ font: 600 12px/16px var(--ios-font); color: color-mix(in srgb, var(--_c) 78%, var(--ios-label)); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-eq-ev__t{ font: 600 13px/17px var(--ios-font); color: var(--ios-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ios"] .gp-eq-ev__c{ font: 400 12px/16px var(--ios-font); color: var(--ios-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ios"] .gp-eq-insp{ position: sticky; top: 68px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
html[data-skin="ios"] .gp-eq-insp__top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-skin="ios"] .gp-eq-ot{ font: 500 13px/18px var(--ios-font-mono); color: var(--ios-tint); background: color-mix(in srgb, var(--ios-tint) 12%, transparent); border-radius: 6px; padding: 2px 8px; }
html[data-skin="ios"] .gp-eq-st{ display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 11px; font: 600 12px/22px var(--ios-font); color: var(--_c); background: color-mix(in srgb, var(--_c) 15%, transparent); }
html[data-skin="ios"] .gp-eq-st::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html[data-skin="ios"] .gp-eq-insp h2{ margin: 0; font: var(--ios-title-2); color: var(--ios-label); }
html[data-skin="ios"] .gp-eq-list{ background: var(--ios-bg-cell); border-radius: var(--ios-r-group); overflow: hidden; }
html[data-skin="ios"] .gp-eq-row{ min-height: 40px; padding: 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: var(--ios-subhead); color: var(--ios-label); }
html[data-skin="ios"] .gp-eq-row + .gp-eq-row{ border-top: .5px solid var(--ios-sep); }
html[data-skin="ios"] .gp-eq-row b{ font-weight: 400; color: var(--ios-label-2); text-align: right; } html[data-skin="ios"] .gp-eq-row b.is-tint{ color: var(--ios-tint); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-eq-acts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
html[data-skin="ios"] .gp-eq-btn{ height: 40px; border: 0; border-radius: 10px; background: var(--ios-fill-3); color: var(--ios-tint); font: 600 15px/40px var(--ios-font); text-align: center; text-decoration: none; cursor: pointer; }
html[data-skin="ios"] .gp-eq-btn--plein{ background: var(--ios-tint); color: #fff; }
html[data-skin="ios"] .gp-eq-aide{ margin: 0; font: var(--ios-footnote); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-eq-vide{ background: var(--ios-bg-cell); border-radius: var(--ios-r-group); padding: 22px 18px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
html[data-skin="ios"] .gp-eq-vide b{ font: var(--ios-headline); color: var(--ios-label); } html[data-skin="ios"] .gp-eq-vide span{ font: var(--ios-footnote); color: var(--ios-label-2); }
@media (max-width: 1100px){ html[data-skin="ios"] .gp-eq{ grid-template-columns: minmax(0, 1fr); } html[data-skin="ios"] .gp-eq-insp{ position: static; } }
html[data-skin="ios"] #planning-calendar:has(> .gp-eq){ border: 0 !important; background: transparent !important; box-shadow: none !important; overflow: visible !important; padding: 0 !important; }

/* 17 · iOS-20 : la barre de défilement d'un tableau large reste à l'écran.
        ⚠ 20/09 (capture d'Omar) : les règles ci-dessous ne visent QUE `.view.active` — sans cela, `display: flex`
        écrasait le `display: none` des vues masquées et deux écrans se superposaient (barre d'onglets « Liaison c-it.fr »
        par-dessus le titre « Bons à facturer »). Le tableau est imbriqué dans plusieurs
        conteneurs (#inter-list-container › .inter-tabs-content › .view › .page-content) : chacun devient une colonne
        souple pour que la zone du tableau s'arrête exactement au bas de l'écran. En-tête collant, page jamais décalée. */
html[data-skin="ios"] .page-content:has(.table-wrap), html[data-skin="ios"] .page-content:has(.table-container){ display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
html[data-skin="ios"] .page-content:has(.table-wrap) > *{ flex: none; }
/* toute la chaîne de conteneurs qui MÈNE au tableau devient une colonne souple (nombre de niveaux variable selon l'écran) */
html[data-skin="ios"] .view.active:has(.table-wrap), html[data-skin="ios"] .view.active:has(.table-container),
html[data-skin="ios"] .view.active:has(.table-wrap) div:has(.table-wrap), html[data-skin="ios"] .view.active:has(.table-container) div:has(.table-container){
  flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; }
html[data-skin="ios"] .view.active:has(.table-wrap) > *, html[data-skin="ios"] .view.active:has(.table-wrap) div:has(.table-wrap) > *{ flex: none; }
html[data-skin="ios"] .view.active:has(.table-wrap) > *:has(.table-wrap), html[data-skin="ios"] .view.active:has(.table-wrap) div:has(.table-wrap) > *:has(.table-wrap),
html[data-skin="ios"] .view.active:has(.table-wrap) div:has(> .table-wrap) > .table-wrap{ flex: 1 1 auto !important; min-height: 0; }
html[data-skin="ios"] .table-wrap, html[data-skin="ios"] .table-container{ flex: 1 1 auto; min-height: 200px; max-height: none !important; overflow: auto; overscroll-behavior: contain; }
html[data-skin="ios"] .table-wrap thead th, html[data-skin="ios"] .table-container thead th{ position: sticky; top: 0; z-index: 3; background: var(--ios-bg-cell) !important; box-shadow: 0 .5px 0 var(--ios-sep); }
html[data-skin="ios"] .table-wrap::-webkit-scrollbar, html[data-skin="ios"] .table-container::-webkit-scrollbar{ width: 12px; height: 12px; }
html[data-skin="ios"] .table-wrap::-webkit-scrollbar-thumb, html[data-skin="ios"] .table-container::-webkit-scrollbar-thumb{ background: var(--ios-fill); border-radius: 6px; border: 3px solid var(--ios-bg-cell); }
html[data-skin="ios"] .table-wrap::-webkit-scrollbar-track, html[data-skin="ios"] .table-container::-webkit-scrollbar-track{ background: transparent; }
