/* SmartCentre — feuille de style unique
   Extraite des maquettes Carnet (brand.jsx + admin.jsx + mobile.jsx + tablet.jsx).
   Une seule source de design pour les 3 surfaces : admin, accueil, parents.
*/

/* ───── Tokens ───── */
:root {
  /* Palette */
  --sc-cream: #FBF4E6;
  --sc-paper: #FFFFFF;
  --sc-ink: #15233B;
  --sc-ink-soft: #46536B;
  --sc-ink-faint: #8A93A6;
  --sc-line: rgba(21, 35, 59, 0.10);
  --sc-line-soft: rgba(21, 35, 59, 0.06);

  --sc-aqua: #0FA3B1;
  --sc-aqua-deep: #0A7B86;
  --sc-aqua-wash: #E2F4F4;

  --sc-coral: #F76C8E;
  --sc-coral-wash: #FCE6EC;

  --sc-sun: #FFC94D;
  --sc-sun-wash: #FFF3D6;

  --sc-green: #23B26D;
  --sc-green-wash: #E0F4EA;

  --sc-red: #EF5B5B;
  --sc-red-wash: #FCE6E6;

  /* Ombres */
  --sc-shadow-sm: 0 6px 18px rgba(21, 35, 59, 0.08);
  --sc-shadow:    0 18px 40px rgba(21, 35, 59, 0.10);
  --sc-shadow-lg: 0 30px 70px rgba(21, 35, 59, 0.16);

  /* Typo */
  --sc-font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --sc-font-body:    "Hanken Grotesk", system-ui, sans-serif;

  /* Rayons */
  --sc-radius-xs: 8px;
  --sc-radius-sm: 12px;
  --sc-radius-md: 16px;
  --sc-radius-lg: 20px;
  --sc-radius-xl: 24px;
  --sc-radius-pill: 999px;
}

/* ───── Reset léger ───── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sc-font-body);
  background: var(--sc-cream);
  color: var(--sc-ink);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ───── Layout admin shell ───── */
.sc-shell { display: flex; min-height: 100vh; }

.sc-sidebar {
  width: 248px;
  background: var(--sc-ink);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
}
.sc-sidebar__brand { padding: 4px 8px 22px; }
.sc-sidebar__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 20px;
}
.sc-sidebar__sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  letter-spacing: 0.5px;
}
.sc-sidebar__nav { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-top: 18px; }
.sc-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: var(--sc-radius-sm);
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
  font-size: 14.5px;
  position: relative;
  transition: background .15s, color .15s;
}
.sc-nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.sc-nav-item.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
}
.sc-nav-item.is-active::before {
  content: "";
  position: absolute; left: -16px; top: 12px; bottom: 12px;
  width: 3px; border-radius: 3px;
  background: var(--sc-aqua);
}
.sc-sidebar__user {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.sc-sidebar__user-name { font-weight: 700; font-size: 14px; color: #fff; }
.sc-sidebar__user-role { font-size: 12px; color: rgba(255, 255, 255, 0.5); font-weight: 600; }

.sc-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

/* ───── Topbar ───── */
.sc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 32px;
  border-bottom: 1px solid var(--sc-line);
  background: var(--sc-paper);
  flex-shrink: 0;
}
.sc-topbar__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.4px;
  margin: 0;
}
.sc-topbar__sub { font-size: 14px; color: var(--sc-ink-faint); font-weight: 600; margin-top: 2px; }
.sc-topbar__actions { display: flex; align-items: center; gap: 14px; }

.sc-search {
  display: flex; align-items: center; gap: 10px;
  background: var(--sc-cream);
  border: 1px solid var(--sc-line);
  padding: 11px 16px;
  border-radius: var(--sc-radius-sm);
  width: 280px;
  color: var(--sc-ink-faint);
  font-size: 14px;
  font-weight: 500;
}
.sc-search input {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: 14px; color: var(--sc-ink);
  width: 100%;
}

/* ───── Content area ───── */
.sc-content { padding: 28px; overflow: auto; display: flex; flex-direction: column; gap: 20px; }

/* ───── Card ───── */
.sc-card {
  background: var(--sc-paper);
  border-radius: var(--sc-radius-lg);
  padding: 24px;
  border: 1px solid var(--sc-line-soft);
  box-shadow: var(--sc-shadow-sm);
}
.sc-card--flat { box-shadow: none; border: 1px solid var(--sc-line); }
.sc-card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.sc-card__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
}

/* ───── KPI grid ───── */
.sc-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sc-kpi {
  background: var(--sc-paper);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-lg);
  padding: 22px;
}
.sc-kpi__head { display: flex; justify-content: space-between; align-items: flex-start; }
.sc-kpi__icon {
  width: 42px; height: 42px;
  border-radius: var(--sc-radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.sc-kpi__delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 13px; font-weight: 700;
}
.sc-kpi__delta--up { color: var(--sc-green); }
.sc-kpi__delta--down { color: var(--sc-red); }
.sc-kpi__value {
  font-family: var(--sc-font-display);
  font-weight: 800; font-size: 32px;
  margin-top: 16px; letter-spacing: -0.5px;
}
.sc-kpi__unit { font-size: 16px; color: var(--sc-ink-faint); font-weight: 700; }
.sc-kpi__label { font-size: 13.5px; color: var(--sc-ink-faint); font-weight: 600; margin-top: 2px; }

/* Wash backgrounds (KPI icons, badges) */
.sc-wash-aqua  { background: var(--sc-aqua-wash);  color: var(--sc-aqua); }
.sc-wash-coral { background: var(--sc-coral-wash); color: var(--sc-coral); }
.sc-wash-sun   { background: var(--sc-sun-wash);   color: #B7791F; }
.sc-wash-green { background: var(--sc-green-wash); color: var(--sc-green); }
.sc-wash-red   { background: var(--sc-red-wash);   color: var(--sc-red); }

/* ───── Buttons ───── */
.sc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sc-ink); color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: var(--sc-radius-sm);
  font-family: var(--sc-font-body);
  font-weight: 700;
  font-size: 14.5px;
  transition: background .15s, transform .05s;
}
.sc-btn:hover { background: #0c1b30; }
.sc-btn:active { transform: translateY(1px); }
.sc-btn--ghost { background: transparent; color: var(--sc-ink); border: 1px solid var(--sc-line); }
.sc-btn--ghost:hover { background: var(--sc-cream); }
.sc-btn--aqua { background: var(--sc-aqua); }
.sc-btn--aqua:hover { background: var(--sc-aqua-deep); }
.sc-btn--coral { background: var(--sc-coral); }
.sc-btn--danger { background: var(--sc-red); }
.sc-btn--block { width: 100%; justify-content: center; }
.sc-btn--lg { padding: 16px 22px; font-size: 16px; border-radius: var(--sc-radius-md); }
.sc-btn--xl { padding: 22px 28px; font-size: 18px; border-radius: var(--sc-radius-md); }

/* ───── Pills / badges ───── */
.sc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--sc-radius-pill);
  font-family: var(--sc-font-body);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}
.sc-pill--sm { padding: 5px 10px; font-size: 12.5px; }
.sc-pill--aqua  { background: var(--sc-aqua-wash);  color: var(--sc-aqua-deep); }
.sc-pill--coral { background: var(--sc-coral-wash); color: var(--sc-coral); }
.sc-pill--sun   { background: var(--sc-sun-wash);   color: #B7791F; }
.sc-pill--green { background: var(--sc-green-wash); color: var(--sc-green); }
.sc-pill--red   { background: var(--sc-red-wash);   color: var(--sc-red); }
.sc-pill--ink   { background: var(--sc-ink); color: #fff; }

/* ───── Avatar ───── */
.sc-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sc-aqua); color: #fff;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.sc-avatar--sm { width: 32px; height: 32px; font-size: 12px; }
.sc-avatar--lg { width: 64px; height: 64px; font-size: 24px; }
.sc-avatar--coral { background: var(--sc-coral); }
.sc-avatar--sun   { background: var(--sc-sun); color: var(--sc-ink); }
.sc-avatar--green { background: var(--sc-green); }

/* ───── Tables ───── */
.sc-table-wrap { background: var(--sc-paper); border: 1px solid var(--sc-line); border-radius: var(--sc-radius-lg); overflow: hidden; }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table th, .sc-table td {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
}
.sc-table thead th {
  background: var(--sc-cream);
  color: var(--sc-ink-soft);
  font-weight: 700;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--sc-line);
}
.sc-table tbody tr { border-bottom: 1px solid var(--sc-line-soft); }
.sc-table tbody tr:last-child { border-bottom: 0; }
.sc-table tbody tr:hover { background: var(--sc-cream); }
.sc-table__cell-strong { font-weight: 700; }

/* ───── Forms ───── */
.sc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sc-label { font-size: 13px; font-weight: 700; color: var(--sc-ink-soft); }
.sc-input, .sc-select, .sc-textarea {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--sc-ink);
  background: var(--sc-paper);
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius-sm);
  padding: 12px 14px;
  outline: none;
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus {
  border-color: var(--sc-aqua);
  box-shadow: 0 0 0 3px var(--sc-aqua-wash);
}
.sc-textarea { min-height: 110px; resize: vertical; }
.sc-error { color: var(--sc-red); font-size: 12.5px; font-weight: 600; }

/* ───── Auth (login) ───── */
.sc-auth {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 12% 8%, var(--sc-coral-wash), transparent 40%),
    radial-gradient(circle at 88% 92%, var(--sc-aqua-wash), transparent 45%),
    var(--sc-cream);
}
.sc-auth__card {
  width: 100%; max-width: 420px;
  background: var(--sc-paper);
  border-radius: var(--sc-radius-xl);
  padding: 36px 32px;
  box-shadow: var(--sc-shadow);
}
.sc-auth__title {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: 28px;
  margin: 18px 0 6px;
}
.sc-auth__sub { font-size: 14.5px; color: var(--sc-ink-faint); font-weight: 600; margin-bottom: 22px; }

/* ───── Tablet (accueil kiosque) ───── */
.sc-kiosk { min-height: 100vh; background: var(--sc-cream); padding: 32px; }
.sc-kiosk__card { max-width: 980px; margin: 0 auto; background: var(--sc-paper); border-radius: var(--sc-radius-xl); padding: 32px; box-shadow: var(--sc-shadow); }

/* ───── Carnet grid (mini calendrier de séances) ───── */
.sc-carnet { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sc-cell {
  aspect-ratio: 1;
  border-radius: 30%;
  border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: 15px;
}
.sc-cell--planned { background: #fff; color: var(--sc-ink-faint); border-color: var(--sc-line); }
.sc-cell--done    { background: var(--sc-aqua); color: #fff; }
.sc-cell--today   { background: var(--sc-sun); color: var(--sc-ink); }
.sc-cell--miss    { background: var(--sc-red-wash); color: var(--sc-red); }

/* ───── Helpers ───── */
.sc-stack { display: flex; flex-direction: column; gap: 12px; }
.sc-row { display: flex; align-items: center; gap: 12px; }
.sc-row--between { justify-content: space-between; }
.sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc-text-faint { color: var(--sc-ink-faint); }
.sc-text-soft { color: var(--sc-ink-soft); }
.sc-display { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: -0.4px; }
.sc-mono { font-variant-numeric: tabular-nums; }

/* ───── Alerts / flash ───── */
.sc-flash {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-radius: var(--sc-radius-sm);
  font-weight: 600; font-size: 14px;
  margin-bottom: 16px;
}
.sc-flash--success { background: var(--sc-green-wash); color: var(--sc-green); }
.sc-flash--error   { background: var(--sc-red-wash);   color: var(--sc-red); }
.sc-flash--info    { background: var(--sc-aqua-wash);  color: var(--sc-aqua-deep); }

/* ───── Responsive ───── */
@media (max-width: 1024px) {
  .sc-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-grid-3 { grid-template-columns: 1fr; }
  .sc-search { width: 200px; }
}
@media (max-width: 768px) {
  .sc-sidebar { display: none; }
  .sc-topbar { padding: 16px 20px; }
  .sc-content { padding: 20px; }
  .sc-search { display: none; }
  .sc-grid-2 { grid-template-columns: 1fr; }
}