:root {
  --cream:#F5F0E8; --warm:#FDFAF4;
  --bark:#5C3D2E; --bark-l:#8B6553;
  --moss:#4A6741; --moss-l:#6B8F62;
  --sand:#C9A96E; --sand-l:#E8D5B0;
  --terra:#B85C38; --sky:#5B8FAB;
  --shadow:rgba(92,61,46,.12); --text:#2C1810; --text-l:#6B4C3B;
  --r:14px;
  --col-a:#5B8FAB; --col-b:#B85C38;
}
.csc-wrap { font-family:'Segoe UI',Arial,sans-serif; background:var(--cream); min-height:400px; color:var(--text); padding:20px 0; }

/* LOGIN */
.csc-login-card { max-width:420px; margin:40px auto; background:var(--warm); border-radius:var(--r); padding:36px 32px; box-shadow:0 4px 24px var(--shadow); border:1px solid rgba(201,169,110,.2); text-align:center; }
.csc-paw { font-size:2.4rem; margin-bottom:8px; }
.csc-login-card h2 { font-size:1.4rem; color:var(--bark); margin-bottom:6px; }
.csc-sub { font-size:.85rem; color:var(--bark-l); margin-bottom:20px; }

/* CARDS */
.csc-card { background:var(--warm); border-radius:var(--r); padding:22px 20px; box-shadow:0 2px 16px var(--shadow); border:1px solid rgba(201,169,110,.2); margin-bottom:20px; }
.csc-section-title { font-size:1rem; font-weight:700; color:var(--bark); margin:0 0 14px; padding-bottom:8px; border-bottom:1px solid var(--sand-l); }

/* LAYOUT */
.csc-grid { display:grid; grid-template-columns:1fr 1.5fr; gap:20px; align-items:start; }
@media(max-width:820px){ .csc-grid { grid-template-columns:1fr; } }

/* DOG HEADER */
.csc-dog-header { background:linear-gradient(135deg,var(--bark),var(--bark-l)); color:white; border-radius:var(--r); padding:14px 20px; margin-bottom:20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.88rem; }
.csc-dog-header .name { font-size:1.15rem; font-weight:700; }
.csc-dog-header .sep { opacity:.4; }

/* FIELDS */
.csc-field-group { margin-bottom:12px; }
.csc-field-group label { display:block; font-size:.73rem; font-weight:600; color:var(--bark-l); margin-bottom:4px; text-transform:uppercase; letter-spacing:.4px; }
.csc-field-group input { width:100%; padding:8px 11px; border:2px solid var(--sand-l); border-radius:9px; font-size:.87rem; color:var(--text); background:white; transition:border-color .2s; box-sizing:border-box; }
.csc-field-group input:focus { outline:none; border-color:var(--bark); }
.csc-hint { font-size:.7rem; color:var(--moss-l); margin-top:3px; display:block; }

/* MEASURE ROW */
.csc-measure-row { display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:8px; align-items:end; }
@media(max-width:600px){ .csc-measure-row { grid-template-columns:1fr 1fr; } }

/* PESÉES LIST */
.csc-pesees-list { margin-top:12px; max-height:240px; overflow-y:auto; }
.csc-pesee-item { display:flex; align-items:center; justify-content:space-between; padding:7px 11px; background:white; border-radius:8px; margin-bottom:5px; border-left:3px solid var(--moss-l); font-size:.83rem; gap:6px; }
.csc-pesee-date { color:var(--bark-l); font-size:.75rem; }
.csc-pesee-weight { font-weight:600; color:var(--bark); }
.csc-pesee-zone { font-size:.66rem; padding:2px 7px; border-radius:20px; font-weight:600; white-space:nowrap; }
.zone-mid  { background:#E8F5E3; color:#2E7D32; }
.zone-p25  { background:#FFF8E1; color:#E65100; }
.zone-p75  { background:#E3F2FD; color:#1565C0; }
.zone-low  { background:#FFECB3; color:#BF360C; }
.zone-high { background:#FCE4EC; color:#C62828; }
.csc-source-badge { font-size:.62rem; padding:1px 6px; border-radius:10px; background:#f0f0f0; color:#777; }
.csc-del-pesee-btn { background:none; border:none; cursor:pointer; color:#ccc; font-size:.9rem; padding:2px 5px; flex-shrink:0; transition:color .2s; }
.csc-del-pesee-btn:hover { color:var(--terra); }

/* NOTES ÉLEVEUR */
.csc-notes-box { background:linear-gradient(135deg,#fffef0,#fffde8); border:1px solid #f0e68c; border-left:4px solid #d4a017; border-radius:10px; padding:14px 16px; font-size:.88rem; color:#4a3800; line-height:1.7; white-space:pre-wrap; }

/* ══════════════════════════════════════
   CALCULATEUR
══════════════════════════════════════ */
.csc-calc-bec-row { margin-bottom:14px; }

/* Pills toggle */
.csc-toggle-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.csc-toggle-label { font-size:.82rem; font-weight:600; color:var(--bark-l); }
.csc-pills { display:flex; gap:6px; }
.csc-pill { display:inline-flex; align-items:center; gap:5px; padding:7px 18px; border-radius:20px; border:2px solid var(--sand-l); cursor:pointer; font-size:.84rem; font-weight:500; color:var(--bark-l); background:white; transition:all .2s; user-select:none; }
.csc-pill input { display:none; }
.csc-pill.active { background:var(--bark); border-color:var(--bark); color:white; }
.csc-pill:hover:not(.active) { border-color:var(--bark); }

/* Blocs aliment */
.csc-aliment-block { background:rgba(255,255,255,.7); border:1.5px solid var(--sand-l); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
.csc-aliment-title { display:flex; align-items:center; gap:8px; margin-bottom:12px; font-weight:600; font-size:.9rem; color:var(--bark); }
.csc-aliment-fields { display:grid; grid-template-columns:1.8fr 1fr; gap:10px; }
@media(max-width:500px){ .csc-aliment-fields { grid-template-columns:1fr; } }

/* Dots couleur */
.csc-dot { display:inline-block; width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.dot-a { background:var(--col-a); }
.dot-b { background:var(--col-b); }

/* Slider mélange */
.csc-slider-block { margin-top:14px; padding-top:14px; border-top:1px solid var(--sand-l); }
.csc-slider-labels { display:flex; justify-content:space-between; font-size:.8rem; margin-bottom:8px; color:var(--text-l); }
.csc-slider-pct { font-weight:700; color:var(--bark); }
.csc-slider-track { display:flex; align-items:center; gap:8px; }
.csc-range { flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius:3px; background:linear-gradient(to right,var(--col-a) 50%,var(--col-b) 50%); outline:none; cursor:pointer; }
.csc-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:white; border:3px solid var(--bark); box-shadow:0 1px 5px rgba(0,0,0,.2); cursor:pointer; }
.csc-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:white; border:3px solid var(--bark); cursor:pointer; }
.csc-slider-bar { display:flex; height:5px; border-radius:3px; overflow:hidden; margin-top:6px; }
.csc-bar-a { background:var(--col-a); transition:width .1s; }
.csc-bar-b { background:var(--col-b); flex:1; }

/* Bouton calcul */
.csc-btn-calc { width:100%; margin-top:6px; padding:12px; background:linear-gradient(135deg,var(--moss),var(--moss-l)); color:white; font-size:.95rem; font-weight:700; border:none; border-radius:10px; cursor:pointer; transition:all .2s; }
.csc-btn-calc:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* Résultat */
.csc-result { margin-top:16px; border-radius:12px; overflow:hidden; }
.csc-result-head { background:linear-gradient(135deg,var(--moss),var(--moss-l)); color:white; padding:11px 16px; font-weight:700; font-size:.9rem; }
.csc-result-body { background:white; border:1.5px solid #d1e8cc; border-top:none; padding:12px 16px; }
.csc-result-row { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed #eee; }
.csc-result-row:last-child { border-bottom:none; }
.csc-result-name { flex:1; font-size:.87rem; color:var(--text-l); }
.csc-result-qty { font-size:1.1rem; font-weight:700; color:var(--bark); white-space:nowrap; }
.csc-result-note { font-size:.71rem; color:#999; margin-top:8px; padding-top:8px; border-top:1px solid #eee; line-height:1.5; }

/* CHART */
.csc-chart-wrap { position:relative; height:360px; }
.csc-legend { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; padding-top:10px; border-top:1px solid var(--sand-l); }
.csc-legend-item { display:flex; align-items:center; gap:5px; font-size:.7rem; color:var(--text-l); }
.csc-legend-line { width:20px; height:2px; border-radius:2px; }
.csc-bec-banner, .csc-adult-est { margin-top:10px; padding:10px 14px; border-radius:10px; font-size:.82rem; color:var(--text-l); line-height:1.5; }
.csc-bec-banner { background:linear-gradient(135deg,#e8f4f0,#f2faf8); border-left:3px solid var(--sky); }
.csc-adult-est  { background:linear-gradient(135deg,#eef6ea,#f4faf2); border-left:3px solid var(--moss-l); }

/* ALERTS & BUTTONS */
.csc-alert { padding:8px 12px; border-radius:8px; margin-bottom:10px; font-size:.84rem; }
.csc-alert-error { background:#FFECEF; border-left:3px solid var(--terra); color:#7a1a0a; }
.csc-btn { padding:9px 16px; border:none; border-radius:9px; cursor:pointer; font-size:.87rem; font-weight:600; transition:all .2s; display:inline-block; }
.csc-btn-primary { background:var(--bark); color:white; width:100%; margin-top:6px; }
.csc-btn-primary:hover { background:var(--text); transform:translateY(-1px); }
.csc-btn-add { background:var(--bark); color:white; white-space:nowrap; }
.csc-btn-add:hover { background:var(--text); }
.csc-btn-ghost { background:transparent; border:2px solid var(--sand-l); color:var(--bark-l); }
.csc-btn-ghost:hover { border-color:var(--terra); color:var(--terra); }
.csc-btn-sm { font-size:.78rem; padding:5px 11px; }
.csc-footer-bar { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:.77rem; color:var(--bark-l); }

/* ══════════════════════════════════════
   JALONS DE CROISSANCE
══════════════════════════════════════ */
.csc-jalons-intro { font-size:.83rem; color:var(--text-l); margin:-6px 0 12px; }
.csc-jalons-wrap { overflow-x:auto; }

.csc-jalons-tbl {
  width:100%; border-collapse:collapse; font-size:.84rem;
}
.csc-jalons-tbl thead th {
  text-align:left; padding:7px 10px;
  background:var(--cream); color:var(--bark-l);
  font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.4px;
  border-bottom:2px solid var(--sand-l);
}
.th-sub { font-weight:400; color:#bbb; text-transform:none; letter-spacing:0; }

.jalon-row td { padding:8px 10px; border-bottom:1px solid var(--cream); vertical-align:middle; }
.jalon-row:last-child td { border-bottom:none; }

/* Passé : grisé */
.jalon-past { opacity:.6; }
.jalon-past .jalon-icon { filter:grayscale(30%); }

/* Prochain : surligné */
.jalon-current { background:linear-gradient(90deg,rgba(74,103,65,.07),transparent); }
.jalon-current td { border-bottom:1px solid rgba(74,103,65,.2); }
.jalon-current .jalon-age strong { color:var(--moss); }

/* Futur : normal */
.jalon-future { }

.jalon-icon { font-size:1rem; width:28px; text-align:center; }
.jalon-age strong { font-size:.88rem; color:var(--bark); }
.jalon-date { font-size:.73rem; color:var(--bark-l); display:block; margin-top:1px; }

.jalon-poids { line-height:1.4; }
.jalon-p50 { font-weight:700; color:var(--bark); font-size:.9rem; margin-right:4px; }
.jalon-range { font-size:.72rem; color:#aaa; }
.jalon-delta { display:block; font-size:.72rem; font-weight:600; margin-top:2px; }

.jalon-bec strong { font-size:.95rem; color:var(--moss); }
.jalon-unit { font-size:.73rem; color:#aaa; }

.csc-jalons-legend {
  font-size:.7rem; color:#aaa; margin-top:10px;
  padding-top:8px; border-top:1px solid var(--cream);
  line-height:1.5;
}