:root { --charcoal:#333F4F; --charcoal-2:#24303d; --gold:#BF9B30; --gold-light:#F5EDD8; --grey:#F5F5F5; --txt:#1f2937; --muted:#6b7280; --ok:#1a7f4b; --err:#b42318; --warn:#b7791f; --info:#1d4ed8; --line:#d9dee5; --card:#fff; --bg:#f6f7f9; }
* { box-sizing:border-box; } body { margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; font-size:14px; color:var(--txt); background:var(--bg); }
a { color:var(--charcoal); }
.layout { display:flex; min-height:100vh; }
nav.side { width:236px; background:var(--charcoal); color:#fff; padding:14px 0; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; }
nav.side .brand { display:flex; align-items:center; gap:10px; padding:0 16px 12px; border-bottom:1px solid rgba(255,255,255,.12); }
nav.side .brand img { width:40px; height:40px; object-fit:contain; background:#fff; border-radius:8px; padding:3px; }
nav.side .brand b { display:block; font-size:14px; } nav.side .brand small { color:#cbd2da; font-size:11px; }
nav.side h6 { margin:14px 16px 4px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#9aa6b4; }
nav.side a { display:flex; justify-content:space-between; align-items:center; color:#e7ebf0; text-decoration:none; padding:7px 16px; font-size:13.5px; }
nav.side a:hover, nav.side a.active { background:rgba(255,255,255,.08); color:#fff; }
nav.side .badge { background:#e5484d; color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700; } nav.side .badge.gold { background:var(--gold); color:#222; }
nav.side .side-foot { margin:18px 16px 0; font-size:11px; color:#9aa6b4; }
.content { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { background:#fff; border-bottom:1px solid var(--line); height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; position:sticky; top:0; z-index:5; }
.topbar-left { display:flex; align-items:center; gap:10px; } .topbar-title { font-weight:600; color:var(--charcoal); } .topbar-right { display:flex; align-items:center; gap:12px; font-size:13px; }
.topbar-user { text-decoration:none; font-weight:600; } .icon-btn { display:none; border:1px solid var(--line); background:#fff; border-radius:5px; padding:3px 8px; font-size:16px; cursor:pointer; }
main { padding:22px 26px 60px; }
h1 { font-size:22px; margin:0 0 4px; color:var(--charcoal); } h2 { font-size:16px; margin:22px 0 8px; color:var(--charcoal); border-bottom:2px solid var(--gold-light); padding-bottom:4px; } h3 { font-size:14px; margin:14px 0 6px; }
.sub { color:var(--muted); margin-bottom:16px; }
.flash { padding:10px 14px; border-radius:6px; margin:0 0 14px; } .flash.ok { background:#e6f4ea; color:var(--ok); border:1px solid #b7e1c1; } .flash.err { background:#fdecea; color:var(--err); border:1px solid #f5c2c0; } .flash.info { background:#e8effc; color:var(--info); border:1px solid #c3d4f5; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:12px 0 18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:12px 14px; } .card .k { font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.card .v { font-size:21px; font-weight:700; margin-top:4px; color:var(--charcoal); font-variant-numeric:tabular-nums; } .card .d { font-size:12px; color:var(--muted); margin-top:4px; }
.neg { color:var(--err); } .pos { color:var(--ok); } .card.warn { border-color:#f0c674; background:#fff9e8; } .card.alert { border-color:#f5c2c0; background:#fff5f5; }
table { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
th, td { padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { background:var(--charcoal); color:#fff; font-weight:600; font-size:12.5px; }
tr:last-child td { border-bottom:none; } td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } tr.total td { font-weight:700; background:var(--gold-light); } tr.sub td { background:#fafafa; font-weight:600; }
.tbl-wrap { overflow-x:auto; margin-bottom:14px; } .muted { color:var(--muted); } .small { font-size:12px; }
.tag { display:inline-block; padding:1px 7px; border-radius:10px; font-size:11px; font-weight:600; background:#e7ebf0; color:var(--charcoal); } .tag.ok { background:#e6f4ea; color:var(--ok); } .tag.err { background:#fdecea; color:var(--err); } .tag.warn { background:#fff3d6; color:var(--warn); } .tag.gold { background:var(--gold-light); color:#7a5f12; } .tag.info { background:#e8effc; color:var(--info); }
form.inline { display:inline; } form .row { display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:10px; }
form .row > label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); min-width:120px; flex:1; } form .row > label.w-s { flex:0 0 120px; } form .row > label.w-m { flex:0 0 190px; } form .row > label.w-l { flex:2 1 320px; } form .row > label.full { flex:1 1 100%; }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid #c9d1da; border-radius:5px; background:#fff; color:var(--txt); margin-top:3px; max-width:100%; } input[type=number] { text-align:right; } input[type=checkbox] { width:auto; margin-right:6px; } textarea { min-height:60px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline:2px solid var(--gold); outline-offset:1px; }
button, .btn { font:inherit; padding:7px 13px; border-radius:5px; border:1px solid var(--charcoal); background:var(--charcoal); color:#fff; cursor:pointer; text-decoration:none; display:inline-block; font-size:13px; }
button.sec, .btn.sec { background:#fff; color:var(--charcoal); } button.gold, .btn.gold { background:var(--gold); border-color:var(--gold); color:#222; } button.danger, .btn.danger { background:#fff; color:var(--err); border-color:var(--err); } button.sm, .btn.sm { padding:3px 8px; font-size:12px; }
.box { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:14px 16px; margin-bottom:16px; } .box.gold { background:var(--gold-light); border-color:#e8d9a8; } .box.alert { border-color:#f5c2c0; background:#fff5f5; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } @media (max-width:1000px) { .grid2 { grid-template-columns:1fr; } }
.tx { border:1px solid var(--line); background:var(--card); border-radius:8px; padding:10px 14px; margin-bottom:10px; } .tx .head { display:flex; justify-content:space-between; gap:12px; align-items:baseline; flex-wrap:wrap; } .tx .amt { font-size:17px; font-weight:700; }
.tx .hint { background:#fff9e8; border-left:3px solid var(--gold); padding:6px 10px; margin:8px 0; font-size:12.5px; } details { margin-top:6px; } summary { cursor:pointer; color:var(--muted); font-size:12.5px; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:13px; } .kv b { color:var(--charcoal); }
.filters { display:flex; gap:10px; align-items:end; margin-bottom:12px; flex-wrap:wrap; } .filters label { display:flex; flex-direction:column; font-size:12px; color:var(--muted); }
.toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; align-items:center; } ul.tight { margin:6px 0; padding-left:18px; } ul.tight li { margin:3px 0; }
.status-urgent { color:var(--err); font-weight:700; } .status-passée { color:var(--muted); } .best td { background:#e6f4ea !important; font-weight:700; } code { background:#eef1f4; padding:1px 5px; border-radius:4px; font-size:12px; }
.login-bg { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#24303d 0%,#333F4F 60%,#1b2430 100%); }
.login-card { background:#fff; border-radius:12px; padding:30px 32px; width:100%; max-width:400px; box-shadow:0 20px 50px rgba(0,0,0,.35); } .login-card img { height:80px; display:block; margin:0 auto 10px; } .login-card h1 { text-align:center; font-size:18px; }
.login-card input { width:100%; } .login-card button { width:100%; margin-top:8px; }
#sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:9; } #sidebar-overlay.active { display:block; }
@media (max-width:900px) { nav.side { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s; z-index:10; } nav.side.open { transform:none; } .icon-btn { display:inline-block; } main { padding:16px; } }
@media print { nav.side, .topbar, .toolbar, .flash { display:none !important; } main { padding:0; } }

button.hlp { display:inline-grid; place-items:center; width:17px; height:17px; padding:0; border-radius:50%; border:1px solid var(--gold); background:var(--gold-light); color:#7a5f12; font-size:11px; line-height:1; cursor:pointer; vertical-align:middle; margin-left:4px; }
button.hlp:hover { background:var(--gold); color:#fff; }
th button.hlp { border-color:#fff; background:transparent; color:#fff; } .card .k button.hlp { margin-left:6px; }
#help-modal { position:fixed; inset:0; background:rgba(20,26,34,.55); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
#help-modal[hidden] { display:none; }
.help-box { background:var(--card); color:var(--txt); border-radius:10px; max-width:560px; width:100%; padding:20px 24px 18px; box-shadow:0 20px 60px rgba(0,0,0,.35); position:relative; max-height:85vh; overflow:auto; }
.help-box h3 { margin:0 28px 10px 0; font-size:17px; color:var(--charcoal); }
.help-close { position:absolute; top:10px; right:12px; width:30px; height:30px; border-radius:50%; border:none; background:var(--grey); color:var(--txt); font-size:18px; cursor:pointer; padding:0; }
.help-k { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:10px; } .help-box p { margin:3px 0 0; line-height:1.5; }

/* ─────────────────────────────────────────────────────────────────────────────
   AFFICHAGE SUR TÉLÉPHONE ET TABLETTE
   Trois problèmes traités ici :
   1. Un tableau en « width:100% » dans un conteneur défilant ne défile jamais :
      il se comprime jusqu'à devenir illisible. On lui impose donc une largeur
      minimale sur petit écran, ce qui rétablit le défilement horizontal.
   2. Sur iPhone, un champ de saisie sous 16 px provoque un zoom automatique à
      chaque fois qu'on le touche. On remonte la taille du texte des champs.
   3. Les cibles tactiles (boutons, liens de la barre latérale) étaient trop
      petites pour le doigt : on les agrandit sans toucher à l'affichage bureau.
   ───────────────────────────────────────────────────────────────────────────── */

/* Aucun débordement horizontal de la page, quoi qu'il arrive */
html, body { max-width:100%; overflow-x:hidden; }
main { min-width:0; }

@media (max-width:820px) {
    main { padding:14px 12px 60px; }
    .topbar { padding:0 12px; }
    .topbar-right { font-size:12px; gap:8px; }
    .topbar-title { font-size:13px; }
    h1 { font-size:19px; } h2 { font-size:15px; margin-top:18px; }

    /* Le tableau reprend sa largeur NATURELLE et défile, au lieu de s'écraser.
       width:auto + min-width:100% : un tableau étroit remplit l'écran, un tableau
       large déborde du conteneur et défile — sans largeur arbitraire imposée. */
    .tbl-wrap { -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:6px; }
    .tbl-wrap table { width:auto; min-width:100%; border:none; border-radius:0; }
    .tbl-wrap + .tbl-wrap { margin-top:10px; }
    /* L'en-tête ne se coupe pas (il fixe la largeur de colonne), le contenu
       des cellules continue de passer à la ligne. */
    th { padding:8px 8px; white-space:nowrap; }
    td { padding:8px 8px; max-width:18rem; }

    /* Champs de saisie : 16 px minimum pour éviter le zoom automatique sur iPhone */
    input, select, textarea { font-size:16px; padding:9px 10px; }
    form .row { gap:10px; }
    form .row > label,
    form .row > label.w-s,
    form .row > label.w-m,
    form .row > label.w-l { flex:1 1 100%; min-width:0; }

    /* Boutons : cible tactile confortable */
    button, .btn { padding:10px 14px; font-size:14px; }
    button.sm, .btn.sm { padding:7px 11px; font-size:13px; }
    .toolbar { gap:8px; }
    .toolbar > form.inline, .toolbar > .btn, .toolbar > button { width:auto; }

    .cards { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
    .card .v { font-size:19px; }
    .grid2 { grid-template-columns:1fr; }
    .kv { grid-template-columns:1fr; gap:2px 0; }
    .kv b { margin-top:6px; }
    .filters { gap:8px; }
    .filters label { flex:1 1 140px; }

    /* Barre latérale plein écran quand on l'ouvre, liens plus espacés */
    nav.side { width:min(84vw,300px); box-shadow:6px 0 24px rgba(0,0,0,.35); }
    nav.side a { padding:11px 16px; font-size:14.5px; }
    .icon-btn { padding:6px 11px; font-size:18px; }

    .box { padding:12px 12px; }
    .help-box { padding:16px 16px 14px; max-height:88vh; }
}

@media (max-width:420px) {
    .cards { grid-template-columns:1fr 1fr; }
    .card { padding:10px 11px; }
    .card .k { font-size:10.5px; }
    .card .v { font-size:17px; }
    .topbar-right .topbar-user { display:none; }   /* on garde la place pour le titre */
}