/* ==========================================================================
   ecorebus — Portail familles
   Charge APRÈS ecorebus.css : reprend les jetons de marque, remplace la coquille.
   Le back-office est un outil de bureau ; le portail se consulte au téléphone,
   dans la cour de l'école. D'où une navigation basse sur mobile, des cibles
   tactiles larges, et une seule colonne par défaut.
   ========================================================================== */

.pt-shell { min-height: 100vh; display: flex; flex-direction: column; }

/* --- En-tête ------------------------------------------------------------- */
.pt-topbar {
  position: sticky; top: 0; z-index: 1020;
  background: var(--sk-surface); border-bottom: 1px solid var(--sk-border);
  display: flex; align-items: center; gap: 12px; padding: 12px 18px;
}
.pt-topbar__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.pt-main { flex: 1 1 auto; width: 100%; max-width: 940px; margin: 0 auto; padding: 22px 18px 92px; }

/* --- Navigation ---------------------------------------------------------- */
.pt-nav { display: flex; gap: 4px; }
.pt-nav__link {
  display: flex; align-items: center; gap: 8px; padding: 8px 13px;
  border-radius: var(--sk-radius-sm); color: var(--sk-text-mute);
  font-size: .875rem; font-weight: 500; text-decoration: none;
}
.pt-nav__link:hover { background: var(--sk-surface-2); color: var(--sk-text); }
.pt-nav__link.active { background: var(--sk-violet-soft); color: var(--sk-violet-400); font-weight: 600; }
[data-bs-theme="light"] .pt-nav__link.active { color: var(--sk-violet-600); }

/* Barre inférieure : sur un téléphone, le pouce atteint le bas de l'écran,
   pas le haut. */
.pt-tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 1030; display: none;
  background: var(--sk-surface); border-top: 1px solid var(--sk-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.pt-tabbar__link {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px; border-radius: var(--sk-radius-sm);
  color: var(--sk-text-mute); font-size: .6875rem; font-weight: 600; text-decoration: none;
}
.pt-tabbar__link i { font-size: 1.25rem; }
.pt-tabbar__link.active { color: var(--sk-violet-400); }
[data-bs-theme="light"] .pt-tabbar__link.active { color: var(--sk-violet-600); }

/* --- Carte enfant -------------------------------------------------------- */
.pt-enfant {
  display: block; text-decoration: none;
  background: var(--sk-surface); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg); overflow: hidden;
}
.pt-enfant:hover { border-color: var(--sk-border-2); }
.pt-enfant__head {
  display: flex; align-items: center; gap: 13px; padding: 16px 18px;
  border-bottom: 1px solid var(--sk-border);
}
.pt-enfant__nom { font-family: var(--sk-font-display); font-weight: 700; font-size: 1.0625rem; color: var(--sk-text); }
.pt-enfant__grille {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--sk-border);
}
.pt-enfant__cellule { padding: 13px 16px; text-align: center; }
.pt-enfant__cellule + .pt-enfant__cellule { border-left: 1px solid var(--sk-border); }
.pt-enfant__valeur {
  font-family: var(--sk-font-display); font-weight: 700; font-size: 1.25rem;
  letter-spacing: -.02em; word-spacing: .18em; color: var(--sk-text);
  font-variant-numeric: tabular-nums;
}

/* --- Ligne d'action ------------------------------------------------------ */
.pt-action {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border: 1px solid var(--sk-border); border-radius: var(--sk-radius);
  background: var(--sk-surface); text-decoration: none; color: inherit;
}
.pt-action:hover { border-color: var(--sk-border-2); }
.pt-action__icone {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--sk-radius-sm);
  display: flex; align-items: center; justify-content: center; font-size: 1.0625rem;
  background: var(--sk-violet-soft); color: var(--sk-violet-400);
}
[data-bs-theme="light"] .pt-action__icone { color: var(--sk-violet-600); }
.pt-action__icone--mint  { background: var(--sk-mint-soft);  color: var(--sk-mint); }
.pt-action__icone--amber { background: var(--sk-amber-soft); color: var(--sk-amber); }
.pt-action__icone--coral { background: var(--sk-coral-soft); color: var(--sk-coral); }

/* --- Ligne de matière (bulletin) ----------------------------------------- */
.pt-matiere {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--sk-border);
}
.pt-matiere:last-child { border-bottom: 0; }
.pt-matiere__note {
  font-family: var(--sk-font-display); font-weight: 700; font-size: 1.0625rem;
  font-variant-numeric: tabular-nums; min-width: 68px; text-align: right;
}
.pt-matiere__note--faible { color: var(--sk-coral); }
.pt-matiere__note--forte  { color: var(--sk-mint); }

/* --- Échéance ------------------------------------------------------------ */
.pt-echeance {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--sk-border);
}
.pt-echeance:last-child { border-bottom: 0; }
.pt-echeance--retard { background: var(--sk-coral-soft); }

/* --- Fil de notifications ------------------------------------------------ */
.pt-notif { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--sk-border); }
.pt-notif:last-child { border-bottom: 0; }
.pt-notif--nonlue { position: relative; }
.pt-notif--nonlue::before {
  content: ""; position: absolute; left: -12px; top: 20px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--sk-violet);
}

/* --- Écran d'identification ---------------------------------------------- */
.pt-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px 18px; }
.pt-auth__carte { width: 100%; max-width: 400px; }

@media (max-width: 767.98px) {
  .pt-nav { display: none; }
  .pt-tabbar { display: flex; }
  .pt-main { padding: 18px 14px 92px; }
  .pt-enfant__grille { grid-template-columns: repeat(3, 1fr); }
}