/* ============================================================
   EscapeTime — Système de design
   Tokens : palette cyan/noir (logo Plaisir – Les Clayes), cartes douces, typo système
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Palette (calquée sur le logo : noir + cyan #23B9F0) */
  --brand-700: #0A7BA6; --brand-500: #23B9F0; --brand-100: #d6f1fc; --brand-50: #eafafe;
  --navy-900: #0c0d10; --navy-800: #15171c; --navy-700: #1e2128;
  --slate-900: #0f172a; --slate-600: #475569; --slate-500: #64748b; --slate-400: #94a3b8;
  --green-600: #059669; --green-50: #ecfdf5;
  --red-600: #e11d48;  --red-50: #fff1f2;
  --amber-700: #b45309; --amber-50: #fffbeb;
  --teal-700: #0f766e; --teal-50: #f0fdfa;
  /* Surfaces */
  --bg: #f4f5fb; --card: #ffffff; --line: #e6e8f2; --line-strong: #d5d9e8;
  /* Rayons & ombres */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 1px 3px rgba(16,24,40,.06), 0 6px 18px -4px rgba(16,24,40,.08);
  --shadow-focus: 0 0 0 3px rgba(35,185,240,.28);
  /* Typo */
  --font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, "Cascadia Code", Consolas, monospace;
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 14.5px/1.55 var(--font); color: var(--slate-900);
  background: var(--bg); min-height: 100vh;
  font-feature-settings: "cv02", "cv03", "tnum";
}
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
h1 small { color: var(--slate-500); font-weight: 500; font-size: 14px; letter-spacing: 0; }
h2 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 28px 0 10px; color: var(--slate-900); }

/* ---------- Structure : sidebar + contenu ---------- */
body.with-sidebar { display: grid; grid-template-columns: 240px 1fr; }
.container { padding: 28px 36px 60px; max-width: 1440px; min-width: 0; }
body.bare .container { padding: 0; max-width: none; }

.sidebar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #cbd2e8; padding: 20px 14px 14px;
}
.brand { padding: 6px 6px 20px; }
.brand-logo { display: block; width: 100%; height: auto; }

.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.nav-section {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #5b6690; padding: 16px 12px 6px;
}
.sidebar nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: var(--r-sm); color: #b6bfdc; font-weight: 500; font-size: 13.5px;
  transition: background .15s, color .15s;
}
.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.sidebar nav a.active {
  background: linear-gradient(90deg, rgba(35,185,240,.28), rgba(35,185,240,.10));
  color: #fff; box-shadow: inset 2px 0 0 var(--brand-500);
}
.sidebar nav svg, .sidebar-user svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0;
}
.sidebar-user {
  display: flex; align-items: center; gap: 9px; padding: 12px 8px 4px;
  border-top: 1px solid rgba(255,255,255,.08); margin-top: 10px;
}
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #3b4470, #262f55); color: #dbe2ff;
  font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; line-height: 1.25; }
.user-info strong { display: block; color: #fff; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-info small { color: var(--slate-400); font-size: 11px; }
.icon-btn { color: #7d88b0; padding: 6px; border-radius: 7px; display: grid; place-items: center; }
.icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); text-decoration: none; }

/* ---------- En-tête de page ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--slate-900); cursor: pointer;
  font: 600 13px/1.4 var(--font); box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.btn:hover { border-color: var(--brand-500); color: var(--brand-700); text-decoration: none; }
.btn.active { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
button, .btn.primary {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px;
  border: none; border-radius: var(--r-sm); cursor: pointer;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  color: #fff; font: 600 13px/1.4 var(--font);
  box-shadow: 0 1px 2px rgba(10,123,166,.4), inset 0 1px 0 rgba(255,255,255,.15);
  transition: filter .15s, transform .05s;
}
button:hover, .btn.primary:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }
button:active { transform: translateY(1px); }
button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---------- Alertes, tags, hints ---------- */
.alert { padding: 11px 15px; border-radius: var(--r-md); margin: 12px 0; font-size: 13.5px; border: 1px solid; }
.alert.error { background: var(--red-50); color: var(--red-600); border-color: #fecdd3; }
.alert.warn { background: var(--amber-50); color: var(--amber-700); border-color: #fde68a; }
.alert.success { background: var(--green-50); color: var(--green-600); border-color: #a7f3d0; }
.hint { color: var(--slate-500); font-size: 12.5px; }
.muted { color: var(--slate-500); }
.nowrap { white-space: nowrap; }
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 99px;
  background: var(--brand-100); color: var(--brand-700);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
}
.tag.warn { background: var(--amber-50); color: var(--amber-700); }
.tag.vacances { background: var(--teal-50); color: var(--teal-700); }

/* ---------- Connexion ---------- */
body.bare {
  background:
    radial-gradient(1000px 600px at 15% -10%, rgba(35,185,240,.35), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(10,123,166,.28), transparent 55%),
    var(--navy-900);
  display: grid; place-items: center;
}
.login-box {
  width: min(400px, calc(100vw - 40px)); background: var(--card);
  padding: 38px 36px 34px; border-radius: var(--r-lg); box-shadow: 0 24px 60px -12px rgba(0,0,0,.45);
}
.login-logo { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 20px; }
.login-box h1 { text-align: center; font-size: 15px; font-weight: 600; color: var(--slate-500); margin-bottom: 22px; }
.login-box label { display: block; margin: 15px 0 5px; font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.login-box input {
  width: 100%; padding: 10px 12px; margin-top: 4px; font: 14px var(--font);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.login-box input:focus { border-color: var(--brand-500); }
.login-box button { width: 100%; margin-top: 22px; padding: 11px; font-size: 14px; justify-content: center; }

/* ---------- Formulaires ---------- */
.form-grid, .form-narrow {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 24px; max-width: 920px; }
.form-narrow { max-width: 440px; }
.form-grid label, .form-narrow label {
  font-size: 12.5px; font-weight: 600; color: var(--slate-600);
  display: flex; flex-direction: column; gap: 5px;
}
.form-narrow label { margin: 14px 0 0; }
.form-narrow label:first-of-type { margin-top: 0; }
.form-grid label.checkbox { flex-direction: row; align-items: center; gap: 8px; font-size: 13.5px; color: var(--slate-900); }
.form-grid input, .form-grid select, .form-grid textarea, .form-narrow input,
.filter-bar input, .filter-bar select {
  padding: 8px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 400 13.5px var(--font); background: #fff; color: var(--slate-900);
  transition: border-color .15s, box-shadow .15s;
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.form-narrow input:focus { border-color: var(--brand-500); }
.form-grid .full { grid-column: 1 / -1; }
.contrat-summary { background: #f8fafc; border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 10px 14px; font-size: 13.5px; color: var(--slate-600); }
.contrat-summary strong { color: var(--slate-900); }
.form-narrow button { margin-top: 20px; }
.filter-bar { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin: 14px 0 18px; }
.filter-bar label { font-size: 12px; font-weight: 600; color: var(--slate-600); display: flex; flex-direction: column; gap: 4px; }

/* ---------- Navigation semaines / mois ---------- */
.week-nav { display: flex; gap: 7px; }
.weeks-indicator { display: flex; gap: 6px; align-items: center; margin: 4px 0 20px; flex-wrap: wrap; }
.week-chip {
  padding: 4px 11px; border-radius: 99px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line); background: var(--card); color: var(--slate-500);
  box-shadow: var(--shadow-sm); transition: border-color .15s;
}
.week-chip:hover { border-color: var(--brand-500); text-decoration: none; }
.week-chip.filled { background: var(--green-50); border-color: #a7f3d0; color: var(--green-600); }
.week-chip.current { box-shadow: 0 0 0 2px var(--brand-500); }
.legend { margin-left: 10px; font-size: 11.5px; color: var(--slate-500); }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 3px 0 10px; vertical-align: -1px; }
.dot.filled { background: #34d399; }
.dot.empty { background: var(--line-strong); }

/* ---------- Blocs de saisie hebdomadaire ---------- */
.emp-block {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  margin-bottom: 20px; overflow: hidden; box-shadow: var(--shadow-md);
}
.emp-block header {
  display: flex; gap: 16px; align-items: baseline; padding: 13px 18px;
  background: linear-gradient(180deg, #fafbff, #f4f6fd);
  border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.emp-name { font-weight: 700; font-size: 15px; color: var(--slate-900); }
.emp-name:hover { color: var(--brand-700); }
.emp-meta { color: var(--slate-500); font-size: 12.5px; }
.emp-meta strong { color: var(--slate-900); font-variant-numeric: tabular-nums; }

.grid-saisie { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grid-saisie th {
  text-align: left; padding: 8px 10px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--slate-400);
  border-bottom: 1px solid var(--line); background: #fcfcfe;
}
.grid-saisie td { padding: 2px 6px; border-bottom: 1px solid #f1f3fa; }
.grid-saisie tbody tr:last-child td { border-bottom: none; }
.grid-saisie tbody tr:hover { background: #fafbff; }
.grid-saisie input, .grid-saisie select {
  width: 100%; min-width: 54px; padding: 7px 8px; font: 13.5px var(--font);
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.grid-saisie input:hover, .grid-saisie select:hover { border-color: var(--line-strong); background: #fff; }
.grid-saisie input:focus, .grid-saisie select:focus {
  border-color: var(--brand-500); background: #fff; outline: none; box-shadow: var(--shadow-focus);
}
.grid-saisie .c-comment { min-width: 150px; }
.grid-saisie .td-pause { text-align: center; }
.grid-saisie input.c-pause {
  width: 17px; min-width: 17px; height: 17px; accent-color: var(--brand-700);
  cursor: pointer; vertical-align: middle;
}
.grid-saisie .c-total {
  font-weight: 700; text-align: right; min-width: 58px; padding-right: 12px;
  font-variant-numeric: tabular-nums; color: var(--slate-900);
}
.grid-saisie .day-label { white-space: nowrap; color: var(--slate-600); font-weight: 600; min-width: 92px; padding-left: 16px; }
.grid-saisie tr.ferie { background: var(--amber-50); }
.grid-saisie tr.ferie:hover { background: #fef6dd; }
.ferie-tag {
  background: #fbbf24; color: #78350f; border-radius: 5px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; cursor: help; margin-left: 4px;
}
.grid-saisie tr.repos { background: #f1f0fb; }
.grid-saisie tr.repos:hover { background: #ebe9f9; }
.repos-tag {
  background: #a5b4fc; color: #312e81; border-radius: 5px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; cursor: help; margin-left: 4px;
}
.grid-saisie tr.saving { opacity: .55; }
.grid-saisie tr.save-error { background: var(--red-50); }
.c-clear {
  background: none; border: none; box-shadow: none; color: #c7cde0; cursor: pointer;
  font-size: 13px; padding: 4px 8px; border-radius: 6px;
}
.c-clear:hover { color: var(--red-600); background: var(--red-50); filter: none; }
.save-indicator {
  position: fixed; bottom: 24px; right: 24px; z-index: 20;
  background: var(--slate-900); color: #fff; padding: 10px 18px;
  border-radius: 99px; font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: rise .2s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Tableaux de bord ---------- */
.table-scroll {
  overflow-x: auto; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
table.dashboard { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.dashboard th {
  text-align: left; padding: 11px 13px; background: #fafbfe;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--slate-500); border-bottom: 1px solid var(--line); white-space: nowrap;
  position: sticky; top: 0;
}
table.sortable th { cursor: pointer; user-select: none; }
table.sortable th:hover { color: var(--brand-700); }
table.sortable th[data-dir="asc"]::after { content: " ↑"; color: var(--brand-700); }
table.sortable th[data-dir="desc"]::after { content: " ↓"; color: var(--brand-700); }
table.dashboard td {
  padding: 10px 13px; border-bottom: 1px solid #f1f3fa;
  font-variant-numeric: tabular-nums;
}
table.dashboard tbody tr:last-child td { border-bottom: none; }
table.dashboard tbody tr:hover { background: #fafbff; }
table.dashboard td a { font-weight: 600; }
tr.inactif { opacity: .45; }
tr.current-month { background: var(--brand-50); }
tr.current-month:hover { background: var(--brand-50); }
/* Sémantique métier : trop d'heures = mauvais (rouge), heures en rab = bon (vert) */
.good { color: var(--green-600); }
.bad { color: var(--red-600); }

.statut {
  display: inline-flex; align-items: center; padding: 3px 11px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.statut-avance { background: var(--red-50); color: var(--red-600); }
.statut-ok { background: #f1f5f9; color: var(--slate-600); }
.statut-retard { background: var(--green-50); color: var(--green-600); }

/* Vue annuelle */
table.annee td, table.annee th { text-align: right; }
table.annee td:first-child, table.annee th:first-child { text-align: left; }
table.annee .mini { display: block; font-size: 10.5px; font-weight: 600; }
table.annee tr.total-row td { border-top: 2px solid var(--line-strong); font-weight: 700; background: #fafbfe; }
table.annee td.mois-vide { color: var(--slate-400); }
table.annee .col-hs { border-left: 2px solid var(--line-strong); border-right: 2px solid var(--line-strong); background: #fafbff; }
table.annee-simple { width: 100%; max-width: 900px; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); font-size: 14.5px; }
table.annee-simple th { text-align: left; padding: 11px 16px; background: #fafbfe; font-size: 11px;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-500);
  border-bottom: 1px solid var(--line); }
table.annee-simple td { padding: 12px 16px; border-bottom: 1px solid #f1f3fa; font-variant-numeric: tabular-nums; }
table.annee-simple tbody tr:hover { background: #fafbff; }
table.annee-simple td a { font-weight: 700; font-size: 15px; }
table.annee-simple .col-hs { border-left: none; border-right: none; }
table.annee-simple .col-hs strong { font-size: 16px; }

/* ---------- Fiche salarié ---------- */
.prorata-box, .danger-box {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 20px 24px; margin: 16px 0; max-width: 920px; box-shadow: var(--shadow-sm);
}
.prorata-box h2, .danger-box h2 { margin-top: 0; }
.danger-box { border-color: #fecdd3; }
.danger-box h2 { color: var(--red-600); }
table.kv th {
  text-align: left; padding: 5px 22px 5px 0; color: var(--slate-500);
  font-weight: 600; font-size: 12.5px; white-space: nowrap; vertical-align: top;
}
table.kv td { padding: 5px 0; font-variant-numeric: tabular-nums; }
tr.highlight { background: var(--amber-50); }
.big { font-size: 19px; letter-spacing: -.01em; }

/* ---------- Graphiques ---------- */
.charts { display: flex; flex-wrap: wrap; gap: 16px; }
.chart-card {
  margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px 12px; box-shadow: var(--shadow-sm);
}
.chart-card figcaption {
  font-weight: 700; font-size: 13px; display: flex; justify-content: space-between;
  gap: 14px; margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.chart-card small { color: var(--slate-500); font-size: 11px; }
.lg-real { color: var(--brand-700); font-weight: 600; }
.lg-obj { color: var(--slate-400); }
.chart-card polyline[stroke="#2563eb"] { stroke: var(--brand-500); }

/* ---------- Audit & divers ---------- */
.audit-table .json { font-family: var(--mono); font-size: 10.5px; max-width: 260px; overflow-wrap: break-word; color: var(--slate-600); }
.lock-bar {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 16px; margin: 12px 0 18px; display: flex; gap: 16px; align-items: center;
  box-shadow: var(--shadow-sm);
}

/* ---------- Cartes de pilotage (reste à shifter) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin: 6px 0 20px; }
.card {
  background: var(--card); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: var(--r-lg); padding: 16px 18px 14px; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; gap: 12px;
}
.statut-border-avance { border-left-color: var(--red-600); }
.statut-border-ok { border-left-color: var(--slate-400); }
.statut-border-retard { border-left-color: var(--green-600); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-name { font-weight: 700; font-size: 15.5px; color: var(--slate-900); }
.card-name:hover { color: var(--brand-700); }
.gauge-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.gauge-label span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-400); }
.gauge-value { font-size: 15px; letter-spacing: -.01em; color: var(--green-600); font-variant-numeric: tabular-nums; }
.gauge-value.bad { color: var(--red-600); }
.bar { height: 9px; border-radius: 99px; background: #eceef7; overflow: hidden; margin-bottom: 4px; }
.bar .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); transition: width .3s; }
.bar .fill.over { background: linear-gradient(90deg, #f87171, var(--red-600)); }
.card-foot { font-size: 12.5px; color: var(--slate-600); border-top: 1px dashed var(--line); padding-top: 9px; }
.table-details { margin: 6px 0 8px; }
.table-details > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--slate-500); padding: 6px 0; user-select: none; }
.table-details > summary:hover { color: var(--brand-700); }
.table-details[open] > summary { margin-bottom: 8px; }

/* ---------- Onglets salariés (saisie) ---------- */
.emp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 2px 0 14px; }
.emp-tab {
  padding: 8px 18px; border-radius: 99px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--slate-600); font: 600 13.5px var(--font);
  cursor: pointer; box-shadow: var(--shadow-sm);
}
.emp-tab:hover { border-color: var(--brand-500); color: var(--brand-700); filter: none; }
.emp-tab.active {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  border-color: var(--brand-700); color: #fff;
}
.week-jump { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 13px var(--font); background: var(--card); }

/* ---------- Rapprochement paie ---------- */
table.rappro td { padding: 12px; vertical-align: middle; }
table.rappro tr.saving { opacity: .55; }
table.rappro tr.save-error { background: var(--red-50); }
.rappro-nom { font-weight: 600; }
.rappro-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rappro-appli {
  color: var(--slate-500); font-size: 11.5px; white-space: nowrap; background: #f4f5fb;
  border-radius: 99px; padding: 3px 9px;
}
.rappro-appli strong { color: var(--slate-600); font-variant-numeric: tabular-nums; }
.rappro-input.rp-cp, .rappro-input.rp-abs {
  width: 84px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: 13.5px var(--font); background: #fff; transition: border-color .15s, box-shadow .15s;
}
.rappro-input.rp-comment { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: 13.5px var(--font); }
.rappro-input:focus { border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-focus); }
.rappro-ecart {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap;
}
.rappro-ecart.match { background: var(--green-50); color: var(--green-600); }
.rappro-ecart.mismatch { background: var(--red-50); color: var(--red-600); }
.rappro-statut { white-space: nowrap; }
.rappro-verif { display: block; margin-top: 4px; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  body.with-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 14px; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .nav-section { display: none; }
  .brand { display: none; }
  .sidebar-user { border-top: none; margin: 0 0 0 auto; padding: 0; }
  .user-info { display: none; }
  .container { padding: 18px 16px 50px; }
}

/* ============================================================
   Portail AE — layout dédié (pas de sidebar), même identité visuelle
   ============================================================ */
body.ae-shell {
  margin: 0; min-height: 100vh;
  /* Plusieurs taches de lumière réparties sur toute la hauteur (positions en %, donc
     relatives à la hauteur totale de la page, pas juste le haut de l'écran) — une longue
     page (7 jours de tuiles) avec seulement 2 taches en haut/bas laissait tout le milieu
     complètement plat. */
  background:
    radial-gradient(1000px 600px at 15% -5%, rgba(35,185,240,.32), transparent 60%),
    radial-gradient(800px 500px at 100% 30%, rgba(10,123,166,.22), transparent 55%),
    radial-gradient(850px 550px at 0% 62%, rgba(35,185,240,.18), transparent 55%),
    radial-gradient(900px 500px at 105% 92%, rgba(10,123,166,.26), transparent 55%),
    var(--navy-900);
}
/* Pas de chrome partagé (pas de sidebar ni de topbar) : chaque page gère son propre
   centrage/padding, le logo est un élément de PAGE (grand, centré), pas de nav globale. */
.ae-container { padding: 0; max-width: none; margin: 0; }

.ae-brand-wrap { display: flex; justify-content: center; padding: 34px 20px 0; }
.ae-brand-logo { display: block; width: 220px; height: auto; }

.ae-login-box {
  width: min(400px, calc(100vw - 40px)); background: var(--card); margin: 30px auto 60px;
  padding: 34px 30px; border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.ae-login-box h1 { text-align: center; font-size: 19px; margin: 0 0 4px; }
.ae-login-sub { text-align: center; color: var(--slate-500); font-size: 13px; margin: 0 0 20px; }
.ae-login-box label { display: block; margin: 15px 0 5px; font-size: 12.5px; font-weight: 600; color: var(--slate-600); }
.ae-login-box input {
  width: 100%; padding: 12px 12px; margin-top: 4px; font: 16px var(--font);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
}
.ae-login-box input:focus { border-color: var(--brand-500); }
.ae-login-box button { width: 100%; margin-top: 22px; padding: 13px; font-size: 15px; justify-content: center; }

/* Bouton "afficher le mot de passe" (voir public/assets/js/password-toggle.js). Le
   `margin-top` normalement porté par l'input est déplacé sur le conteneur
   `.ae-password-field` (input remis à 0) pour que le bouton positionné en absolu se
   cale sur une boîte dont la hauteur correspond exactement à celle de l'input, sans
   dépendre d'un éventuel collapsing de marge entre l'input et son parent. */
.ae-password-field { position: relative; margin-top: 4px; }
.ae-password-field input { margin-top: 0; padding-right: 42px; }
/* Sélecteur qualifié par `.ae-login-box` : la règle générique `.ae-login-box button`
   ci-dessus (largeur 100%, marge, padding) est plus spécifique qu'un simple
   `.ae-password-toggle` isolé et l'emporterait sinon, cassant le positionnement en
   icône flottante dans le champ. */
.ae-login-box .ae-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: auto; margin: 0; padding: 6px; font-size: inherit;
  background: none; box-shadow: none; color: var(--slate-500); border-radius: var(--r-sm);
}
.ae-login-box .ae-password-toggle:hover { filter: none; color: var(--slate-900); background: var(--bg); }
.ae-login-box .ae-password-toggle:active { transform: translateY(-50%); }
.ae-back-link { display: block; text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--slate-500); }

/* ---------- Connexion biométrique (WebAuthn/passkeys) ---------- */
.ae-login-divider {
  display: flex; align-items: center; gap: 10px; margin: 18px 0;
  color: var(--slate-500); font-size: 12px;
}
.ae-login-divider::before, .ae-login-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.ae-passkey-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ae-passkey-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg);
}
.ae-passkey-item form { margin: 0; }
.ae-passkey-meta { font-size: 11.5px; color: var(--slate-500); margin-top: 2px; }

/* Proposition d'activation à la 1ʳᵉ connexion (voir DispoController::index()) — modale
   volontairement discrète (pas de croix de fermeture agressive, "Plus tard" suffit),
   posée une seule fois donc pas besoin d'un traitement plus riche. */
.ae-modal-overlay {
  position: fixed; inset: 0; background: rgba(12,13,16,.6); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* Sans cette règle, `element.hidden = true` en JS n'a aucun effet visuel ici : la règle
   ci-dessus (display:flex, origine "auteur") l'emporte sur le [hidden]{display:none}
   par défaut du navigateur (origine "user agent", toujours perdante face à l'auteur à
   spécificité égale) — bug réel observé en prod ("Plus tard" ne fermait pas la modale
   avant un rechargement complet de page). */
.ae-modal-overlay[hidden] { display: none; }
.ae-modal-box {
  width: min(380px, 100%); background: var(--card); border-radius: var(--r-lg);
  box-shadow: var(--shadow-md); padding: 26px 24px; text-align: center;
}
.ae-modal-box h2 { margin: 0 0 10px; font-size: 16px; }
.ae-modal-box .hint { margin: 0 0 18px; text-align: left; }
.ae-modal-box button { width: 100%; margin-top: 0; }
.ae-modal-box button + button { margin-top: 10px; }

.ae-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 22px; box-shadow: var(--shadow-md); margin-top: 20px;
}
.ae-card-narrow { max-width: 440px; margin: 40px auto 0; }
.ae-card h1 { font-size: 18px; }

.tag.ok { background: var(--green-50); color: var(--green-600); }
.tag.bad { background: var(--red-50); color: var(--red-600); }

/* Bannière "Ajouter à l'écran d'accueil" (iOS/Safari uniquement — pas d'API native
   `beforeinstallprompt` sur WebKit contrairement à Chrome/Android, donc la seule option
   est d'expliquer la manip en 2 étapes ; voir webauthn.js/layout.php pour la détection
   et le mémo de fermeture localStorage). */
.ae-ios-install {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
  max-width: 420px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  background: var(--card); color: var(--slate-900);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  padding: 12px 14px; font-size: 13px; line-height: 1.4;
}
.ae-ios-install[hidden] { display: none; }
.ae-ios-install svg { flex: none; color: var(--brand-700); }
.ae-ios-install strong { white-space: nowrap; }
.ae-ios-install button {
  flex: none; background: none; box-shadow: none; color: var(--slate-500);
  font-size: 20px; line-height: 1; padding: 4px 6px; margin: 0;
}
.ae-ios-install button:hover { filter: none; color: var(--slate-900); }

/* ---------- Écran « Mes disponibilités » — tuiles ---------- */
.ae-dispos-page { max-width: 420px; margin: 0 auto; padding: 0 18px 50px; display: flex; flex-direction: column; align-items: center; }
.ae-page-title { margin: 18px 0 2px; text-align: center; font-size: 16.5px; font-weight: 700; color: #fff; }

.ae-week-nav { display: flex; align-items: center; gap: 16px; margin: 12px 0 16px; }
.ae-week-arrow {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.07); display: flex; align-items: center; justify-content: center;
  color: #cbd2e8; text-decoration: none; padding: 0;
}
.ae-week-arrow:hover { background: rgba(255,255,255,.14); }
.ae-week-label { color: #cbd2e8; font-size: 13.5px; font-weight: 650; min-width: 150px; text-align: center; }

.ae-status-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; margin-bottom: 22px;
}
.ae-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700;
}
.ae-status-warn { background: var(--amber-50); color: var(--amber-700); }
.ae-status-ok { background: var(--green-50); color: var(--green-600); }

/* Marquer toute la semaine indisponible en un clic (vacances, arrêt…) plutôt que de
   décocher les 21 cases une par une — un simple lien plutôt qu'un vrai bouton, pour ne
   pas rivaliser visuellement avec "Confirmer mes disponibilités". */
.ae-link-btn {
  background: none; border: none; padding: 4px 2px; font-size: 12.5px; font-weight: 650;
  color: #a9b1cc; text-decoration: underline; cursor: pointer;
}
.ae-link-btn:hover { color: #fff; }

/* Un seul panneau blanc pour toute la semaine (plus lisible qu'une tuile isolée par
   tuile flottant directement sur le fond sombre) — la sélection en elle-même reste des
   tuiles teintées (voir .ae-tile) à l'intérieur de ce panneau. */
.ae-days {
  width: 100%; background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-md);
  padding: 20px 18px; display: flex; flex-direction: column; margin-bottom: 26px;
}
/* Une ligne par jour : date à gauche (largeur fixe, façon grille de planning admin),
   tuiles à droite — plus compact qu'un intitulé au-dessus de chaque rangée de tuiles.
   .ae-day-block encapsule .ae-day-row (la ligne ci-dessus) + un bandeau de badges
   optionnel en dessous (vacances/fermé), sur toute la largeur (jamais dans les 60px de
   .ae-day-heading — un badge texte n'y tiendrait pas, voir CLAUDE.md). */
.ae-day-block {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #eef0f6;
}
.ae-day-block:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ae-day-row { display: flex; align-items: center; gap: 18px; }
.ae-day-heading {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 60px; flex-shrink: 0;
}
.ae-day-name { color: var(--slate-900); font-size: 13px; font-weight: 700; text-transform: capitalize; line-height: 1.25; }
.ae-day-date { color: var(--slate-500); font-size: 11px; font-weight: 600; }
.ae-tiles-row { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Aligné sous le libellé du jour (à gauche), pas sous les tuiles — un décalage à 78px
   (60px heading + 18px gap) donnait l'impression que le badge concernait spécifiquement
   la case "Matin" plutôt que la journée entière (retour terrain). */
.ae-day-badges { display: flex; gap: 6px; flex-wrap: wrap; }
/* Jour fermé côté "heures" (poussé — voir CLAUDE.md) : tuiles grisées, jamais cochables,
   même traitement que .planning-closed côté heures (plus marqué que le simple
   :disabled — .78 d'opacité — utilisé pour une semaine juste verrouillée). */
.ae-day-closed .ae-tile { filter: grayscale(1); opacity: .5; }
.tag.ferme { background: #eef0f6; color: var(--slate-500); }

.ae-tile {
  position: relative; background: var(--bg); border: 1.5px solid transparent; border-radius: 12px;
  padding: 13px 4px 11px; text-align: center; cursor: pointer; font-family: inherit;
  min-height: 48px; min-width: 0; -webkit-appearance: none; appearance: none;
  /* flex colonne : empile titre/horaire quel que soit le tag (span/div) des enfants,
     plus robuste qu'un simple display:block sur les enfants. */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.ae-tile:hover { border-color: var(--brand-500); }
.ae-tile-selected { background: var(--brand-500); border-color: var(--brand-500); box-shadow: 0 4px 14px -2px rgba(35,185,240,.5); }
.ae-tile-title { font-size: 12.5px; font-weight: 700; color: var(--slate-900); }
.ae-tile-selected .ae-tile-title { color: #fff; }
.ae-tile-subtitle { font-size: 10.5px; font-weight: 600; color: var(--slate-600); white-space: nowrap; }
.ae-tile-selected .ae-tile-subtitle { color: rgba(255,255,255,.85); }
.ae-tile-check { position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; color: #fff; }
.ae-tile:disabled { cursor: not-allowed; opacity: .78; }
.ae-tile:disabled:hover { border-color: var(--line); }
.ae-tile-selected:disabled:hover { border-color: var(--brand-500); }

.ae-action-btn {
  width: 100%; padding: 16px; font-size: 15px; font-weight: 700; border: none; border-radius: 14px;
  cursor: pointer; font-family: inherit;
}
.ae-confirm-btn { color: #fff; background: var(--brand-500); box-shadow: 0 6px 18px -4px rgba(35,185,240,.45); }
.ae-confirm-btn:hover { background: var(--brand-700); }
.ae-unlock-btn { color: #cbd2e8; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.ae-unlock-btn:hover { background: rgba(255,255,255,.14); }

.ae-footer-links { margin-top: 18px; font-size: 12px; color: #7d88b0; text-align: center; }
.ae-footer-links a { color: #9aa4c8; }
.ae-footer-links a:hover { color: #fff; }

/* ---------- Mobile : la plupart des AE utilisent un téléphone ---------- */
@media (max-width: 640px) {
  .ae-brand-logo { width: 170px; }
  .ae-dispos-page { padding: 0 12px 42px; }
}

/* ============================================================
   Grille de planning (admin/gestionnaire) — remplace le tableur "New Planning Annuel"
   ============================================================ */
.planning-scroll {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); box-shadow: var(--shadow-md);
}
.planning-grid { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.planning-grid th, .planning-grid td { border: 1px solid var(--line); padding: 6px 4px; text-align: center; white-space: nowrap; }
.planning-grid thead th {
  background: linear-gradient(180deg, #eef2fb, #f6f8fd); font-weight: 700; color: var(--slate-600);
  position: sticky; top: 0; z-index: 3;
}
.planning-daynum th { font-size: 13px; padding: 7px 4px; }
.planning-weekend { background: linear-gradient(180deg, var(--brand-100), #ddf2fb) !important; color: var(--brand-700) !important; }
.planning-name-col {
  position: sticky; left: 0; z-index: 2; background: var(--card);
  text-align: left !important; padding: 6px 14px !important; min-width: 160px; font-weight: 650;
}
.planning-grid thead .planning-name-col { z-index: 4; }
.planning-total-col { font-weight: 750; min-width: 68px; background: #f6f8fd; color: var(--brand-700); }
.planning-daytoggle {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: inherit;
  padding: 3px 4px; border-radius: 6px; width: 100%;
}
.planning-daytoggle:hover { background: var(--brand-100); }
.planning-slotrow th { font-size: 10.5px; color: var(--slate-500); font-weight: 650; background: #fbfcff; }
.planning-cell { position: relative; }
.planning-cell input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-500); cursor: pointer; margin: 0; }
.planning-cell input[type="checkbox"]:disabled { cursor: not-allowed; }
.planning-warn { position: absolute; top: -1px; right: 0; font-size: 10px; cursor: help; }

/* Séparation nette entre chaque jour (plus marquée qu'entre M/AM/S d'un même jour) */
.planning-day-end { border-right: 3px solid var(--line-strong) !important; }

/* Jour fermé (établissement) : gris neutre */
.planning-closed { background: repeating-linear-gradient(135deg, #eef0f7, #eef0f7 5px, #e4e7f2 5px, #e4e7f2 10px) !important; }
.planning-closed input[type="checkbox"] { opacity: .3; }

/* Salarié en congé/absence ce jour-là : rayure rouge, bien distincte du gris "fermé" */
.planning-absence { background: repeating-linear-gradient(135deg, var(--red-50), var(--red-50) 5px, #ffd9de 5px, #ffd9de 10px) !important; }
.planning-absence input[type="checkbox"] { opacity: .3; }

/* Salarié en formation : violet, distinct des autres états — pas dispo pour une
   session mais les heures comptent quand même (voir PlanningController::saveShift). */
.planning-formation { background: #f5f3ff !important; }
.planning-formation-badge { position: absolute; top: -1px; right: 0; width: 11px; height: 11px; color: #7c3aed; }

.planning-row-ae .planning-name-col { background: var(--brand-50); border-left: 3px solid var(--brand-500); }
.planning-row-intendant .planning-name-col { background: var(--amber-50); border-left: 3px solid var(--amber-700); }
.planning-row-gm .planning-name-col { background: #fff; border-left: 3px solid var(--line-strong); }
tr.ae-week-ok .planning-cell:not(.planning-closed) { background: var(--green-50); }
tr.ae-week-ko .planning-cell:not(.planning-closed) { background: var(--red-50); }

.planning-besoin-row td { font-weight: 700; color: var(--slate-600); background: #fbfcff; }
.planning-alert { background: var(--red-50) !important; color: var(--red-600) !important; }

.planning-hebdo { color: var(--slate-500); font-weight: 500; font-size: 11px; }

/* ---------- Réglages planning : besoins & vacances scolaires ---------- */
.besoin-panel {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px; box-shadow: var(--shadow-sm); margin-top: 20px; max-width: 720px;
}
.besoin-panel-head h2 { margin: 0 0 4px; }
.besoin-panel-head .hint { margin: 0 0 18px; max-width: 640px; }
.besoin-table { width: 100%; border-collapse: collapse; }
.besoin-table th {
  text-align: center; font-size: 11.5px; font-weight: 700; color: var(--slate-500);
  text-transform: uppercase; letter-spacing: .03em; padding: 6px 8px 10px; border-bottom: 2px solid var(--line-strong);
}
.besoin-jour-col { text-align: left !important; }
.besoin-table td { padding: 7px 8px; border-top: 1px solid var(--line); text-align: center; }
.besoin-table td.besoin-jour-col, .besoin-table tr td:first-child { text-align: left; font-weight: 600; }
.besoin-weekend { background: var(--brand-50); }
.besoin-input {
  width: 60px; text-align: center; padding: 6px 4px; border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); font: 600 13.5px var(--font); color: var(--slate-900);
}
.besoin-input:focus { border-color: var(--brand-500); outline: none; box-shadow: var(--shadow-focus); }
.besoin-panel-footer { margin-top: 18px; }

/* ============================================================
   Administration du portail AE (gestion des comptes) — appli ae-portal.
   Pas de sidebar (2 écrans seulement) : une simple barre du haut.
   ============================================================ */
body.admin-shell { margin: 0; background: var(--bg); min-height: 100vh; }
.admin-topbar {
  display: flex; align-items: center; gap: 14px; padding: 12px 24px;
  background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #cbd2e8; position: sticky; top: 0; z-index: 5;
}
/* logo2.png est déjà pensé pour un fond sombre (texte blanc, transparent) — pas besoin
   d'un encadré blanc par-dessus, contrairement à ce qu'imposait cette règle avant. */
.admin-topbar-logo { height: 28px; width: auto; }
.admin-topbar-title { font-weight: 650; font-size: 13.5px; color: #fff; flex: 1; }
.admin-topbar-user { display: flex; align-items: center; gap: 14px; font-size: 13px; color: #b6bfdc; }
.admin-topbar-user a { color: #9aa4c8; }
.admin-topbar-user a:hover { color: #fff; }