/* ==========================================================================
   Espace « Note de frais » — style sobre, lisible, responsive minimal.
   Volontairement indépendant du site public : efficacité avant esthétique.
   ========================================================================== */
:root{
    --fr-bg:#f4f6fa; --fr-card:#ffffff; --fr-ink:#1b2536; --fr-muted:#66738a;
    --fr-line:#d9e0ec; --fr-brand:#14306e; --fr-brand-d:#0f2453;
    --fr-red:#c0392b; --fr-green:#1e7e46; --fr-amber:#8a6d00;
    --fr-radius:10px; --fr-shadow:0 1px 3px rgba(20,48,110,.08);
}
*{box-sizing:border-box}
body{
    margin:0; background:var(--fr-bg); color:var(--fr-ink);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    font-size:16px; line-height:1.55;
}

/* ---- Barre haute ---- */
.fr-top{background:#fff; border-bottom:1px solid var(--fr-line)}
.fr-top-in{max-width:900px; margin:0 auto; padding:.7rem 1.2rem; display:flex;
    align-items:center; justify-content:space-between; gap:1rem}
.fr-brand{display:flex; align-items:center; gap:.5rem; text-decoration:none;
    color:var(--fr-brand); font-weight:700}
.fr-user{display:flex; align-items:center; gap:1rem; font-size:.92rem; color:var(--fr-muted)}
.fr-logout{color:var(--fr-brand); text-decoration:none; font-weight:600}
.fr-logout:hover{text-decoration:underline}

/* ---- Structure ---- */
.fr-main{max-width:900px; margin:0 auto; padding:1.6rem 1.2rem 3rem}
.fr-main.narrow{max-width:460px}
.fr-foot{max-width:900px; margin:0 auto; padding:1.4rem 1.2rem; color:var(--fr-muted);
    font-size:.85rem; text-align:center}

h1{font-size:1.5rem; margin:.2rem 0 1rem}
h2{font-size:1.15rem; margin:0 0 .8rem}
p{margin:.4rem 0}

/* ---- Cartes / panneaux ---- */
.card{background:var(--fr-card); border:1px solid var(--fr-line);
    border-radius:var(--fr-radius); box-shadow:var(--fr-shadow); padding:1.4rem}
.card + .card{margin-top:1.2rem}

/* ---- Boutons ---- */
.btn{display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
    border:1px solid transparent; border-radius:8px; padding:.6rem 1.1rem;
    font-size:.95rem; font-weight:600; text-decoration:none; line-height:1.1;
    font-family:inherit}
.btn-primary{background:var(--fr-brand); color:#fff}
.btn-primary:hover{background:var(--fr-brand-d)}
.btn-outline{background:#fff; border-color:var(--fr-line); color:var(--fr-ink)}
.btn-outline:hover{border-color:var(--fr-brand); color:var(--fr-brand)}
.btn-danger{background:#fff; border-color:#e6b3ad; color:var(--fr-red)}
.btn-danger:hover{background:#fdecea}
.btn-block{width:100%; justify-content:center; padding:.8rem}
.btn-lg{padding:.9rem 1.6rem; font-size:1.05rem}
.btn:disabled{opacity:.5; cursor:not-allowed}

/* ---- Champs ---- */
.field{margin-bottom:1rem}
.field label{display:block; font-weight:600; margin-bottom:.35rem; font-size:.92rem}
.field .req{color:var(--fr-red)}
input[type=text],input[type=email],input[type=password],input[type=date],
input[type=number],textarea,select{
    width:100%; padding:.6rem .7rem; border:1px solid var(--fr-line);
    border-radius:8px; font-size:1rem; font-family:inherit; background:#fff; color:var(--fr-ink)}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(20,48,110,.25);
    outline-offset:1px; border-color:var(--fr-brand)}
input[readonly],input:disabled,.locked{background:#eef1f6; color:var(--fr-muted); cursor:not-allowed}
.hint{font-size:.82rem; color:var(--fr-muted); margin-top:.3rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:0 1rem}
@media(max-width:560px){.grid-2{grid-template-columns:1fr}}

/* ---- Alertes ---- */
.alert{border-radius:8px; padding:.8rem 1rem; margin-bottom:1.2rem; font-size:.95rem; line-height:1.5}
.alert-error{background:#fdecea; color:#8a1c12; border:1px solid #f3c4bd}
.alert-success{background:#e7f6ec; color:#12602f; border:1px solid #b7e2c5}
.alert-info{background:#e8f0fb; color:#123a78; border:1px solid #bcd3f2}

/* ---- Tickets ---- */
.ticket{border:1px solid var(--fr-line); border-radius:var(--fr-radius); padding:1rem 1.1rem;
    margin-bottom:1rem; background:#fbfcfe}
.ticket-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.7rem}
.ticket-head strong{color:var(--fr-brand)}
.ticket-del{background:none; border:none; color:var(--fr-red); cursor:pointer; font-size:1.1rem;
    line-height:1; padding:.2rem .4rem}

/* ---- Récap / total ---- */
.total-row{display:flex; justify-content:space-between; align-items:baseline;
    border-top:2px solid var(--fr-line); margin-top:.6rem; padding-top:.8rem}
.total-row .amount{font-size:1.4rem; font-weight:800; color:var(--fr-brand)}

/* ---- Hub « Espace bénévole » : grille d'outils ---- */
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:1rem; margin-top:1.4rem}
.tool-card{display:flex; flex-direction:column; gap:.55rem; padding:1.3rem;
    background:var(--fr-card); border:1px solid var(--fr-line); border-radius:var(--fr-radius);
    box-shadow:var(--fr-shadow); text-decoration:none; color:var(--fr-ink);
    transition:border-color .15s, transform .15s, box-shadow .15s}
.tool-card:hover{border-color:var(--fr-brand); transform:translateY(-2px);
    box-shadow:0 6px 18px rgba(20,48,110,.12)}
.tool-card .tc-ico{width:46px; height:46px; border-radius:11px; background:#eef2fb;
    color:var(--fr-brand); display:flex; align-items:center; justify-content:center}
.tool-card h3{margin:0; font-size:1.08rem; color:var(--fr-brand)}
.tool-card p{margin:0; font-size:.88rem; color:var(--fr-muted); line-height:1.45}

/* ---- Divers ---- */
.tag{display:inline-block; font-size:.75rem; font-weight:700; padding:.15rem .5rem;
    border-radius:20px; background:#eef1f6; color:var(--fr-muted)}
.tag-green{background:#e7f6ec; color:var(--fr-green)}
.tag-amber{background:#fbf2d6; color:var(--fr-amber)}
.tag-red{background:#fdecea; color:var(--fr-red)}
table.list{width:100%; border-collapse:collapse}
table.list th,table.list td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--fr-line);
    font-size:.92rem}
table.list th{color:var(--fr-muted); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em}
.center{text-align:center}
.muted{color:var(--fr-muted)}
.logo-mark{display:flex; justify-content:center; margin-bottom:.8rem}