/* =====================================================================
   GESTETAB — Design System (CSS pur, aucune dépendance)
   Palette : vert institutionnel + accent ambre, typo system/Inter
   ===================================================================== */
:root {
  --green-950: #07211A;
  --green-900: #0B2F24;
  --green-800: #0F3D2E;
  --green-700: #0F5132;
  --green-600: #146C43;
  --green-500: #1B8752;
  --green-100: #E3F2EA;
  --green-050: #F2F9F5;
  --gold-600: #D97706;
  --gold-100: #FEF3C7;
  --red-600: #DC2626;
  --red-100: #FEE2E2;
  --blue-600: #2563EB;
  --blue-100: #DBEAFE;
  --ink: #101828;
  --muted: #667085;
  --line: #E4E9EC;
  --bg: #F4F7F5;
  --card: #FFFFFF;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .18);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15.5px; }
body {
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.02rem; }
p { margin: 0; }
.text-muted { color: var(--muted); }
.small { font-size: .84rem; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
strong { font-weight: 650; }

/* ---------------- Layout applicatif ---------------- */
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: 258px; flex-shrink: 0; background: linear-gradient(180deg, var(--green-950), var(--green-900));
  color: #D7E7DE; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px 14px; color: #fff; }
.brand .logo-bubble {
  width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(135deg, var(--green-500), var(--gold-600));
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; color: #fff; letter-spacing: .5px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22);
}
.brand b { font-size: 1.14rem; letter-spacing: .4px; display: block; }
.brand span { font-size: .72rem; color: #9DBFAE; display: block; margin-top: -2px; }
.nav-section { padding: 14px 18px 6px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #7FA795; font-weight: 700; }
.nav-link {
  display: flex; align-items: center; gap: 11px; padding: 9px 18px; color: #C9DED3;
  font-size: .92rem; font-weight: 500; border-left: 3px solid transparent;
}
.nav-link svg { width: 19px; height: 19px; flex-shrink: 0; opacity: .82; }
.nav-link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; }
.nav-link.active { background: rgba(255,255,255,.09); color: #fff; border-left-color: var(--gold-600); }
.sidebar-foot { margin-top: auto; padding: 14px 18px; font-size: .72rem; color: #7FA795; border-top: 1px solid rgba(255,255,255,.08); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; padding: 10px 22px; min-height: 60px;
}
.topbar h1 { font-size: 1.08rem; }
.topbar .spacer { flex: 1; }
.burger { display: none; background: none; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); margin: 3px 0; border-radius: 2px; }
.bell-wrap { position: relative; }
.bell { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.bell:hover { background: var(--green-050); }
.bell svg { width: 19px; height: 19px; }
.bell .dot {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--red-600); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 9px;
  display: grid; place-items: center; border: 2px solid #fff;
}
.notif-menu {
  display: none; position: absolute; right: 0; top: 48px; width: 340px; max-height: 420px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 50;
}
.notif-menu.open { display: block; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: .86rem; }
.notif-item:hover { background: var(--green-050); text-decoration: none; }
.notif-item.unread { background: var(--green-050); }
.notif-item b { display: block; font-size: .88rem; }
.notif-item span { color: var(--muted); font-size: .8rem; }
.user-chip { display: flex; align-items: center; gap: 10px; padding: 5px 6px; border-radius: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--green-700); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .95rem; }
.user-chip .who { line-height: 1.15; }
.user-chip .who b { display: block; font-size: .88rem; }
.user-chip .who span { font-size: .72rem; color: var(--muted); }
.content { padding: 24px 26px 48px; max-width: 1280px; width: 100%; }

/* ---------------- Composants ---------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { display: flex; align-items: center; gap: 9px; }
.card-head .ico { width: 34px; height: 34px; border-radius: 9px; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; font-size: 1rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin-top: 3px; font-size: .92rem; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.stat { display: flex; gap: 14px; align-items: center; }
.stat .ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0; }
.stat .ico.green { background: var(--green-100); color: var(--green-700); }
.stat .ico.gold { background: var(--gold-100); color: var(--gold-600); }
.stat .ico.red { background: var(--red-100); color: var(--red-600); }
.stat .ico.blue { background: var(--blue-100); color: var(--blue-600); }
.stat b { font-size: 1.45rem; display: block; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .84rem; }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; background: #fff; }
.table th {
  text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 700; background: #FAFBFA; padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--green-050); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font-weight: 600; font-size: .9rem;
  border: 1px solid transparent; cursor: pointer; transition: .15s; text-decoration: none !important;
  line-height: 1.2;
}
.btn-primary { background: var(--green-700); color: #fff; }
.btn-primary:hover { background: var(--green-600); }
.btn-gold { background: var(--gold-600); color: #fff; }
.btn-gold:hover { filter: brightness(1.06); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--green-600); color: var(--green-700); }
.btn-danger { background: #fff; border-color: var(--red-600); color: var(--red-600); }
.btn-danger:hover { background: var(--red-600); color: #fff; }
.btn-sm { padding: 5px 11px; font-size: .8rem; border-radius: 8px; }
.btn-xs { padding: 3px 9px; font-size: .74rem; border-radius: 7px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.badge-green { background: var(--green-100); color: var(--green-700); }
.badge-gold { background: var(--gold-100); color: #92400E; }
.badge-red { background: var(--red-100); color: #B91C1C; }
.badge-blue { background: var(--blue-100); color: #1D4ED8; }
.badge-amber { background: var(--gold-100); color: #92400E; }
.badge-purple { background: #F3E8FF; color: #7E22CE; }
.badge-gray { background: #EEF1F3; color: #4A5568; }

/* Sélecteur de langue FR / EN */
.lang-switch { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 2px; }
.lang-switch button { border: none; background: none; cursor: pointer; font-weight: 700; font-size: .72rem; padding: 4px 9px; border-radius: 8px; color: var(--muted); font-family: inherit; }
.lang-switch button.on { background: var(--green-700); color: #fff; }
.lang-switch button:hover:not(.on) { background: var(--green-050); color: var(--green-700); }

/* Formulaires */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .8rem; font-weight: 600; color: #344054; }
.input, select.input, textarea.input {
  width: 100%; padding: 9px 12px; border: 1px solid #D0D8DD; border-radius: 10px; font: inherit;
  font-size: .92rem; background: #fff; color: var(--ink);
}
.input:focus { outline: 2px solid var(--green-500); outline-offset: 1px; border-color: var(--green-500); }
textarea.input { resize: vertical; min-height: 84px; }
.check { width: 17px; height: 17px; accent-color: var(--green-700); }
.hint { font-size: .76rem; color: var(--muted); }
.field .error, .errorlist { color: var(--red-600); font-size: .78rem; list-style: none; }

/* Panneau repliable (formulaires d'ajout en page) */
details.panel { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
details.panel > summary {
  cursor: pointer; padding: 13px 18px; font-weight: 600; font-size: .94rem;
  background: var(--green-050); list-style: none; display: flex; align-items: center; gap: 9px;
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: '+'; font-weight: 800; color: var(--green-700); font-size: 1.05rem; }
details.panel[open] > summary::before { content: '–'; }
details.panel .panel-body { padding: 18px; }

/* Alertes / messages flash */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 15px; border-radius: 11px; font-size: .9rem; margin-bottom: 10px; border: 1px solid; }
.alert.success { background: var(--green-100); border-color: #BFE3CF; color: #14532D; }
.alert.error { background: var(--red-100); border-color: #FECACA; color: #7F1D1D; }
.alert.warning { background: var(--gold-100); border-color: #FDE68A; color: #78350F; }
.alert.info { background: var(--blue-100); border-color: #BFDBFE; color: #1E3A8A; }

/* Onglets simples */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tabs a { padding: 8px 15px; border-radius: 999px; font-size: .88rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); background: #fff; }
.tabs a:hover { text-decoration: none; color: var(--green-700); }
.tabs a.on { background: var(--green-700); color: #fff; border-color: var(--green-700); }

/* Vide */
.empty { text-align: center; padding: 38px 16px; color: var(--muted); }
.empty .big { font-size: 2rem; margin-bottom: 6px; }

/* Chrono / listes */
.list-plain { list-style: none; }
.list-plain li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.list-plain li:last-child { border-bottom: none; }

/* Grille emploi du temps */
.timetable { width: 100%; border-collapse: collapse; font-size: .8rem; table-layout: fixed; }
.timetable th { background: var(--green-700); color: #fff; padding: 9px 6px; border: 1px solid var(--green-800); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.timetable td { border: 1px solid var(--line); padding: 6px; vertical-align: top; min-height: 44px; height: 52px; background: #fff; }
.tt-slot { background: var(--green-050); border: 1px solid #CBE4D6; border-radius: 8px; padding: 5px 7px; height: 100%; }
.tt-slot b { display: block; font-size: .78rem; color: var(--green-800); }
.tt-slot span { font-size: .72rem; color: var(--muted); }

/* Statuts d'appel */
.radio-row { display: flex; gap: 5px; flex-wrap: wrap; }
.radio-row label { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; border: 1px solid var(--line); padding: 4px 9px; border-radius: 999px; cursor: pointer; }
.radio-row input { accent-color: var(--green-700); }
.radio-row label.sel-green { background: var(--green-100); border-color: var(--green-500); }
.radio-row label.sel-red { background: var(--red-100); border-color: var(--red-600); }
.radio-row label.sel-gold { background: var(--gold-100); border-color: var(--gold-600); }

/* ---------------- Page publique (landing / login) ---------------- */
.public-nav { display: flex; align-items: center; gap: 12px; padding: 16px 5vw; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.public-main { max-width: 1120px; margin: 0 auto; padding: 0 5vw; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 64px 0 44px; }
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }
.hero h1 { font-size: 2.3rem; line-height: 1.15; letter-spacing: -.02em; }
.hero h1 em { color: var(--green-600); font-style: normal; }
.hero p.lead { color: var(--muted); font-size: 1.05rem; margin: 16px 0 26px; max-width: 54ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-card { background: linear-gradient(150deg, var(--green-900), var(--green-700)); border-radius: 22px; color: #fff; padding: 30px; box-shadow: var(--shadow-lg); }
.hero-card .row { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: .94rem; }
.hero-card .row:last-child { border-bottom: none; }
.hero-card .row b { font-size: 1.15rem; }
.pill { display: inline-flex; gap: 7px; align-items: center; background: var(--green-100); color: var(--green-700); font-weight: 700; font-size: .78rem; padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; }
.feature { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.feature .ico { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; font-size: 1.15rem; }
.feature h3 { margin-bottom: 4px; font-size: .98rem; }
.feature p { color: var(--muted); font-size: .86rem; }
.section-title { text-align: center; margin: 46px 0 8px; font-size: 1.5rem; }
.section-sub { text-align: center; color: var(--muted); margin-bottom: 28px; }
.portals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 980px) { .portals-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .portals-grid { grid-template-columns: 1fr; } }
.portal { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; text-align: left; transition: .18s; }
.portal:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--green-500); }
.portal .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 12px; }
.portal h3 { font-size: 1rem; margin-bottom: 6px; }
.portal p { font-size: .84rem; color: var(--muted); }
.public-footer { border-top: 1px solid var(--line); background: #fff; margin-top: 60px; padding: 26px 5vw; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }

/* Login */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { display: none; } }
.auth-side { background: linear-gradient(160deg, var(--green-950), var(--green-800)); color: #E7F3EC; padding: 56px 48px; display: flex; flex-direction: column; justify-content: space-between; }
.auth-side h2 { color: #fff; font-size: 1.7rem; margin: 22px 0 12px; }
.auth-side ul { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.auth-side li { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: #C9DED3; }
.auth-form { display: grid; place-items: center; padding: 40px 20px; }
.auth-box { width: 100%; max-width: 420px; }
.auth-box .card { padding: 30px; }

/* Timeline cahier de texte */
.entry-date { font-weight: 700; color: var(--green-700); white-space: nowrap; min-width: 86px; }

/* Progression */
.progress { height: 8px; background: #E7ECEA; border-radius: 99px; overflow: hidden; min-width: 90px; }
.progress > div { height: 100%; background: var(--green-600); border-radius: 99px; }

/* Impression */
@media print { .sidebar, .topbar, .btn, .alert { display: none !important; } .content { padding: 0; } }

/* Mobile */
@media (max-width: 960px) {
  .sidebar { position: fixed; left: -280px; transition: .22s; box-shadow: var(--shadow-lg); }
  .sidebar.open { left: 0; }
  .burger { display: block; }
  .content { padding: 18px 14px 40px; }
  html { font-size: 15px; }
}
.overlay { display: none; position: fixed; inset: 0; background: rgba(7, 33, 26, .45); z-index: 35; }
.overlay.show { display: block; }

/* ===================== Modale caméra (photo élève) ===================== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(7, 33, 26, .55); z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-box { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; padding: 22px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#camVideo { width: 100%; max-height: 320px; border-radius: 10px; background: #0B2F24; object-fit: cover; }
.cam-error { background: var(--red-100); color: #991B1B; border-radius: 10px; padding: 10px 12px; font-size: .85rem; margin-top: 10px; }

/* ===================== Chat direct Parents ↔ Établissement ===================== */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
@media (max-width: 880px) { .chat-layout { grid-template-columns: 1fr; } }
.chat-list { display: grid; gap: 6px; max-height: 70vh; overflow: auto; }
.chat-thread-item { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: inherit; }
.chat-thread-item:hover { background: var(--green-050); border-color: var(--green-500); }
.chat-thread-item.active { border-color: var(--green-600); background: var(--green-050); }
.chat-thread-item b { font-size: .92rem; }
.chat-thread-item .small { color: var(--muted); }
.chat-badge { background: var(--green-600); color: #fff; border-radius: 99px; font-size: .72rem; padding: 2px 8px; font-weight: 700; }
.chat-window { display: flex; flex-direction: column; height: 72vh; min-height: 420px; }
.chat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--green-050); border-radius: 12px; border: 1px solid var(--line); }
.chat-msg { max-width: 76%; padding: 9px 13px; border-radius: 14px; font-size: .92rem; line-height: 1.45; box-shadow: var(--shadow); }
.chat-msg .meta { display: block; font-size: .7rem; opacity: .75; margin-top: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--green-700); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.them { align-self: flex-start; background: #fff; color: var(--ink); border-bottom-left-radius: 4px; }
.chat-form { display: flex; gap: 8px; margin-top: 12px; }
.chat-form textarea { flex: 1; resize: none; min-height: 46px; max-height: 120px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font: inherit; }
.chat-form textarea:focus { outline: 2px solid var(--green-500); }
.chat-empty { color: var(--muted); text-align: center; margin: auto; font-size: .9rem; }

/* Attribut hidden prioritaire (modale caméra) */
[hidden] { display: none !important; }