/* ============================================================
   SABRE — feuille de style, v2 « terrain »
   Mobile-first : l'utilisateur nominal est un commercial en clientèle,
   sur téléphone. Le bureau est l'agrandissement, pas l'inverse.

   Structure :
     1. Tokens & base
     2. Coquille (topbar mobile, sidebar desktop, bottom nav)
     3. Composants (cartes, boutons, tags, formulaires, tableaux)
     4. Tableaux → cartes sur mobile (pattern data-label)
     5. Écrans spécifiques (login, réinitialisation)
   ============================================================ */

/* ---------- 1. Tokens & base ---------- */

:root{
  --red:#d71920;            /* rouge Wirquin — accent, jamais fond de masse */
  --red-dark:#b3151b;
  --red-soft:#fdeeee;
  --bg:#f6f6f7;
  --panel:#ffffff;
  --text:#1c2128;
  --muted:#6b7280;
  --line:#e8eaee;           /* hairline : les séparations remplacent les ombres */
  --green:#178a52;  --green-soft:#e5f5ec;
  --orange:#c2660a; --orange-soft:#fdf0e1;
  --blue:#2563eb;   --blue-soft:#e8effd;
  --gray-soft:#eef0f3;
  --danger:#c81e1e;
  --shadow-pop:0 8px 30px rgba(17,24,39,.12);  /* réservé aux éléments flottants */
  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --topbar-h:56px;
  --bottomnav-h:58px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:15px;line-height:1.45;
}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- 2. Coquille ---------- */

.app{min-height:100vh}

/* Topbar — mobile seulement. Sticky : le titre de page reste sous le pouce. */
.topbar{
  position:sticky;top:0;z-index:20;
  height:var(--topbar-h);
  display:flex;align-items:center;gap:12px;
  padding:0 14px;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .brand-logo{width:34px;height:34px;border-radius:10px}
.topbar-title{flex:1;min-width:0}
.topbar-title b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-title span{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .avatar{width:34px;height:34px;font-size:13px}
/* Lien de sortie : cible tactile pleine hauteur, icône discrète. */
.topbar-logout{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--muted);font-size:18px;text-decoration:none}
.topbar-logout:hover{background:var(--gray-soft);text-decoration:none}

/* Sidebar — cachée sur mobile, la bottom nav prend le relais. */
aside{display:none}

/* Bottom nav — mobile. Vrais liens, étiquettes visibles : pas d'icônes à deviner. */
.bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
}
.bottomnav a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--muted);font-size:10.5px;font-weight:600;text-decoration:none;
  padding-top:6px;min-width:0;
}
.bottomnav a .ico{font-size:20px;line-height:1;background:none;width:auto;height:auto;color:inherit}
.bottomnav a .ico .svg-ico{width:19px;height:19px}
.bottomnav a.active{color:var(--red)}
.bottomnav a:hover{text-decoration:none}

main{
  padding:16px 14px calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 24px);
  max-width:1060px;margin:0 auto;
}

/* En-tête de page : typographie, pas de bandeau. Le rouge reste un accent.
   Caché sur mobile — la topbar sticky porte déjà titre et sous-titre. */
.page-head{display:none}
.page-head h1{margin:0;font-size:22px;font-weight:700}
.page-head p{margin:3px 0 0;color:var(--muted);font-size:13px}

.brand{display:flex;align-items:center;gap:12px}
.brand-logo{width:44px;height:44px;background:var(--red);border-radius:12px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.brand-logo img{width:100%;height:100%;object-fit:cover;display:block}
.brand-title{font-weight:700;font-size:17px;line-height:1.1}
.brand-sub{font-size:12px;color:var(--muted);margin-top:2px}

.avatar{width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:0 0 auto}

/* ---------- Desktop : sidebar fine, topbar et bottom nav disparaissent ---------- */
@media (min-width:1000px){
  .topbar,.bottomnav{display:none}
  .app{display:flex}
  aside{
    display:flex;flex-direction:column;
    width:232px;flex:0 0 auto;
    position:sticky;top:0;height:100vh;
    background:var(--panel);border-right:1px solid var(--line);
    padding:20px 14px;
  }
  aside .brand{padding:0 8px;margin-bottom:26px}
  .nav{display:grid;gap:2px}
  .nav a{
    display:flex;align-items:center;gap:11px;
    padding:10px 12px;border-radius:var(--r-md);
    color:#4b5563;font-weight:600;font-size:13.5px;text-decoration:none;
  }
  .nav a:hover{background:var(--gray-soft);text-decoration:none}
  .nav a.active{background:var(--red-soft);color:var(--red)}
  .nav .ico{font-size:17px;width:22px;text-align:center;flex:0 0 auto}
  /* L'utilisateur vit en bas de la sidebar : hors du contenu, toujours là. */
  .userbox{margin-top:auto;border-top:1px solid var(--line);padding:14px 8px 2px;display:flex;align-items:center;gap:10px}
  .userbox b{display:block;font-size:13.5px;line-height:1.2}
  .userbox .sub{font-size:11.5px;color:var(--muted)}
  .userbox a{color:var(--muted);font-size:11.5px}
  main{flex:1;min-width:0;padding:28px 32px 48px;margin:0}
  .page-head{display:block;margin:0 0 22px}
  .page-head h1{font-size:26px}
  .page-head p{font-size:14px}
}

/* ---------- 3. Composants ---------- */

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px}

.grid{display:grid;gap:12px}
/* Indicateurs : 2 par ligne sur mobile — lisibles d'un pouce, sans défiler. */
.cards{grid-template-columns:repeat(2,1fr);margin-bottom:16px}
/* stack-sm : blocs riches (formulaires, gros montants) — pleine largeur sur
   mobile, 3 colonnes sur bureau. Les indicateurs nus restent en 2×2. */
.cards.stack-sm{grid-template-columns:1fr}
@media (min-width:1000px){
  .cards{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
  .cards.stack-sm{grid-template-columns:repeat(3,1fr)}
}

.metric{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:14px 16px}
.metric .lbl{color:var(--muted);font-weight:600;font-size:12.5px}
.metric .num{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.02em}
@media (min-width:1000px){.metric .num{font-size:30px}}
.round-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:0 0 auto}
/* Icônes SVG inline (Font Awesome Free via svgIcon()) : taille du texte courant. */
.svg-ico{width:1em;height:1em;display:inline-block;vertical-align:-0.125em}
.round-icon .svg-ico{width:17px;height:17px}
.nav .ico .svg-ico{width:16px;height:16px}
/* Icônes teintées, pas des pavés saturés : l'accent reste léger. */
.bg-red{background:var(--red-soft);color:var(--red)}
.bg-green{background:var(--green-soft);color:var(--green)}
.bg-orange{background:var(--orange-soft);color:var(--orange)}
.bg-blue{background:var(--blue-soft);color:var(--blue)}

.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin:22px 2px 12px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:17px;font-weight:700}
.section-head span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.section-head > div{min-width:0}

.btn{
  border:0;border-radius:var(--r-md);
  padding:12px 16px;min-height:44px;
  font-weight:600;font-size:14px;font-family:inherit;
  background:var(--red);color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  text-decoration:none;white-space:nowrap;
}
.btn:hover{background:var(--red-dark);text-decoration:none}
.btn.secondary{background:var(--gray-soft);color:#374151}
.btn.secondary:hover{background:#e2e5ea}
.btn:disabled{opacity:.5;cursor:not-allowed}

.tag{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.tag.red{background:var(--red-soft);color:var(--red)}
.tag.green{background:var(--green-soft);color:var(--green)}
.tag.orange{background:var(--orange-soft);color:var(--orange)}
.tag.blue{background:var(--blue-soft);color:var(--blue)}
.tag.gray{background:var(--gray-soft);color:#4b5563}

/* Formulaires — cibles tactiles ≥44px ; 16px de corps pour couper le zoom iOS. */
.form-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){.form-grid{grid-template-columns:1fr 1fr;gap:16px}}
.field label{display:block;color:#374151;font-size:12.5px;font-weight:600;margin:0 0 6px}
.field input,.field select{
  width:100%;min-height:46px;
  border:1px solid var(--line);border-radius:var(--r-md);
  padding:11px 13px;background:#fff;
  font:inherit;font-size:16px;color:var(--text);
}
.field input:focus,.field select:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
.field input:disabled,.field select:disabled{background:var(--gray-soft);color:#9aa1ad;cursor:not-allowed}
.field.full{grid-column:1/-1}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px}
.field input[type="checkbox"]{width:18px;height:18px;min-height:0;accent-color:var(--red)}
/* Un bouton de formulaire s'étire sur mobile : rien d'autre à viser sur la ligne. */
form > .btn{width:100%}
@media (min-width:700px){form > .btn{width:auto}}

.form-errors{background:var(--red-soft);border:1px solid #f6c6c8;color:#a11318;border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;font-weight:600;font-size:13.5px}
.form-errors ul{margin:6px 0 0;padding-left:18px}
.form-errors li{margin:3px 0}

/* ---------- 4. Tableaux ---------- */

.table-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:4px 16px;overflow:visible}
.table-card .section-head{margin:14px 2px 4px}
table{width:100%;border-collapse:collapse}
th{text-align:left;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;padding:12px 10px 8px}
td{padding:13px 10px;border-top:1px solid var(--line);font-weight:500;font-size:14px;vertical-align:middle}
tbody tr:hover td{background:#fafafb}
.right{text-align:right}
.muted{color:var(--muted)}

/* Menu ⋯ */
.actions{position:relative;text-align:right}
.dots{border:0;background:transparent;font-size:20px;color:var(--muted);cursor:pointer;border-radius:var(--r-sm);padding:6px 10px;font-family:inherit;line-height:1;min-height:40px}
.dots:hover{background:var(--gray-soft)}
.menu{display:none;position:absolute;right:0;top:40px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-pop);border-radius:var(--r-md);min-width:160px;z-index:15;padding:6px}
.menu a,.menu button{display:block;width:100%;border:0;background:#fff;text-align:left;padding:11px 12px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;text-decoration:none;color:var(--text);font-family:inherit;font-size:14px}
.menu a:hover,.menu button:hover{background:var(--gray-soft);text-decoration:none}
.menu .del{color:var(--danger)}
.actions.open .menu{display:block}
.menu form{margin:0}

/* Mobile : chaque ligne devient une carte. Les cellules s'empilent avec leur
   étiquette (attribut data-label posé par les pages) ; la première cellule sert
   de titre de carte, le menu ⋯ se range en haut à droite. */
@media (max-width:999px){
  .table-card{padding:12px}
  .table-card thead{display:none}
  .table-card table,.table-card tbody{display:block}
  .table-card tr{
    display:block;position:relative;
    border:1px solid var(--line);border-radius:var(--r-md);
    padding:12px 14px;margin:10px 0;
  }
  .table-card tr:hover td{background:transparent}
  .table-card td{
    display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    border:0;padding:3px 0;text-align:left;
  }
  .table-card td[data-label]::before{
    content:attr(data-label);
    color:var(--muted);font-size:12px;font-weight:600;flex:0 0 auto;
  }
  .table-card td.td-title{display:block;font-size:15.5px;font-weight:700;padding:0 34px 6px 0}
  .table-card td.td-title::before{display:none}
  .table-card td.actions{position:absolute;top:6px;right:6px;padding:0}
  .table-card td:empty{display:none}
  .table-card .menu{top:42px}
}

/* ---------- 5. Écrans spécifiques ---------- */

/* Login : une carte, rien d'autre. */
.login-wrap{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:20px;background:var(--bg)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;width:100%;max-width:400px}
.login-plane{display:block;width:220px;max-width:70%;margin:0 auto 6px}
.login-card .brand{justify-content:center;margin-bottom:24px}
.login-card .field{margin-bottom:14px}
.login-card .btn{width:100%}

/* Toast : au-dessus de la bottom nav sur mobile. */
.toast{
  position:fixed;z-index:60;display:none;
  left:14px;right:14px;bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom) + 14px);
  background:#111827;color:#fff;padding:13px 16px;border-radius:var(--r-md);
  box-shadow:var(--shadow-pop);font-weight:600;font-size:14px;
}
@media (min-width:1000px){.toast{left:auto;right:24px;bottom:24px;max-width:420px}}
.toast.show{display:block}
.toast.toast-success{background:#0c5c3d}
.toast.toast-danger{background:#8f1a1a}
.toast.toast-warning{background:#83400c}
.toast.toast-info{background:#1e3a8a}

/* Réinitialisation : le liseré rouge annonce la destruction avant le texte. */
.danger-zone{border-color:#f6c6c8}
.danger-zone .form-errors{margin-bottom:16px}
.danger-lead{margin:0 0 10px}
.reset-stats{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px 24px}
.reset-stats li{font-weight:600;font-size:13.5px}
.reset-stats-n{font-weight:700;font-size:17px;margin-right:5px}
.danger-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}

footer.app-footer{margin-top:30px;color:#9aa1ad;font-size:11.5px;text-align:center}

/* Fiche client : table compacte du référencement (v2 — code enseigne, sell-out).
   Le formulaire re-poste toutes les lignes à chaque save (setReferences
   remplace la liste intégralement), d'où une table plutôt que des checkboxes. */
.ref-table-wrap{max-height:480px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md)}
.ref-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ref-table th{position:sticky;top:0;background:var(--panel);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);font-size:12.5px}
.ref-table td{padding:5px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ref-table tr:last-child td{border-bottom:none}
.ref-table .ref-input{width:110px;padding:5px 8px;font-size:13px}