/* ============================================================
   SteveetLiya School — thème « verre dépoli » (glassmorphism)
   Barre latérale + habillage global de toutes les pages.
   L'or suit la couleur secondaire de l'école (--ecole-or).
   ============================================================ */
:root{
  --ec-navy:#14233A; --ec-navy-2:#24384F; --ec-muted:#5E7186;
  --ec-gold: var(--ecole-or, #C9971C); --ec-gold-2:#E4BB49;
  --ec-glass:rgba(255,255,255,.55); --ec-glass-2:rgba(255,255,255,.7);
  --ec-stroke:rgba(255,255,255,.7);
  --ec-radius:22px; --ec-shadow:0 20px 50px rgba(20,35,58,.16);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--ec-navy);
  font-family:'Plus Jakarta Sans','Segoe UI',system-ui,Arial,sans-serif;
  background:
    radial-gradient(680px 480px at 12% 8%, rgba(233,196,106,.34), transparent 60%),
    radial-gradient(720px 560px at 88% 16%, rgba(107,191,181,.32), transparent 60%),
    radial-gradient(760px 620px at 74% 98%, rgba(38,80,140,.34), transparent 62%),
    linear-gradient(135deg,#E7EEF5 0%, #D3DEE9 48%, #C3D2DF 100%);
  background-attachment:fixed;
}

/* ---------- Layout application ---------- */
.ec-app{padding:22px}
.ec-main{margin-left:334px; transition:margin-left .45s cubic-bezier(.22,.9,.28,1); min-height:calc(100vh - 44px); display:flex; flex-direction:column}
.ec-content{flex:1 1 auto; padding:4px 4px 20px}
.ec-footer{text-align:center; color:var(--ec-muted); font-size:12.5px; padding:14px 0}

/* ---------- Barre latérale ---------- */
.ec-sidebar{
  position:fixed; left:22px; top:22px; bottom:22px; width:300px; z-index:1040; overflow:hidden;
  background:var(--ec-glass); backdrop-filter:blur(24px) saturate(1.25); -webkit-backdrop-filter:blur(24px) saturate(1.25);
  border:1px solid var(--ec-stroke); border-radius:26px; box-shadow:var(--ec-shadow);
  padding:22px 18px 18px; display:flex; flex-direction:column;
  transition:width .42s cubic-bezier(.22,.9,.28,1), padding .42s cubic-bezier(.22,.9,.28,1);
}
.ec-dots{display:flex; align-items:center; gap:9px; margin-bottom:18px}
.ec-dots .d{width:13px;height:13px;border-radius:50%;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.ec-dots .d:hover{transform:scale(1.18)}
.ec-dots .d.on{transform:scale(1.25);box-shadow:0 0 0 3px #fff, 0 3px 9px rgba(20,35,58,.35)}
.ec-dots .r{background:#FF5F57}.ec-dots .y{background:#FEBC2E}.ec-dots .g{background:#28C840}
.ec-toggle{margin-left:auto; width:30px;height:30px;border-radius:50%; background:var(--ec-navy); border:none; cursor:pointer;
  display:grid; place-items:center; box-shadow:0 3px 9px rgba(0,0,0,.26); transition:transform .2s, background .2s}
.ec-toggle:hover{transform:scale(1.12); background:#0B1626}
.ec-toggle svg{width:16px;height:16px}
.ec-toggle svg path{transition:none}
body.sb-collapsed .ec-toggle svg{transform:rotate(180deg); transform-origin:center}

.ec-brand{display:flex; align-items:center; gap:12px; text-decoration:none; margin-bottom:4px}
.ec-emblem{width:44px;height:44px;flex:none;border-radius:50%; display:grid;place-items:center; overflow:hidden;
  background:radial-gradient(circle at 35% 30%,#F8DE8A,#E4BB49 55%,#C08E17); box-shadow:0 6px 14px rgba(192,142,23,.4)}
.ec-emblem i{color:var(--ec-navy); font-size:20px}
.ec-emblem img{width:100%;height:100%;object-fit:cover}
.ec-brandname{font-size:20px;font-weight:800;color:var(--ec-navy);letter-spacing:-.4px;line-height:1.1}

.ec-divider{height:1px;background:linear-gradient(90deg,rgba(20,35,58,.2),rgba(20,35,58,.04));margin:16px 4px}
.ec-eyebrow{font-size:11px;font-weight:700;letter-spacing:2.5px;color:var(--ec-muted);text-transform:uppercase}
.ec-menuhead{display:flex;align-items:center;justify-content:space-between;margin:6px 8px 10px}
.ec-pageind{font-size:11px;font-weight:800;color:var(--ec-gold)}

/* Pagination du menu (3 pages, glissement droite->gauche) */
.ec-viewport{flex:1 1 auto;overflow:hidden;position:relative;min-height:0}
.ec-track{display:flex;width:300%;height:100%;transition:transform .5s cubic-bezier(.22,.9,.28,1)}
.ec-page{width:33.3333%;flex:none;overflow-y:auto;overflow-x:hidden;padding-right:6px;
  display:flex;flex-direction:column;gap:2px}
.ec-page::-webkit-scrollbar{width:6px}
.ec-page::-webkit-scrollbar-thumb{background:rgba(20,35,58,.16);border-radius:3px}

.ec-menu{overflow-y:auto; overflow-x:hidden; margin-right:-6px; padding-right:6px; display:flex; flex-direction:column; gap:2px}
.ec-menu::-webkit-scrollbar{width:6px}
.ec-menu::-webkit-scrollbar-thumb{background:rgba(20,35,58,.16);border-radius:3px}

.ec-link{display:flex; align-items:center; gap:13px; padding:11px 13px; border-radius:15px;
  color:var(--ec-navy); text-decoration:none; font-size:15px; font-weight:600;
  transition:background .2s ease, box-shadow .2s ease; white-space:nowrap}
.ec-link .ec-ic{width:24px;flex:none;text-align:center}
.ec-link .ec-ic i{color:var(--ec-navy-2); font-size:16px; transition:color .2s}
.ec-link .ec-txt{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis}
.ec-link .ec-go{margin-left:auto; width:28px;height:28px;border-radius:50%; background:var(--ec-navy);
  display:grid; place-items:center; opacity:0; transform:scale(.5); transition:opacity .2s, transform .2s cubic-bezier(.2,1.4,.4,1)}
.ec-link .ec-go i{color:var(--ec-gold); font-size:12px}
.ec-link:hover, .ec-link.active{background:rgba(255,255,255,.9); box-shadow:0 10px 22px rgba(20,35,58,.15)}
.ec-link:hover .ec-ic i, .ec-link.active .ec-ic i{color:var(--ec-gold)}
.ec-link:hover .ec-go, .ec-link.active .ec-go{opacity:1; transform:scale(1)}
.ec-link.danger:hover{background:rgba(255,236,232,.95)}
.ec-link.danger:hover .ec-ic i{color:#C0492E}
.ec-link.danger .ec-go{background:#C0492E}
.ec-link.danger .ec-go i{color:#fff}

/* Catégories dépliables (sous-menus) */
.ec-group{display:flex;flex-direction:column}
.ec-cat{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:15px;border:none;background:transparent;
  color:var(--ec-navy);font-size:15px;font-weight:600;cursor:pointer;text-align:left;width:100%;
  transition:background .2s ease, box-shadow .2s ease;font-family:inherit}
.ec-cat .ec-ic{width:24px;flex:none;text-align:center}
.ec-cat .ec-ic i{color:var(--ec-navy-2);font-size:16px;transition:color .2s}
.ec-cat .ec-txt{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ec-caret{margin-left:auto;transition:transform .25s ease;transform:rotate(-90deg)}
.ec-caret i{color:var(--ec-muted);font-size:12px}
.ec-cat:hover{background:rgba(255,255,255,.9);box-shadow:0 10px 22px rgba(20,35,58,.15)}
.ec-cat:hover .ec-ic i{color:var(--ec-gold)}
.ec-group.open>.ec-cat{background:rgba(255,255,255,.55)}
.ec-group.open>.ec-cat .ec-ic i{color:var(--ec-gold)}
.ec-group.open .ec-caret{transform:rotate(180deg)}
.ec-sub{display:none;flex-direction:column;gap:2px;margin:2px 0 4px 26px;padding-left:8px;
  border-left:2px solid rgba(20,35,58,.1)}
.ec-group.open .ec-sub{display:flex}
.ec-sub .ec-link{font-size:14px;padding:9px 12px;font-weight:600}
.ec-sub .ec-link .ec-ic i{font-size:14px}

/* Puce « année scolaire » (tableau de bord) */
.ec-yearchip{display:inline-flex;align-items:center;gap:11px;background:var(--ec-glass-2);
  border:1px solid var(--ec-stroke);border-radius:15px;padding:11px 18px;font-weight:800;font-size:18px;
  color:var(--ec-navy);box-shadow:0 6px 16px rgba(20,35,58,.08);letter-spacing:.3px}
.ec-yearchip i{color:var(--ec-gold);font-size:16px}

/* Flyout : sous-menu / libellé au survol quand la barre est réduite */
.ec-flyout{position:fixed; z-index:1200; min-width:210px; max-width:280px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3);
  border:1px solid var(--ec-stroke); border-radius:16px; box-shadow:0 22px 54px rgba(20,35,58,.28);
  padding:8px; opacity:0; transform:translateX(-8px); pointer-events:none;
  transition:opacity .18s ease, transform .18s ease}
.ec-flyout.show{opacity:1; transform:translateX(0); pointer-events:auto}
.ec-flyout::before{content:""; position:absolute; left:-7px; top:18px; width:12px;height:12px; transform:rotate(45deg);
  background:rgba(255,255,255,.94); border-left:1px solid var(--ec-stroke); border-bottom:1px solid var(--ec-stroke)}
.ec-flyout-title{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--ec-muted);padding:7px 11px 8px}
.ec-flyout-title.single{text-transform:none;letter-spacing:0;font-size:14.5px;font-weight:700;color:var(--ec-navy);padding:9px 11px}
.ec-flyout .ec-link{color:var(--ec-navy);font-size:14px;font-weight:600;padding:9px 11px;border-radius:12px;justify-content:flex-start;gap:12px}
.ec-flyout .ec-link .ec-ic{width:22px}
.ec-flyout .ec-link .ec-ic i{color:var(--ec-gold);font-size:14px}
.ec-flyout .ec-link .ec-txt{display:inline!important}
.ec-flyout .ec-link .ec-go{display:none}
.ec-flyout .ec-link:hover{background:rgba(20,35,58,.06)}

.ec-spacer{flex:1 1 auto; min-height:8px}

.ec-year{margin:0 2px 10px}
.ec-yearbtn{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:13px; text-decoration:none;
  color:var(--ec-navy-2); font-size:13.5px; font-weight:600; background:rgba(255,255,255,.5); border:1px solid var(--ec-stroke)}
.ec-yearbtn:hover{background:rgba(255,255,255,.85); color:var(--ec-navy)}
.ec-yearbtn i{color:var(--ec-gold)}

.ec-userbox{display:flex; align-items:center; gap:11px; padding:10px; border-radius:16px;
  background:var(--ec-glass-2); border:1px solid var(--ec-stroke)}
.ec-avatar{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#E4BB49,#C9971C); color:#fff; font-weight:800; font-size:14px; box-shadow:0 0 0 3px rgba(201,151,28,.22)}
.ec-who{flex:1 1 auto; min-width:0}
.ec-who b{display:block; font-size:14px; font-weight:700; color:var(--ec-navy); line-height:1.2; overflow:hidden; text-overflow:ellipsis}
.ec-who small{color:var(--ec-muted); font-size:12px}
.ec-icobtn{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;text-decoration:none;
  color:var(--ec-navy-2); background:rgba(20,35,58,.06); transition:background .2s, color .2s}
.ec-icobtn:hover{background:var(--ec-navy); color:#fff}
.ec-icobtn.danger:hover{background:#C0492E; color:#fff}

/* ---------- Rail d'icônes (menu replié) ---------- */
body.sb-collapsed .ec-sidebar{width:78px; padding-left:0; padding-right:0}
body.sb-collapsed .ec-main{margin-left:112px}
body.sb-collapsed .ec-brand{justify-content:center}
body.sb-collapsed .ec-brandname,
body.sb-collapsed .ec-eyebrow,
body.sb-collapsed .ec-menuhead,
body.sb-collapsed .ec-link .ec-txt,
body.sb-collapsed .ec-link .ec-go,
body.sb-collapsed .ec-who,
body.sb-collapsed .ec-year .ec-txt,
body.sb-collapsed .ec-icobtn{display:none}
body.sb-collapsed .ec-dots{justify-content:center}
body.sb-collapsed .ec-dots .d{display:none}
body.sb-collapsed .ec-toggle{margin:0 auto}
body.sb-collapsed .ec-link{justify-content:center; gap:0; padding:11px 0}
body.sb-collapsed .ec-link .ec-ic{width:auto}
/* Catégories en mode rail : icônes visibles, sous-menus dépliés à plat */
body.sb-collapsed .ec-cat{justify-content:center; gap:0; padding:11px 0}
body.sb-collapsed .ec-cat .ec-txt,
body.sb-collapsed .ec-caret{display:none}
body.sb-collapsed .ec-sub{display:none!important}
body.sb-collapsed .ec-year{display:flex; justify-content:center}
body.sb-collapsed .ec-yearbtn{padding:9px; border:none; background:transparent}
body.sb-collapsed .ec-userbox{justify-content:center; padding:8px 0}

/* ---------- Responsive : rail par défaut sur petit écran ---------- */
@media (max-width: 991.98px){
  .ec-sidebar{width:74px; padding-left:0; padding-right:0}
  .ec-main{margin-left:104px}
  .ec-brandname,.ec-eyebrow,.ec-link .ec-txt,.ec-link .ec-go,.ec-who,.ec-year .ec-txt,.ec-icobtn{display:none}
  .ec-dots .d{display:none}.ec-dots{justify-content:center}.ec-toggle{display:none}
  .ec-link{justify-content:center;gap:0;padding:11px 0}.ec-link .ec-ic{width:auto}
  .ec-userbox{justify-content:center;padding:8px 0}
}

/* ============================================================
   Habillage des composants Bootstrap pour coller au thème
   ============================================================ */
.ec-content .card{
  border:1px solid var(--ec-stroke); border-radius:var(--ec-radius);
  background:var(--ec-glass); backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:var(--ec-shadow); transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.ec-content .card:hover{transform:translateY(-4px); box-shadow:0 26px 52px rgba(20,35,58,.2); background:rgba(255,255,255,.72)}
.ec-content .card-header{
  background:transparent; border-bottom:1px solid rgba(20,35,58,.08); font-weight:700; color:var(--ec-navy);
  border-top-left-radius:var(--ec-radius); border-top-right-radius:var(--ec-radius);
}
.stat-card{position:relative; overflow:hidden}
.stat-card::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,var(--ec-gold-2),var(--ec-gold))}

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:var(--ec-navy)}
.text-ecole{color:var(--ec-gold) !important}
.bg-ecole{background:var(--ec-navy) !important}

/* Boutons */
.btn-ecole{background:linear-gradient(135deg,var(--ec-gold-2),var(--ec-gold)); border:none; color:#fff; font-weight:700;
  box-shadow:0 10px 22px rgba(201,151,28,.32); transition:transform .2s, box-shadow .2s, filter .2s}
.btn-ecole:hover, .btn-ecole:focus{color:#fff; transform:translateY(-2px); box-shadow:0 16px 30px rgba(201,151,28,.5); filter:brightness(1.05)}
.btn-ecole:active{transform:translateY(0)}
.btn-primary{background:var(--ec-navy); border-color:var(--ec-navy)}
.btn-primary:hover{background:#0B1626; border-color:#0B1626}
.btn-outline-primary{color:var(--ec-navy); border-color:var(--ec-navy)}
.btn-outline-primary:hover{background:var(--ec-navy); border-color:var(--ec-navy)}
.btn{border-radius:12px}
.btn-sm{border-radius:10px}

/* Boutons « outline » (ex. accès rapides du tableau de bord) */
.ec-content .btn-outline-primary,
.ec-content .btn-outline-secondary{
  background:var(--ec-glass); border:1px solid var(--ec-stroke); color:var(--ec-navy); font-weight:600;
  box-shadow:0 4px 12px rgba(20,35,58,.06);
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease, border-color .1s ease;
  will-change:transform;
}
.ec-content .btn-outline-primary i,
.ec-content .btn-outline-secondary i{color:var(--ec-gold); transition:color .1s ease}
.ec-content .btn-outline-primary:hover,
.ec-content .btn-outline-secondary:hover{
  background:#fff; color:var(--ec-navy); border-color:rgba(201,151,28,.55);
  transform:translateY(-2px); box-shadow:0 14px 28px rgba(20,35,58,.16);
}
.ec-content .btn-outline-primary:hover i,
.ec-content .btn-outline-secondary:hover i{color:var(--ec-gold)}
/* Accès rapides empilés : liseré doré à gauche au survol */
.ec-content .card-body.d-grid .btn{border-left:3px solid transparent}
.ec-content .card-body.d-grid .btn:hover{border-left-color:var(--ec-gold)}

/* Formulaires */
.form-control,.form-select{border-radius:12px; border:1px solid rgba(20,35,58,.15); padding:.6rem .85rem; background:rgba(255,255,255,.8)}
.form-control:focus,.form-select:focus{border-color:var(--ec-gold); box-shadow:0 0 0 3px rgba(201,151,28,.18); background:#fff}
.input-group-text{border-radius:12px; background:rgba(255,255,255,.6); border:1px solid rgba(20,35,58,.15)}

/* Tableaux */
.ec-content .table{--bs-table-bg:transparent}
.ec-content .table thead th{font-size:.76rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ec-muted); border-bottom:2px solid rgba(20,35,58,.1)}
.ec-content .table td,.ec-content .table th{border-color:rgba(20,35,58,.07)}
.table-hover>tbody>tr:hover>*{background:rgba(255,255,255,.55)}

/* Badges, alerts, pills */
.badge.bg-warning{color:#4A3A10 !important}
.alert{border-radius:16px; border:1px solid var(--ec-stroke); background:var(--ec-glass-2); backdrop-filter:blur(10px)}
.nav-pills .nav-link{color:var(--ec-navy); border-radius:12px; font-weight:600}
.nav-pills .nav-link.active{background:linear-gradient(135deg,var(--ec-gold-2),var(--ec-gold)); color:#fff}
.dropdown-menu{border-radius:16px; border:1px solid var(--ec-stroke); box-shadow:var(--ec-shadow); background:rgba(255,255,255,.96); backdrop-filter:blur(16px)}
.dropdown-item.active,.dropdown-item:active{background:var(--ec-navy)}
.modal-content{border-radius:20px; border:none; box-shadow:var(--ec-shadow)}
.page-link{color:var(--ec-navy)} .page-item.active .page-link{background:var(--ec-navy); border-color:var(--ec-navy)}

/* ---------- Page de connexion (auth) ---------- */
.ec-auth{display:grid; place-items:center; padding:26px}
.ec-authwrap{width:100%; max-width:600px}
.ec-authcard{background:var(--ec-glass); backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3);
  border:1px solid var(--ec-stroke); border-radius:28px; box-shadow:0 30px 70px rgba(20,35,58,.22); padding:38px 34px 30px}
.ec-authcard .ec-emblem{width:64px;height:64px;margin:0 auto}
.ec-authcard .ec-emblem i{font-size:30px}
.ec-footer-auth{margin-top:16px}

/* ---------- Carte de connexion large (style « Nomade ») ---------- */
.ec2-card{background:var(--ec-glass); backdrop-filter:blur(28px) saturate(1.3); -webkit-backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid var(--ec-stroke); border-radius:30px; box-shadow:0 34px 80px rgba(20,35,58,.24); padding:34px 36px 30px}
.ec2-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:26px}
.ec2-brand{display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; color:var(--ec-navy)}
.ec2-brand .ec-emblem{width:38px;height:38px;margin:0}
.ec2-brand .ec-emblem i{font-size:18px}
.ec2-note{font-size:13px; color:var(--ec-muted)}
.ec2-title{font-size:34px; font-weight:800; letter-spacing:-.5px; margin:0 2px 4px; color:var(--ec-navy)}
.ec2-sub{font-size:14px; color:var(--ec-muted); margin:0 2px 24px}
.ec2-field{display:flex; align-items:center; gap:13px; background:rgba(255,255,255,.5); border:1px solid var(--ec-stroke);
  border-radius:40px; padding:8px 10px; margin-bottom:16px; transition:border-color .2s, box-shadow .2s, background .2s}
.ec2-badge{width:44px;height:44px;flex:none;border-radius:50%; background:rgba(255,255,255,.9); display:grid; place-items:center;
  box-shadow:0 4px 12px rgba(20,35,58,.12)}
.ec2-badge i{color:var(--ec-navy); font-size:16px}
.ec2-field input{border:none; background:transparent; outline:none; flex:1 1 auto; min-width:0; font-size:15px; color:var(--ec-navy);
  font-family:inherit; padding-right:12px}
.ec2-field input::placeholder{color:#8595A6}
.ec2-field:hover{background:rgba(255,255,255,.72)}
.ec2-field:focus-within{border-color:var(--ec-gold); background:rgba(255,255,255,.85); box-shadow:0 0 0 3px rgba(201,151,28,.18)}
.ec2-field:focus-within .ec2-badge i{color:var(--ec-gold)}
.ec2-actions{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:22px}
.ec2-actions .ec2-note{color:var(--ec-gold);font-weight:700;text-decoration:none}
.ec2-actions .ec2-note:hover{text-decoration:underline}
.ec2-arrow{width:58px;height:58px;border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--ec-gold-2),var(--ec-gold)); color:#fff; display:grid; place-items:center;
  box-shadow:0 12px 26px rgba(201,151,28,.4); transition:transform .2s, box-shadow .2s, filter .2s}
.ec2-arrow i{font-size:20px}
.ec2-arrow:hover{transform:translateY(-3px) scale(1.03); box-shadow:0 20px 40px rgba(201,151,28,.55); filter:brightness(1.05)}
.ec2-arrow:active{transform:translateY(-1px)}
.ec2-foot{text-align:center; color:var(--ec-muted); font-size:12.5px; margin:22px 2px 0}