:root{
    --bg:#0f1410; --panel:#ffffff; --ink:#1c241b; --muted:#6b7669;
    --line:#e2e6dc; --brand:#3d5a36; --brand-d:#2c4127; --accent:#5c7d4f;
    --pp:#1f7a3d; --p:#5aa469; --z:#8a8f86; --m:#d08a2c; --mm:#c0392b;
    --shadow:0 1px 3px rgba(20,30,15,.08),0 6px 18px rgba(20,30,15,.06);
    --radius:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:#f4f6f1;color:var(--ink);line-height:1.5;font-size:15px;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:1.5rem;margin:0 0 .2rem}
h2{font-size:1.15rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.ta-right{text-align:right}.ta-center{text-align:center}

/* Topbar */
.topbar{background:var(--brand-d);color:#eef2e8;box-shadow:var(--shadow)}
.topbar-in{max-width:1080px;margin:0 auto;display:flex;align-items:center;
    gap:1.2rem;padding:.6rem 1rem;flex-wrap:wrap}
.brand{color:#fff;font-weight:700;letter-spacing:.3px;font-size:1.1rem}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:.3rem;flex:1;flex-wrap:wrap}
.nav a{color:#d7e0cf;padding:.4rem .7rem;border-radius:8px;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.user-box{display:flex;align-items:center;gap:.8rem}
.user-name{font-size:.9rem;color:#e7eede}
.role-badge{display:inline-block;font-size:.68rem;text-transform:uppercase;
    letter-spacing:.5px;padding:.1rem .4rem;border-radius:6px;margin-left:.3rem;
    background:#56714c;color:#fff}
/* Liens-boutons : lisibles par defaut (fond clair) ; variante claire dans la barre sombre */
.btn-link{background:none;border:none;color:var(--brand);cursor:pointer;
    font:inherit;font-weight:600;font-size:.9rem;padding:.2rem 0;text-decoration:underline}
.btn-link:hover{color:var(--brand-d)}
.topbar .btn-link{color:#e6edda;font-weight:500}
.topbar .btn-link:hover{color:#fff}

/* Layout */
.wrap{max-width:1080px;margin:1.4rem auto;padding:0 1rem}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;
    gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.section-title{margin:1.4rem 0 .6rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow);padding:1.1rem 1.2rem;margin-bottom:1rem}

/* Flash */
.flash{padding:.7rem 1rem;border-radius:10px;margin-bottom:1rem;border:1px solid}
.flash-success{background:#e9f6ec;border-color:#bfe3c7;color:#1f6b34}
.flash-error{background:#fbecea;border-color:#f1c4bd;color:#9e2b1e}
.flash-info{background:#eef2fb;border-color:#cdd8ef;color:#37507e}

/* Auth */
.auth-card{max-width:380px;margin:8vh auto 0;text-align:center}
.auth-card h1{margin-bottom:.2rem}
.form{display:flex;flex-direction:column;gap:.6rem;text-align:left;margin-top:1rem}
.form label{font-weight:600;font-size:.9rem}
.form input{width:100%}
input[type=text],input[type=email],input[type=search],input[type=password],
input[type=date],textarea,select{
    font:inherit;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;
    background:#fff;color:var(--ink);width:100%}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent);
    outline-offset:0;border-color:var(--accent)}
.code-input{font-size:1.6rem;letter-spacing:.5rem;text-align:center;font-weight:700}
.inline-form{display:inline}

/* Buttons */
.btn{display:inline-block;font:inherit;font-weight:600;cursor:pointer;
    padding:.55rem 1rem;border-radius:9px;border:1px solid transparent;
    background:#e9ede3;color:var(--ink);transition:.12s}
.btn:hover{filter:brightness(.97)}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-d)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--brand-d)}
.btn-small{padding:.35rem .7rem;font-size:.85rem}
.btn-validate{background:var(--brand);color:#fff}
.btn-validate:hover{background:var(--brand-d)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:.55rem .6rem;border-bottom:1px solid var(--line);
    text-align:left;vertical-align:middle}
.table th{font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;
    color:var(--muted);font-weight:700}
.table tr:last-child td{border-bottom:none}
.row-inactive{opacity:.5}
.row-today td{background:#f3f7ee}

.tag{font-size:.72rem;padding:.12rem .5rem;border-radius:20px;font-weight:600}
.tag-open{background:#e3f1e6;color:#27672f}
.tag-locked{background:#eceee9;color:#73796d}

/* Stats */
.stats{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.stat{flex:1;min-width:120px;background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);padding:.8rem 1rem;box-shadow:var(--shadow)}
.stat-num{display:block;font-size:1.7rem;font-weight:700;color:var(--brand-d)}
.stat-lbl{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}

/* Forms inline */
.form-inline{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.form-inline input{width:auto;flex:1;min-width:140px}
.day-picker{display:flex;align-items:center;gap:.5rem}
.day-picker select,.day-picker input[type=date]{width:auto}
.head-tools{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}

/* Raccourcis de jours (synthese) */
.quick-days{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin:-.4rem 0 1rem}
.chip{display:inline-block;padding:.2rem .55rem;border-radius:20px;font-size:.82rem;
    font-weight:600;background:#fff;border:1px solid var(--line);color:var(--brand-d)}
.chip:hover{border-color:var(--accent);text-decoration:none}
.chip-active{background:var(--brand);color:#fff;border-color:transparent}

/* Counter */
.counter{background:var(--brand);color:#fff;padding:.45rem .9rem;border-radius:20px;
    font-weight:600;font-size:.9rem}

/* Search */
.searchbar{margin-bottom:1rem;position:relative}
.searchbar input{font-size:1rem}
.search-empty{display:block;margin-top:.5rem;color:var(--muted)}

/* Recruit cards */
.recruit-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.9rem}
.recruit-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    padding:.9rem 1rem;box-shadow:var(--shadow);transition:border-color .15s}
.recruit-card.is-rated{border-color:#bfe0c5;background:#fcfefb}
.recruit-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.6rem}
.recruit-name{font-weight:700}
.recruit-mat{font-size:.78rem;color:var(--muted);background:#f0f2ec;padding:.05rem .4rem;border-radius:6px}
.rated-flag{margin-left:auto;font-size:.72rem;color:#27672f;background:#e3f1e6;
    padding:.1rem .5rem;border-radius:20px;display:none}
.recruit-card.is-rated .rated-flag{display:inline-block}

/* Score buttons */
.score-row{display:flex;gap:.35rem;margin-bottom:.6rem}
.score-btn{flex:1;position:relative;cursor:pointer;text-align:center;
    border:1.5px solid var(--line);border-radius:9px;padding:.45rem 0;font-weight:700;
    user-select:none;background:#fff;transition:.1s}
.score-btn input{position:absolute;opacity:0;width:0;height:0}
.score-btn span{display:block;font-size:1rem}
.score-btn:hover{border-color:var(--accent)}
.score-btn.selected{color:#fff;border-color:transparent}
.score-btn.sc-pp.selected{background:var(--pp)}
.score-btn.sc-p.selected{background:var(--p)}
.score-btn.sc-z.selected{background:var(--z)}
.score-btn.sc-m.selected{background:var(--m)}
.score-btn.sc-mm.selected{background:var(--mm)}
.score-btn.sc-pp{color:var(--pp)}.score-btn.sc-p{color:var(--p)}
.score-btn.sc-z{color:var(--z)}.score-btn.sc-m{color:var(--m)}
.score-btn.sc-mm{color:var(--mm)}

.remark{width:100%;resize:vertical;min-height:2.4rem}
.card-actions{display:flex;align-items:center;gap:.7rem;margin-top:.5rem}
.card-status{font-size:.83rem;color:#27672f}
.card-status.error{color:var(--mm)}

/* Score badge */
.score-badge{display:inline-block;min-width:2.2rem;text-align:center;font-weight:700;
    padding:.12rem .5rem;border-radius:7px;color:#fff;background:var(--z)}
.score-badge.sc-pp{background:var(--pp)}.score-badge.sc-p{background:var(--p)}
.score-badge.sc-z{background:var(--z)}.score-badge.sc-m{background:var(--m)}
.score-badge.sc-mm{background:var(--mm)}

.readonly-rating{display:flex;align-items:flex-start;gap:.6rem}
.remark-text{flex:1}

@media (max-width:560px){
    .recruit-list{grid-template-columns:1fr}
    .topbar-in{gap:.6rem}
    .user-name{display:none}
}