/* ═══════════════════════════════════════════════════════════════════
   EDUCA'RISK — Backoffice Admin
   Palette : Dark sidebar · lime accent · fond clair
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Sidebar */
  --sidebar-bg:     #001416;
  --sidebar-width:  224px;
  /* Accent EDUCA'RISK */
  --lime:           #bcce52;
  --lime-pale:      rgba(188,206,82,.12);
  /* Surfaces */
  --surface:        #f8fafc;
  --card-bg:        #ffffff;
  --border:         #e2e8f0;
  --border-light:   #f1f5f9;
  /* Textes */
  --texte:          #0f172a;
  --texte-doux:     #64748b;
  --text-light:     #94a3b8;
  /* Compat couleurs "eau" (inline styles dans les templates existants) */
  --eau-profonde:   #001416;
  --eau-marine:     #1e293b;
  --eau-vive:       #bcce52;
  --eau-moyen:      #a8bb3e;
  --eau-clair:      #bcce52;
  --eau-turquoise:  #0f766e;
  --eau-pale:       rgba(188,206,82,.12);
  --eau-tres-pale:  rgba(188,206,82,.06);
  /* Compat portail / inline styles */
  --bordure:        #e2e8f0;
  --bordure-legere: #f1f5f9;
  /* Status */
  --secur-fort:     #b45309;
  --secur-vif:      #d97706;
  --secur-orange:   #f59e0b;
  --secur-clair:    #fbbf24;
  --secur-pale:     #fffbeb;
  --vert-fort:      #14532d;
  --vert-vif:       #16a34a;
  --vert-clair:     #22c55e;
  --vert-pale:      #f0fdf4;
  /* Badges formation */
  --sev-bg:         rgba(188,206,82,.15);
  --sev-color:      #5a6e00;
  --catmi-bg:       #001416;
  --catmi-color:    #bcce52;
  --eif-bg:         #f8fafc;
  --eif-color:      #001416;
}

/* ── Reset ───────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--surface);
  color: var(--texte);
  font-size: .875rem;
  margin: 0;
}
body::before { display: none; }

/* ── Mise en page sidebar ────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  overflow-y: auto;
  z-index: 200;
}
.sidebar-logo {
  padding: 1.25rem;
  border-bottom: 1px solid #1e293b;
  margin-bottom: .5rem;
}
.sidebar-logo-mark {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lime);
}
.sidebar-logo-name {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-top: .15rem;
  letter-spacing: -.3px;
}
.sidebar-admin-badge {
  display: inline-block;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--lime);
  color: #001416;
  border-radius: 3px;
  padding: .1rem .4rem;
  margin-top: .4rem;
}
.sidebar-nav {
  padding: 0 .625rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 1rem;
}
.nav-section-label {
  font-size: .6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #475569;
  padding: .75rem .625rem .2rem;
  font-weight: 600;
}
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .75rem;
  border-radius: 6px;
  color: #94a3b8;
  font-size: .81rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
}
.sidebar-nav .nav-link::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .4;
  flex-shrink: 0;
}
.sidebar-nav .nav-link.active {
  background: var(--lime-pale);
  color: var(--lime);
}
.sidebar-nav .nav-link:hover:not(.active) {
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
}
.nav-link-deconnexion {
  margin-top: auto;
  color: #475569 !important;
  font-size: .76rem !important;
  margin-top: 1rem;
}

/* ── Corps principal ─────────────────────────────────────── */
.app-body {
  flex: 1;
  margin-left: var(--sidebar-width);
}
.main-content {
  padding: 2rem;
  max-width: 1200px;
}

/* ── Topbar mobile ───────────────────────────────────────── */
.mobile-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 50px;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  gap: .75rem;
  z-index: 150;
}
.mobile-hamburger {
  background: transparent;
  border: none;
  color: #94a3b8;
  padding: .25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mobile-hamburger:hover { color: #f1f5f9; }
.mobile-topbar-brand {
  font-size: .88rem;
  font-weight: 700;
  color: #f1f5f9;
}

/* ── Overlay sidebar mobile ──────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 199;
}
.sidebar-overlay.active { display: block; }

/* ── Bouton fermer sidebar ───────────────────────────────── */
.sidebar-close {
  background: transparent;
  border: none;
  color: #475569;
  font-size: .9rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  margin-top: .1rem;
}
.sidebar-close:hover { color: #94a3b8; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 991px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 200;
  }
  .sidebar.open { transform: translateX(0); }
  .app-body { margin-left: 0; }
  .main-content { padding: 4.5rem 1rem 2rem; }

  /* Tables scrollables sur mobile */
  .table-responsive { -webkit-overflow-scrolling: touch; }

  /* Stat cards : 2 colonnes sur mobile */
  .stat-card { margin-bottom: .5rem; }

  /* Page hero : empiler le bouton sous le titre */
  .page-hero .d-flex { flex-direction: column; align-items: flex-start !important; gap: .75rem !important; }
}

/* ── En-tête de page ─────────────────────────────────────── */
.page-hero {
  background: transparent;
  color: var(--texte);
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.75rem;
  box-shadow: none;
  overflow: visible;
  position: static;
}
.page-hero::after { display: none; }
.page-hero h1 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--texte);
  margin: 0;
}
.page-hero .hero-sub,
.page-hero p {
  font-size: .8rem;
  color: var(--texte-doux);
  margin: .2rem 0 0;
  opacity: 1;
}
.page-hero a,
.page-hero .btn { position: static; z-index: auto; }

/* ── Cartes ───────────────────────────────────────────────── */
.card {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--card-bg) !important;
  overflow: hidden;
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-light) !important;
  padding: .9rem 1.25rem !important;
  font-size: .85rem;
  color: var(--texte);
}
.card-body { padding: 1.25rem; }

/* ── Cartes statistiques (index) ─────────────────────────── */
.stat-card {
  padding: 1.1rem 1.25rem !important;
  border-top: none !important;
  border-left: 3px solid var(--border) !important;
  text-align: left;
  cursor: default;
  transition: border-left-color .2s;
}
.stat-card:hover { transform: none; box-shadow: none !important; }
.stat-card.sc-sessions { border-left-color: var(--eau-vive) !important; }
.stat-card.sc-futures   { border-left-color: var(--vert-vif) !important; }
.stat-card.sc-agents    { border-left-color: var(--eau-turquoise) !important; }
.stat-card.sc-attente   { border-left-color: var(--secur-orange) !important; }

.stat-emoji { display: none; }
.stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--texte);
  line-height: 1;
  margin-bottom: .3rem;
  display: block;
}
.sc-sessions .stat-num { color: var(--eau-vive); }
.sc-futures  .stat-num { color: var(--vert-vif); }
.sc-agents   .stat-num { color: var(--eau-turquoise); }
.sc-attente  .stat-num { color: var(--secur-orange); }
.stat-label {
  font-size: .68rem;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: .8px;
  font-weight: 600;
}

/* ── Tableaux ────────────────────────────────────────────── */
.table-themed thead tr { background: transparent; }
.table-themed thead th {
  color: var(--texte-doux) !important;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  padding: .65rem 1rem !important;
  background: transparent !important;
}
.table-themed tbody tr {
  border-bottom: 1px solid var(--border-light) !important;
  transition: background .12s;
}
.table-themed tbody tr:hover { background: var(--surface) !important; }
.table-themed tbody td {
  border: none !important;
  padding: .75rem 1rem !important;
  vertical-align: middle;
  color: #334155;
}

/* ── Badges de formation ─────────────────────────────────── */
.badge-sev {
  background: var(--sev-bg); color: var(--sev-color);
  font-size: .68rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 99px;
  display: inline-block;
}
.badge-catmi {
  background: var(--catmi-bg); color: var(--catmi-color);
  font-size: .68rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 99px;
  display: inline-block;
}
.badge-eif {
  background: var(--eif-bg); color: var(--eif-color);
  font-size: .68rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 99px;
  display: inline-block;
}

/* ── Bootstrap badges ────────────────────────────────────── */
.badge {
  border-radius: 99px !important;
  font-weight: 600 !important;
  font-size: .72rem !important;
  padding: .25em .7em !important;
}
.badge.bg-primary   { background: var(--eau-vive) !important; }
.badge.bg-secondary { background: #94a3b8 !important; }
.badge.bg-success   { background: var(--vert-vif) !important; }
.badge.bg-warning   { background: var(--secur-orange) !important; color: white !important; }
.badge.bg-light     { background: var(--surface) !important; color: var(--texte-doux) !important; }
.badge.bg-info      { background: var(--eau-clair) !important; }

/* ── Boutons ─────────────────────────────────────────────── */
.btn {
  border-radius: 7px !important;
  font-weight: 500;
  font-size: .82rem;
  transition: all .15s ease !important;
}
.btn-primary {
  background: var(--texte) !important;
  border-color: var(--texte) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: #1e293b !important;
  border-color: #1e293b !important;
  transform: none;
  box-shadow: none !important;
}
.btn-success {
  background: var(--vert-vif) !important;
  border-color: var(--vert-vif) !important;
  color: white !important;
}
.btn-success:hover {
  background: var(--vert-fort) !important;
  border-color: var(--vert-fort) !important;
}
.btn-warning {
  background: var(--secur-orange) !important;
  border-color: var(--secur-orange) !important;
  color: white !important;
}
.btn-light {
  background: white !important;
  border-color: var(--border) !important;
  color: var(--texte) !important;
}
.btn-light:hover {
  background: var(--surface) !important;
  color: var(--texte) !important;
}
.btn-outline-primary {
  color: var(--eau-vive) !important;
  border-color: var(--eau-vive) !important;
  background: transparent !important;
}
.btn-outline-primary:hover {
  background: var(--eau-vive) !important;
  color: white !important;
  transform: none;
}
.btn-outline-secondary {
  color: var(--texte-doux) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--surface) !important;
  color: var(--texte) !important;
  border-color: var(--texte-doux) !important;
}
.btn-outline-success {
  color: var(--vert-vif) !important;
  border-color: var(--vert-vif) !important;
}
.btn-outline-success:hover {
  background: var(--vert-vif) !important;
  color: white !important;
}
.btn-outline-danger {
  color: #dc2626 !important;
  border-color: #fca5a5 !important;
}
.btn-outline-danger:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
}
.btn-xs {
  padding: 3px 9px !important;
  font-size: .72rem !important;
  border-radius: 5px !important;
}

/* ── Alertes ─────────────────────────────────────────────── */
.alert {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  border-left: none !important;
  font-size: .85rem;
}
.alert-success {
  background: var(--vert-pale) !important;
  border-color: #bbf7d0 !important;
  color: var(--vert-fort) !important;
}
.alert-warning {
  background: var(--secur-pale) !important;
  border-color: #fde68a !important;
  color: #78350f !important;
}
.alert-danger {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #991b1b !important;
}
.alert-info {
  background: var(--eau-tres-pale) !important;
  border-color: var(--eau-pale) !important;
  color: var(--eau-marine) !important;
}

/* ── Formulaires ─────────────────────────────────────────── */
.form-control, .form-select {
  border-color: var(--border) !important;
  border-radius: 7px !important;
  font-size: .85rem;
}
.form-control:focus, .form-select:focus {
  border-color: #94a3b8 !important;
  box-shadow: 0 0 0 3px rgba(15,23,42,.08) !important;
}
.form-label {
  font-size: .82rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: .35rem;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-item a { color: var(--eau-clair); text-decoration: none; font-size: .83rem; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--texte-doux); font-size: .83rem; }
.breadcrumb { margin-bottom: .4rem !important; }

/* ── Liste de groupe ─────────────────────────────────────── */
.list-group-item {
  border-color: var(--border-light) !important;
  padding: .7rem 1.25rem !important;
  transition: background .12s;
}
.list-group-item:hover { background: var(--surface) !important; }

/* ── Canvas / signature ──────────────────────────────────── */
canvas { cursor: crosshair; touch-action: none; border-radius: 8px; }
.sig-cell { min-height: 60px; padding: 4px; text-align: center; }

/* ── Accordion (page aide) ───────────────────────────────── */
.accordion-button {
  font-weight: 600;
  color: var(--texte) !important;
  background: var(--surface) !important;
  font-size: .85rem;
}
.accordion-button:not(.collapsed) {
  background: var(--eau-tres-pale) !important;
  color: var(--eau-vive) !important;
  box-shadow: none !important;
}
.accordion-item {
  border-color: var(--border) !important;
  border-radius: 8px !important;
  overflow: hidden;
  margin-bottom: .5rem;
}

/* ── Liens bar (session detail) ──────────────────────────── */
.liens-bar {
  background: var(--eau-tres-pale) !important;
  border: 1px solid var(--eau-pale) !important;
  border-left: 4px solid var(--eau-vive) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* ── Navbar / footer masqués ─────────────────────────────── */
.navbar, .nav-wave, .app-footer, footer { display: none !important; }

/* ── Utilitaires ─────────────────────────────────────────── */
.text-eau   { color: var(--eau-vive) !important; }
.text-secur { color: var(--secur-orange) !important; }
.bg-eau     { background: var(--eau-tres-pale) !important; }

/* ════════════════════════════════════════════════════════════
   PORTAIL APPRENANT — styles conservés intégralement
   ════════════════════════════════════════════════════════════ */
.portail-hero {
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 40%, #1d4ed8 80%, #3b82f6 100%);
  color: white; padding: 2rem 1.2rem 2.8rem; position: relative; overflow: hidden;
}
.portail-hero::before {
  content: '∿∿∿'; position: absolute; bottom: .3rem; right: .8rem;
  font-size: 2.8rem; opacity: .12; letter-spacing: -2px;
}
.portail-hero h1 { font-size: .8rem; font-weight: 500; opacity: .7; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: .4rem; }
.portail-hero h2 { font-size: 1.9rem; font-weight: 800; margin-bottom: .4rem; line-height: 1.1; }
.portail-hero p  { font-size: .86rem; opacity: .78; margin: 0; }

.portail-wave { line-height: 0; background: #f8fafc; }
.portail-wave svg { display: block; width: 100%; height: 35px; }

.portail-section {
  background: white; border-radius: 12px; padding: 1.3rem 1.2rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
.portail-section h3 {
  font-size: 1rem; font-weight: 700; color: var(--eau-marine);
  margin-bottom: .9rem; padding-bottom: .5rem;
  border-bottom: 2px solid var(--surface);
  display: flex; align-items: center; gap: .5rem;
}

.periode-block {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 1rem; margin-bottom: .75rem; background: var(--surface);
  transition: border-color .2s, background .2s;
}
.periode-block.signe { border-color: var(--vert-clair); background: var(--vert-pale); }
.periode-block h5 { font-size: .92rem; font-weight: 600; color: var(--texte); margin: 0; }

.portail-canvas {
  width: 100%; max-width: 380px; height: 120px;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important; background: white; display: block;
}

.badge-signe {
  background: var(--vert-vif);
  color: white; padding: .25em .8em; border-radius: 99px;
  font-size: .75rem; font-weight: 600;
}
.badge-attente {
  background: var(--surface); color: var(--texte-doux);
  border: 1px solid var(--border); padding: .25em .8em;
  border-radius: 99px; font-size: .75rem; font-weight: 500;
}
.sig-img { max-width: 200px; max-height: 80px; border: 1px solid var(--border); border-radius: 8px; background: white; }

.star-label { font-size: 1.9rem; cursor: pointer; color: #d0dae8; transition: color .15s, transform .1s; line-height: 1; }
.star-label.active { color: var(--secur-clair); }
.star-label:hover  { color: var(--secur-orange); transform: scale(1.1); }

.doc-btn {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem;
  border: 1px solid var(--border); border-radius: 8px; color: var(--eau-marine);
  text-decoration: none; margin-bottom: .6rem; font-weight: 600; font-size: .9rem;
  background: var(--surface); transition: all .18s;
}
.doc-btn:hover {
  background: var(--eau-tres-pale); border-color: var(--eau-clair); color: var(--eau-marine);
  box-shadow: 0 2px 8px rgba(29,78,216,.1);
}
.doc-btn .doc-icon { font-size: 1.3rem; }