/* Bricogestion — charte : sidebar claire, accent #0066FF, aucun aplat bleu nuit.
   Mono-thème assumé, la charte est claire. */
html,body{min-height:100%}
:root{
  --nuit:#0B1F3B; --accent:#0066FF; --bleu2:#60A5FA;
  --fond:#F4F6F9; --vert:#10B981; --gris:#E5E7EB;
  --blanc:#FFFFFF; --texte:#334155; --doux:#64748B;
  --actif:#EAF2FF; --rouge:#DC2626; --orange:#D97706;
  --rouge-f:#FEF2F2; --orange-f:#FFFBEB; --vert-f:#ECFDF5;
  --r:8px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--texte);
     font:400 14px/1.55 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
     -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--nuit);margin:0;text-wrap:balance}
h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
h2{font-size:16px;font-weight:600}
a{color:var(--accent)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.doux{color:var(--doux)}

/* ---------- ossature ---------- */
.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}
.rail{background:var(--blanc);border-right:1px solid var(--gris);
      padding:20px 12px;display:flex;flex-direction:column;gap:22px}
.marque{display:flex;align-items:center;gap:9px;padding:0 8px;
        font-weight:700;font-size:16px;color:var(--nuit);letter-spacing:-.02em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);
       color:var(--texte);text-decoration:none;font-size:13.5px;font-weight:500}
.nav a:hover{background:#F8FAFC}
.nav a[aria-current]{background:var(--actif);color:var(--accent);font-weight:600}
.nav svg{width:17px;height:17px;flex:none;stroke:#94A3B8;stroke-width:1.6;fill:none;
         stroke-linecap:round;stroke-linejoin:round}
.nav a[aria-current] svg{stroke:var(--accent)}
.qui{margin-top:auto;display:flex;align-items:center;gap:9px;padding:8px 10px;
     border-top:1px solid var(--gris);padding-top:14px}
.pastille{width:28px;height:28px;border-radius:50%;background:var(--actif);color:var(--accent);
          display:grid;place-items:center;font-size:11px;font-weight:600;flex:none}

.page{padding:22px 26px 56px;min-width:0}
.tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.tete p{margin:3px 0 0;font-size:13px;color:var(--doux)}
.onglets{display:flex;gap:3px;flex-wrap:wrap;margin:18px 0 22px;
         border-bottom:1px solid var(--gris);padding-bottom:0}
.onglets button{background:none;border:0;border-bottom:2px solid transparent;
                padding:8px 12px;font:inherit;font-size:13.5px;font-weight:500;
                color:var(--doux);cursor:pointer;margin-bottom:-1px}
.onglets button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.onglets button:hover{color:var(--nuit)}

/* ---------- tuiles ---------- */
.tuiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));margin-bottom:26px}
.tuile{background:var(--blanc);border:1px solid var(--gris);border-radius:10px;padding:13px 15px}
.tuile .lab{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--doux)}
.tuile .val{font-size:23px;font-weight:600;color:var(--nuit);margin-top:5px;
            font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tuile .sub{font-size:12px;color:var(--doux);margin-top:2px}

section.pave{margin-bottom:30px}
.pave header{margin-bottom:11px}
.pave header p{margin:2px 0 0;font-size:12.5px;color:var(--doux);max-width:66ch}
.sous{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
      color:var(--doux);margin:14px 0 8px}

/* ---------- cartes fournisseur ---------- */
.cartes{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(282px,1fr))}
.carte{background:var(--blanc);border:1px solid var(--gris);border-radius:10px;padding:13px 15px;
       text-align:left;font:inherit;color:inherit;cursor:pointer;display:block;width:100%}
.carte:hover{border-color:var(--bleu2)}
.carte:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.carte.entrepot{border-left:3px solid var(--accent)}
.carte .h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.carte .nom{font-weight:600;color:var(--nuit);font-size:14px}
.carte .mt{font-weight:600;color:var(--nuit);font-variant-numeric:tabular-nums;white-space:nowrap}
.jauge{height:4px;background:var(--gris);border-radius:2px;margin:10px 0 8px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--accent);border-radius:2px}
.jauge i.court{background:var(--orange)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--doux)}
.meta b{font-weight:500;color:var(--texte);font-variant-numeric:tabular-nums}

.puce{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
      padding:2px 7px;border-radius:5px;white-space:nowrap}
.puce.rupt{background:var(--rouge-f);color:var(--rouge)}
.puce.att{background:var(--orange-f);color:var(--orange)}
.puce.ok{background:var(--vert-f);color:var(--vert)}
.puce.neutre{background:#F1F5F9;color:var(--doux)}
.pt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ---------- présaisons ---------- */
.saisons{display:grid;gap:5px}
.saison{display:grid;grid-template-columns:86px 1fr auto;gap:12px;align-items:baseline;
        background:var(--blanc);border:1px solid var(--gris);border-left-width:3px;
        border-radius:8px;padding:9px 13px}
.saison .d{font-weight:600;font-size:12.5px}
.saison .f{color:var(--nuit);font-weight:500}
.saison .r{font-size:12px;color:var(--doux)}
.saison .ca{font-size:12.5px;color:var(--doux);font-variant-numeric:tabular-nums;white-space:nowrap}
.saison.rouge{border-left-color:var(--rouge);background:var(--rouge-f)}
.saison.rouge .d{color:var(--rouge)}
.saison.orange{border-left-color:var(--orange);background:var(--orange-f)}
.saison.orange .d{color:var(--orange)}
.saison.vert{border-left-color:var(--vert);background:var(--vert-f)}
.saison.vert .d{color:var(--vert)}

/* ---------- tableaux ---------- */
/* overflow:hidden sur le cadre annulait le position:sticky de l'en-tête — un
   ancêtre qui masque le dépassement casse le collage. Le défilement, et donc le
   collage, se font maintenant dans .defil, qui a sa propre hauteur. */
.cadre{background:var(--blanc);border:1px solid var(--gris);border-radius:10px}
.defil{overflow:auto;max-height:72vh;-webkit-overflow-scrolling:touch;border-radius:10px}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:8px 11px;border-bottom:1px solid var(--gris);white-space:nowrap;text-align:left}
thead th{position:sticky;top:0;background:#F8FAFC;font-size:11px;font-weight:600;
         letter-spacing:.04em;text-transform:uppercase;color:var(--doux);z-index:2;
         box-shadow:inset 0 -1px 0 var(--gris)}
thead th.tri{cursor:pointer;user-select:none}
thead th.tri:hover{color:var(--nuit)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#F8FAFC}
td.lib{white-space:normal;min-width:15rem;color:var(--nuit);font-weight:500}
td.seq{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--doux)}
.lien{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;font-weight:500}

.qte{width:56px;padding:4px 7px;border:1px solid var(--gris);border-radius:6px;
     font:inherit;font-size:13px;text-align:right;color:var(--nuit);background:var(--blanc);
     font-variant-numeric:tabular-nums}
.qte:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
.qte.modif{border-color:var(--accent);background:var(--actif);font-weight:600}
td.prop{color:var(--doux);font-variant-numeric:tabular-nums;text-align:right}

.histo{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.histo.v{background:var(--vert)} .histo.o{background:var(--orange)}
.histo.r{background:var(--rouge)} .histo.n{background:var(--gris)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r);
     border:1px solid transparent;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.btn.prim{background:var(--accent);color:#fff}
.btn.prim:hover{background:#0052CC}
.btn.sec{background:var(--blanc);color:var(--accent);border-color:#BFDBFE}
.btn.sec:hover{background:var(--actif)}
.btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;
         stroke-linecap:round;stroke-linejoin:round}

/* ---------- survol stats ---------- */
.bulle{position:fixed;z-index:50;background:var(--blanc);border:1px solid var(--gris);
       border-radius:10px;padding:12px 14px;box-shadow:0 8px 24px rgba(11,31,59,.12);
       font-size:12px;pointer-events:none;display:none}
.bulle h4{margin:0 0 8px;font-size:12px;font-weight:600;color:var(--nuit)}
.bulle .duo{display:flex;gap:20px}
.bulle table{font-size:11.5px;width:auto}
.bulle th,.bulle td{padding:2px 8px 2px 0;border:0;white-space:nowrap}
.bulle th{position:static;background:none;text-transform:none;letter-spacing:0;font-size:11px}

.vide{padding:22px;text-align:center;color:var(--doux);font-size:13px}
.note{font-size:12px;color:var(--doux);margin-top:9px}
.bandeau{background:var(--actif);border:1px solid #BFDBFE;border-radius:10px;
         padding:11px 14px;font-size:12.5px;color:var(--nuit);margin-bottom:20px}
.bandeau b{font-weight:600}

@media(max-width:860px){
  .app{grid-template-columns:1fr}
  .rail{flex-direction:row;align-items:center;gap:14px;overflow-x:auto;
        border-right:0;border-bottom:1px solid var(--gris);padding:12px 16px}
  .nav{flex-direction:row}.nav a span{display:none}.qui{margin:0;border:0;padding-top:8px}
  .page{padding:18px 16px 48px}
  .saison{grid-template-columns:76px 1fr}.saison .ca{grid-column:2}
}


/* --- ajouts de l'écran réel ------------------------------------------- */
.modale{position:fixed;inset:0;background:rgba(11,31,59,.35);display:grid;
        place-items:center;padding:16px;z-index:40}
.modale[hidden]{display:none!important}
.boite{background:var(--blanc);border-radius:12px;padding:20px 22px;width:100%;
       max-width:560px;max-height:82vh;overflow:auto;
       box-shadow:0 16px 48px rgba(11,31,59,.18)}
.boite h3{margin:0 0 4px;font-size:16px;color:var(--nuit)}
.boite p.aide{margin-bottom:14px}
.boite label{display:block;font-size:12px;color:var(--doux);margin-bottom:12px}
.boite input[type=text],.boite input[type=number],.boite textarea{
  display:block;width:100%;margin-top:4px;padding:8px 10px;font:inherit;font-size:14px;
  color:var(--nuit);background:var(--fond);border:1px solid var(--gris);border-radius:8px}
.boite textarea{min-height:64px;resize:vertical}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
.resultats{border:1px solid var(--gris);border-radius:8px;max-height:230px;
           overflow:auto;margin-bottom:12px}
.resultats button{display:block;width:100%;text-align:left;border:0;background:none;
                  font:inherit;font-size:13px;padding:8px 11px;cursor:pointer;
                  border-bottom:1px solid var(--gris)}
.resultats button:last-child{border-bottom:0}
.resultats button:hover{background:var(--actif)}
.resultats .r2{color:var(--doux);font-size:12px}
tr.modifiee td{background:#F7FBFF}
tr.supprimee td{opacity:.45;text-decoration:line-through}
tr.ajoutee td{background:var(--vert-f)}
.motif{font-size:11.5px;color:var(--doux);font-style:italic}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
       background:var(--nuit);color:#fff;padding:10px 16px;border-radius:8px;
       font-size:13px;z-index:60;box-shadow:0 8px 24px rgba(11,31,59,.25)}
.toast[hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){.toast{animation:monte .18s ease-out}}
@keyframes monte{from{opacity:0;transform:translate(-50%,8px)}}

/* --- tri des colonnes -------------------------------------------------- */
thead th.tri::after{content:"";display:inline-block;width:0;height:0;margin-left:5px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-bottom:4px solid var(--gris);vertical-align:1px}
thead th.tri[data-sens="desc"]::after{border-bottom:0;border-top:4px solid var(--accent)}
thead th.tri[data-sens="asc"]::after{border-bottom-color:var(--accent)}
thead th.tri[data-sens]{color:var(--nuit)}

/* ---- rapprochement avec une proposition CGI --------------------------- */
.rapprochement{background:var(--blanc);border:1px solid var(--gris);
  border-radius:12px;padding:16px 18px;margin-bottom:16px}
.rapprochement .tuiles{margin-bottom:12px}
.rapprochement .tuile{background:var(--fond);border-color:transparent}
.rapprochement .tuile .val{font-size:19px}
.cgi-actions{display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
.bascule{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  color:var(--texte);cursor:pointer;user-select:none}
.bascule input{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.rapprochement .note{margin:12px 0 0}

/* Quantité proposée par CGI : cliquable, colorée selon l'écart au retenu. */
.cgi-qte{font:inherit;font-weight:600;font-variant-numeric:tabular-nums;
  border:1px solid transparent;border-radius:6px;padding:2px 7px;cursor:pointer;
  background:#F1F5F9;color:var(--texte)}
.cgi-qte:hover{border-color:var(--accent);color:var(--accent)}
.cgi-qte:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cgi-qte.egal{background:var(--vert-f);color:var(--vert)}
.cgi-qte.plus{background:var(--orange-f);color:var(--orange)}
.cgi-qte.moins{background:#F1F5F9;color:var(--doux)}

.score{display:inline-block;min-width:30px;font-size:11.5px;font-weight:600;
  font-variant-numeric:tabular-nums;border-radius:20px;padding:2px 8px}
.score.fort{background:var(--rouge-f);color:var(--rouge)}
.score.moyen{background:var(--orange-f);color:var(--orange)}
.score.faible{background:#F1F5F9;color:var(--doux)}

/* Ligne que seul CGI propose : elle n'est pas encore dans la commande. */
tr.cgi td{background:#FFFDF5}
tr.cgi td:first-child{box-shadow:inset 3px 0 0 var(--orange)}