@import url('fonts.css');

/* =========================================================================
   Cockpit stock ADP Guitar Parts : charte.
   Noir #16120E, kraft #EDE5D8 / #F7F3EA, cuivre #CE8946.
   Teko (titres, chiffres, capitales), Inter (texte), mono (references).
   Densite elevee, lisibilite avant tout, animations minimales.
   ========================================================================= */

:root {
    --noir: #16120E;
    --kraft: #EDE5D8;
    --kraft-clair: #F7F3EA;
    --cuivre: #CE8946;
    --cuivre-fonce: #A96B31;
    --encre: #2A2018;
    --encre-doux: #6B5E4F;
    --trait: #D8CCB8;
    --trait-fort: #C3B49B;
    --blanc-pap: #FBF8F1;

    /* Statuts */
    --st-rupture: #A6402B;   /* rouge brique */
    --st-critique: #C57D1E;  /* ambre */
    --st-commander: #B9772A; /* cuivre soutenu */
    --st-dormant: #8A7C68;   /* gris chaud */
    --st-surstock: #4E6473;  /* bleu ardoise */
    --st-ok: #5E7247;        /* vert sourd */

    --hausse: #4B7A3E;
    --baisse: #A6402B;
    --stable: #8A7C68;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--kraft);
    color: var(--encre);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .teko, .chiffre {
    font-family: 'Teko', 'Inter', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1;
    margin: 0;
}
.chiffre { font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; }

a { color: var(--cuivre-fonce); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono, .ref { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; }

/* --- En-tete et navigation ------------------------------------------------ */
.entete {
    background: var(--noir);
    color: var(--kraft);
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    position: sticky; top: 0; z-index: 20;
    box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}
.marque {
    display: flex; align-items: baseline; gap: 9px;
    padding: 12px 0;
}
.marque .picto { color: var(--cuivre); font-size: 26px; line-height: 1; }
.marque .nom { font-family: 'Teko', sans-serif; font-size: 26px; font-weight: 700; text-transform: uppercase; color: var(--kraft); letter-spacing: 0.03em; }
.marque .accent { color: var(--cuivre); }
.marque .tag { font-family: 'Inter'; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: #9C8F7C; margin-left: 4px; }

.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a {
    color: #C9BCA6; padding: 14px 15px 12px; font-size: 13px;
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
    border-bottom: 3px solid transparent;
}
.nav a:hover { color: var(--kraft); text-decoration: none; }
.nav a.actif { color: #fff; border-bottom-color: var(--cuivre); }
.nav .sortie { color: #8B7E6C; margin-left: 10px; }

/* --- Bandeau permanent ---------------------------------------------------- */
.bandeau {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: var(--trait);
    border-bottom: 1px solid var(--trait-fort);
}
.kpi { background: var(--kraft-clair); padding: 10px 16px; }
.kpi .lib { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--encre-doux); margin-bottom: 3px; }
.kpi .val { font-family: 'Teko', sans-serif; font-size: 30px; font-weight: 600; color: var(--noir); font-variant-numeric: tabular-nums; }
.kpi .sub { font-size: 11.5px; color: var(--encre-doux); margin-top: 1px; }
.kpi .sub.alerte { color: var(--st-rupture); font-weight: 600; }
.kpi .sub.souligne { color: var(--st-surstock); font-weight: 600; }

/* --- Conteneur ------------------------------------------------------------ */
.zone { padding: 18px 20px 40px; max-width: 1500px; margin: 0 auto; }
.titre-vue { font-size: 30px; color: var(--noir); margin-bottom: 12px; }
.bloc { background: var(--blanc-pap); border: 1px solid var(--trait); border-radius: 3px; margin-bottom: 18px; }
.bloc > .tete { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--trait); }
.bloc > .tete h2 { font-size: 21px; color: var(--noir); }
.bloc > .corps { padding: 12px 14px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* --- Filtres -------------------------------------------------------------- */
.filtres { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.champ { display: flex; flex-direction: column; gap: 3px; }
.champ label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-doux); }
.champ input, .champ select {
    font-family: inherit; font-size: 13px; padding: 6px 8px;
    border: 1px solid var(--trait-fort); border-radius: 3px; background: #fff; color: var(--encre);
    min-width: 120px;
}
.champ.prix input { width: 82px; min-width: 0; }
.duo { display: flex; gap: 5px; align-items: center; }
.btn {
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 7px 14px; border-radius: 3px; border: 1px solid var(--cuivre-fonce);
    background: var(--cuivre); color: #241706; text-transform: uppercase; letter-spacing: 0.04em;
}
.btn:hover { background: var(--cuivre-fonce); color: #fff; }
.btn.plat { background: transparent; color: var(--encre-doux); border-color: var(--trait-fort); }
.btn.plat:hover { background: var(--kraft); color: var(--noir); }
.segmente { display: inline-flex; border: 1px solid var(--trait-fort); border-radius: 3px; overflow: hidden; }
.segmente a { padding: 6px 11px; font-size: 12.5px; color: var(--encre-doux); background: #fff; border-left: 1px solid var(--trait); }
.segmente a:first-child { border-left: 0; }
.segmente a:hover { background: var(--kraft); text-decoration: none; }
.segmente a.on { background: var(--noir); color: var(--kraft); }

/* --- Tableaux ------------------------------------------------------------- */
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--trait); vertical-align: middle; }
table.tbl th {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--encre-doux);
    font-weight: 600; background: var(--kraft-clair); position: sticky; top: 0;
}
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tbl tbody tr:hover { background: var(--kraft-clair); }
.total-row td { font-weight: 700; background: var(--kraft); border-top: 2px solid var(--trait-fort); }

/* Barre de proportion (Pareto) dans une cellule */
.barre { position: relative; min-width: 120px; }
.barre .rail { height: 16px; background: #EbE2D2; border-radius: 2px; overflow: hidden; }
.barre .fill { height: 100%; background: var(--cuivre); }
.barre .fill.ca { background: var(--st-surstock); }
.barre-duo .rail { height: 8px; margin: 1px 0; }
.legende-duo { font-size: 10px; color: var(--encre-doux); }

/* Pastilles statut et tendance */
.pastille { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.st-rupture { background: var(--st-rupture); }
.st-critique { background: var(--st-critique); }
.st-a-commander { background: var(--st-commander); }
.st-dormant { background: var(--st-dormant); }
.st-surstock { background: var(--st-surstock); }
.st-ok { background: var(--st-ok); }

.te { font-weight: 700; font-variant-numeric: tabular-nums; }
.te-hausse { color: var(--hausse); }
.te-baisse { color: var(--baisse); }
.te-stable { color: var(--stable); }
.te-neutre { color: #B3A791; }

/* Tableau large : defilement horizontal contenu, le corps de page ne bouge pas */
.tbl-scroll { overflow-x: auto; }

/* Lien de deroulement d'un groupe vers ses references */
a.agg-lien { color: var(--encre); border-bottom: 1px dotted var(--trait-fort); }
a.agg-lien:hover { color: var(--cuivre-fonce); text-decoration: none; border-bottom-color: var(--cuivre); }

/* Pagination */
.pager { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12.5px; color: var(--encre-doux); flex-wrap: wrap; }
.pager .cnt { margin-right: auto; }
.pager a, .pager span.cur {
    padding: 4px 10px; border: 1px solid var(--trait-fort); border-radius: 3px; background: #fff; color: var(--encre-doux);
}
.pager span.cur { background: var(--noir); color: var(--kraft); border-color: var(--noir); }
.pager a:hover { background: var(--kraft); text-decoration: none; color: var(--noir); }
.pager .muet { opacity: 0.4; pointer-events: none; }

/* --- Reapprovisionnement -------------------------------------------------- */
.compteurs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--trait); border: 1px solid var(--trait); border-radius: 3px; margin-bottom: 18px; }
.compteurs .c { background: var(--blanc-pap); padding: 10px 14px; }
.compteurs .c .lib { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--encre-doux); }
.compteurs .c .val { font-family: 'Teko', sans-serif; font-size: 28px; color: var(--noir); font-variant-numeric: tabular-nums; line-height: 1.05; }
.compteurs .c.fort { background: var(--noir); }
.compteurs .c.fort .lib { color: #B9A88F; }
.compteurs .c.fort .val { color: var(--cuivre); }

input[type=range] { width: 100%; accent-color: var(--cuivre); }
.controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.controls .large { flex: 1 1 260px; min-width: 220px; }
.exports { display: flex; gap: 8px; align-items: center; }

tr.hors td { opacity: 0.42; }
tr.coupe td {
    background: var(--noir); color: var(--cuivre);
    font-family: 'Teko', sans-serif; text-transform: uppercase; letter-spacing: 0.05em;
    font-size: 15px; padding: 5px 10px; text-align: center;
}
.four-plaf input { width: 92px; }

/* Exclusion manuelle d'une ligne (barrer / retablir) */
tr.exclu td { text-decoration: line-through; opacity: 0.5; }
tr.exclu td:first-child { text-decoration: none; opacity: 1; }
.act-barrer, .act-exclu { display: inline-block; width: 22px; text-align: center; font-weight: 700; border-radius: 3px; text-decoration: none; }
.act-barrer { color: var(--st-rupture); }
.act-barrer:hover { background: var(--st-rupture); color: #fff; text-decoration: none; }
.act-exclu { color: var(--st-ok); }
.act-exclu:hover { background: var(--st-ok); color: #fff; text-decoration: none; }

/* --- Contrôles ------------------------------------------------------------ */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; }
.carte { display: block; background: var(--blanc-pap); border: 1px solid var(--trait); border-left-width: 4px; border-radius: 3px; padding: 12px 14px; color: var(--encre); }
.carte:hover { text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.carte.sel { border-color: var(--cuivre); border-left-color: var(--cuivre); background: #fff; }
.carte .grav { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.carte .nb { font-family: 'Teko', sans-serif; font-size: 36px; line-height: 1; color: var(--noir); font-variant-numeric: tabular-nums; }
.carte .lib { font-size: 12.5px; color: var(--encre-doux); margin-top: 2px; }
.carte.g-bloquant { border-left-color: var(--st-rupture); } .carte.g-bloquant .grav { color: var(--st-rupture); }
.carte.g-important { border-left-color: var(--st-critique); } .carte.g-important .grav { color: var(--st-critique); }
.carte.zero .nb { color: var(--st-ok); }
.carte.zero .grav { color: var(--st-ok); }

.marge-neg { color: var(--st-rupture); font-weight: 600; }
.seg-badge { font-size: 10px; color: var(--encre-doux); }

.vide { padding: 28px; text-align: center; color: var(--encre-doux); }
.vide .gros { font-family: 'Teko'; font-size: 24px; color: var(--trait-fort); text-transform: uppercase; }

/* --- Connexion ------------------------------------------------------------ */
.login-page { min-height: 100vh; display: grid; place-items: center; background:
    radial-gradient(1200px 600px at 50% -10%, #201913, var(--noir)); }
.login-carte { width: 340px; background: var(--blanc-pap); border-radius: 5px; padding: 26px; box-shadow: 0 18px 50px rgba(0,0,0,0.4); }
.login-carte .marque { justify-content: center; padding-bottom: 6px; }
.login-carte .marque .nom, .login-carte .marque .picto { color: var(--noir); }
.login-carte .sous { text-align: center; color: var(--encre-doux); font-size: 12px; margin-bottom: 18px; }
.login-carte .champ { margin-bottom: 12px; }
.login-carte .champ input { width: 100%; }
.login-carte .btn { width: 100%; justify-content: center; padding: 10px; }
.erreur { background: #F3E0DA; color: var(--st-rupture); border: 1px solid #E3B7AB; padding: 8px 10px; border-radius: 3px; font-size: 12.5px; margin-bottom: 12px; }

/* --- Divers --------------------------------------------------------------- */
.pied { text-align: center; color: var(--encre-doux); font-size: 11px; padding: 14px; }
.chip { font-size: 11px; color: var(--encre-doux); background: var(--kraft); border: 1px solid var(--trait); border-radius: 10px; padding: 1px 8px; }

/* --- Infobulles ------------------------------------------------------------ */
.tip {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%; background: var(--trait-fort); color: #fff;
    font-size: 10px; font-weight: 700; font-style: italic; cursor: help; margin-left: 5px;
    font-family: 'Inter', sans-serif; vertical-align: middle; text-transform: none; letter-spacing: 0;
}
.tip:hover, .tip:focus { background: var(--cuivre-fonce); outline: none; }
.tip .tip-bulle {
    position: absolute; bottom: 145%; left: 50%; transform: translateX(-50%);
    background: var(--noir); color: var(--kraft); padding: 9px 11px; border-radius: 4px;
    font-size: 12px; line-height: 1.4; width: 250px; font-weight: 400; font-style: normal;
    text-transform: none; letter-spacing: 0; text-align: left;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35); opacity: 0; visibility: hidden; z-index: 50;
}
.tip .tip-bulle::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--noir);
}
.tip:hover .tip-bulle, .tip:focus .tip-bulle { opacity: 1; visibility: visible; }
/* Variante : bulle SOUS l'icone (pour le bandeau, en haut de page) */
.tip-bas .tip-bulle { bottom: auto; top: 145%; }
.tip-bas .tip-bulle::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--noir); }
@media (prefers-reduced-motion: no-preference) { .tip .tip-bulle { transition: opacity 0.12s ease; } }

/* Badges de canal de vente */
.canal { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; color: #fff; white-space: nowrap; }
.canal-site { background: #5E7247; }
.canal-ebay { background: #4E6473; }
.canal-reverb { background: #9B5A6B; }

@media (max-width: 900px) {
    .bandeau { grid-template-columns: repeat(2, 1fr); }
    .grille-2 { grid-template-columns: 1fr; }
    .nav { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
    .barre .fill { transition: width 0.25s ease; }
}