:root{
  --navy-950:#0A1524; --navy-900:#102136; --gold-500:#D4A82F; --gold-600:#C6981F; --gold-100:#FBF1D6;
  --cream:#FBF9F4; --ink:#16202B; --ink-soft:#5B6572; --line:rgba(16,33,54,.1);
  --green:#1F8F5B; --green-bg:#E4F8EC; --amber:#B4780A; --amber-bg:#FCF3DD;
  --blue:#1E6FBD; --blue-bg:#E4F0FC; --red:#C23B3B; --red-bg:#FBE7E7;
  --font:'Poppins', sans-serif;
}
*{box-sizing:border-box;}
body{margin:0;font-family:var(--font);background:#F3F1EA;color:var(--ink);}
a{color:inherit;text-decoration:none;}
input,select,button{font-family:var(--font);font-size:14px;}

/* ---------- LOGIN ---------- */
.pa-login-body{background:var(--navy-950);}
.pa-login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background-image:radial-gradient(700px 500px at 85% -10%, rgba(198,152,31,.16), transparent 60%);}
.pa-login-card{width:100%;max-width:400px;background:#fff;border-radius:18px;padding:38px 34px;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.pa-login-card img{height:44px;width:auto;object-fit:contain;display:block;margin:0 auto 14px;}
.pa-login-card h1{font-size:1.2rem;text-align:center;color:var(--navy-900);margin:0 0 6px;}
.pa-login-card p.sub{text-align:center;color:var(--ink-soft);font-size:13px;margin:0 0 26px;}
.pa-help{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:18px;line-height:1.6;}
.pa-help a{color:var(--gold-600);font-weight:600;}

.pa-field{margin-bottom:16px;}
.pa-field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-900);margin-bottom:6px;}
.pa-field input{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;}
.pa-field input:focus{outline:none;border-color:var(--gold-500);}

.pa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 18px;border-radius:9px;font-size:13.5px;font-weight:600;border:1.5px solid transparent;cursor:pointer;width:100%;}
.pa-btn-gold{background:var(--gold-600);color:var(--navy-950);}
.pa-btn-gold:hover{background:var(--gold-500);}
.pa-btn-ghost{background:#fff;border-color:var(--line);color:var(--ink);width:auto;}
.pa-btn-ghost:hover{border-color:var(--navy-900);}
.pa-btn-sm{padding:7px 13px;font-size:12.5px;}

/* ---------- HEADER ---------- */
.pa-header{background:var(--navy-950);display:flex;align-items:center;justify-content:space-between;padding:16px 28px;}
.pa-brand img{height:34px;width:auto;object-fit:contain;}
.pa-header-right{display:flex;align-items:center;gap:16px;}
.pa-student-chip{color:var(--cream);font-size:13px;font-weight:500;}
.pa-logout{color:var(--gold-400,#E4C464);font-size:13px;font-weight:600;}

/* ---------- MAIN ---------- */
.pa-main{max-width:820px;margin:0 auto;padding:32px 20px 60px;}
.pa-title{font-size:1.5rem;font-weight:700;color:var(--navy-900);margin:0;}
.pa-sub{color:var(--ink-soft);font-size:13.5px;margin:4px 0 26px;}

.pa-flash{padding:13px 18px;border-radius:10px;font-size:13.5px;margin-bottom:22px;border:1px solid;}
.pa-flash-success{background:var(--green-bg);color:var(--green);border-color:#B7E6C9;}
.pa-flash-error{background:var(--red-bg);color:var(--red);border-color:#F1BCBC;}
.pa-flash-info{background:var(--blue-bg);color:var(--blue);border-color:#B9D8F5;}

.pa-balance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px;}
@media (max-width:640px){ .pa-balance-grid{grid-template-columns:1fr;} }
.pa-balance-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;}
.pa-balance-card .v{font-size:1.4rem;font-weight:700;color:var(--navy-900);}
.pa-balance-card .l{font-size:12px;color:var(--ink-soft);margin-top:4px;}
.pa-balance-highlight{background:var(--navy-900);border-color:var(--navy-900);}
.pa-balance-highlight .v{color:var(--gold-500);}
.pa-balance-highlight .l{color:rgba(251,249,244,.6);}

.pa-section{margin-bottom:30px;}
.pa-section h2{font-size:1rem;font-weight:600;color:var(--navy-900);margin:0 0 12px;padding-bottom:8px;border-bottom:1.5px solid var(--line);}

.pa-installment{
  display:grid;grid-template-columns:1fr auto auto auto;gap:16px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:8px;
}
@media (max-width:700px){ .pa-installment{grid-template-columns:1fr;text-align:left;gap:8px;} }
.pa-inst-label{font-weight:600;font-size:13.5px;color:var(--navy-900);}
.pa-inst-due{font-size:12px;color:var(--ink-soft);margin-top:2px;}
.pa-inst-amount{font-weight:700;font-size:14px;color:var(--navy-900);white-space:nowrap;}
.pa-installment.pa-status-en_retard{border-color:#F1BCBC;background:#FFFAFA;}

.pa-badge{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;}
.pa-badge-a_venir{background:var(--blue-bg);color:var(--blue);}
.pa-badge-en_attente_validation{background:var(--amber-bg);color:var(--amber);}
.pa-badge-paye{background:var(--green-bg);color:var(--green);}
.pa-badge-rejete{background:var(--red-bg);color:var(--red);}
.pa-badge-en_retard{background:var(--red-bg);color:var(--red);}

.pa-upload-form{background:#FAFAF7;border:1px dashed var(--line);border-radius:12px;padding:16px;margin:-4px 0 12px;}
.pa-upload-row{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.pa-upload-row select,.pa-upload-row input[type=file]{padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;flex:1;min-width:180px;}
.pa-upload-note{width:100%;padding:9px 12px;border:1.5px solid var(--line);border-radius:8px;margin-bottom:10px;}
.pa-reject-note{color:var(--red);font-size:12.5px;margin:0 0 10px;}

.pa-empty{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:13.5px;background:#fff;border-radius:12px;border:1px solid var(--line);}

/* ---------- ONGLETS (paiements / notes) ---------- */
.pa-tabs{display:flex;gap:6px;border-bottom:1.5px solid var(--line);margin-bottom:26px;}
.pa-tab{padding:11px 6px;font-size:13.5px;font-weight:600;color:var(--ink-soft);border-bottom:2px solid transparent;margin-bottom:-1.5px;}
.pa-tab.active{color:var(--navy-900);border-bottom-color:var(--gold-600);}
.pa-tab-panel{}

/* ---------- BULLETIN / NOTES ---------- */
.pa-term-block{margin-bottom:22px;}
.pa-term-title{font-size:13.5px;font-weight:600;color:var(--navy-900);margin:0 0 10px;}
.pa-grades-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.pa-grades-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);background:#FAFAF7;padding:10px 16px;border-bottom:1px solid var(--line);}
.pa-grades-table td{padding:10px 16px;font-size:13.5px;border-bottom:1px solid var(--line);}
.pa-grades-table tr:last-child td{border-bottom:none;}
.pa-muted{color:var(--ink-soft);font-size:12.5px;}

/* Coordonnées bancaires (onglet Mes paiements, tant qu'il reste un solde à payer) */
.pa-rib-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.pa-rib-box{background:#FAFAF7;border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.pa-rib-label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:4px;}
.pa-rib-value{font-family:monospace;font-weight:600;font-size:14px;color:var(--navy-900);}

/* Onglet Notifications */
.pa-tab-count{display:inline-block;background:var(--red);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:middle;}
.pa-notif-list{display:flex;flex-direction:column;gap:2px;}
.pa-notif-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:8px;cursor:pointer;font:inherit;transition:background .15s,border-color .15s;}
.pa-notif-item:hover{background:#FAFAF7;border-color:var(--gold-500);}
.pa-notif-dot{width:8px;height:8px;border-radius:50%;background:transparent;flex-shrink:0;}
.pa-notif-unread .pa-notif-dot{background:var(--red);}
.pa-notif-unread .pa-notif-title{font-weight:700;}
.pa-notif-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.pa-notif-title{font-weight:600;font-size:13.5px;color:var(--navy-900);}
.pa-notif-date{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;}

/* Panneau de lecture d'un e-mail (clic sur une notification de type email)
   IMPORTANT : la règle [hidden] ci-dessous doit rester. Sans elle, le
   `display:flex` de .pa-notif-modal écrase le `display:none` de l'attribut
   HTML `hidden` (feuille de style du navigateur, de priorité plus faible) :
   la fenêtre restait alors affichée en permanence, vide, par-dessus la liste
   des notifications — et le bouton de fermeture n'avait aucun effet. */
.pa-notif-modal{position:fixed;inset:0;background:rgba(10,21,36,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:1000;}
.pa-notif-modal[hidden]{display:none !important;}
.pa-notif-modal-card{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:80vh;overflow-y:auto;position:relative;padding:32px 28px 28px;}
.pa-notif-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:14px;color:var(--ink-soft);}
.pa-notif-modal-close:hover{background:#FAFAF7;}
.pa-notif-modal-title{font-size:16px;font-weight:700;color:var(--navy-900);margin:0 30px 4px 0;}
.pa-notif-modal-meta{font-size:11.5px;color:var(--ink-soft);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.pa-notif-modal-body{font-size:14.5px;line-height:1.7;color:var(--navy-900);}
.pa-notif-modal-body img{max-width:100%;height:auto;}

/* Pièce jointe d'un message du secrétariat */
.pa-notif-attach{display:none;align-items:center;gap:10px;margin-top:18px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#FAFAF7;font-size:13px;}
.pa-notif-attach a{color:var(--navy-900);font-weight:600;text-decoration:none;word-break:break-all;}
.pa-notif-attach a:hover{text-decoration:underline;}
.pa-notif-clip{flex:none;width:18px;height:18px;color:var(--ink-soft);}
.pa-notif-attach-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--ink-soft);}