/* Centralized styles generated from page inline styles. */

/* accueil.html */
body.page-accueil {
        --bg: #0f1720;
        --bg-gradient: #0b1118;
        --card: #18212b;
        --text: #e2e8f0;
        --accent: #2ecc71;
        --muted: #94a3b8;
        --border: #243041;
        --input-bg: #1f2937;
        --success: #2ecc71;
        --danger: #ef4444;
        --nav-bg: #0b1118;
        --soft: #334155;
        --chip: rgba(46, 204, 113, 0.12);
      }
html.light body.page-accueil {
        --bg: #f8fafc;
        --bg-gradient: #eef2f7;
        --card: #ffffff;
        --text: #0f1720;
        --accent: #2ecc71;
        --muted: #64748b;
        --border: #dbe4ee;
        --input-bg: #f8fafc;
        --success: #2ecc71;
        --danger: #ef4444;
        --nav-bg: #ffffff;
        --soft: #cbd5e1;
        --chip: rgba(46, 204, 113, 0.1);
      }
body.page-accueil * {
        box-sizing: border-box;
        transition:
          background 0.3s ease,
          color 0.3s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
body.page-accueil {
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
        background: linear-gradient(180deg, var(--bg), var(--bg-gradient) 60%);
        color: var(--text);
        min-height: 100vh;
      }
body.page-accueil .container {
        max-width: 1150px;
        margin: 0 auto;
        padding: 20px;
      }
body.page-accueil header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        gap: 12px;
        flex-wrap: wrap;
      }
body.page-accueil .header-right {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
      }
body.page-accueil .menu-toggle {
        display: none;
        width: 46px;
        height: 46px;
        margin-left: auto;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--nav-bg);
        color: var(--text);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
      }
body.page-accueil .menu-toggle span {
        display: block;
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
      }
body.page-accueil nav {
        display: flex;
        gap: 10px;
        align-items: center;
        background: var(--nav-bg);
        padding: 8px;
        border-radius: 14px;
        border: 1px solid var(--border);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
        flex-wrap: wrap;
      }
body.page-accueil nav a {
        color: #fff;
        text-decoration: none;
        padding: 10px 16px;
        border-radius: 10px;
        background: #1f2937;
        border: 1px solid #334155;
        font-size: 0.95rem;
        font-weight: 600;
      }
html.light body.page-accueil nav a {
        background: #f1f5f9;
        color: #0f1720;
        border: 1px solid #cbd5e1;
      }
body.page-accueil nav a:hover {
        background: #243041;
      }
html.light body.page-accueil nav a:hover {
        background: #e2e8f0;
      }
body.page-accueil .btn {
        background: var(--accent);
        color: #08130d;
        padding: 12px 18px;
        border-radius: 14px;
        text-decoration: none;
        border: 1px solid rgba(46, 204, 113, 0.85);
        cursor: pointer;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 10px 22px rgba(46, 204, 113, 0.16);
        transition:
          transform 0.18s ease,
          background 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }
body.page-accueil .btn:hover {
        background: #35dc7d;
        border-color: #35dc7d;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(46, 204, 113, 0.22);
      }
body.page-accueil .btn.ghost {
        background: #334155;
        color: #ffffff;
        border: 1px solid #475569;
        box-shadow: none;
      }
body.page-accueil .btn.ghost:hover {
        background: #475569;
        border-color: #64748b;
      }
body.page-accueil .theme-toggle {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 46px;
        padding: 6px 13px 6px 7px;
        border: 1px solid rgba(134, 239, 172, 0.32);
        border-radius: 999px;
        background:
          linear-gradient(135deg, rgba(15, 23, 32, 0.92), rgba(22, 33, 43, 0.82)),
          var(--chip);
        color: #ecfdf5;
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        cursor: pointer;
        overflow: hidden;
        transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
      }
body.page-accueil .theme-toggle::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba(134, 239, 172, 0.28), transparent 42%, rgba(59, 130, 246, 0.22));
        opacity: 0;
        transition: opacity 0.18s ease;
        pointer-events: none;
      }
body.page-accueil .theme-toggle:hover {
        transform: translateY(-1px);
        border-color: rgba(134, 239, 172, 0.62);
        box-shadow:
          0 20px 48px rgba(0, 0, 0, 0.3),
          0 0 0 4px rgba(46, 204, 113, 0.09),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }
body.page-accueil .theme-toggle:hover::before {
        opacity: 1;
      }
body.page-accueil .theme-toggle:focus-visible {
        outline: 3px solid rgba(134, 239, 172, 0.45);
        outline-offset: 3px;
      }
body.page-accueil .theme-toggle-track {
        position: relative;
        flex: 0 0 auto;
        width: 58px;
        height: 32px;
        border-radius: 999px;
        background: linear-gradient(135deg, #111827, #0f172a);
        border: 1px solid rgba(255, 255, 255, 0.11);
        box-shadow: inset 0 8px 18px rgba(0, 0, 0, 0.32);
      }
body.page-accueil .theme-toggle-thumb {
        position: absolute;
        top: 3px;
        right: 3px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: radial-gradient(circle at 35% 30%, #ffffff, #bbf7d0 52%, #16a34a);
        color: #052e16;
        box-shadow:
          0 8px 18px rgba(22, 163, 74, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
        transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
      }
body.page-accueil .theme-toggle-icon {
        position: absolute;
        font-size: 15px;
        line-height: 1;
        transition: opacity 0.18s ease, transform 0.18s ease;
      }
body.page-accueil .theme-toggle-icon-sun {
        opacity: 0;
        transform: rotate(-40deg) scale(0.7);
      }
body.page-accueil .theme-toggle-icon-moon {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }
body.page-accueil .theme-toggle-copy {
        position: relative;
        display: grid;
        gap: 1px;
        text-align: left;
        line-height: 1.05;
        white-space: nowrap;
      }
body.page-accueil .theme-toggle-kicker {
        color: rgba(236, 253, 245, 0.58);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }
body.page-accueil .theme-toggle-label {
        color: #bbf7d0;
        font-size: 13px;
        font-weight: 800;
      }
html.light body.page-accueil .theme-toggle {
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.9)),
          #ffffff;
        color: #0f1720;
        border-color: rgba(22, 163, 74, 0.24);
        box-shadow:
          0 14px 34px rgba(15, 23, 42, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
      }
html.light body.page-accueil .theme-toggle-track {
        background: linear-gradient(135deg, #dbeafe, #dcfce7);
        border-color: rgba(22, 163, 74, 0.18);
        box-shadow: inset 0 8px 18px rgba(22, 163, 74, 0.09);
      }
html.light body.page-accueil .theme-toggle-thumb {
        transform: translateX(-26px);
        background: radial-gradient(circle at 35% 30%, #fff7ed, #fde68a 52%, #f59e0b);
        color: #78350f;
        box-shadow:
          0 8px 18px rgba(245, 158, 11, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.8);
      }
html.light body.page-accueil .theme-toggle-icon-sun {
        opacity: 1;
        transform: rotate(0deg) scale(1);
      }
html.light body.page-accueil .theme-toggle-icon-moon {
        opacity: 0;
        transform: rotate(40deg) scale(0.7);
      }
html.light body.page-accueil .theme-toggle-kicker {
        color: rgba(15, 23, 32, 0.55);
      }
html.light body.page-accueil .theme-toggle-label {
        color: #15803d;
      }
body.page-accueil .account-menu {
        position: relative;
      }
body.page-accueil .account-btn {
        background: var(--card);
        color: var(--text);
        border: 1px solid var(--border);
        padding: 10px 14px;
        border-radius: 14px;
        cursor: pointer;
        font-weight: 700;
        display: none;
        align-items: center;
        gap: 10px;
        min-height: 46px;
      }
body.page-accueil .account-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: var(--accent);
        color: #08130d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        font-size: 14px;
      }
body.page-accueil .account-name {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
body.page-accueil .account-dropdown {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: 240px;
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.2);
        padding: 10px;
        display: none;
        z-index: 1000;
      }
body.page-accueil .account-dropdown.open {
        display: block;
      }
body.page-accueil .account-head {
        padding: 10px 12px 12px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
      }
body.page-accueil .account-head strong {
        display: block;
        margin-bottom: 4px;
      }
body.page-accueil .account-head small {
        color: var(--muted);
        word-break: break-word;
      }
body.page-accueil .dropdown-link, body.page-accueil .dropdown-action {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        border: none;
        background: transparent;
        color: var(--text);
        padding: 11px 12px;
        border-radius: 10px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
      }
body.page-accueil .dropdown-link:hover, body.page-accueil .dropdown-action:hover {
        background: var(--chip);
      }
body.page-accueil .dropdown-action.logout {
        color: #fecaca;
      }
html.light body.page-accueil .dropdown-action.logout {
        color: #b91c1c;
      }
body.page-accueil .card {
        background: var(--card);
        padding: 25px;
        border-radius: 18px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
        border: 1px solid var(--border);
      }
body.page-accueil .hero {
        display: grid;
        grid-template-columns: 1.2fr 0.8fr;
        gap: 30px;
        align-items: center;
        margin-bottom: 30px;
      }
body.page-accueil .hero h1 {
        font-size: 36px;
        color: var(--text);
        margin: 0 0 15px 0;
        line-height: 1.2;
      }
body.page-accueil .badge {
        background: var(--success);
        color: #08130d;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: 800;
        margin-bottom: 10px;
        display: inline-block;
      }
body.page-accueil .stats {
        display: flex;
        gap: 15px;
        margin: 25px 0;
      }
body.page-accueil .stat {
        flex: 1;
        padding: 20px;
        border-radius: 14px;
        background: var(--chip);
        border: 1px solid var(--border);
      }
body.page-accueil .stat strong {
        display: block;
        font-size: 32px;
        color: var(--accent);
      }
body.page-accueil .stat-detail {
        margin: 8px 0 0;
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.45;
        font-weight: 700;
      }
body.page-accueil .progress-container {
        margin-top: 15px;
        background: var(--border);
        border-radius: 10px;
        height: 8px;
        overflow: hidden;
      }
body.page-accueil .progress-bar {
        background: var(--accent);
        height: 100%;
        transition: width 1s ease-in-out;
      }
body.page-accueil .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 30px;
      }
body.page-accueil .feature-icon {
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: var(--accent);
        color: #08130d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        margin-bottom: 15px;
        font-weight: 800;
      }
body.page-accueil .news-item {
        border-left: 3px solid var(--accent);
        padding: 5px 15px;
        margin-bottom: 20px;
      }
body.page-accueil input, body.page-accueil textarea {
        width: 100%;
        padding: 12px;
        border-radius: 10px;
        border: 1px solid var(--border);
        background: var(--input-bg);
        color: var(--text);
        outline: none;
      }
body.page-accueil input::placeholder, body.page-accueil textarea::placeholder {
        color: var(--muted);
      }
body.page-accueil input:focus, body.page-accueil textarea:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.12);
      }
body.page-accueil .form-message {
        min-height: 20px;
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
      }
body.page-accueil .form-message.success {
        color: var(--success);
      }
body.page-accueil .form-message.error {
        color: var(--danger);
      }
body.page-accueil .site-footer,
body.page-dashboard .site-footer {
        margin: 30px 32px 30px;
        padding: 28px 24px;
        color: var(--subtext, var(--muted));
        text-align: center;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--card);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }
body.page-accueil .site-footer {
        margin-top: 30px;
        margin-bottom: 30px;
        margin-left: 10px;
        margin-right: 10px;
      }
body.page-dashboard .site-footer {
        margin-bottom: 34px;
      }
body.page-accueil .site-footer strong,
body.page-dashboard .site-footer strong {
        display: block;
        color: var(--accent);
        font-size: 1.08rem;
        margin-bottom: 7px;
      }
body.page-accueil .site-footer span,
body.page-dashboard .site-footer span {
        display: block;
        color: var(--text);
        font-weight: 700;
        margin-bottom: 8px;
      }
body.page-accueil .site-footer small,
body.page-dashboard .site-footer small {
        display: block;
        margin-top: 8px;
        color: var(--subtext, var(--muted));
      }
@media (max-width: 900px) {
body.page-accueil .hero {
          grid-template-columns: 1fr;
        }
body.page-accueil .features {
          grid-template-columns: 1fr;
        }
body.page-accueil header {
          display: grid;
          grid-template-columns: 1fr auto;
          gap: 12px;
          align-items: start;
        }
body.page-accueil .header-right {
          grid-column: 1 / -1;
          justify-content: stretch;
          display: none;
        }
body.page-accueil nav {
          grid-column: 1 / -1;
          display: none;
          flex-direction: column;
          align-items: stretch;
        }
body.page-accueil header.menu-open nav, body.page-accueil header.menu-open .header-right {
          display: flex;
        }
body.page-accueil nav a, body.page-accueil .header-right > .btn, body.page-accueil .account-menu {
          width: 100%;
        }
body.page-accueil .menu-toggle {
          display: inline-flex;
          grid-column: 2;
          grid-row: 1;
        }
body.page-accueil .account-btn {
          width: 100%;
          justify-content: center;
        }
body.page-accueil .account-dropdown {
          right: auto;
          left: 0;
          width: 100%;
        }
body.page-accueil .stats {
          flex-direction: column;
        }

      
}

    

/* admin.html */
body.page-admin {
      font-family: Arial;
      background: linear-gradient(135deg,#0f172a,#1d4ed8);
      color:#0f172a;
      padding:20px;
    }
body.page-admin .container {
      background:white;
      padding:25px;
      border-radius:16px;
      max-width:1100px;
      margin:auto;
    }
body.page-admin h1 {
      color:#16a34a;
    }
body.page-admin button {
      padding:10px 15px;
      border:none;
      border-radius:8px;
      cursor:pointer;
      font-weight:bold;
    }
body.page-admin .btn-green { background:#16a34a; color:white; }
body.page-admin .btn-red { background:#ef4444; color:white; }
body.page-admin .btn-blue { background:#2563eb; color:white; }
body.page-admin .top-actions {
      display:flex;
      gap:10px;
      margin-bottom:15px;
      flex-wrap:wrap;
    }
body.page-admin .menu-toggle {
      display:none;
      width:44px;
      height:44px;
      margin-left:auto;
      background:#0f172a;
      color:white;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      gap:5px;
    }
body.page-admin .menu-toggle span {
      width:22px;
      height:2px;
      background:currentColor;
      border-radius:999px;
      display:block;
    }
body.page-admin table {
      width:100%;
      border-collapse:collapse;
      margin-top:20px;
    }
body.page-admin th, body.page-admin td {
      padding:10px;
      border-bottom:1px solid #ddd;
    }
body.page-admin select {
      padding:5px;
    }
body.page-admin .table-wrap {
      overflow:auto;
    }
@media (max-width: 700px) {
body.page-admin { padding:12px; }
body.page-admin .container { padding:16px; position:relative; }
body.page-admin h1 { font-size:24px; padding-right:54px; }
body.page-admin .menu-toggle {
        display:inline-flex;
        position:absolute;
        top:16px;
        right:16px;
      }
body.page-admin .top-actions { display:none; }
body.page-admin .container.menu-open .top-actions {
        display:flex;
        flex-direction:column;
      }
body.page-admin .top-actions button { width:100%; }
body.page-admin table { min-width:720px; }

    
}

  

/* apropos.html */
body.page-apropos {
  --bg:#0f1720;
  --text:#e2e8f0;
  --nav:#0b1118;
  --card:#18212b;
  --muted:#94a3b8;
  --accent:#2ecc71;
  --border:#243041;
  --hero:#18212b;
  --chip:rgba(46,204,113,0.12);
}
html.light body.page-apropos {
  --bg:#f8fafc;
  --text:#0f1720;
  --nav:#ffffff;
  --card:#ffffff;
  --muted:#64748b;
  --border:#e2e8f0;
  --hero:#f1f5f9;
  --chip:rgba(46,204,113,0.1);
}
body.page-apropos * {margin:0;padding:0;box-sizing:border-box;transition:.3s;}
body.page-apropos {
  font-family:Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
}
body.page-apropos /* NAVBAR */
nav {
  background:var(--nav);
  padding:15px 25px;
  display:flex;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--border);
}
body.page-apropos nav a {
  text-decoration:none;
  color:white;
  background:#1f2937;
  border:1px solid #334155;
  padding:10px 14px;
  border-radius:10px;
  font-size:14px;
}
html.light body.page-apropos nav a {
  background:#f1f5f9;
  color:#0f1720;
  border:1px solid #cbd5e1;
}
body.page-apropos .btn {
  margin-left:auto;
  background:var(--chip);
  border:1px solid rgba(46,204,113,0.25);
  color:#86efac;
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}
body.page-apropos .menu-toggle {
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--nav);
  color:var(--text);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
body.page-apropos .menu-toggle span {
  display:block;
  width:22px;
  height:2px;
  border-radius:999px;
  background:currentColor;
}
body.page-apropos /* HERO */
.hero {
  background:var(--hero);
  padding:70px 20px;
  text-align:center;
  border-bottom:1px solid var(--border);
}
body.page-apropos .hero h1 {
  font-size:32px;
  margin:15px 0;
}
body.page-apropos .tag {
  background:var(--chip);
  color:var(--accent);
  padding:6px 12px;
  border-radius:20px;
  font-weight:bold;
}
body.page-apropos /* CONTENT */
.content {
  max-width:1000px;
  margin:auto;
  padding:40px 20px;
}
body.page-apropos h2 {
  margin-top:50px;
  margin-bottom:20px;
  color:var(--accent);
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
}
body.page-apropos /* GRID */
.grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin:25px 0;
}
body.page-apropos .card {
  background:var(--card);
  border:1px solid var(--border);
  padding:25px;
  border-radius:16px;
}
body.page-apropos /* MATH BOX */
.math-box {
  background:var(--chip);
  border:1px dashed var(--accent);
  padding:20px;
  border-radius:12px;
  text-align:center;
  margin:20px 0;
}
body.page-apropos /* LIST */
ul {list-style:none;}
body.page-apropos li {
  margin-bottom:12px;
  padding-left:25px;
  position:relative;
}
body.page-apropos li::before {
  content:"→";
  position:absolute;
  left:0;
  color:var(--accent);
}
body.page-apropos /* FOOTER */
.footer-note {
  margin-top:60px;
  padding:25px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--border);
}
body.page-apropos /* RESPONSIVE */
@media(max-width:768px) {
  nav{
    display:grid;
    grid-template-columns:1fr auto;
    padding:14px;
  }

  .menu-toggle{
    display:inline-flex;
    grid-column:2;
  }

  nav a,
  nav .btn{
    display:none;
    grid-column:1 / -1;
    width:100%;
    text-align:center;
  }

  nav.open a,
  nav.open .btn{
    display:block;
  }
}



/* dashboard.html */
body.page-dashboard {
        --bg: #0f1720;
        --text: #e2e8f0;
        --card: #18212b;
        --nav: #0b1118;
        --muted: #243041;
        --border: #334155;
        --input: #1f2937;
        --accent: #2ecc71;
        --danger: #ef4444;
        --subtext: #94a3b8;
        --chart-grid: rgba(255, 255, 255, 0.1);
        --table-alt: rgba(255, 255, 255, 0.03);
      }
html.light body.page-dashboard {
        --bg: #f8fafc;
        --text: #0f1720;
        --card: #ffffff;
        --nav: #ffffff;
        --muted: #e2e8f0;
        --border: #cbd5e1;
        --input: #f8fafc;
        --accent: #2ecc71;
        --danger: #ef4444;
        --subtext: #64748b;
        --chart-grid: rgba(15, 23, 32, 0.1);
        --table-alt: rgba(15, 23, 32, 0.03);
      }
body.page-dashboard * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        transition:
          background-color 0.3s ease,
          color 0.3s ease,
          border-color 0.3s ease,
          box-shadow 0.3s ease;
      }
body.page-dashboard {
        font-family: Arial, Helvetica, sans-serif;
        background: var(--bg);
        color: var(--text);
        min-height: 100vh;
        padding-bottom: 36px;
      }
body.page-dashboard nav {
        background: var(--nav);
        padding: 15px 24px;
        border-bottom: 1px solid var(--muted);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
        display: flex;
        align-items: center;
        gap: 14px;
      }
body.page-dashboard nav a {
        text-decoration: none;
        color: #fff;
        padding: 10px 14px;
        border-radius: 10px;
        background: #1f2937;
        border: 1px solid #334155;
        font-size: 14px;
      }
html.light body.page-dashboard nav a {
        background: #f1f5f9;
        color: #0f1720;
        border: 1px solid #cbd5e1;
      }
body.page-dashboard nav a:hover {
        background: #243041;
      }
html.light body.page-dashboard nav a:hover {
        background: #e2e8f0;
      }
body.page-dashboard .spacer {
        flex: 1;
      }
body.page-dashboard .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--nav);
        color: var(--text);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
      }
body.page-dashboard .menu-toggle span {
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        display: block;
      }
body.page-dashboard .btn {
        padding: 12px 18px;
        border-radius: 14px;
        background: var(--accent);
        color: #08130d;
        border: 1px solid rgba(46, 204, 113, 0.85);
        cursor: pointer;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: fit-content;
        min-height: 46px;
        line-height: 1;
        text-decoration: none;
        font-family: inherit;
        box-shadow: 0 10px 22px rgba(46, 204, 113, 0.16);
        transition:
          transform 0.18s ease,
          background 0.18s ease,
          border-color 0.18s ease,
          box-shadow 0.18s ease;
      }
body.page-dashboard .btn:hover {
        background: #35dc7d;
        border-color: #35dc7d;
        transform: translateY(-1px);
        box-shadow: 0 14px 28px rgba(46, 204, 113, 0.22);
      }
html.light body.page-dashboard .btn {
        color: #08130d;
        border: 1px solid rgba(46, 204, 113, 0.85);
      }
body.page-dashboard h1 {
        color: var(--text);
        margin: 24px 24px 16px;
        font-size: 28px;
      }
body.page-dashboard .subtitle {
        margin: 0 24px 24px;
        color: var(--subtext);
        font-size: 14px;
      }
body.page-dashboard .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 18px;
        padding: 0 24px 24px;
      }
body.page-dashboard .stat-card {
        background: var(--card);
        border: 1px solid var(--muted);
        border-radius: 16px;
        padding: 18px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }
body.page-dashboard .stat-card .label {
        font-size: 13px;
        color: var(--subtext);
        margin-bottom: 8px;
      }
body.page-dashboard .stat-card .value {
        font-size: 28px;
        font-weight: 800;
        color: var(--text);
      }
body.page-dashboard .stat-card .badge {
        margin-top: 10px;
        display: inline-block;
        font-size: 12px;
        font-weight: 700;
        color: #08130d;
        background: var(--accent);
        padding: 6px 10px;
        border-radius: 999px;
      }
body.page-dashboard .charts-container {
        display: flex;
        gap: 20px;
        padding: 0 24px;
        flex-wrap: wrap;
      }
body.page-dashboard .chart-box {
        flex: 1;
        min-width: 320px;
        background: var(--card);
        padding: 20px;
        border-radius: 16px;
        border: 1px solid var(--muted);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }
body.page-dashboard .chart-title {
        font-size: 15px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 14px;
      }
body.page-dashboard .report-panel {
        margin: 24px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        background: var(--card);
        border: 1px solid var(--muted);
        border-radius: 16px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }
body.page-dashboard .report-panel h2 {
        font-size: 18px;
        margin-bottom: 8px;
        color: var(--text);
      }
body.page-dashboard .report-panel p {
        color: var(--subtext);
        line-height: 1.5;
        font-size: 14px;
      }
body.page-dashboard .report-panel .btn {
        flex: 0 0 auto;
        align-self: center;
      }
body.page-dashboard table {
        border-collapse: collapse;
        width: calc(100% - 48px);
        margin: 30px 24px;
        background: var(--card);
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--muted);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
      }
body.page-dashboard th, body.page-dashboard td {
        border: 1px solid var(--muted);
        padding: 14px 16px;
        text-align: left;
      }
body.page-dashboard th {
        background: #1f2937;
        color: #ffffff;
        border: none;
        font-size: 14px;
      }
html.light body.page-dashboard th {
        background: #0f1720;
        color: #ffffff;
      }
body.page-dashboard tr:nth-child(even) {
        background: var(--table-alt);
      }
body.page-dashboard .status {
        display: inline-block;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
      }
body.page-dashboard .status-dense {
        background: rgba(46, 204, 113, 0.15);
        color: #86efac;
        border: 1px solid rgba(46, 204, 113, 0.25);
      }
body.page-dashboard .status-medium {
        background: rgba(245, 158, 11, 0.15);
        color: #fbbf24;
        border: 1px solid rgba(245, 158, 11, 0.25);
      }
body.page-dashboard .status-low {
        background: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
        border: 1px solid rgba(239, 68, 68, 0.25);
      }
html.light body.page-dashboard .status-dense {
        color: #15803d;
      }
html.light body.page-dashboard .status-medium {
        color: #b45309;
      }
html.light body.page-dashboard .status-low {
        color: #b91c1c;
      }
@media (max-width: 768px) {
body.page-dashboard {
          padding-bottom: 24px;
        }
body.page-dashboard nav {
          display: grid;
          grid-template-columns: 1fr auto;
          padding: 14px;
        }
body.page-dashboard .menu-toggle {
          display: inline-flex;
          grid-column: 2;
        }
body.page-dashboard nav a, body.page-dashboard nav .btn {
          display: none;
          grid-column: 1 / -1;
          width: 100%;
          text-align: center;
        }
body.page-dashboard nav.open a, body.page-dashboard nav.open .btn {
          display: block;
        }
body.page-dashboard .spacer {
          display: none;
        }
body.page-dashboard h1, body.page-dashboard .subtitle {
          margin-left: 14px;
          margin-right: 14px;
        }
body.page-dashboard .stats-row, body.page-dashboard .charts-container {
          padding-left: 14px;
          padding-right: 14px;
        }
body.page-dashboard .report-panel {
          margin: 20px 14px;
          align-items: stretch;
          flex-direction: column;
        }
body.page-dashboard .report-panel .btn {
          align-self: flex-start;
        }
body.page-dashboard .site-footer {
          margin: 20px 18px 28px;
        }
body.page-dashboard table {
          width: calc(100% - 28px);
          margin: 20px 14px;
          font-size: 13px;
          display: block;
          overflow-x: auto;
        }
body.page-dashboard th, body.page-dashboard td {
          padding: 10px 12px;
        }

      
}

    

/* forgot-password.html */
body.page-forgot-password * { box-sizing: border-box; }
body.page-forgot-password {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
      }
body.page-forgot-password .card {
        width: 100%;
        max-width: 430px;
        background: rgba(255,255,255,0.97);
        border-radius: 18px;
        padding: 34px 28px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.22);
      }
body.page-forgot-password .brand {
        text-align: center;
        margin-bottom: 26px;
      }
body.page-forgot-password .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 28px;
      }
body.page-forgot-password .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
        line-height: 1.5;
      }
body.page-forgot-password .form-group {
        margin-bottom: 18px;
      }
body.page-forgot-password label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-forgot-password input {
        width: 100%;
        padding: 13px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: 0.2s ease;
      }
body.page-forgot-password input:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
      }
body.page-forgot-password .submit-btn {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        color: white;
        background: #16a34a;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-forgot-password .submit-btn:hover {
        background: #15803d;
      }
body.page-forgot-password .message {
        margin-top: 14px;
        min-height: 20px;
        font-size: 14px;
        text-align: center;
      }
body.page-forgot-password .footer-link {
        margin-top: 18px;
        text-align: center;
        font-size: 14px;
      }
body.page-forgot-password .footer-link a {
        color: #16a34a;
        text-decoration: none;
        font-weight: 700;
      }

    

/* login.html */
body.page-login * { box-sizing: border-box; }
body.page-login {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
      }
body.page-login .card {
        width: 100%;
        max-width: 430px;
        background: rgba(255,255,255,0.97);
        border-radius: 18px;
        padding: 34px 28px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.22);
      }
body.page-login .brand {
        text-align: center;
        margin-bottom: 26px;
      }
body.page-login .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 28px;
      }
body.page-login .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
      }
body.page-login .form-group {
        margin-bottom: 18px;
      }
body.page-login label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-login input {
        width: 100%;
        padding: 13px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: 0.2s ease;
      }
body.page-login input:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
      }
body.page-login .submit-btn {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        color: white;
        background: #16a34a;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-login .submit-btn:hover {
        background: #15803d;
      }
body.page-login .message {
        margin-top: 14px;
        min-height: 20px;
        font-size: 14px;
        text-align: center;
      }
body.page-login .footer-link {
        margin-top: 18px;
        text-align: center;
        font-size: 14px;
      }
body.page-login .helper-link {
        margin: -6px 0 18px;
        text-align: right;
        font-size: 13px;
      }
body.page-login .footer-link a {
        color: #16a34a;
        text-decoration: none;
        font-weight: 700;
      }
body.page-login .helper-link a {
        color: #16a34a;
        text-decoration: none;
        font-weight: 700;
      }

    

/* maps.html */
html, body.page-maps {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
body.page-maps {
        background: #0f1720;
        color: #e2e8f0;
        transition: background 0.3s ease, color 0.3s ease;
      }
body.page-maps nav {
        padding: 15px 20px;
        display: flex;
        gap: 20px;
        align-items: center;
        background: #0b1118;
        border-bottom: 1px solid #1f2937;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, color 0.3s ease;
      }
body.page-maps nav a {
        color: #ffffff;
        text-decoration: none;
        padding: 10px 14px;
        border-radius: 10px;
        background: #1f2937;
        border: 1px solid #334155;
        transition: 0.3s;
        font-size: 14px;
      }
body.page-maps nav a:hover {
        background: #243041;
      }
body.page-maps .btn {
        margin-left: auto;
        padding: 10px 14px;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: rgba(46, 204, 113, 0.12);
        border: 1px solid rgba(46, 204, 113, 0.25);
        color: #86efac;
        font-weight: 700;
      }
body.page-maps .btn:hover {
        background: rgba(46, 204, 113, 0.2);
      }
body.page-maps .btn[aria-pressed="true"] {
        background: #2ecc71;
        color: #08130d;
        font-weight: 800;
        border-color: #2ecc71;
      }
body.page-maps .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        margin-left: 0;
        border: 1px solid rgba(46, 204, 113, 0.25);
        border-radius: 12px;
        background: rgba(46, 204, 113, 0.12);
        color: #86efac;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
      }
body.page-maps .menu-toggle span {
        width: 22px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        display: block;
      }
body.page-maps .sidebar {
        position: absolute;
        top: 64px;
        left: 0;
        width: 320px;
        height: calc(100vh - 64px);
        padding: 20px;
        box-sizing: border-box;
        border-radius: 0 18px 18px 0;
        overflow: auto;
        z-index: 1000;
        transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
        background: #18212b;
        color: #e2e8f0;
        border-right: 1px solid #243041;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
      }
body.page-maps .sidebar h2 {
        text-align: center;
        font-size: 1.1rem;
        margin: 0 0 16px;
        padding-bottom: 10px;
        color: #ffffff;
        border-bottom: 1px solid #243041;
      }
body.page-maps .map-container {
        margin-left: 320px;
        position: relative;
        min-height: calc(100vh - 64px);
      }
body.page-maps #map {
        height: calc(100vh - 64px);
        width: 100%;
        background: #ffffff;
        transition: filter 0.3s ease;
      }
body.page-maps .tools label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 6px;
        color: inherit;
      }
body.page-maps .tools button, body.page-maps .tools input, body.page-maps .tools select {
        width: 100%;
        display: block;
        margin-bottom: 10px;
        padding: 13px 14px;
        box-sizing: border-box;
        border-radius: 14px;
        font-size: 14px;
        transition: all 0.3s ease;
      }
body.page-maps .tools input, body.page-maps .tools select {
        background: #1f2937;
        color: #ffffff;
        border: 1px solid #334155;
      }
body.page-maps .tools input::placeholder {
        color: #94a3b8;
      }
body.page-maps .tools input:focus, body.page-maps .tools select:focus {
        border-color: #2ecc71;
        box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15);
        outline: none;
      }
body.page-maps .tools button {
        background: #2ecc71;
        color: #08130d;
        font-weight: 800;
        border: none;
        cursor: pointer;
      }
body.page-maps .tools button:hover {
        opacity: 0.95;
      }
body.page-maps .source-active {
        background: #2ecc71 !important;
        color: #08130d !important;
        font-weight: 800 !important;
        border: 1px solid #2ecc71 !important;
      }
body.page-maps .btn-secondary {
        background: #334155 !important;
        color: #ffffff !important;
      }
body.page-maps .btn-danger {
        background: #ef4444 !important;
        color: #ffffff !important;
      }
body.page-maps .legend {
        padding: 0;
        line-height: 18px;
        border-radius: 12px;
        min-width: 150px;
        max-width: min(300px, calc(100vw - 28px));
        transition: all 0.3s ease;
        background: #18212b;
        color: #e2e8f0;
        border: 1px solid #243041;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
        overflow: hidden;
      }
body.page-maps .legend-toggle {
        width: 100%;
        border: 0;
        padding: 11px 14px;
        background: transparent;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        font-weight: 800;
        font-size: 14px;
        text-align: left;
      }
body.page-maps .legend-toggle::after {
        content: "+";
        font-size: 18px;
        line-height: 1;
      }
body.page-maps .legend.open .legend-toggle {
        border-bottom: 1px solid #243041;
      }
body.page-maps .legend.open .legend-toggle::after {
        content: "-";
      }
body.page-maps .legend-content {
        display: none;
        padding: 10px 12px 12px;
      }
body.page-maps .legend.open .legend-content {
        display: block;
      }
body.page-maps .legend-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
        gap: 15px;
      }
body.page-maps .legend-item span {
        font-size: 12px;
        font-weight: 700;
        color: #cbd5e1;
        text-transform: none;
      }
body.page-maps .legend-item img {
        max-height: 25px;
        display: block;
      }
body.page-maps .north-arrow {
        padding: 6px 9px;
        border-radius: 10px;
        text-align: center;
        font-weight: bold;
        line-height: 1.1;
        transition: all 0.3s ease;
        background: #18212b;
        color: #2ecc71;
        border: 1px solid #243041;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
body.page-maps .info-msg {
        margin-top: 8px;
        padding: 10px 12px;
        border-radius: 12px;
        font-size: 12px;
        transition: all 0.3s ease;
        background: #1f2937;
        color: #cbd5e1;
        border: 1px solid #334155;
      }
body.page-maps hr {
        border: none;
        border-top: 1px solid #243041;
        margin: 14px 0;
      }
body.page-maps /* MODE CLAIR */
      body.light {
        background: #f8fafc;
        color: #0f1720;
      }
html.light body.page-maps nav {
        background: #ffffff;
        border-bottom: 1px solid #dbe4ee;
      }
html.light body.page-maps nav a {
        background: #f1f5f9;
        color: #0f1720;
        border: 1px solid #cbd5e1;
      }
html.light body.page-maps nav a:hover {
        background: #e2e8f0;
      }
html.light body.page-maps .btn {
        background: rgba(46, 204, 113, 0.12);
        color: #15803d;
        border: 1px solid rgba(46, 204, 113, 0.3);
      }
html.light body.page-maps .btn[aria-pressed="true"] {
        background: #2ecc71;
        color: #08130d;
      }
html.light body.page-maps .sidebar {
        background: #ffffff;
        color: #0f1720;
        border-right: 1px solid #dbe4ee;
        box-shadow: 0 14px 30px rgba(15, 23, 32, 0.08);
      }
html.light body.page-maps .sidebar h2 {
        color: #0f1720;
        border-bottom: 1px solid #e2e8f0;
      }
html.light body.page-maps .tools input, html.light body.page-maps .tools select {
        background: #f8fafc;
        color: #0f1720;
        border: 1px solid #cbd5e1;
      }
html.light body.page-maps .tools input::placeholder {
        color: #64748b;
      }
html.light body.page-maps .tools button {
        background: #2ecc71;
        color: #08130d;
      }
html.light body.page-maps .btn-secondary {
        background: #475569 !important;
        color: white !important;
      }
html.light body.page-maps .btn-danger {
        background: #ef4444 !important;
        color: white !important;
      }
html.light body.page-maps .legend {
        background: #ffffff;
        color: #0f1720;
        border: 1px solid #dbe4ee;
        box-shadow: 0 12px 28px rgba(15, 23, 32, 0.08);
      }
html.light body.page-maps .legend-toggle {
        color: #0f1720;
      }
html.light body.page-maps .legend.open .legend-toggle {
        border-bottom: 1px solid #e2e8f0;
      }
html.light body.page-maps .legend-item span {
        color: #475569;
      }
html.light body.page-maps .north-arrow {
        background: #ffffff;
        color: #16a34a;
        border: 1px solid #dbe4ee;
        box-shadow: 0 12px 28px rgba(15, 23, 32, 0.08);
      }
html.light body.page-maps .info-msg {
        background: #f8fafc;
        color: #334155;
        border: 1px solid #cbd5e1;
      }
html.light body.page-maps hr {
        border-top: 1px solid #e2e8f0;
      }
html.light body.page-maps #map {
        filter: none;
      }
body.page-maps body:not(.light) #map {
        filter: brightness(0.92) contrast(1.02);
      }
body.page-maps .leaflet-control-layers {
        border: 1px solid #243041 !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22) !important;
        background: #18212b !important;
        color: #e2e8f0 !important;
        overflow: hidden;
      }
body.page-maps .leaflet-control-layers-toggle {
        width: 40px !important;
        height: 40px !important;
        background-size: 22px 22px !important;
      }
body.page-maps .leaflet-control-layers-expanded {
        padding: 12px 14px !important;
        min-width: 240px;
      }
body.page-maps .leaflet-control-layers label {
        color: inherit !important;
        font-size: 13px;
        margin-bottom: 6px;
      }
body.page-maps .leaflet-control-layers-separator {
        border-top: 1px solid #243041 !important;
        margin: 10px 0 !important;
      }
body.page-maps .leaflet-popup-content-wrapper, body.page-maps .leaflet-popup-tip {
        background: #18212b !important;
        color: #e2e8f0 !important;
      }
html.light body.page-maps .leaflet-control-layers {
        background: #ffffff !important;
        color: #0f1720 !important;
        border: 1px solid #dbe4ee !important;
        box-shadow: 0 12px 28px rgba(15, 23, 32, 0.08) !important;
      }
html.light body.page-maps .leaflet-control-layers-separator {
        border-top: 1px solid #e2e8f0 !important;
      }
html.light body.page-maps .leaflet-popup-content-wrapper, html.light body.page-maps .leaflet-popup-tip {
        background: #ffffff !important;
        color: #0f1720 !important;
      }
body.page-maps .legend-item .swatch {
        display: inline-block;
        width: 18px;
        height: 12px;
        border: 1px solid rgba(255,255,255,0.8);
        border-radius: 3px;
        flex-shrink: 0;
      }
html.light body.page-maps .legend-item .swatch {
        border-color: #334155;
      }
@media (max-width: 1024px) {
body.page-maps .sidebar {
          width: 280px;
        }
body.page-maps .map-container {
          margin-left: 280px;
        }

      
}
@media (max-width: 768px) {
body.page-maps.sidebar-collapsed .sidebar {
          display: none;
        }
body.page-maps.sidebar-collapsed .map-container {
          margin-left: 0;
        }
body.page-maps.sidebar-collapsed #map {
          height: calc(100vh - 120px);
          min-height: 420px;
        }
body.page-maps nav {
          flex-wrap: wrap;
          gap: 10px;
          padding: 12px 14px;
        }
body.page-maps .menu-toggle {
          display: inline-flex;
          margin-left: auto;
        }
body.page-maps .leaflet-top.leaflet-right {
          top: 10px;
          right: 10px;
        }
body.page-maps .leaflet-control-layers-expanded {
          min-width: 200px;
          max-width: 220px;
          padding: 10px 12px !important;
        }
body.page-maps nav a, body.page-maps .btn {
          font-size: 13px;
          padding: 9px 12px;
        }
body.page-maps .btn {
          margin-left: 0;
        }
body.page-maps .sidebar {
          position: relative;
          top: 0;
          width: 100%;
          height: auto;
          border-radius: 0;
          padding: 14px;
          border-right: none;
          box-shadow: none;
        }
body.page-maps .map-container {
          margin-left: 0;
          min-height: auto;
        }
body.page-maps #map {
          height: 62vh;
          min-height: 420px;
        }
body.page-maps .tools button, body.page-maps .tools input, body.page-maps .tools select {
          font-size: 13px;
          padding: 12px;
        }
body.page-maps .legend {
          min-width: 180px;
          max-width: 240px;
          padding: 10px;
        }
body.page-maps .legend-item {
          gap: 10px;
        }
body.page-maps .legend-item span {
          font-size: 11px;
        }

      
}
@media (max-width: 480px) {
body.page-maps nav {
          flex-direction: column;
          align-items: stretch;
        }
body.page-maps nav a, body.page-maps .btn {
          width: 100%;
          box-sizing: border-box;
          text-align: center;
        }
body.page-maps .sidebar h2 {
          font-size: 1rem;
        }
body.page-maps .tools button, body.page-maps .tools input, body.page-maps .tools select {
          margin-bottom: 8px;
        }
body.page-maps #map {
          height: 58vh;
          min-height: 360px;
        }
body.page-maps .legend {
          min-width: 150px;
          max-width: 200px;
        }

      
}
@media print {
body.page-maps nav, body.page-maps .sidebar {
          display: none !important;
        }
body.page-maps .map-container {
          margin: 0 !important;
          width: 100% !important;
          height: 100% !important;
          position: fixed;
          top: 0;
          left: 0;
        }
body.page-maps #map {
          width: 100% !important;
          height: 100vh !important;
          filter: none !important;
        }
body.page-maps .leaflet-control-zoom, body.page-maps .leaflet-control-layers {
          display: none !important;
        }
body.page-maps .legend, body.page-maps .north-arrow, body.page-maps .leaflet-control-scale {
          display: block !important;
          opacity: 1 !important;
        }

      
}

    

/* notifications.html */
body.page-notifications {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  padding: 20px;
}
body.page-notifications .container {
  max-width: 950px;
  margin: auto;
  background: rgba(255,255,255,0.97);
  padding: 25px;
  border-radius: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.22);
}
body.page-notifications .topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
body.page-notifications .top-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
body.page-notifications .menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  background: #0f172a;
  color: white;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
body.page-notifications .menu-toggle span {
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  display: block;
}
body.page-notifications h1 {
  margin: 0;
  color: #16a34a;
}
body.page-notifications button {
  padding: 10px 14px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}
body.page-notifications .btn-blue { background: #2563eb; color: white; }
body.page-notifications .btn-red { background: #ef4444; color: white; }
body.page-notifications .btn-green { background: #16a34a; color: white; }
body.page-notifications .badge {
  background: #ef4444;
  color: white;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  margin-left: 10px;
}
body.page-notifications .toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
body.page-notifications .message {
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
body.page-notifications .list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.page-notifications .item {
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
body.page-notifications .item.unread {
  background: #f0fdf4;
  border-left: 5px solid #16a34a;
}
body.page-notifications .item-content {
  flex: 1;
}
body.page-notifications .item-title {
  font-weight: 700;
  margin-bottom: 6px;
}
body.page-notifications .item-message {
  color: #475569;
  margin-bottom: 8px;
  line-height: 1.4;
}
body.page-notifications .small {
  font-size: 13px;
  color: #64748b;
}
body.page-notifications .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
body.page-notifications .empty {
  padding: 20px;
  text-align: center;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
@media (max-width: 700px) {
body.page-notifications { padding: 12px; }
body.page-notifications .container { padding: 16px; }
body.page-notifications .topbar { display: grid; grid-template-columns: 1fr auto; }
body.page-notifications h1 { font-size: 24px; }
body.page-notifications .menu-toggle { display: inline-flex; grid-column: 2; grid-row: 1; }
body.page-notifications .top-actions, body.page-notifications .toolbar { display: none; grid-column: 1 / -1; }
body.page-notifications .container.menu-open .top-actions, body.page-notifications .container.menu-open .toolbar {
    display: flex;
    flex-direction: column;
  }
body.page-notifications .top-actions button, body.page-notifications .toolbar button { width: 100%; }
body.page-notifications .item { flex-direction: column; }
body.page-notifications .actions { width: 100%; }


}



/* parametres.html */
body.page-parametres * {
        box-sizing: border-box;
      }
body.page-parametres {
        margin: 0;
        min-height: 100vh;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
        color: #0f172a;
      }
body.page-parametres .container {
        width: 100%;
        max-width: 1180px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.97);
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
      }
body.page-parametres .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 24px;
      }
body.page-parametres .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 30px;
      }
body.page-parametres .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
      }
body.page-parametres .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
body.page-parametres .menu-toggle {
        display: none;
        width: 44px;
        height: 44px;
        margin-left: auto;
        border: none;
        border-radius: 10px;
        background: #0f172a;
        color: #fff;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
      }
body.page-parametres .menu-toggle span {
        width: 22px;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
        display: block;
      }
body.page-parametres .btn {
        border: none;
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
body.page-parametres .btn-green {
        background: #16a34a;
        color: #fff;
      }
body.page-parametres .btn-green:hover {
        background: #15803d;
      }
body.page-parametres .btn-blue {
        background: #2563eb;
        color: #fff;
      }
body.page-parametres .btn-blue:hover {
        background: #1d4ed8;
      }
body.page-parametres .btn-red {
        background: #ef4444;
        color: #fff;
      }
body.page-parametres .btn-red:hover {
        background: #dc2626;
      }
body.page-parametres .btn-gray {
        background: #475569;
        color: #fff;
      }
body.page-parametres .btn-gray:hover {
        background: #334155;
      }
body.page-parametres .message {
        min-height: 22px;
        margin: 10px 0 20px;
        font-size: 14px;
        font-weight: 600;
      }
body.page-parametres .layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 22px;
      }
body.page-parametres .sidebar, body.page-parametres .content-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 18px;
      }
body.page-parametres .sidebar h3, body.page-parametres .content-card h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: #0f172a;
      }
body.page-parametres .profile-box {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 18px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e2e8f0;
      }
body.page-parametres .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #16a34a;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        font-weight: 800;
      }
body.page-parametres .user-meta strong {
        display: block;
        margin-bottom: 4px;
      }
body.page-parametres .user-meta small {
        color: #64748b;
        word-break: break-word;
      }
body.page-parametres .role-badge {
        display: inline-block;
        margin-top: 6px;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
      }
body.page-parametres .role-admin {
        background: rgba(37, 99, 235, 0.12);
        color: #1d4ed8;
      }
body.page-parametres .role-user {
        background: rgba(22, 163, 74, 0.12);
        color: #15803d;
      }
body.page-parametres .menu {
        display: grid;
        gap: 10px;
      }
body.page-parametres .menu button {
        text-align: left;
        border: 1px solid #dbe4ee;
        background: #fff;
        border-radius: 12px;
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 600;
      }
body.page-parametres .menu button.active {
        background: rgba(22, 163, 74, 0.1);
        border-color: #16a34a;
        color: #15803d;
      }
body.page-parametres .quick-links {
        display: grid;
        gap: 10px;
        margin-top: 18px;
      }
body.page-parametres .quick-links a {
        text-decoration: none;
      }
body.page-parametres .panel {
        display: none;
      }
body.page-parametres .panel.active {
        display: block;
      }
body.page-parametres .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
body.page-parametres .full {
        grid-column: 1 / -1;
      }
body.page-parametres .field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
body.page-parametres label {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-parametres input, body.page-parametres select, body.page-parametres textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        background: #fff;
      }
body.page-parametres input:focus, body.page-parametres select:focus, body.page-parametres textarea:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
      }
body.page-parametres .section-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 20px;
      }
body.page-parametres .switch-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid #e2e8f0;
      }
body.page-parametres .switch-row:last-child {
        border-bottom: none;
      }
body.page-parametres .switch-text strong {
        display: block;
        margin-bottom: 4px;
      }
body.page-parametres .switch-text span {
        color: #64748b;
        font-size: 13px;
      }
body.page-parametres .switch {
        position: relative;
        display: inline-block;
        width: 52px;
        height: 28px;
      }
body.page-parametres .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
body.page-parametres .slider {
        position: absolute;
        inset: 0;
        background: #cbd5e1;
        border-radius: 999px;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-parametres .slider:before {
        content: "";
        position: absolute;
        height: 22px;
        width: 22px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s ease;
      }
body.page-parametres .switch input:checked + .slider {
        background: #16a34a;
      }
body.page-parametres .switch input:checked + .slider:before {
        transform: translateX(24px);
      }
body.page-parametres .admin-box {
        background: #fff;
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        padding: 16px;
        margin-bottom: 14px;
      }
body.page-parametres .muted {
        color: #64748b;
        font-size: 14px;
      }
@media (max-width: 900px) {
body.page-parametres .layout {
          grid-template-columns: 1fr;
        }
body.page-parametres .form-grid {
          grid-template-columns: 1fr;
        }
body.page-parametres {
          padding: 12px;
        }
body.page-parametres .container {
          padding: 18px;
        }
body.page-parametres .brand h1 {
          font-size: 24px;
        }
body.page-parametres .topbar {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: start;
        }
body.page-parametres .menu-toggle {
          display: inline-flex;
          grid-column: 2;
          grid-row: 1;
        }
body.page-parametres .actions, body.page-parametres .sidebar {
          display: none;
          grid-column: 1 / -1;
        }
body.page-parametres .container.menu-open .actions, body.page-parametres .container.menu-open .sidebar {
          display: flex;
        }
body.page-parametres .container.menu-open .actions, body.page-parametres .container.menu-open .sidebar {
          flex-direction: column;
        }
body.page-parametres .actions .btn {
          width: 100%;
        }

      
}

    

/* preview.html */
body.page-preview * {
        box-sizing: border-box;
      }
body.page-preview {
        margin: 0;
        min-height: 100vh;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
        color: #0f172a;
      }
body.page-preview .container {
        width: 100%;
        max-width: 1100px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.97);
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
      }
body.page-preview .topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin-bottom: 24px;
      }
body.page-preview .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 30px;
      }
body.page-preview .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
      }
body.page-preview .actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
body.page-preview .btn {
        border: none;
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-preview .btn-green {
        background: #16a34a;
        color: #fff;
      }
body.page-preview .btn-green:hover {
        background: #15803d;
      }
body.page-preview .btn-blue {
        background: #2563eb;
        color: #fff;
      }
body.page-preview .btn-blue:hover {
        background: #1d4ed8;
      }
body.page-preview .btn-red {
        background: #ef4444;
        color: #fff;
      }
body.page-preview .btn-red:hover {
        background: #dc2626;
      }
body.page-preview .message {
        min-height: 22px;
        margin: 10px 0 20px;
        font-size: 14px;
        font-weight: 600;
      }
body.page-preview .grid {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 22px;
      }
body.page-preview .sidebar, body.page-preview .content-card {
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 18px;
      }
body.page-preview .sidebar h3, body.page-preview .content-card h3 {
        margin-top: 0;
        margin-bottom: 16px;
        color: #0f172a;
      }
body.page-preview .menu {
        display: grid;
        gap: 10px;
      }
body.page-preview .menu button {
        text-align: left;
        border: 1px solid #dbe4ee;
        background: #fff;
        border-radius: 12px;
        padding: 12px 14px;
        cursor: pointer;
        font-weight: 600;
      }
body.page-preview .menu button.active {
        background: rgba(22, 163, 74, 0.1);
        border-color: #16a34a;
        color: #15803d;
      }
body.page-preview .panel {
        display: none;
      }
body.page-preview .panel.active {
        display: block;
      }
body.page-preview .form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
      }
body.page-preview .full {
        grid-column: 1 / -1;
      }
body.page-preview .field {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
body.page-preview label {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-preview input, body.page-preview select, body.page-preview textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        background: #fff;
      }
body.page-preview input:focus, body.page-preview select:focus, body.page-preview textarea:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
      }
body.page-preview .switch-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding: 14px 0;
        border-bottom: 1px solid #e2e8f0;
      }
body.page-preview .switch-row:last-child {
        border-bottom: none;
      }
body.page-preview .switch-text strong {
        display: block;
        margin-bottom: 4px;
      }
body.page-preview .switch-text span {
        color: #64748b;
        font-size: 13px;
      }
body.page-preview .switch {
        position: relative;
        display: inline-block;
        width: 52px;
        height: 28px;
      }
body.page-preview .switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }
body.page-preview .slider {
        position: absolute;
        inset: 0;
        background: #cbd5e1;
        border-radius: 999px;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-preview .slider:before {
        content: "";
        position: absolute;
        height: 22px;
        width: 22px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: 0.2s ease;
      }
body.page-preview .switch input:checked + .slider {
        background: #16a34a;
      }
body.page-preview .switch input:checked + .slider:before {
        transform: translateX(24px);
      }
body.page-preview .section-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 20px;
      }
body.page-preview .avatar-box {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
      }
body.page-preview .avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: #16a34a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        font-weight: 800;
      }
body.page-preview .muted {
        color: #64748b;
        font-size: 14px;
      }
@media (max-width: 900px) {
body.page-preview .grid {
          grid-template-columns: 1fr;
        }
body.page-preview .form-grid {
          grid-template-columns: 1fr;
        }
body.page-preview {
          padding: 12px;
        }
body.page-preview .container {
          padding: 18px;
        }
body.page-preview .brand h1 {
          font-size: 24px;
        }

      
}

    

/* register.html */
body.page-register * {
        box-sizing: border-box;
      }
body.page-register {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
      }
body.page-register .card {
        width: 100%;
        max-width: 460px;
        background: rgba(255, 255, 255, 0.97);
        border-radius: 18px;
        padding: 34px 28px;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
      }
body.page-register .brand {
        text-align: center;
        margin-bottom: 26px;
      }
body.page-register .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 28px;
      }
body.page-register .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
      }
body.page-register .form-group {
        margin-bottom: 18px;
      }
body.page-register label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-register input {
        width: 100%;
        padding: 13px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: 0.2s ease;
      }
body.page-register input:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.12);
      }
body.page-register .submit-btn {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        color: white;
        background: #16a34a;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-register .submit-btn:hover {
        background: #15803d;
      }
body.page-register .message {
        margin-top: 14px;
        min-height: 20px;
        font-size: 14px;
        text-align: center;
      }
body.page-register .footer-link {
        margin-top: 18px;
        text-align: center;
        font-size: 14px;
      }
body.page-register .footer-link a {
        color: #16a34a;
        text-decoration: none;
        font-weight: 700;
      }

    

/* reset-password.html */
body.page-reset-password * { box-sizing: border-box; }
body.page-reset-password {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #0f172a, #1d4ed8);
      }
body.page-reset-password .card {
        width: 100%;
        max-width: 430px;
        background: rgba(255,255,255,0.97);
        border-radius: 18px;
        padding: 34px 28px;
        box-shadow: 0 20px 45px rgba(0,0,0,0.22);
      }
body.page-reset-password .brand {
        text-align: center;
        margin-bottom: 26px;
      }
body.page-reset-password .brand h1 {
        margin: 0 0 8px;
        color: #16a34a;
        font-size: 28px;
      }
body.page-reset-password .brand p {
        margin: 0;
        color: #475569;
        font-size: 14px;
      }
body.page-reset-password .form-group {
        margin-bottom: 18px;
      }
body.page-reset-password label {
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
      }
body.page-reset-password input {
        width: 100%;
        padding: 13px 14px;
        border: 1.8px solid #cbd5e1;
        border-radius: 10px;
        font-size: 14px;
        outline: none;
        transition: 0.2s ease;
      }
body.page-reset-password input:focus {
        border-color: #16a34a;
        box-shadow: 0 0 0 4px rgba(22,163,74,0.12);
      }
body.page-reset-password .submit-btn {
        width: 100%;
        border: none;
        border-radius: 10px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        color: white;
        background: #16a34a;
        cursor: pointer;
        transition: 0.2s ease;
      }
body.page-reset-password .submit-btn:hover {
        background: #15803d;
      }
body.page-reset-password .message {
        margin-top: 14px;
        min-height: 20px;
        font-size: 14px;
        text-align: center;
      }
body.page-reset-password .footer-link {
        margin-top: 18px;
        text-align: center;
        font-size: 14px;
      }
body.page-reset-password .footer-link a {
        color: #16a34a;
        text-decoration: none;
        font-weight: 700;
      }

    

/* sessions.html */
body.page-sessions * { box-sizing: border-box; }
body.page-sessions {
      margin: 0;
      font-family: Arial, Helvetica, sans-serif;
      background: linear-gradient(135deg, #0f172a, #1d4ed8);
      color: #0f172a;
      padding: 20px;
    }
body.page-sessions .container {
      max-width: 1200px;
      margin: auto;
      background: white;
      padding: 25px;
      border-radius: 16px;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.22);
    }
body.page-sessions .topbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }
body.page-sessions h1 {
      margin: 0 0 8px;
      color: #16a34a;
    }
body.page-sessions .subtitle {
      margin: 0;
      color: #475569;
      font-size: 14px;
    }
body.page-sessions .actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }
body.page-sessions .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      margin-left: auto;
      background: #0f172a;
      color: white;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 5px;
    }
body.page-sessions .menu-toggle span {
      width: 22px;
      height: 2px;
      background: currentColor;
      border-radius: 999px;
      display: block;
    }
body.page-sessions button {
      padding: 10px 15px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-weight: bold;
    }
body.page-sessions .btn-green { background: #16a34a; color: white; }
body.page-sessions .btn-red { background: #ef4444; color: white; }
body.page-sessions .btn-blue { background: #2563eb; color: white; }
body.page-sessions .btn-gray { background: #475569; color: white; }
body.page-sessions .message {
      min-height: 22px;
      margin: 10px 0 18px;
      font-size: 14px;
      font-weight: 600;
    }
body.page-sessions .stats {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 14px;
      margin-bottom: 20px;
    }
body.page-sessions .stat-card {
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      padding: 16px;
    }
body.page-sessions .stat-label {
      font-size: 13px;
      color: #64748b;
      margin-bottom: 8px;
    }
body.page-sessions .stat-value {
      font-size: 26px;
      font-weight: 800;
      color: #16a34a;
    }
body.page-sessions .table-wrap {
      overflow: auto;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
    }
body.page-sessions table {
      width: 100%;
      border-collapse: collapse;
      min-width: 980px;
    }
body.page-sessions th, body.page-sessions td {
      padding: 12px;
      border-bottom: 1px solid #ddd;
      text-align: left;
    }
body.page-sessions th {
      background: #f8fafc;
    }
body.page-sessions .badge {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }
body.page-sessions .badge-admin {
      background: rgba(37, 99, 235, 0.12);
      color: #1d4ed8;
    }
body.page-sessions .badge-user {
      background: rgba(22, 163, 74, 0.12);
      color: #15803d;
    }
@media (max-width: 1100px) {
body.page-sessions .stats {
        grid-template-columns: repeat(2, 1fr);
      }

    
}
@media (max-width: 700px) {
body.page-sessions .stats {
        grid-template-columns: 1fr;
      }
body.page-sessions {
        padding: 12px;
      }
body.page-sessions .container {
        padding: 16px;
      }
body.page-sessions .topbar {
        display: grid;
        grid-template-columns: 1fr auto;
      }
body.page-sessions .menu-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
      }
body.page-sessions .actions {
        display: none;
        grid-column: 1 / -1;
        flex-direction: column;
      }
body.page-sessions .container.menu-open .actions {
        display: flex;
      }
body.page-sessions .actions button {
        width: 100%;
      }

    
}

  

/* Global theme support for pages that did not originally define both modes. */
html.dark body.page-login,
html.dark body.page-register,
html.dark body.page-forgot-password,
html.dark body.page-reset-password {
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
}

html.light body.page-login,
html.light body.page-register,
html.light body.page-forgot-password,
html.light body.page-reset-password {
  background: linear-gradient(135deg, #f8fafc, #dbeafe);
}

html.dark body.page-admin,
html.dark body.page-notifications,
html.dark body.page-parametres,
html.dark body.page-preview,
html.dark body.page-sessions {
  background: #0f1720;
  color: #e5eef5;
}

html.dark body.page-admin .container,
html.dark body.page-notifications .container,
html.dark body.page-parametres .settings-shell,
html.dark body.page-preview .settings-shell,
html.dark body.page-sessions .container,
html.dark body.page-admin table,
html.dark body.page-notifications .card,
html.dark body.page-parametres .panel,
html.dark body.page-preview .panel {
  background: #16212b;
  color: #e5eef5;
  border-color: #263644;
}

html.dark body.page-admin th,
html.dark body.page-admin td,
html.dark body.page-sessions th,
html.dark body.page-sessions td {
  border-color: #263644;
}

html.dark body.page-admin th,
html.dark body.page-sessions th {
  background: #101820;
}

/* Apropos page refreshed to match the accueil layout. */
body.page-apropos {
  --bg: #0f1720;
  --bg-gradient: #1a2632;
  --card: #16212b;
  --text: #e5eef5;
  --muted: #9fb2c3;
  --accent: #2ecc71;
  --border: #2a3b4c;
  --chip: rgba(46, 204, 113, 0.12);
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(135deg, var(--bg), var(--bg-gradient));
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

html.light body.page-apropos {
  --bg: #f8fafc;
  --bg-gradient: #eef2f7;
  --card: #ffffff;
  --text: #0f1720;
  --muted: #64748b;
  --border: #dbe4ee;
  --chip: rgba(46, 204, 113, 0.1);
}

body.page-apropos .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

body.page-apropos header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

body.page-apropos nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

body.page-apropos nav a {
  color: #e5eef5;
  text-decoration: none;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 12px;
}

html.light body.page-apropos nav a {
  color: #0f1720;
  background: #f1f5f9;
  border-color: #cbd5e1;
}

body.page-apropos .menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}

body.page-apropos .menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

body.page-apropos .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12);
}

body.page-apropos .hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
  align-items: center;
  margin-top: 10px;
}

body.page-apropos .hero h1 {
  margin: 14px 0;
  color: var(--text);
  font-size: 38px;
  line-height: 1.1;
}

body.page-apropos .about-lead,
body.page-apropos .about-summary p,
body.page-apropos .card p,
body.page-apropos .footer-note p {
  color: var(--muted);
  line-height: 1.65;
}

body.page-apropos .badge,
body.page-apropos .tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  background: var(--chip);
  color: var(--accent);
  border: 1px solid rgba(46, 204, 113, 0.25);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 800;
  font-size: 13px;
}

body.page-apropos .about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

body.page-apropos .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--accent);
  color: #08130d;
  font-weight: 800;
  text-decoration: none;
}

body.page-apropos .btn.ghost {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}

body.page-apropos .stats {
  display: flex;
  gap: 15px;
}

body.page-apropos .stat {
  flex: 1;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}

html.light body.page-apropos .stat {
  background: #f8fafc;
}

body.page-apropos .stat small {
  color: var(--muted);
}

body.page-apropos .stat strong {
  display: block;
  margin-top: 6px;
  color: var(--accent);
  font-size: 28px;
}

body.page-apropos .about-summary {
  background:
    linear-gradient(145deg, rgba(46, 204, 113, 0.12), transparent 45%),
    var(--card);
}

body.page-apropos .about-summary h2 {
  margin: 18px 0 10px;
  border: 0;
  padding: 0;
  color: var(--text);
}

body.page-apropos .about-section {
  margin-top: 28px;
}

body.page-apropos .section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

body.page-apropos .section-heading h2 {
  margin: 0;
  border: 0;
  padding: 0;
  color: var(--text);
}

body.page-apropos .section-heading.compact {
  margin-bottom: 14px;
}

body.page-apropos .about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.page-apropos .features .card h3,
body.page-apropos .about-panel h3 {
  margin-top: 0;
  color: var(--accent);
}

body.page-apropos .split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.page-apropos .math-box {
  margin: 14px 0 18px;
  border: 1px dashed var(--accent);
  border-radius: 14px;
  background: var(--chip);
  color: var(--accent);
  padding: 18px;
  font-weight: 900;
  text-align: center;
}

body.page-apropos ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.page-apropos li {
  position: relative;
  margin-bottom: 12px;
  padding-left: 24px;
  color: var(--muted);
}

body.page-apropos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
}

body.page-apropos .footer-note {
  margin: 30px 0 12px;
}

body.page-apropos .footer-note strong {
  color: var(--accent);
}

@media (max-width: 900px) {
  body.page-apropos .hero,
  body.page-apropos .split,
  body.page-apropos .about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body.page-apropos header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  body.page-apropos nav {
    grid-column: 1 / -1;
    display: none;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
  }

  body.page-apropos header.menu-open nav {
    display: flex;
  }

  body.page-apropos nav a,
  body.page-apropos .btn {
    width: 100%;
  }

  body.page-apropos .menu-toggle {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
  }

  body.page-apropos .hero h1 {
    font-size: 30px;
  }

body.page-apropos .stats {
    flex-direction: column;
  }
}

/* Responsive project journal and contact section on accueil. */
body.page-accueil .project-contact {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  gap: 25px;
  align-items: start;
}

body.page-accueil .project-log,
body.page-accueil .contact-card {
  min-width: 0;
}

body.page-accueil .project-log .news-item:last-child {
  margin-bottom: 0 !important;
}

body.page-accueil .contact-card {
  position: sticky;
  top: 18px;
}

body.page-accueil .contact-form {
  display: grid;
  gap: 12px;
  width: 100%;
}

body.page-accueil .contact-form input,
body.page-accueil .contact-form textarea {
  min-width: 0;
  width: 100%;
}

body.page-accueil .contact-form textarea {
  resize: vertical;
  min-height: 112px;
}

body.page-accueil .contact-submit {
  justify-content: center;
  width: 100%;
}

@media (max-width: 900px) {
  body.page-accueil .project-contact {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body.page-accueil .contact-card {
    position: static;
  }
}

@media (max-width: 560px) {
  body.page-accueil .project-log,
  body.page-accueil .contact-card {
    padding: 20px;
  }

  body.page-accueil .news-item {
    padding: 4px 0 4px 13px;
  }
}