/* Kalanso – feuille de style unique, sans outil de compilation. Pensée d'abord pour le téléphone. */
:root {
  --fond: #f5f6f8; --carte: #ffffff; --texte: #1d2433; --doux: #5d6679; --bord: #dfe3ea;
  --primaire: #1f5f8b; --primaire-fonce: #174a6d; --primaire-clair: #e6f0f7;
  --succes: #1e7b4d; --succes-clair: #e3f4ea; --alerte: #a15c00; --alerte-clair: #fdf1dc;
  --danger: #b3261e; --danger-clair: #fbe7e5; --rayon: 10px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--fond); color: var(--texte); line-height: 1.45; }
a { color: var(--primaire); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: 0 0 .25rem; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; }
.doux { color: var(--doux); }
.petit { font-size: .85rem; }
.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Barre du haut et menu */
.entete { background: var(--primaire); color: #fff; }
.entete .interieur { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: .6rem 1rem; }
.logo { font-weight: 700; font-size: 1.15rem; color: #fff; letter-spacing: .02em; }
.logo small { font-weight: 400; opacity: .8; margin-left: .4rem; }
.bandeau-ecole { background: rgba(0,0,0,.15); border-top: 1px solid rgba(255,255,255,.15); }
.bandeau-ecole .interieur { padding-top: .35rem; padding-bottom: .35rem; font-size: .92rem; font-weight: 600; opacity: .95; }
.menu { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; }
.menu a { color: #fff; padding: .35rem .65rem; border-radius: 6px; font-size: .95rem; }
.menu a:hover, .menu a.actif { background: rgba(255,255,255,.18); text-decoration: none; }
.utilisateur { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.utilisateur button { background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }

.page { max-width: 1200px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.titre-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Cartes et grilles */
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem; margin-bottom: 1rem; }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grille-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.chiffre { background: var(--carte); border: 1px solid var(--bord); border-radius: var(--rayon); padding: .9rem 1rem; }
.chiffre .libelle { color: var(--doux); font-size: .85rem; }
.chiffre .valeur { font-size: 1.5rem; font-weight: 700; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.chiffre.alerte .valeur { color: var(--danger); }

/* Tableaux */
.tableau-conteneur { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { padding: .5rem .6rem; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--doux); font-weight: 600; background: #fafbfc; }
tr:hover td { background: #fafcff; }
tfoot td { font-weight: 700; border-top: 2px solid var(--bord); }
.barre { text-decoration: line-through; color: var(--doux); }

/* Étiquettes d'état */
.etat { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.etat-payee { background: var(--succes-clair); color: var(--succes); }
.etat-partielle { background: var(--alerte-clair); color: var(--alerte); }
.etat-en_retard { background: var(--danger-clair); color: var(--danger); }
.etat-a_venir { background: #eef0f4; color: var(--doux); }

/* Formulaires */
form .champ { margin-bottom: .85rem; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=search], select, textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid #c7ced9; border-radius: 8px; font-size: 1rem; background: #fff; color: var(--texte); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primaire-clair); border-color: var(--primaire); }
.case { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.case input { margin-top: .25rem; }
.ligne-form { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.erreur { color: var(--danger); font-size: .85rem; margin-top: .2rem; }
.filtres { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.filtres > * { flex: 1 1 160px; }
.filtres .bouton { flex: 0 0 auto; }

/* Boutons */
.bouton { display: inline-block; background: var(--primaire); color: #fff; border: 0; border-radius: 8px; padding: .55rem 1rem; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center; }
.bouton:hover { background: var(--primaire-fonce); text-decoration: none; }
.bouton.secondaire { background: #fff; color: var(--primaire); border: 1px solid var(--primaire); }
.bouton.danger { background: var(--danger); }
.bouton.grand { padding: .75rem 1.4rem; font-size: 1.05rem; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Messages */
.message { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.message.succes { background: var(--succes-clair); color: var(--succes); }
.message.erreur { background: var(--danger-clair); color: var(--danger); }

/* Graphique en barres simple (encaissements par mois) */
.barres { display: flex; align-items: flex-end; gap: .4rem; height: 150px; padding-top: 1rem; }
.barres .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barres .b { width: 100%; max-width: 38px; background: var(--primaire); border-radius: 4px 4px 0 0; min-height: 2px; }
.barres .col.futur .b { background: var(--bord); }
.barres .m { font-size: .72rem; color: var(--doux); margin-top: .25rem; }

/* Pagination Laravel (vue pagination::bootstrap-4) */
.pagination { display: flex; gap: .25rem; list-style: none; padding: 0; flex-wrap: wrap; }
.pagination li a, .pagination li span { display: block; padding: .3rem .65rem; border: 1px solid var(--bord); border-radius: 6px; background: #fff; }
.pagination li.active span { background: var(--primaire); color: #fff; border-color: var(--primaire); }

/* Page de connexion */
.connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.connexion .carte { width: 100%; max-width: 380px; padding: 1.75rem; }

/* Définition (fiche élève) */
dl.fiche { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.fiche dt { color: var(--doux); font-size: .9rem; }
dl.fiche dd { margin: 0; }

@media (max-width: 640px) {
  .masquer-mobile { display: none; }
  .chiffre .valeur { font-size: 1.25rem; }
}
@media print {
  .entete, .pas-imprimer { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; }
  .carte { border: 0; padding: 0; }
}