/* ==========================================================================
   GestPlan mobile · Habillage iOS  (couche de transition)
   Redéfinit l'aspect des composants EXISTANTS (.gp-*, .mobile-stat-*, .if-*)
   avec les tokens du kit iOS, sans toucher au HTML ni à la logique.
   Actif seulement si <html data-skin="ios"> (interrupteur : ?skin=classic).
   À charger APRÈS gestplan-ios.css et après le <style> de mobile.html.
   ========================================================================== */

/* 1 · Variables historiques -> valeurs iOS (tout ce qui utilise var(--…) suit) */
html[data-skin="ios"]{
  --navy: var(--ios-label);        --navy-mid: var(--ios-label);
  --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);
  --accent: var(--ios-tint);
  --green: var(--ios-green); --amber: var(--ios-orange); --red: var(--ios-red); --purple: var(--ios-purple); --teal: var(--ios-teal);
  --bg: var(--ios-bg-grouped);     --surface: var(--ios-bg-cell); --surface-2: var(--ios-fill-3);
  --border: var(--ios-sep);        --border-2: var(--ios-sep);
  --text: var(--ios-label);        --text-muted: var(--ios-label-2); --text-hint: var(--ios-label-2);
  --shadow-xs: none; --shadow-sm: none; --shadow: none;
  --shadow-lg: 0 10px 40px rgba(0,0,0,.16); --shadow-xl: 0 10px 50px rgba(0,0,0,.22);
  --radius-sm: 8px; --radius: 12px; --radius-lg: 14px; --radius-xl: 14px;
  --topbar-h: 44px; --nav-h: 56px;
}
/* le mode sombre de l'app (.gp-dark) pilote aussi les tokens iOS */
html[data-skin="ios"].gp-dark, html[data-skin="ios"] .gp-dark{
  --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:#1c1c1e; --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-grouped); --surface: var(--ios-bg-cell); --surface-2: var(--ios-fill-3);
  --border: var(--ios-sep); --border-2: var(--ios-sep);
  --text: var(--ios-label); --text-muted: var(--ios-label-2); --text-hint: var(--ios-label-2);
}
/* …et si l'app est en clair alors que le téléphone est en sombre, on reste en clair */
html[data-skin="ios"]:not(.gp-dark){ color-scheme: light; }
@media (prefers-color-scheme: dark){
  html[data-skin="ios"]:not(.gp-dark){
    --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: -.01em;
}
html[data-skin="ios"] body{ background: var(--ios-bg-grouped); color: var(--ios-label); -webkit-font-smoothing: antialiased; }

/* 3 · Barre du haut -> barre de navigation iOS (matière translucide, filet 0,5 px) */
html[data-skin="ios"] .gp-topbar,
html[data-skin="ios"] .gp-topbar--brand{
  background: var(--ios-material) !important; color: var(--ios-label);
  -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"] .gp-topbar__title{ font: var(--ios-headline); text-align: center; color: var(--ios-label) !important; letter-spacing: -.02em; }
html[data-skin="ios"] .gp-topbar__action{ color: var(--ios-tint) !important; background: transparent; border-radius: 50%; }
html[data-skin="ios"] .gp-topbar__action:active{ background: transparent; opacity: .35; }
html[data-skin="ios"] .gp-topbar__action--back{ font: var(--ios-body) !important; font-weight: 400 !important; }
html[data-skin="ios"] .gp-topbar__badge{ background: var(--ios-red); font: 400 12px/18px var(--ios-font); min-width: 18px; height: 18px; border-radius: 9px; border: 0; }

/* 4 · Barre du bas -> barre d'onglets iOS */
html[data-skin="ios"] .gp-bottom-nav{
  background: var(--ios-material) !important; -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur);
  border-top: .5px solid var(--ios-sep); box-shadow: none; border-radius: 0;
}
html[data-skin="ios"] .gp-bottom-nav__item{ font: 500 10px/12px var(--ios-font); color: var(--ios-gray); gap: 3px; letter-spacing: 0; }
html[data-skin="ios"] .gp-bottom-nav__item svg{ width: 25px; height: 25px; stroke-width: 1.8; }
html[data-skin="ios"] .gp-bottom-nav__item.is-active{ color: var(--ios-tint); }
html[data-skin="ios"] .gp-bottom-nav__item.is-active::before{ display: none; }
html[data-skin="ios"] .gp-bottom-nav__item.is-active svg{ transform: none; }
html[data-skin="ios"] .gp-bottom-nav__item:active{ transform: none; opacity: .5; }
html[data-skin="ios"] .gp-nav-new{ color: var(--ios-tint); font-weight: 500; }
html[data-skin="ios"] .gp-nav-new__circle{ background: var(--ios-tint); box-shadow: none; }
html[data-skin="ios"] #rdv-valid-badge{ background: var(--ios-red) !important; font: 400 12px/18px var(--ios-font) !important; }

/* 5 · Boutons */
html[data-skin="ios"] .gp-btn{
  font: var(--ios-headline); min-height: 44px; border-radius: var(--ios-r-btn); border: 0; box-shadow: none;
  transition: opacity .12s, transform .12s;
}
html[data-skin="ios"] .gp-btn:active{ opacity: .72; transform: scale(.985); }
html[data-skin="ios"] .gp-btn:disabled{ background: var(--ios-fill-3); color: var(--ios-label-3); opacity: 1; }
html[data-skin="ios"] .gp-btn--primary, html[data-skin="ios"] .gp-btn--accent{ background: var(--ios-tint); color: #fff; }
html[data-skin="ios"] .gp-btn--secondary{ background: var(--ios-fill-3); color: var(--ios-tint); }
html[data-skin="ios"] .gp-btn--ghost{ background: transparent; color: var(--ios-tint); font-weight: 400; }
html[data-skin="ios"] .gp-btn--success{ background: var(--ios-green); color: #fff; }
html[data-skin="ios"] .gp-btn--danger{ background: color-mix(in srgb, var(--ios-red) 15%, transparent); color: var(--ios-red); }
html[data-skin="ios"] .gp-btn--lg{ min-height: 50px; border-radius: 14px; font-size: 17px; }
html[data-skin="ios"] .gp-btn--sm{ min-height: 32px; padding: 0 14px; font: 600 15px/20px var(--ios-font); border-radius: var(--ios-r-pill); }
html[data-skin="ios"] .if-cta-bar{ background: var(--ios-material); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); border-top: .5px solid var(--ios-sep); }
html[data-skin="ios"] .if-cta-bar .gp-btn{ min-height: 50px; font: var(--ios-headline); }
html[data-skin="ios"] .gp-today-cta{
  background: color-mix(in srgb, var(--ios-tint) 15%, transparent); color: var(--ios-tint); box-shadow: none;
  min-height: 50px; border-radius: var(--ios-r-btn); font: var(--ios-headline); margin-bottom: 16px;
}
html[data-skin="ios"] .gp-today-cta:active{ opacity: .6; }

/* 6 · Contrôle segmenté */
html[data-skin="ios"] .gp-seg{ background: var(--ios-fill-3); border: 0; border-radius: 9px; padding: 2px; gap: 0; }
html[data-skin="ios"] .gp-seg__item{ font: 500 13px/18px var(--ios-font); color: var(--ios-label); border-radius: 7px; min-height: 28px; padding: 5px 8px; background: transparent; }
html[data-skin="ios"] .gp-seg__item.is-active{ font-weight: 600; background: var(--ios-bg-elevated); box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
html[data-skin="ios"].gp-dark .gp-seg__item.is-active, html[data-skin="ios"] .gp-dark .gp-seg__item.is-active{ background: #636366; }

/* 7 · Champs */
html[data-skin="ios"] .gp-search__input{
  height: 36px; border: 0; border-radius: 10px; background: var(--ios-fill-3); box-shadow: none;
  font: var(--ios-body); color: var(--ios-label); padding: 0 12px;
}
html[data-skin="ios"] .gp-search__input::placeholder{ color: var(--ios-label-2); }
html[data-skin="ios"] .gp-list .gp-input, html[data-skin="ios"] .gp-sheet .gp-input,
html[data-skin="ios"] .inter-form-field input, html[data-skin="ios"] .inter-form-field select, html[data-skin="ios"] .inter-form-field textarea{
  min-height: 44px; border: 0; border-radius: var(--ios-r-cell); background: var(--ios-fill-3); box-shadow: none;
  font: var(--ios-body); color: var(--ios-label); caret-color: var(--ios-tint);
}
html[data-skin="ios"] .inter-form-field input:focus, html[data-skin="ios"] .inter-form-field select:focus, html[data-skin="ios"] .inter-form-field textarea:focus,
html[data-skin="ios"] .gp-list .gp-input:focus, html[data-skin="ios"] .gp-sheet .gp-input:focus{
  border: 0; background: var(--ios-fill-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ios-tint) 35%, transparent);
}
html[data-skin="ios"] .inter-form-field label{ font: var(--ios-footnote); text-transform: none; letter-spacing: 0; color: var(--ios-label-2); margin: 0 0 6px 4px; }
html[data-skin="ios"] .if-section{ border: 0; box-shadow: none; border-radius: var(--ios-r-group); background: var(--ios-bg-cell); }
html[data-skin="ios"] .if-section-title{ font: var(--ios-footnote); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ios-label-2); }

/* 8 · Listes groupées */
html[data-skin="ios"] .gp-list{ border: 0; box-shadow: none; border-radius: var(--ios-r-group); background: var(--ios-bg-cell); }
html[data-skin="ios"] .gp-list__title, html[data-skin="ios"] .section-title{
  font: var(--ios-footnote); text-transform: none; letter-spacing: 0; color: var(--ios-label-2); margin: 22px 16px 7px;
}
html[data-skin="ios"] .gp-list__item{ position: relative; min-height: 44px; border-bottom: 0; }
html[data-skin="ios"] .gp-list__item + .gp-list__item::before{ content: ""; position: absolute; top: 0; right: 0; left: 60px; height: .5px; background: var(--ios-sep); }
html[data-skin="ios"] .gp-list__item:active{ background: var(--ios-fill-3); }
html[data-skin="ios"] .gp-list__icon{ width: 29px; height: 29px; border-radius: 7px; font-size: 16px; background: var(--ios-fill-3); }
html[data-skin="ios"] .gp-list__title-line{ font: var(--ios-body); }
html[data-skin="ios"] .gp-list__sub{ font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-list__trailing{ color: var(--ios-label-3); }

/* 9 · Tuiles de compteurs */
html[data-skin="ios"] .mobile-stat-card{ border: 0; box-shadow: none; border-radius: var(--ios-r-group); background: var(--ios-bg-cell); padding: 12px 8px; }
html[data-skin="ios"] .mobile-stat-card .num{ font: 700 28px/32px var(--ios-font-rounded); color: var(--ios-label); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .mobile-stat-card .lbl{ font: var(--ios-caption); text-transform: none; letter-spacing: 0; color: var(--ios-label-2); margin-top: 2px; }
html[data-skin="ios"] .mobile-stat-card.retard .num{ color: var(--ios-red); }
html[data-skin="ios"] .mobile-stat-card.conflict .num, html[data-skin="ios"] .mobile-stat-card.dispo .num{ color: var(--ios-purple); }
html[data-skin="ios"] .mobile-stat-card.done .num{ color: var(--ios-green); }
html[data-skin="ios"] .mobile-stat-card.progress .num{ color: var(--ios-orange); }
html[data-skin="ios"] .online-badge{ font: 600 12px/22px var(--ios-font); height: 22px; padding: 0 9px; border-radius: 11px; border: 0; }
html[data-skin="ios"] .online-badge.online{ color: var(--ios-green); background: color-mix(in srgb, var(--ios-green) 15%, transparent); }
html[data-skin="ios"] .online-badge.offline{ color: var(--ios-orange); background: color-mix(in srgb, var(--ios-orange) 15%, transparent); }

/* 10 · Carte « Prochaine intervention » */
html[data-skin="ios"] .gp-next{ background: var(--ios-tint); border-radius: var(--ios-r-group); box-shadow: none; padding: 14px 16px 16px; }
html[data-skin="ios"] .gp-next:active{ opacity: .85; }
html[data-skin="ios"] .gp-next__eyebrow{ font: var(--ios-footnote); font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; }
html[data-skin="ios"] .gp-next__eyebrow::before, html[data-skin="ios"] .gp-next__adr::before, html[data-skin="ios"] .gp-next__cell--go b::before{ content: none; }
html[data-skin="ios"] .gp-next__title{ font: var(--ios-title-3); margin-bottom: 2px; }
html[data-skin="ios"] .gp-next__adr{ font: var(--ios-subhead); opacity: .85; }
html[data-skin="ios"] .gp-next__cell{ background: rgba(255,255,255,.2); border-radius: 10px; padding: 8px 8px 9px; }
html[data-skin="ios"] .gp-next__cell span{ font: var(--ios-caption); opacity: .8; }
html[data-skin="ios"] .gp-next__cell b{ font: var(--ios-headline); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-next__cell--go{ background: #fff; color: var(--ios-tint); }
html[data-skin="ios"] .gp-next__cell--go span{ opacity: .7; }

/* 11 · Cartes d'intervention : même structure (validée), matière iOS */
html[data-skin="ios"] .gp-inter-card{
  border: 0; border-left: 4px solid var(--ios-gray); box-shadow: none !important; border-radius: var(--ios-r-group);
  background: var(--ios-bg-cell); background-image: none;
}
html[data-skin="ios"] .gp-inter-card:active{ transform: none; background: var(--ios-fill-3); }
html[data-skin="ios"] .gp-inter-card.status-confirmed{ border-left: 4px solid var(--ios-green); background: var(--ios-bg-cell); }
html[data-skin="ios"] .gp-inter-card.status-reserved{ border-left-color: var(--ios-orange); }
html[data-skin="ios"] .gp-inter-card.status-done, html[data-skin="ios"] .gp-inter-card.status-realise{ border-left-color: var(--ios-green); }
html[data-skin="ios"] .gp-inter-card.status-pending{ border-left-color: var(--ios-gray); }
html[data-skin="ios"] .gp-inter-card.status-cancelled{ border-left-color: var(--ios-red); }
html[data-skin="ios"] .gp-inter-card.is-duplicate{ border-left: 4px solid var(--ios-purple) !important; background: var(--ios-bg-cell) !important; box-shadow: none !important; }
html[data-skin="ios"] .gp-ic__time{ background: transparent; }
html[data-skin="ios"] .gp-ic__h{ font: 700 20px/24px var(--ios-font-rounded); color: var(--ios-label); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-ic__hf, html[data-skin="ios"] .gp-ic__d{ font: var(--ios-caption); color: var(--ios-label-2); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-ic__ot{ font: 500 12px/18px var(--ios-font-mono); color: var(--ios-tint); background: color-mix(in srgb, var(--ios-tint) 12%, transparent); border: 0; border-radius: 6px; padding: 1px 7px; }
html[data-skin="ios"] .gp-ic__type{ font: var(--ios-subhead); font-weight: 600; color: var(--ios-label); }
html[data-skin="ios"] .gp-ic__client{ font: var(--ios-headline); color: var(--ios-label); }
html[data-skin="ios"] .gp-ic__client--vide{ color: var(--ios-label-3); font-weight: 400; }
html[data-skin="ios"] .gp-ic__adr{ font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-ic__tech{ font: 600 12px/22px var(--ios-font); border-radius: 11px; }
html[data-skin="ios"] .gp-ic__tech--none{ background: var(--ios-fill-3); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-ic__do{ font: var(--ios-caption); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-ic__ok{ font: 600 12px/16px var(--ios-font); color: var(--ios-green); }
html[data-skin="ios"] .gp-ic__vides{ font: 600 12px/16px var(--ios-font); color: var(--ios-orange); background: transparent; }
html[data-skin="ios"] .gp-ic__dup{ background: color-mix(in srgb, var(--ios-purple) 12%, transparent); color: var(--ios-purple); font: var(--ios-footnote); }

/* 12 · Pastilles de statut */
html[data-skin="ios"] .gp-chip{ font: 600 12px/20px var(--ios-font); height: 20px; padding: 0 8px; border-radius: 10px; text-transform: none; letter-spacing: 0; border: 0; }
html[data-skin="ios"] .gp-chip--blue  { color: var(--ios-blue);   background: color-mix(in srgb, var(--ios-blue) 15%, transparent); }
html[data-skin="ios"] .gp-chip--green { color: var(--ios-green);  background: color-mix(in srgb, var(--ios-green) 15%, transparent); }
html[data-skin="ios"] .gp-chip--amber { color: var(--ios-orange); background: color-mix(in srgb, var(--ios-orange) 15%, transparent); }
html[data-skin="ios"] .gp-chip--red   { color: var(--ios-red);    background: color-mix(in srgb, var(--ios-red) 15%, transparent); }
html[data-skin="ios"] .gp-chip--purple{ color: var(--ios-purple); background: color-mix(in srgb, var(--ios-purple) 15%, transparent); }
html[data-skin="ios"] .gp-chip--solid { color: #fff; background: var(--ios-tint); }

/* 13 · Feuilles plein écran + états vides */
html[data-skin="ios"] .gp-sheet{ background: var(--ios-bg-grouped); }
html[data-skin="ios"] .gp-empty__title{ font: var(--ios-title-3); color: var(--ios-label); }
html[data-skin="ios"] .gp-empty{ 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 · Ajustements après essais (19/09) */
/* colonne horaire des cartes : plus de fond coloré (illisible en sombre), le statut passe en pastille pleine largeur */
html[data-skin="ios"] .gp-ic .gp-ic__time,
html[data-skin="ios"] .gp-ic.status-confirmed .gp-ic__time, html[data-skin="ios"] .gp-ic.status-realise .gp-ic__time,
html[data-skin="ios"] .gp-ic.status-done .gp-ic__time, html[data-skin="ios"] .gp-ic.status-reserved .gp-ic__time,
html[data-skin="ios"] .gp-ic.status-cancelled .gp-ic__time, html[data-skin="ios"] .gp-ic.is-duplicate .gp-ic__time{
  background: transparent; width: 76px; padding: 12px 0 12px 6px; position: relative;
}
html[data-skin="ios"] .gp-ic__time::after{ content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; width: .5px; background: var(--ios-sep); }
html[data-skin="ios"] .gp-ic__time .gp-ic__st{ font: 600 11px/18px var(--ios-font); height: 18px; padding: 0 7px; max-width: 70px; margin: 0 0 4px; letter-spacing: 0; }
html[data-skin="ios"] .gp-inter-card.status-reserved{ opacity: 1; }
html[data-skin="ios"] .gp-inter-card.status-reserved .gp-ic__body{ opacity: .6; }
/* monogramme : pastille grise iOS, lisible en clair comme en sombre */
html[data-skin="ios"] .gp-avatar, html[data-skin="ios"] #header-avatar, html[data-skin="ios"] #profile-avatar{
  background: linear-gradient(180deg, #a5abb8, #858994) !important; color: #fff !important; border-radius: 50% !important; box-shadow: none !important;
}
html[data-skin="ios"] .gp-topbar__action--back{ display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; padding: 0 8px 0 4px !important; }
html[data-skin="ios"] .gp-topbar__action--back span{ font-size: 28px !important; line-height: 1; font-weight: 300; margin-top: -3px; }

/* 15 · iOS-4 : écran « Aujourd'hui » recomposé (renderTodayIos dans mobile.html) */
html[data-skin="ios"] .gp-t-date{ display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 12px; font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-t-date > span:first-child::first-letter{ text-transform: uppercase; }
html[data-skin="ios"] .gp-t-strip{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--ios-bg-cell); border-radius: var(--ios-r-group); margin-bottom: 14px; }
html[data-skin="ios"] .gp-t-strip__c{ padding: 10px 0 11px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
html[data-skin="ios"] .gp-t-strip__c + .gp-t-strip__c{ border-left: .5px solid var(--ios-sep); }
html[data-skin="ios"] .gp-t-strip__c b{ font: 700 26px/30px var(--ios-font-rounded); font-variant-numeric: tabular-nums; color: var(--ios-label); }
html[data-skin="ios"] .gp-t-strip__c span{ font: var(--ios-caption); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-t-strip__c.is-bad b{ color: var(--ios-red); }
html[data-skin="ios"] .gp-t-strip__c.is-warn b{ color: var(--ios-purple); }
html[data-skin="ios"] .gp-next{ margin-bottom: 14px; }
html[data-skin="ios"] .gp-next__cell--time{ display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; }
html[data-skin="ios"] .gp-next__cell--go{ display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; }
html[data-skin="ios"] .gp-next__cell--go b{ display: inline-flex; align-items: center; gap: 6px; }
html[data-skin="ios"] .gp-today-cta{ display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; }
html[data-skin="ios"] .gp-t-todo{ margin-bottom: 6px; }
html[data-skin="ios"] .gp-t-todo .gp-list__item{ width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
html[data-skin="ios"] .gp-t-ic{ color: #fff; }
html[data-skin="ios"] .gp-t-ic--orange{ background: #c4610a; } html[data-skin="ios"] .gp-t-ic--indigo{ background: var(--ios-indigo); }
html[data-skin="ios"] .gp-t-count{ font: var(--ios-body); color: var(--ios-label-2); font-variant-numeric: tabular-nums; }
html[data-skin="ios"] .gp-t-chev{ color: var(--ios-label-3); flex: none; margin-left: -4px; }

html[data-skin="ios"] .gp-inter-card.gp-trow{
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 9px 12px 9px 16px; margin: 0; position: relative;
  border: 0 !important; border-radius: 0; background: var(--ios-bg-cell) !important; opacity: 1; cursor: pointer;
}
html[data-skin="ios"] .gp-inter-card.gp-trow--first{ border-radius: var(--ios-r-group) var(--ios-r-group) 0 0; }
html[data-skin="ios"] .gp-inter-card.gp-trow--last{ border-radius: 0 0 var(--ios-r-group) var(--ios-r-group); }
html[data-skin="ios"] .gp-inter-card.gp-trow--first.gp-trow--last{ border-radius: var(--ios-r-group); }
html[data-skin="ios"] .gp-trow + .gp-trow::before{ content: ""; position: absolute; top: 0; right: 0; left: 78px; height: .5px; background: var(--ios-sep); }
html[data-skin="ios"] .gp-inter-card.gp-trow:active{ background: var(--ios-fill-3) !important; }
html[data-skin="ios"] .gp-trow__time{ width: 50px; flex: none; display: flex; flex-direction: column; }
html[data-skin="ios"] .gp-trow__time b{ font: 600 17px/22px var(--ios-font); font-variant-numeric: tabular-nums; color: var(--ios-label); }
html[data-skin="ios"] .gp-trow__time span{ font: var(--ios-caption); color: var(--ios-label-2); }
html[data-skin="ios"] .gp-trow__body{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
html[data-skin="ios"] .gp-trow__title{ font: var(--ios-body); color: var(--ios-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ios"] .gp-trow__sub{ font: var(--ios-subhead); color: var(--ios-label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-skin="ios"] .gp-trow__flag{ font: 600 12px/16px var(--ios-font); color: var(--ios-orange); }
html[data-skin="ios"] .gp-trow__flag--dup{ color: var(--ios-purple); }
html[data-skin="ios"] .gp-trow.status-reserved .gp-trow__body, html[data-skin="ios"] .gp-trow.status-reserved .gp-trow__time{ opacity: .6; }
html[data-skin="ios"] .gp-trow .gp-chip{ flex: none; }
html[data-skin="ios"] .gp-search__input{ padding-left: 12px; }

/* 16 · iOS-6 : Planning (piles de jours, colonnes semaine) et Profil (carte « Mon chiffre d'affaires », styles inline → !important ciblé par id) */
html[data-skin="ios"] .day-label{ font: var(--ios-footnote); font-weight: 600; color: var(--ios-label-2); border-bottom: 0; padding: 18px 16px 7px; margin: 0; }
html[data-skin="ios"] .day-stack, html[data-skin="ios"] .week-col{ border: 0; box-shadow: none; border-radius: var(--ios-r-group); background: var(--ios-bg-cell); }
html[data-skin="ios"] .day-stack.is-today{ border-left: 0; box-shadow: inset 0 0 0 1.5px var(--ios-tint); }
html[data-skin="ios"] .week-col.is-today{ border: 0; box-shadow: inset 0 0 0 1.5px var(--ios-tint); }
html[data-skin="ios"] .day-stack-head{ font: var(--ios-headline); color: var(--ios-label); }
html[data-skin="ios"] .week-col-head{ border-bottom: .5px solid var(--ios-sep); }

html[data-skin="ios"] #ca-widget{ background: var(--ios-bg-cell) !important; color: var(--ios-label) !important; border-radius: var(--ios-r-group) !important; box-shadow: none !important; }
html[data-skin="ios"] #ca-widget > div:first-child > div{ font: var(--ios-footnote) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ios-label-2); opacity: 1 !important; }
html[data-skin="ios"] #ca-widget button[onclick^="caRefresh"], html[data-skin="ios"] #ca-widget button[onclick^="caShiftMonth"]{
  background: var(--ios-fill-3) !important; color: var(--ios-tint) !important; border-radius: 50% !important; width: 34px !important; height: 34px !important; }
html[data-skin="ios"] #ca-widget .gp-seg{ background: var(--ios-fill-3) !important; border-radius: 9px !important; padding: 2px !important; }
html[data-skin="ios"] #ca-widget .gp-seg__item{ background: transparent !important; color: var(--ios-label) !important; font: 500 13px/18px var(--ios-font) !important; padding: 5px 8px !important; }
html[data-skin="ios"] #ca-widget .gp-seg__item.is-active{ background: var(--ios-bg-elevated) !important; font-weight: 600 !important; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
html[data-skin="ios"].gp-dark #ca-widget .gp-seg__item.is-active, html[data-skin="ios"] .gp-dark #ca-widget .gp-seg__item.is-active{ background: #636366 !important; }
html[data-skin="ios"] #ca-widget input{ background: var(--ios-fill-3) !important; color: var(--ios-tint) !important; color-scheme: light !important; font: 400 17px/22px var(--ios-font) !important; min-height: 36px; border-radius: var(--ios-r-cell) !important; }
html[data-skin="ios"].gp-dark #ca-widget input, html[data-skin="ios"] .gp-dark #ca-widget input{ color-scheme: dark !important; }
html[data-skin="ios"] #ca-widget span{ color: var(--ios-label-2) !important; }
html[data-skin="ios"] #ca-amount{ font: 700 34px/41px var(--ios-font-rounded) !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums; color: var(--ios-label); }
html[data-skin="ios"] #ca-nb{ font: 700 22px/28px var(--ios-font-rounded) !important; font-variant-numeric: tabular-nums; }
html[data-skin="ios"] #ca-label, html[data-skin="ios"] #ca-nb + div{ font: var(--ios-caption) !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--ios-label-2); opacity: 1 !important; }

/* 17 · iOS-9 : barre d'état iPhone. La bande fixe prend la matière de la barre de navigation ; (les feuilles plein écran sont traitées dans le <style> de mobile.html, pour les deux habillages). */
html[data-skin="ios"] body::before{ background: var(--ios-material); -webkit-backdrop-filter: var(--ios-blur); backdrop-filter: var(--ios-blur); }

/* 18 · iOS-10 : écran de connexion d'après la maquette (code à 6 chiffres · mot de passe · trop d'essais) */
html[data-skin="ios"] .login-screen{ background: var(--ios-bg-grouped); color: var(--ios-label); padding: var(--safe-top) 0 var(--safe-bottom); }
html[data-skin="ios"] .login-screen::before{ display: none; }
html[data-skin="ios"] .login-screen > .login-box{ display: none; }
html[data-skin="ios"] .gpl{ --k: clamp(62px, 9.4dvh, 76px); flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 440px; margin: 0 auto; background: transparent; }
html[data-skin="ios"] .gpl[hidden], html[data-skin="ios"] .gpl [hidden]{ display: none !important; }
html[data-skin="ios"] .gpl-top{ height: 44px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; }
html[data-skin="ios"] .gpl-app{ font: var(--ios-footnote); color: var(--ios-label-2); }
html[data-skin="ios"] .gpl-help{ width: 44px; height: 44px; border: 0; background: transparent; color: var(--ios-tint); display: grid; place-items: center; cursor: pointer; }
html[data-skin="ios"] .gpl-vue{ flex: 1 0 auto; display: flex; flex-direction: column; }
html[data-skin="ios"] .gpl-vue--code, html[data-skin="ios"] .gpl-vue--lock{ align-items: center; justify-content: space-between; gap: 14px; padding: clamp(4px, 1.6dvh, 16px) 24px clamp(12px, 3dvh, 28px); }
html[data-skin="ios"] .gpl-head{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
html[data-skin="ios"] .gpl-avatar{ width: clamp(52px, 7.6dvh, 64px); height: clamp(52px, 7.6dvh, 64px); border-radius: 50%; margin-bottom: 8px; display: grid; place-items: center;
  background: linear-gradient(180deg, #a5abb8, #858994); color: #fff; font: 600 22px/1 var(--ios-font); }
html[data-skin="ios"] .gpl-head h1{ margin: 0; font: var(--ios-title-1); font-size: clamp(22px, 3.4dvh, 28px); line-height: 1.2; color: var(--ios-label); letter-spacing: -.01em; }
html[data-skin="ios"] .gpl-head p{ margin: 0; font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .gpl-head p.gpl-rouge{ color: var(--ios-red); }
html[data-skin="ios"] .gpl-dots{ display: flex; gap: 18px; justify-content: center; min-height: 14px; }
html[data-skin="ios"] .gpl-dots i{ width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--ios-label); transition: background .1s; }
html[data-skin="ios"] .gpl-dots i.on{ background: var(--ios-label); }
html[data-skin="ios"] .gpl-dots--off i{ border-color: var(--ios-label-3); }
html[data-skin="ios"] .gpl-dots--err{ animation: gplSecoue .4s; }
@keyframes gplSecoue{ 20%{ transform: translateX(-10px); } 40%{ transform: translateX(9px); } 60%{ transform: translateX(-6px); } 80%{ transform: translateX(4px); } }
html[data-skin="ios"] .gpl-pad{ display: grid; grid-template-columns: repeat(3, var(--k)); column-gap: clamp(20px, 7vw, 28px); row-gap: clamp(10px, 1.9dvh, 16px); justify-content: center; }
html[data-skin="ios"] .gpl-key{ width: var(--k); height: var(--k); border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--ios-fill-2); color: var(--ios-label);
  display: flex; flex-direction: column; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; transition: background .08s; }
html[data-skin="ios"] .gpl-key b{ font: 400 30px/32px var(--ios-font); }
html[data-skin="ios"] .gpl-key span{ font: 600 10px/12px var(--ios-font); letter-spacing: .12em; color: var(--ios-label-2); }
html[data-skin="ios"] .gpl-key:active{ background: var(--ios-fill); }
html[data-skin="ios"] .gpl-key--ico{ background: transparent; color: var(--ios-tint); } html[data-skin="ios"] .gpl-key--ico:active{ background: transparent; opacity: .4; }
html[data-skin="ios"] .gpl-key-vide{ width: var(--k); height: var(--k); }
html[data-skin="ios"] .gpl-key[data-bio]:not([hidden]) + .gpl-key-vide{ display: none; }
html[data-skin="ios"] .gpl-occupe .gpl-pad, html[data-skin="ios"] .gpl-occupe #gpl-go{ opacity: .45; pointer-events: none; }
html[data-skin="ios"] .gpl-bas{ display: flex; flex-direction: column; align-items: center; gap: 0; }
html[data-skin="ios"] .gpl-liens{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
html[data-skin="ios"] .gpl-liens button, html[data-skin="ios"] .gpl-ok{ min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--ios-tint); font: var(--ios-body); cursor: pointer; }
html[data-skin="ios"] .gpl-ok, html[data-skin="ios"] .gpl-fort{ font-weight: 600; }
html[data-skin="ios"] .gpl-fort{ min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--ios-tint); font: var(--ios-headline); cursor: pointer; }
html[data-skin="ios"] .gpl-version{ font: var(--ios-caption); color: var(--ios-label-2); text-align: center; }
html[data-skin="ios"] .gpl-cadenas{ width: 64px; height: 64px; border-radius: 50%; margin-bottom: 8px; display: grid; place-items: center; color: var(--ios-red); background: color-mix(in srgb, var(--ios-red) 14%, transparent); }
html[data-skin="ios"] .gpl-compte{ font: 700 34px/41px var(--ios-font-rounded); font-variant-numeric: tabular-nums; color: var(--ios-red); }
html[data-skin="ios"] .gpl-vue--pwd{ gap: 18px; padding: 8px 0 24px; }
html[data-skin="ios"] .gpl-titre{ padding: 0 16px; } html[data-skin="ios"] .gpl-titre h1{ margin: 0 0 4px; font: var(--ios-large-title); letter-spacing: .011em; color: var(--ios-label); }
html[data-skin="ios"] .gpl-titre p{ margin: 0; font: var(--ios-subhead); color: var(--ios-label-2); }
html[data-skin="ios"] .gpl-champs, html[data-skin="ios"] .gpl-vue--pwd > .ios-btn{ margin: 0 16px; width: auto; }
html[data-skin="ios"] .gpl-champs .ios-input{ background: transparent !important; min-height: 44px; font: var(--ios-body); }
html[data-skin="ios"] .gpl-erreur{ margin: -6px 32px 0; font: var(--ios-footnote); color: var(--ios-red); }
html[data-skin="ios"] .gpl-liens--centre{ margin-top: -10px; }
html[data-skin="ios"] .gpl-aide{ margin: 0 16px; padding-top: 4px; } html[data-skin="ios"] .gpl-aide .ios-row{ cursor: pointer; }
html[data-skin="ios"] .gpl-chev{ color: var(--ios-label-3); flex: none; }
html[data-skin="ios"] .gpl-vue--pwd .gpl-version{ margin-top: auto; padding-top: 12px; }
/* état « trop d'essais » = la vue code avec une autre tête, le pavé grisé, une autre issue (comme sur la maquette) */
html[data-skin="ios"] .gpl-head--lock, html[data-skin="ios"] .gpl-bas--lock{ display: none; }
html[data-skin="ios"] .gpl-lock .gpl-head--lock{ display: flex; } html[data-skin="ios"] .gpl-lock .gpl-bas--lock{ display: flex; }
html[data-skin="ios"] .gpl-lock .gpl-head--code, html[data-skin="ios"] .gpl-lock .gpl-bas--code{ display: none; }
html[data-skin="ios"] .gpl-lock .gpl-pad{ opacity: .35; pointer-events: none; }
html[data-skin="ios"] .gpl-lock .gpl-dots i{ border-color: var(--ios-label-3); background: transparent; }
html[data-skin="ios"] .gpl-champs .ios-input:focus, html[data-skin="ios"] .gpl-champs .ios-input:focus-visible{ outline: 0 !important; box-shadow: none !important; background: transparent !important; }
/* 20/09 (capture d'Omar, écran large) : contenu de l'écran de code groupé et centré, plus étiré sur toute la hauteur */
html[data-skin="ios"] .gpl-vue--code{ justify-content: center; gap: clamp(16px, 3.6dvh, 34px); }
@media (min-height: 760px){ html[data-skin="ios"] .gpl-vue--pwd{ padding-top: 6dvh; } }

/* 19 · F2-b : écran « Créez votre code » (feuille plein écran #pin-sheet) */
html[data-skin="ios"] #pin-sheet{ background: var(--ios-bg-grouped); }
html[data-skin="ios"] #pin-ios{ height: 100%; }
html[data-skin="ios"] #pin-ios .gpl-vue--code{ justify-content: center; gap: clamp(14px, 3dvh, 28px); }
html[data-skin="ios"] .gpl-jauge{ display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
html[data-skin="ios"] .gpl-jauge span{ width: 6px; height: 6px; border-radius: 3px; background: var(--ios-label-3); transition: width .2s; }
html[data-skin="ios"] .gpl-jauge span.on{ width: 22px; background: var(--ios-tint); }
html[data-skin="ios"] .gpl-regle{ margin: -6px 0 0; max-width: 300px; text-align: center; font: var(--ios-footnote); color: var(--ios-label-2); }
html[data-skin="ios"] #pin-ios .gpl-top{ justify-content: space-between; }
html[data-skin="ios"] #pin-ios .gpl-app{ padding-right: 12px; }
/* 20 : la feuille de vérification du mot de passe ne doit pas passer sous la barre d'onglets */
html[data-skin="ios"] .ios-layer{ z-index: 1500; }
html[data-skin="ios"] .ios-sheet__body{ padding-bottom: calc(24px + var(--safe-bottom)); }
