/* ui.css — W-FEC, repris tel quel de la charte GestiPME (PROJECTS/AppWeb/gestipro/context/charte_ux.md
   + public/assets/css/layout.css + ui.css). Mêmes variables, mêmes classes .ux-* — pour que
   W-FEC ressemble à un produit de la même famille LDS, pas à un outil à part. */

:root {
    --primary   : #2563EB;
    --primary-dk: #1D4ED8;
    --primary-bg: #EFF4FF;
    --bg        : #F5F8FB;
    --surface   : #FFFFFF;
    --border    : #E2E8F0;
    --text      : #12263F;
    --text-sub  : #64748B;
    --danger    : #DC2626;
    --success   : #16A34A;
    --warning   : #D97706;
    --navy      : #1F3864;
    --radius    : 8px;
    --radius-carte : 12px;
    --shadow    : 0 1px 4px rgba(0,0,0,.08);
    --shadow-carte : 0 1px 3px rgba(16,30,60,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
}

a { color: var(--primary); }

/* ---- Topbar simple (pas de sidebar : W-FEC n'a ni compte ni menu) ---- */
.ux-topbar {
    height: 56px; background: var(--surface); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px; padding: 0 16px;
    position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow);
}
.ux-topbar-logo {
    width: 32px; height: 32px; border-radius: 8px; background: var(--primary); color: #fff;
    font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ux-topbar-nom { font-size: 15px; font-weight: 700; color: var(--text); }
.ux-topbar-sub { font-size: 12px; color: var(--text-sub); }

.ux-page { max-width: 640px; margin: 0 auto; padding: 20px 16px 32px; }
.ux-h1 { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.ux-lead { font-size: 14px; color: var(--text-sub); margin-bottom: 16px; }

.svg-ico { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; }

.ux-back { display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:600;
    color:var(--text-sub);text-decoration:none;margin-bottom:4px; }
.ux-back:hover { color:var(--primary); }

/* Carte — recette unique pour tous les cadres du site : fond blanc, bordure, rayon et
   ombre identiques. Seule une teinte de couleur porteuse d'un sens (statut, gravité)
   est autorisée à en dévier (voir .ux-kpi.ko/.warn/.ok, .ux-liste-carte.bloquant/.avertissement). */
.ux-card { background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-carte);
    padding:16px;box-shadow:var(--shadow-carte);margin-bottom:16px; }
.ux-card-titre { font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
    color:var(--text-sub);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:6px; }

/* Champs */
.ux-f { margin-bottom:16px; }
.ux-f:last-child { margin-bottom:0; }
.ux-f > label { display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px; }
.ux-f > label .opt { font-weight:400;color:var(--text-sub);font-size:12px; }
.ux-f input[type=text], .ux-f input[type=number], .ux-f input[type=date],
.ux-f input[type=file], .ux-f textarea, .ux-f select {
    width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:10px;
    font-size:15px;font-family:inherit;padding:10px 12px;background:var(--surface);color:var(--text); }
.ux-f input:focus, .ux-f textarea:focus, .ux-f select:focus { outline:none;border-color:var(--primary); }
.ux-hint { font-size:12px;color:var(--text-sub);margin-top:5px; }
.ux-row { display:flex;gap:12px; }
.ux-row > .ux-f { flex:1; }
@media(max-width:440px){ .ux-row{flex-direction:column;gap:0;} }

/* Radios / choix courts en chips */
.ux-chips { display:flex;flex-wrap:wrap;gap:8px; }
.ux-chip { display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 14px;
    border:1.5px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;
    color:var(--text-sub);background:var(--surface);cursor:pointer;user-select:none; }
.ux-chip input { position:absolute;opacity:0;pointer-events:none; }
.ux-chip.sel { border-color:var(--primary);background:var(--primary-bg);color:var(--primary); }

/* Bouton "plus d'options" (progressive disclosure, champs secondaires) */
.ux-plus { display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;
    margin-top:4px;background:none;border:none;color:var(--primary);font-size:14px;font-weight:600;
    cursor:pointer;font-family:inherit; }
.ux-plus-body { display:none; }
.ux-plus-body.open { display:block; }
.ux-plus .chevron { transition:transform .2s; }
.ux-plus.open .chevron { transform:rotate(180deg); }

/* Erreur inline (bordure rouge + message court, jamais de popup) */
.ux-f .ux-err { display:none;align-items:center;gap:5px;color:var(--danger);font-size:12.5px;font-weight:600;margin-top:5px; }
.ux-f.has-err .ux-err { display:flex; }
.ux-f.has-err input, .ux-f.has-err select { border-color:var(--danger);background:#FEF2F2; }
.ux-alert { background:#FEF2F2;border:1px solid #FCA5A5;color:var(--danger);border-radius:10px;
    padding:12px 14px;font-size:13.5px;font-weight:600;margin-bottom:16px; }
.ux-alert-ok { background:#F0FDF4;border-color:#86EFAC;color:var(--success); }

/* Footer collant : une seule action principale */
.ux-footer { position:sticky;bottom:0;z-index:40;margin:16px -16px 0;padding:12px 16px;
    background:var(--surface);border-top:1px solid var(--border);box-shadow:0 -2px 10px rgba(16,30,60,.06); }
.ux-btn-main { width:100%;min-height:52px;border:none;border-radius:12px;background:var(--primary);
    color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;display:flex;align-items:center;
    justify-content:center;gap:8px;cursor:pointer;font-family:inherit;text-decoration:none; }
.ux-btn-main:active { background:var(--primary-dk); }
.ux-btn-outline { width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:12px;
    background:var(--surface);color:var(--text);font-size:15px;font-weight:600;display:flex;
    align-items:center;justify-content:center;gap:8px;cursor:pointer;font-family:inherit;text-decoration:none; }

/* Listes en cartes (jamais de tableau complexe sur mobile) */
.ux-liste-carte { border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;
    font-size:13.5px; background:var(--surface); }
.ux-liste-carte.bloquant { border-left:4px solid var(--danger); }
.ux-liste-carte.avertissement { border-left:4px solid var(--warning); }
.ux-liste-carte .src { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-sub);margin-bottom:3px; }

/* KPI resume (ex. compteur d'anomalies) — teinte neutre visible (bordure + blanc), les
   variantes de statut gardent une teinte + bordure assorties (même logique que .ux-alert). */
.ux-kpis { display:flex;gap:10px;margin-bottom:16px; }
.ux-kpi { flex:1;text-align:center;padding:12px 8px;border-radius:10px;background:var(--surface);border:1px solid var(--border); }
.ux-kpi .lab { font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text-sub); }
.ux-kpi .val { font-size:20px;font-weight:800;margin-top:3px;color:var(--text); }
.ux-kpi.ko { background:#FEF2F2;border-color:#FCA5A5; } .ux-kpi.ko .val { color:var(--danger); }
.ux-kpi.warn { background:#FFFBEB;border-color:#FDE68A; } .ux-kpi.warn .val { color:var(--warning); }
.ux-kpi.ok { background:#F0FDF4;border-color:#86EFAC; } .ux-kpi.ok .val { color:var(--success); }

table.ux-table { width:100%;border-collapse:collapse;font-size:13.5px; }
table.ux-table th { text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--text-sub);padding:6px 8px;border-bottom:1px solid var(--border); }
table.ux-table td { padding:8px;border-bottom:1px solid var(--border); }
table.ux-table select { min-height:40px;font-size:13.5px;padding:6px 8px; }

.reference { font-family:'Consolas','DM Mono',monospace;background:var(--bg);padding:.2rem .5rem;border-radius:6px;font-size:13px; }
.reference-courte { display:inline-block;font-family:'Consolas','DM Mono',monospace;font-weight:800;
    font-size:22px;letter-spacing:.18em;background:var(--primary-bg);color:var(--primary-dk);
    padding:.4rem 1rem;border-radius:10px;border:1.5px solid var(--primary); }

/* Bouton WhatsApp flottant permanent — repris tel quel de siteloracle (public/css/style.css) */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 200; width: 56px; height: 56px;
    border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(37,211,102,.45); transition: transform .15s; text-decoration:none; }
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }
@media (max-width: 600px) { .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* Cartes de contact mises en valeur (icône + libellé + valeur) */
.ux-contact-grille { display:flex;flex-wrap:wrap;gap:14px;justify-content:center;max-width:560px;margin:0 auto; }
.ux-contact-carte { display:flex;align-items:center;gap:14px;flex:1 1 260px;background:var(--surface);
    border:1px solid var(--border);border-radius:var(--radius-carte);padding:16px 18px;text-decoration:none;
    box-shadow:var(--shadow-carte);transition:transform .15s,border-color .15s; }
.ux-contact-carte:hover { transform:translateY(-2px);border-color:var(--primary); }
.ux-contact-carte .ic { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    flex-shrink:0;color:#fff; }
.ux-contact-carte .ic.wa { background:#25D366; }
.ux-contact-carte .ic.mail { background:var(--primary); }
.ux-contact-carte .ic svg { width:22px;height:22px; }
.ux-contact-carte .lab { display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-sub); }
.ux-contact-carte .val { display:block;font-size:15px;font-weight:700;color:var(--text);margin-top:2px;white-space:nowrap; }
@media (max-width:480px) {
    .ux-contact-grille { flex-direction:column; }
    .ux-contact-carte .val { font-size:14px; }
}