/* ===================== OnPoint — iOS épuré ===================== */
:root{
  --bg:#f2f4f7; --card:#ffffff; --sep:#e6e8ec; --line:#f0f1f3;
  --blue:#0a84ff; --green:#34c759; --red:#ff3b30; --orange:#ff9500; --purple:#5e5ce6;
  --gray:#8a8a8e; --label:#1c1c1e; --sub:#6b7280;
}
*{ -webkit-tap-highlight-color: transparent; }
html,body{ background:var(--bg); }
body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* Animations */
.fade-in{ animation:fadeIn .28s ease both; }
@keyframes fadeIn{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
@keyframes slideUp{ from{transform:translateY(40px); opacity:.6;} to{transform:none; opacity:1;} }
.spin{ animation:spin 1s linear infinite; } @keyframes spin{ to{transform:rotate(360deg);} }

/* Scrollbars */
.no-scrollbar::-webkit-scrollbar{ display:none; } .no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
::-webkit-scrollbar{ width:7px; height:7px; } ::-webkit-scrollbar-thumb{ background:#cdd2d8; border-radius:4px; }

/* Cartes & listes */
.ios-card{ background:var(--card); border:1px solid #eceef1; border-radius:18px; padding:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 1px rgba(16,24,40,.03); }
.ios-list{ background:var(--card); border:1px solid #eceef1; border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.ios-row{ display:flex; align-items:center; gap:12px; padding:13px 16px; width:100%; }
.ios-list > .ios-row:not(:last-child){ border-bottom:1px solid var(--line); }
.ios-link{ background:transparent; border:none; cursor:pointer; transition:background .15s; font-size:16px; color:var(--label); }
.ios-link:active{ background:#f5f6f8; }
.ios-row-ic{ width:24px; height:24px; flex-shrink:0; }
.ios-note{ display:flex; gap:8px; align-items:flex-start; background:rgba(255,149,0,.10); color:#9a6400;
  border:1px solid rgba(255,149,0,.22); border-radius:12px; padding:12px 14px; font-size:13px; line-height:1.4; }

/* Stats */
.ios-stat-label{ font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.ios-stat-value{ font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1; color:var(--label); }

/* Champs */
.ios-field-label{ display:block; font-size:12px; font-weight:600; color:var(--gray); text-transform:uppercase; letter-spacing:.03em; margin-bottom:5px; }
.ios-input{ width:100%; background:#fff; border:1px solid #d8dce1; border-radius:12px; padding:13px 14px;
  font-size:16px; color:var(--label); outline:none; transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none; }
textarea.ios-input{ resize:vertical; }
.ios-input:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,132,255,.14); }
select.ios-input{ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%238a8a8e' stroke-width='2' stroke-linecap='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:34px; }

/* Boutons */
.ios-btn-primary{ background:var(--blue); color:#fff; font-weight:600; font-size:16px; border:none; border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:transform .1s, filter .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.ios-btn-primary:active{ transform:scale(.97); filter:brightness(.96); }
.ios-btn-ghost{ background:#fff; color:var(--blue); border:1px solid var(--sep); border-radius:12px; padding:9px 14px;
  font-weight:600; font-size:15px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
.ios-btn-ghost:active{ background:#f3f4f6; }
.ios-icon-btn{ width:38px; height:38px; border-radius:50%; background:#fff; border:1px solid var(--sep);
  display:inline-flex; align-items:center; justify-content:center; color:var(--label); cursor:pointer; flex-shrink:0; transition:background .15s; }
.ios-icon-btn:active{ background:#f3f4f6; }

/* Pills */
.ios-pill{ display:inline-block; padding:4px 12px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; }
.ios-pill-gray{ background:#eceef1; color:var(--gray); }
.ios-pill-green{ background:rgba(52,199,89,.16); color:#1f9d4d; }
.ios-pill-red{ background:rgba(255,59,48,.12); color:#d8362c; }
.ios-pill-amber{ background:rgba(255,149,0,.16); color:#a86200; }
.ios-pill-blue{ background:rgba(10,132,255,.12); color:#0a6ed1; }
.ios-pill-purple{ background:rgba(94,92,230,.14); color:#4b49c4; }
.ios-pill-teal{ background:rgba(48,176,199,.16); color:#1d8ea1; }

/* Tab bar */
.tab-btn{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; min-width:54px;
  background:none; border:none; cursor:pointer; color:var(--gray); padding:3px 4px; }
.tab-btn span:last-child{ font-size:10px; font-weight:600; }
.tab-btn.active{ color:var(--blue); }

/* Modales (bottom-sheet) */
.modal{ position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:none; align-items:flex-end; justify-content:center; }
.modal:not(.hidden){ display:flex; }
.modal-card{ background:#fff; width:100%; max-width:480px; border-radius:22px 22px 0 0; padding:20px;
  padding-bottom:calc(20px + env(safe-area-inset-bottom)); max-height:92vh; overflow-y:auto; animation:slideUp .25s ease; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.modal-head h3{ font-size:18px; font-weight:700; }
@media (min-width:540px){ .modal{ align-items:center; } .modal-card{ border-radius:22px; } }

/* Anneau jauge */
#ring-progress{ stroke:var(--blue); }

/* Cropper rond */
.cropper-view-box,.cropper-face{ border-radius:50%; }
#crop-image{ display:block; max-width:100%; }

/* Liens cliquables de listes (drill-down bilans, etc.) */
.tap{ cursor:pointer; transition:transform .08s, background .15s; }
.tap:active{ transform:scale(.985); }