:root {
    --fond: #f5f6f8;
    --surface: #ffffff;
    --texte: #1f2933;
    --discret: #64748b;
    --bord: #e2e8f0;
    --accent: #0f766e;
    --accent-clair: #ccfbf1;
    --du: #b45309;
    --du-clair: #fef3c7;
    --avance: #1d4ed8;
    --avance-clair: #dbeafe;
    --danger: #b91c1c;
    --succes: #047857;
    --rayon: 10px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

h1 { font-size: 1.6rem; margin: 0 0 .2rem; }
h1:focus { outline: none; }
h2 { font-size: 1.1rem; margin: 0 0 .8rem; }
h3 { font-size: .95rem; margin: 1.2rem 0 .4rem; }
a { color: var(--accent); }

/* ---------- Mise en page ---------- */
.page { display: flex; min-height: 100vh; }

.menu {
    width: 220px;
    flex-shrink: 0;
    background: #0f2b2a;
    color: #e2f3f1;
    padding: 1.2rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.marque { display: flex; align-items: center; gap: .6rem; font-weight: 700; margin: 0 .4rem 1.4rem; }
.logo {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 8px;
    background: var(--accent); color: #fff; font-size: .85rem;
}

.lien {
    color: #cfe7e4;
    text-decoration: none;
    padding: .55rem .7rem;
    border-radius: 8px;
}
.lien:hover { background: rgba(255,255,255,.08); }
.lien.active { background: var(--accent); color: #fff; font-weight: 600; }

.contenu { flex: 1; padding: 1.8rem 2rem; max-width: 1200px; min-width: 0; }

.entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.sous-titre { color: var(--discret); margin: 0; }
.discret { color: var(--discret); font-size: .9rem; }
.facultatif { color: var(--discret); font-weight: 400; font-size: .85em; }
.note-bas { color: var(--discret); font-size: .85rem; margin-top: .6rem; }

.carte {
    background: var(--surface);
    border: 1px solid var(--bord);
    border-radius: var(--rayon);
    padding: 1.2rem 1.3rem;
    margin-bottom: 1.2rem;
}
.entete-carte { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.entete-carte h2 { margin: 0; }

.deux-colonnes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; }
.deux-colonnes .carte { margin-bottom: 1.2rem; }

.vide { background: var(--surface); border: 1px dashed var(--bord); border-radius: var(--rayon); padding: 2rem; text-align: center; }

/* ---------- Formulaires ---------- */
label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .88rem; margin-bottom: .8rem; }
label.case { flex-direction: row; align-items: center; font-weight: 500; }

input, select {
    font: inherit;
    padding: .5rem .6rem;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: var(--texte);
    min-width: 0;
}
input:focus, select:focus { outline: 2px solid var(--accent-clair); border-color: var(--accent); }
input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

.rangee { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.boutons { display: flex; gap: .6rem; flex-wrap: wrap; }

.barre-choix {
    display: flex; gap: 1.2rem; align-items: flex-end; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: .9rem 1.1rem .1rem; margin-bottom: 1.2rem;
}
.champ-date { display: flex; gap: .3rem; }
.forfait-du-jour { color: var(--discret); font-size: .9rem; margin-bottom: .9rem; }

.ajout-forfait { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.ajout-forfait label { margin-bottom: 0; }

/* ---------- Boutons ---------- */
.bouton-principal, .bouton-secondaire, .bouton-lien {
    font: inherit; cursor: pointer; text-decoration: none; display: inline-block;
}
.bouton-principal {
    background: var(--accent); color: #fff; border: 1px solid var(--accent);
    padding: .55rem 1rem; border-radius: 8px; font-weight: 600;
}
.bouton-principal:hover { filter: brightness(1.08); }
.bouton-principal:disabled { opacity: .6; cursor: default; }
.bouton-secondaire {
    background: #fff; color: var(--texte); border: 1px solid #cbd5e1;
    padding: .5rem .85rem; border-radius: 8px;
}
.bouton-secondaire:hover { border-color: var(--accent); color: var(--accent); }
.bouton-lien { background: none; border: none; color: var(--accent); padding: 0; }
.bouton-lien:hover { text-decoration: underline; }
.bouton-lien.danger { color: var(--danger); }

.navigation-mois { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.entete .navigation-mois { margin-bottom: 0; }
.mois-courant { font-weight: 700; min-width: 9.5rem; text-align: center; }

.message { padding: .7rem 1rem; border-radius: 8px; margin: 0 0 1rem; }
.message.succes { background: #d1fae5; color: var(--succes); }
.message.erreur { background: #fee2e2; color: var(--danger); }

.etiquette { font-size: .75rem; font-weight: 600; background: #e2e8f0; color: var(--discret); padding: .1rem .5rem; border-radius: 99px; margin-left: .4rem; vertical-align: middle; }

/* ---------- Tuiles ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.2rem; }
.tuile {
    background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
    padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .2rem;
}
.tuile.mise-en-avant { border-color: var(--accent); box-shadow: inset 4px 0 0 var(--accent); }
.tuile-libelle { color: var(--discret); font-size: .85rem; font-weight: 600; }
.tuile-valeur { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile-valeur.petit { font-size: 1.25rem; }
.tuile-valeur.du { color: var(--du); }
.tuile-valeur small { font-size: .8rem; color: var(--discret); font-weight: 500; }
.tuile-note { color: var(--discret); font-size: .8rem; }

.solde { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.solde small { font-weight: 500; font-size: .78em; }
.solde.du { color: var(--du); }
.solde.avance { color: var(--avance); }

/* ---------- Tableaux ---------- */
table.liste {
    width: 100%; border-collapse: collapse; background: var(--surface);
    border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden;
}
.carte table.liste { border: none; }
table.liste th {
    text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--discret); background: #f8fafc; padding: .6rem .7rem; border-bottom: 1px solid var(--bord);
}
table.liste td { padding: .5rem .7rem; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
table.liste.compacte td { padding: .35rem .6rem; }
.nombre { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.actions { text-align: right; white-space: nowrap; }
.actions > * + * { margin-left: .8rem; }

.releve .debut-jour td { border-top: 1px solid var(--bord); }
.releve tr.versement td { color: var(--avance); }
.releve .client { color: var(--discret); font-size: .85em; }
.releve .total-jour td { background: #f8fafc; font-size: .88rem; color: var(--discret); border-bottom: 1px solid var(--bord); }
.releve .total-jour td.fort, .releve .total-jour td:nth-child(7) { color: var(--texte); font-weight: 700; }
.releve .ligne-report td { background: var(--accent-clair); font-weight: 600; }
table.liste tfoot td { font-weight: 700; background: #f1f5f9; padding: .7rem; }
.ecart { color: var(--danger); font-weight: 700; }

.recap-jour { display: flex; flex-wrap: wrap; gap: .6rem 2rem; margin: 1rem 0 0; }
.recap-jour div { display: flex; flex-direction: column; }
.recap-jour dt { font-size: .8rem; color: var(--discret); }
.recap-jour dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.recap-jour .fort dd { color: var(--du); font-size: 1.1rem; }

details { margin: 1rem 0; }
summary { cursor: pointer; font-weight: 600; }

/* Le libellé garde de quoi se lire, et les actions s'empilent au lieu de pousser le tableau hors du cadre. */
.defilement { overflow-x: auto; }
.releve tbody tr:not(.ligne-report):not(.total-jour) td:nth-child(2) { min-width: 15rem; }
.actions-pile { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.actions .actions-pile > * + * { margin-left: 0; }

/* ---------- Petits écrans ---------- */
@media (max-width: 860px) {
    .menu .pied-menu { margin-top: 0; border-top: none; padding-top: 0; flex-direction: row; align-items: center; }
    .page { flex-direction: column; }
    .menu { width: auto; flex-direction: row; flex-wrap: wrap; padding: .7rem; }
    .marque { margin: 0 .8rem 0 0; }
    .contenu { padding: 1rem; }
    .tuiles { grid-template-columns: 1fr 1fr; }
    .deux-colonnes, .rangee { grid-template-columns: 1fr; }

    table.liste thead { display: none; }
    table.liste, table.liste tbody, table.liste tr, table.liste td { display: block; width: 100%; }
    table.liste tr { border-bottom: 1px solid var(--bord); padding: .4rem 0; }
    table.liste td { border: none; padding: .2rem .7rem; text-align: left !important; }
    table.liste td[data-libelle]::before { content: attr(data-libelle) " : "; color: var(--discret); font-size: .85em; }
    .releve tbody tr:not(.ligne-report):not(.total-jour) td:nth-child(2) { min-width: 0; }
    .actions-pile { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .2rem 1rem; }
    table.liste td:empty, .releve td.vide-carte { display: none; }
    table.liste tfoot { display: block; }
}

/* ---------- Connexion et pied du menu ---------- */
.pied-menu { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: .3rem; }
.connecte { padding: 0 .7rem; font-size: .85rem; color: #9fc9c4; }
.bouton-deconnexion { background: none; border: none; font: inherit; cursor: pointer; text-align: left; width: 100%; }
.pied-menu form { margin: 0; }

.ecran-connexion { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: #0f2b2a; }
.carte-connexion { width: 100%; max-width: 380px; padding: 2rem; }
.carte-connexion h1 { margin-bottom: 1rem; }
.marque-connexion { margin: 0 0 1.4rem; color: var(--texte); }
.bouton-principal.large { width: 100%; padding: .7rem; margin-top: .4rem; }

/* ---------- Validation et états ---------- */
.une-colonne { display: grid; grid-template-columns: minmax(0, 640px); }
.etat { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .1rem .45rem; border-radius: 99px; margin-left: .3rem; vertical-align: middle; }
.etat.attente { background: var(--du-clair); color: var(--du); }
.etat.refuse { background: #fee2e2; color: var(--danger); }
.etat.valide { background: #d1fae5; color: var(--succes); }
.etat.verse { background: var(--avance-clair); color: var(--avance); }
.motif-refus { display: block; font-size: .82rem; color: var(--danger); margin-top: .15rem; }
.attente-texte { color: var(--du); }
tr.hors-calcul td { color: var(--discret); }
tr.hors-calcul td.nombre { text-decoration: line-through; text-decoration-color: rgba(100,116,139,.5); }
.barre-validation { align-items: center; padding-bottom: .9rem; }
.barre-validation label { margin-bottom: 0; }
.barre-validation .motif { flex: 1; min-width: 220px; }
.bouton-secondaire.danger { color: var(--danger); border-color: #fecaca; }
.case-ligne { width: 2rem; }
.lien-tuile { text-decoration: none; color: inherit; }
.lien-tuile:hover { border-color: var(--accent); }
button:disabled.bouton-lien { opacity: .5; cursor: default; }

/* ---------- Impression : doit rester en dernier ---------- */
@media print {
    @page { size: A4 landscape; margin: 12mm; }
    .sans-impression, .menu, #blazor-error-ui { display: none !important; }
    html, body { background: #fff; font-size: 11px; }
    .contenu { padding: 0; max-width: none; }
    .tuiles { grid-template-columns: repeat(4, 1fr); }
    .tuile { padding: .5rem; }
    table.liste { display: table; border: 1px solid #999; }
    table.liste thead { display: table-header-group; }
    table.liste tbody { display: table-row-group; }
    table.liste tfoot { display: table-footer-group; }
    table.liste tr { display: table-row; page-break-inside: avoid; }
    table.liste td { display: table-cell; padding: .25rem .4rem; }
    table.liste td::before { content: none !important; }
    .releve td.vide-carte { display: table-cell; }
}

#blazor-error-ui {
    background: #fef3c7; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }