/* ==========================================================================
   uniman-portail.css — portail étudiant (mobile d'abord, onglets en bas).
   Créée vide par UI-1, remplie par UI-5.
   Tokens de uniman.css uniquement (garde : aucune couleur hors token).
   ========================================================================== */

/* ── Shell : colonne ≤ 430 px centrée, jamais de défilement horizontal ── */
.um-etudiant-shell { width: 100%; overflow-x: hidden; }
.um-etudiant-content { overflow-x: hidden; overscroll-behavior: contain; }
.um-etudiant-content * { overflow-wrap: anywhere; }
.um-etudiant-header { padding: var(--um-space-2) var(--um-space-4) var(--um-space-3); }
.um-etudiant-identite { gap: var(--um-space-3); }
.um-etudiant-nom { font-size: var(--um-font-size-body); font-weight: 700; }
.um-etudiant-logout { width: 44px; height: 44px; }

/* Onglets du bas : cible ≥ 44 × 44 px, libellé sous l'icône, actif en bleu avec l'indicateur or. */
.um-etudiant-bottomnav {
    position: relative;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.um-etudiant-tab {
    position: relative;
    min-height: 56px;
    min-width: 44px;
    padding: var(--um-space-2) 2px;
    color: var(--um-text-secondary);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.um-etudiant-tab::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    border-radius: 0 0 var(--um-radius-sm) var(--um-radius-sm);
    background: transparent;
}
.um-etudiant-tab.is-active { color: var(--um-primary); }
.um-etudiant-tab.is-active::before { background: var(--um-highlight); }
.um-etudiant-tab:focus-visible { outline: 2px solid var(--um-focus-ring); outline-offset: -2px; }
.um-etudiant-tab-label { font-size: var(--um-font-size-caption); }

/* Cible tactile générique du portail. */
.um-portail-cible { min-height: 44px; }

/* ── Accueil « Ma situation » ── */
.um-portail-accueil .um-h2 { margin: 0; }
.um-portail-carte { display: grid; gap: var(--um-space-3); }
.um-portail-carte-entete { display: flex; align-items: center; gap: var(--um-space-2); color: var(--um-text-primary); }
.um-portail-carte-entete .um-h3 { margin: 0; }
.um-portail-squelette { height: 132px; border-radius: var(--um-radius-lg); }

.um-portail-regle { border-left: 4px solid var(--um-border); }
.um-portail-regle.is-succes { border-left-color: var(--um-emerald-600); }
.um-portail-regle.is-danger { border-left-color: var(--um-rose-600); }
.um-portail-regle.is-attention { border-left-color: var(--um-amber-600); }

.um-portail-statut {
    display: inline-flex;
    align-items: center;
    gap: var(--um-space-2);
    justify-self: start;
    padding: var(--um-space-1) var(--um-space-3);
    border-radius: var(--um-radius-pill);
    font-weight: 700;
    font-size: var(--um-font-size-h3);
}
.is-succes .um-portail-statut { background: var(--um-emerald-50); color: var(--um-emerald-700); }
.is-danger .um-portail-statut { background: var(--um-rose-50); color: var(--um-rose-700); }
.is-attention .um-portail-statut { background: var(--um-amber-50); color: var(--um-amber-700); }

.um-portail-solde { display: grid; gap: 2px; }
.um-portail-solde-valeur {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--um-text-primary);
    font-variant-numeric: tabular-nums;
}
.um-portail-solde-cdf { font-size: var(--um-font-size-h3); font-weight: 600; color: var(--um-text-primary); font-variant-numeric: tabular-nums; }
.um-portail-seuil { margin: 0; }
/* PORT-1 — the amount still needed to reach the seuil. */
.um-portail-seuil-reste { margin: 0; font-weight: 600; color: var(--um-text-primary); }

.um-portail-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-self: start;
    padding: 6px 12px;
    font-size: var(--um-font-size-small);
    white-space: normal;
}
.um-portail-actions { display: grid; gap: var(--um-space-2); }
.um-portail-indisponible { border-left: 4px solid var(--um-amber-600); }

/* ── Finances : cartes, pas de tableau large ── */
.um-portail-formulaire .um-input { min-height: 48px; font-size: 16px; }
.um-portail-soumettre {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 0 calc(-1 * var(--um-space-4));
    padding: var(--um-space-3) var(--um-space-4);
    background: var(--um-surface-0);
    border-top: 1px solid var(--um-border);
}
.um-portail-soumettre .btn { min-height: 48px; width: 100%; }

/* ── Résultats : une carte par UE ── */
.um-portail-ues { display: grid; gap: var(--um-space-3); }
.um-portail-ue {
    display: grid;
    gap: var(--um-space-2);
    padding: var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-lg);
    background: var(--um-surface-0);
}
.um-portail-ue-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--um-space-2); }
.um-portail-ue-titre { font-weight: 600; color: var(--um-text-primary); }
.um-portail-ue-total { font-size: var(--um-font-size-h3); font-weight: 700; color: var(--um-text-primary); font-variant-numeric: tabular-nums; }
.um-portail-ue-ecs summary,
.um-portail-tableau summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: var(--um-link);
    font-weight: 600;
    font-size: var(--um-font-size-small);
}
.um-portail-ue-ecs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-2); }
.um-portail-ue-ecs li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--um-space-2);
    padding-top: var(--um-space-2);
    border-top: 1px solid var(--um-border-soft);
    font-size: var(--um-font-size-small);
}
.um-portail-semestre {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--um-space-3);
    margin: 0;
    padding: var(--um-space-3);
    border-radius: var(--um-radius-lg);
    background: var(--um-primary-soft);
}
.um-portail-semestre dt { font-size: var(--um-font-size-caption); color: var(--um-text-secondary); }
.um-portail-semestre dd { margin: 0; font-weight: 700; color: var(--um-text-primary); font-variant-numeric: tabular-nums; }
.um-resultat-masque .um-badge { display: inline-flex; align-items: center; gap: 4px; }

/* ── PWA-1 / NOTIF-1 : cloche, bandeau de mise à jour, installation, liste des notifications ── */
.um-etudiant-cloche {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--um-radius-md);
    color: var(--um-text-on-dark);
    text-decoration: none;
}
.um-etudiant-cloche:hover { background: var(--um-fill-on-dark-hover); }
.um-etudiant-cloche-compteur {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--um-highlight);
    color: var(--um-shell);
    font-size: var(--um-font-size-caption);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.um-pwa-bandeau {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--um-space-2);
    margin: var(--um-space-3) var(--um-space-4) 0;
    padding: var(--um-space-3);
    border: 1px solid var(--um-highlight);
    border-radius: var(--um-radius-md);
    background: var(--um-highlight-soft);
    color: var(--um-highlight-text);
}
.um-pwa-bandeau-texte { flex: 1 1 160px; }
.um-pwa-installer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--um-space-2);
    margin: var(--um-space-3) var(--um-space-4) 0;
    padding: var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
}
.um-pwa-installer-tete { display: flex; align-items: center; gap: var(--um-space-2); width: 100%; color: var(--um-primary); }
.um-pwa-installer-texte { width: 100%; margin: 0; color: var(--um-text-secondary); }
.um-notifs { padding: var(--um-space-4); display: flex; flex-direction: column; gap: var(--um-space-3); }
.um-notifs-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-notifs-tete h1 { margin: 0; font-size: var(--um-font-size-h2); overflow-wrap: normal; }
.um-notifs-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--um-space-2); }
.um-notif {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: var(--um-space-3);
    border: 1px solid var(--um-border);
    border-radius: var(--um-radius-md);
    background: var(--um-surface-0);
    color: var(--um-text-primary);
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.um-notif.is-non-lue { border-left: 4px solid var(--um-highlight); background: var(--um-highlight-soft); }
.um-notif-titre { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); font-weight: 700; }
.um-notif-date { color: var(--um-text-secondary); font-weight: 400; font-size: var(--um-font-size-small); white-space: nowrap; }
.um-notif-corps { margin: var(--um-space-1) 0 0; color: var(--um-text-secondary); }
.um-notifs-push { padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-surface-1); }
.um-notifs-push p { margin: var(--um-space-1) 0 var(--um-space-2); color: var(--um-text-secondary); }

/* ── ACA-4 begin — « Mon horaire » ─────────────────────────────────────────────────────────────────────────────────── */
.um-mon-horaire-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-2); }
.um-mon-horaire-seance { display: grid; grid-template-columns: 96px 1fr; gap: var(--um-space-2); padding: var(--um-space-2) 0; border-top: 1px solid var(--um-border-soft); }
.um-mon-horaire-seance:first-child { border-top: 0; }
.um-mon-horaire-heure { font-weight: 600; color: var(--um-text-primary); font-variant-numeric: tabular-nums; }
.um-mon-horaire-cours { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.um-mon-horaire-cours .um-badge { align-self: flex-start; }
.um-mon-horaire-seance.is-barree strong { text-decoration: line-through; color: var(--um-text-secondary); }
.um-mon-horaire-semaine { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-mon-horaire-jour { display: grid; gap: var(--um-space-1); }
.um-mon-horaire-jour h3 { margin: var(--um-space-2) 0 0; }
/* ── ACA-4 end ── */

/* ── ACA-10 — Espace enseignant (même coquille que le portail) ── */
.um-espace-enseignant .um-mon-horaire-cours .btn { justify-self: start; margin-top: var(--um-space-1); }
.um-espace-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--um-space-3); }
.um-espace-cours { display: grid; gap: var(--um-space-1); color: var(--um-text-primary); text-decoration: none; }
.um-espace-cours .um-badge { justify-self: start; }
.um-espace-document { display: grid; gap: var(--um-space-1); padding-bottom: var(--um-space-3); border-bottom: 1px solid var(--um-border-soft); }
.um-espace-document:last-child { border-bottom: 0; padding-bottom: 0; }
.um-espace-document .btn { justify-self: start; }
.um-espace-document-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--um-space-2); }
.um-espace-heures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--um-space-2); }
.um-espace-profil { display: grid; grid-template-columns: auto 1fr; gap: var(--um-space-1) var(--um-space-3); margin: 0; }
.um-espace-profil dt { color: var(--um-text-secondary); font-size: var(--um-font-size-small); }
.um-espace-profil dd { margin: 0; overflow-wrap: anywhere; }
.um-espace-retour { justify-self: start; }
/* ── ACA-10 end ── */

/* ── REINS-2 — « Réinscription » (portail) ── */
.um-reinscription-certification { display: flex; align-items: flex-start; gap: var(--um-space-2); padding: var(--um-space-3); border: 1px solid var(--um-border); border-radius: var(--um-radius-md); background: var(--um-blue-50); font-size: var(--um-font-size-small); }
.um-reinscription-certification input { margin-top: 3px; }
.um-portail-reinscription .um-p3 { margin: 0; }
.um-carte-reinscription { display: grid; gap: var(--um-space-2); border-left: 4px solid var(--um-gold-500); }
/* ── REINS-2 end ── */