/* Poste de controle de l'inventaire.

   Deux themes, un seul jeu de variables. Sombre par defaut -- la page est un
   afficheur, pas un document -- et clair pour qui consulte sa liste de courses
   en plein soleil, ce qui est exactement le moment ou un fond noir ne se lit
   plus. Le choix explicite l'emporte sur la preference du systeme :

     :root                       le sombre, socle par defaut
     [data-theme="clair"]        choix explicite de l'utilisateur
     @media (prefers-color-scheme: light):not([data-theme="sombre"])
                                 preference du systeme, sauf choix contraire

   Aucune couleur n'est definie uniquement dans un bloc conditionnel : les
   deux themes redefinissent les memes jetons, jamais d'autres.            */

:root{
  --fond:#04070d;
  --fond-2:#070d16;
  --panneau:rgba(10,18,30,.66);
  --panneau-plein:#0a1220;
  --trait:rgba(47,240,200,.13);
  --trait-fort:rgba(47,240,200,.34);
  --texte:#d6e6ea;
  --vif:#eafffa;
  --doux:#8ba4b0;
  --tres-doux:#6c828d;
  --halo-1:rgba(47,240,200,.10);
  --halo-2:rgba(139,124,255,.12);
  --grain:rgba(47,240,200,.045);
  --lignes:rgba(255,255,255,.022);
  --melange-lignes:overlay;
  --voile-entete:rgba(4,7,13,.96);
  --voile-entete-2:rgba(4,7,13,.82);
  --voile-onglets:rgba(4,7,13,.9);
  --champ:rgba(255,255,255,.04);
  --champ-actif:rgba(47,240,200,.07);
  --ombre:0 18px 50px rgba(0,0,0,.5);
  --relief:255,255,255;

  --cyan:#2ff0c8;
  --magenta:#ff7ad9;
  --ambre:#ffb347;
  --violet:#8b7cff;
  --rouge:#ff4d5e;
  --vert:#3fe08a;
  --bleu:#49b8ff;

  --a:#1a9e5c; --b:#7ac943; --c:#ffd23f; --d:#ff9b3d; --e:#ff4d5e;

  --mono:ui-monospace,"JetBrains Mono","SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --r:10px;
  --entete:56px;
  --onglets:44px;
}

/* --- theme clair -------------------------------------------------------

   Pas une inversion mecanique du sombre. Le cyan qui brille sur du noir
   devient illisible sur du blanc : il est assombri pour garder un contraste
   suffisant sur les textes, tout en restant reconnaissable. Les couleurs de
   donnees -- Nutri-Score, NOVA, urgences -- ne bougent pas : ce sont des
   codes, pas de la decoration.                                           */

@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]){
    --fond:#f4f6f8;
    --fond-2:#eaeef2;
    --panneau:rgba(255,255,255,.82);
    --panneau-plein:#ffffff;
    --trait:rgba(15,42,58,.14);
    --trait-fort:rgba(15,42,58,.34);
    --texte:#16242c;
    --vif:#05161c;
    --doux:#465c67;
    --tres-doux:#5d737d;
    --cyan:#00765e;
    --magenta:#a82f82;
    --ambre:#965c00;
    --violet:#5343ce;
    --bleu:#1069ad;
    --vert:#0d8043;
    --halo-1:rgba(10,143,119,.10);
    --halo-2:rgba(91,75,214,.10);
    --grain:rgba(15,42,58,.05);
    --lignes:rgba(15,42,58,.018);
    --melange-lignes:normal;
    --voile-entete:rgba(244,246,248,.96);
    --voile-entete-2:rgba(244,246,248,.82);
    --voile-onglets:rgba(244,246,248,.9);
    --champ:rgba(15,42,58,.045);
    --champ-actif:rgba(10,143,119,.08);
    --ombre:0 16px 40px rgba(15,42,58,.14);
  --rouge:#cb1827;
  --relief:15,42,58;
  }
}

:root[data-theme="clair"]{
  --fond:#f4f6f8;
  --fond-2:#eaeef2;
  --panneau:rgba(255,255,255,.82);
  --panneau-plein:#ffffff;
  --trait:rgba(15,42,58,.14);
  --trait-fort:rgba(15,42,58,.34);
  --texte:#16242c;
  --vif:#05161c;
  --doux:#465c67;
  --tres-doux:#5d737d;
  --cyan:#00765e;
  --magenta:#a82f82;
  --ambre:#965c00;
  --violet:#5343ce;
  --bleu:#1069ad;
  --vert:#0d8043;
  --halo-1:rgba(10,143,119,.10);
  --halo-2:rgba(91,75,214,.10);
  --grain:rgba(15,42,58,.05);
  --lignes:rgba(15,42,58,.018);
  --melange-lignes:normal;
  --voile-entete:rgba(244,246,248,.96);
  --voile-entete-2:rgba(244,246,248,.82);
  --voile-onglets:rgba(244,246,248,.9);
  --champ:rgba(15,42,58,.045);
  --champ-actif:rgba(10,143,119,.08);
  --ombre:0 16px 40px rgba(15,42,58,.14);
  --rouge:#cb1827;
  --relief:15,42,58;
}

*,*::before,*::after{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:
    radial-gradient(1200px 700px at 78% -12%, var(--halo-1), transparent 62%),
    radial-gradient(900px 600px at 8% 104%, var(--halo-2), transparent 60%),
    var(--fond);
  color:var(--texte);
  font:17px/1.5 var(--sans);
  min-height:100vh;
  overflow-x:hidden;
}

/* --- couches d'ambiance ------------------------------------------------ */
.grain,.lignes{position:fixed;inset:0;pointer-events:none;z-index:1}
.grain{
  background-image:
    linear-gradient(var(--grain) 1px,transparent 1px),
    linear-gradient(90deg,var(--grain) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 120% 80% at 50% 0%,#000 12%,transparent 78%);
  opacity:.5;
}
.lignes{
  background:repeating-linear-gradient(var(--lignes) 0 1px,transparent 1px 3px);
  mix-blend-mode:var(--melange-lignes);opacity:.6;
}

/* --- en-tete ----------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:14px;
  height:var(--entete);padding:0 16px;
  background:linear-gradient(180deg,var(--voile-entete),var(--voile-entete-2));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--trait);
}
.marque{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.marque-glyphe svg{width:22px;height:22px;fill:none;stroke:var(--cyan);stroke-width:1.6;
  stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(47,240,200,.55))}
.marque-texte{display:flex;flex-direction:column;line-height:1.05}
.marque-texte b{font:700 17px/1 var(--mono);letter-spacing:.22em;color:var(--vif)}
.marque-texte small{font:400 11px/1.4 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--doux)}

.recherche{position:relative;flex:1;max-width:520px;display:flex;align-items:center}
.recherche .loupe{position:absolute;left:11px;width:15px;height:15px;fill:none;
  stroke:var(--doux);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.recherche input{
  width:100%;height:34px;padding:0 44px 0 34px;
  background:var(--champ);color:var(--texte);
  border:1px solid var(--trait);border-radius:99px;
  font:15px/1 var(--mono);letter-spacing:.02em;outline:none;transition:border-color .15s,background .15s;
}
.recherche input::placeholder{color:var(--tres-doux)}
.recherche input:focus{border-color:var(--trait-fort);background:var(--champ-actif)}
.recherche input::-webkit-search-cancel-button{-webkit-appearance:none}
.recherche kbd{position:absolute;right:9px;min-width:19px;height:19px;display:grid;place-items:center;
  border:1px solid var(--trait);border-radius:5px;font:11.5px/1 var(--mono);color:var(--doux)}

}

.horloge{flex:none;font:600 16px/1 var(--mono);letter-spacing:.09em;color:var(--vif);
  font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(47,240,200,.4)}

/* --- onglets ----------------------------------------------------------- */
.onglets{
  position:sticky;top:var(--entete);z-index:35;
  display:flex;gap:2px;height:var(--onglets);padding:0 12px;
  background:var(--voile-onglets);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--trait);
  overflow-x:auto;scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglet{
  position:relative;flex:none;display:flex;align-items:center;gap:6px;
  padding:0 16px;background:none;border:0;cursor:pointer;
  font:600 12.5px/1 var(--mono);letter-spacing:.19em;color:var(--doux);
  transition:color .15s;
}
.onglet:hover{color:var(--texte)}
.onglet.actif{color:var(--cyan)}
.onglet.actif::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.pastille{display:none;min-width:16px;height:16px;padding:0 4px;border-radius:99px;
  background:var(--rouge);color:var(--fond);font:700 11px/18.5px var(--mono);
  text-align:center;font-style:normal}
.pastille.on{display:inline-block}

/* --- structure --------------------------------------------------------- */
main{position:relative;z-index:2;max-width:1500px;margin:0 auto;padding:22px 16px 90px}
.vue{display:none;animation:entree .28s ease}
.vue.active{display:block}
@keyframes entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.titre-section{
  display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
  margin:34px 0 14px;font:600 15px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--texte);
}
.titre-section:first-child{margin-top:0}
.titre-section .num{
  padding:3px 7px;border:1px solid var(--trait-fort);border-radius:4px;
  color:var(--cyan);font-size:11.5px;letter-spacing:.1em;
}
.titre-section small{font:400 12.5px/1 var(--mono);letter-spacing:.06em;
  text-transform:none;color:var(--doux)}

/* --- cartes ------------------------------------------------------------ */
.carte{
  position:relative;background:var(--panneau);border:1px solid var(--trait);
  border-radius:var(--r);padding:14px;overflow:hidden;
}
.carte::before,.carte::after{
  content:"";position:absolute;width:9px;height:9px;border:1px solid var(--trait-fort);
  pointer-events:none;
}
.carte::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-top-left-radius:var(--r)}
.carte::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-bottom-right-radius:var(--r)}
.carte>header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:12px;flex-wrap:wrap}
.carte h3{margin:0;font:600 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--texte)}
.carte>header small{font:400 12px/1 var(--mono);color:var(--doux);letter-spacing:.04em}
.toile{width:100%}
.toile svg{display:block;width:100%;height:auto;overflow:visible}

/* --- bandeau de tete --------------------------------------------------- */
.bandeau{
  display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));
}
.tuile{background:var(--panneau);border:1px solid var(--trait);border-radius:9px;
  padding:12px 14px;display:flex;flex-direction:column;gap:4px;
  transition:border-color .2s}
.tuile:hover{border-color:var(--trait-fort)}
.tuile .val{font:700 27px/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  color:var(--vif)}
.tuile .val small{font-size:12.5px;letter-spacing:.08em;color:var(--doux);margin-left:4px;font-weight:400}
.tuile .lib{font:500 11px/1.3 var(--mono);letter-spacing:.17em;text-transform:uppercase;color:var(--doux)}
.tuile.cyan .val{color:var(--cyan);text-shadow:0 0 18px rgba(47,240,200,.35)}
.tuile.rouge .val{color:var(--rouge);text-shadow:0 0 18px rgba(255,77,94,.35)}
.tuile.ambre .val{color:var(--ambre)}
.tuile.violet .val{color:var(--violet)}
.tuile.magenta .val{color:var(--magenta)}

/* --- KPI --------------------------------------------------------------- */
.grille-kpi{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(238px,1fr))}
.kpi{position:relative;background:var(--panneau);border:1px solid var(--trait);
  border-radius:var(--r);padding:13px 14px 12px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .2s,transform .2s}
.kpi:hover{border-color:var(--trait-fort);transform:translateY(-2px)}
.kpi-tete{display:flex;align-items:center;gap:8px}
.kpi-rang{font:700 11px/1 var(--mono);letter-spacing:.14em;color:var(--fond);
  background:var(--doux);padding:3px 5px;border-radius:3px}
.kpi.bon .kpi-rang{background:var(--vert)}
.kpi.moyen .kpi-rang{background:var(--ambre)}
.kpi.mauvais .kpi-rang{background:var(--rouge)}
.kpi-code{font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--doux)}
.kpi-titre{font:500 14px/1.3 var(--sans);color:var(--texte)}
.kpi-val{display:flex;align-items:baseline;gap:5px;font-variant-numeric:tabular-nums}
.kpi-val b{font:700 33.5px/1 var(--mono);letter-spacing:-.03em}
.kpi-val span{font:500 12.5px/1 var(--mono);letter-spacing:.1em;color:var(--doux)}
.kpi.bon .kpi-val b{color:var(--vert);text-shadow:0 0 20px rgba(63,224,138,.3)}
.kpi.moyen .kpi-val b{color:var(--ambre);text-shadow:0 0 20px rgba(255,179,71,.3)}
.kpi.mauvais .kpi-val b{color:var(--rouge);text-shadow:0 0 20px rgba(255,77,94,.3)}
.kpi-jauge{height:3px;background:rgba(var(--relief),.07);border-radius:99px;overflow:hidden}
.kpi-jauge i{display:block;height:100%;border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.2,1)}
.kpi.bon .kpi-jauge i{background:var(--vert)}
.kpi.moyen .kpi-jauge i{background:var(--ambre)}
.kpi.mauvais .kpi-jauge i{background:var(--rouge)}
.kpi-formule{font:400 11px/1.45 var(--mono);color:var(--tres-doux);letter-spacing:.02em;
  border-top:1px dashed rgba(var(--relief),.07);padding-top:7px}
.kpi-formule b{display:block;color:var(--doux);font-weight:400;margin-bottom:2px}

/* --- donuts et graphes ------------------------------------------------- */
.grille-donuts{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.grille-series,.grille-nutrition,.grille-barres,.grille-flux,.grille-courses{
  display:grid;gap:12px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.carte.large{grid-column:span 2}
@media (max-width:720px){.carte.large{grid-column:span 1}}

.legende-donut{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.legende-donut li{display:flex;align-items:center;gap:7px;font:400 12.5px/1 var(--mono);
  color:var(--doux);list-style:none}
.legende-donut .pip{width:8px;height:8px;border-radius:2px;flex:none}
.legende-donut .n{margin-left:auto;color:var(--texte);font-variant-numeric:tabular-nums}
.legende-donut .pc{color:var(--tres-doux);min-width:34px;text-align:right}
ul.legende-donut{margin:10px 0 0;padding:0}

.barre-ligne{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin-bottom:9px}
.barre-ligne .lib{font:400 13px/1.2 var(--sans);color:var(--texte);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.barre-ligne .n{font:600 12.5px/1.2 var(--mono);color:var(--doux);font-variant-numeric:tabular-nums}
.barre-ligne .piste{grid-column:1/-1;height:5px;background:rgba(var(--relief),.06);
  border-radius:99px;overflow:hidden}
.barre-ligne .piste i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  transition:width .6s cubic-bezier(.2,.8,.2,1)}

/* --- cartouches (chiffres et curiosites) ------------------------------- */
.cartouches{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}
.cartouche{background:var(--panneau);border:1px solid var(--trait);border-radius:8px;
  padding:11px 12px;display:flex;flex-direction:column;gap:3px;transition:border-color .2s}
.cartouche:hover{border-color:var(--trait-fort)}
.cartouche .lib{font:500 11px/1.3 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--doux)}
.cartouche .val{font:700 22.5px/1.1 var(--mono);color:var(--vif);font-variant-numeric:tabular-nums;
  word-break:break-word}
.cartouche .val span{font-size:12px;font-weight:500;color:var(--doux);letter-spacing:.06em;
  margin-left:4px}
.cartouche .note{font:400 11.5px/1.4 var(--mono);color:var(--tres-doux)}
.curieux .cartouche .val{color:var(--magenta);text-shadow:0 0 18px rgba(255,122,217,.25)}
.curieux .cartouche{border-color:rgba(255,122,217,.13)}
.curieux .cartouche:hover{border-color:rgba(255,122,217,.34)}

/* --- frigo ------------------------------------------------------------- */
.frigo-cadre{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px;align-items:start}
@media (max-width:900px){.frigo-cadre{grid-template-columns:1fr}}
.frigo-toile svg{display:block;width:100%;height:auto;max-height:calc(100vh - 190px);margin:0 auto}
.frigo-legende{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--r);
  padding:14px}
.frigo-legende h3{margin:0 0 6px;font:600 13px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase}
.frigo-legende .note{margin:0 0 12px;font:400 12.5px/1.5 var(--sans);color:var(--doux)}
ul.legende{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
ul.legende li{display:flex;align-items:center;gap:8px;font:400 12.5px/1 var(--mono);color:var(--doux)}
ul.legende .pip{width:9px;height:9px;border-radius:2px;flex:none}
.frigo-compteurs{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--trait);
  border:1px solid var(--trait);border-radius:8px;overflow:hidden}
.frigo-compteurs div{background:var(--fond-2);padding:9px 10px}
.frigo-compteurs b{display:block;font:700 19.5px/1.1 var(--mono);color:var(--cyan)}
.frigo-compteurs span{font:500 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--doux)}
.article-frigo{cursor:pointer}
.article-frigo .corps{transition:transform .18s ease,filter .18s ease}
.article-frigo:hover .corps{transform:translateY(-3px);filter:brightness(1.3)}
.article-frigo:focus{outline:none}
.article-frigo:focus-visible .corps{filter:brightness(1.5)}
.article-frigo.terne{opacity:.14;pointer-events:none}
.article-frigo.perime .contour,.article-frigo.critique .contour{
  animation:alerte 1.9s ease-in-out infinite}
@keyframes alerte{0%,100%{stroke-opacity:.55}50%{stroke-opacity:1}}
.article-frigo .corps{transform-origin:50% 100%}

/* --- stock ------------------------------------------------------------- */
.filtres{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.puces{display:flex;gap:6px;flex-wrap:wrap}
.puce{padding:5px 10px;border:1px solid var(--trait);border-radius:99px;background:none;
  cursor:pointer;font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--doux);transition:.15s}
.puce:hover{border-color:var(--trait-fort);color:var(--texte)}
.puce.on{background:rgba(47,240,200,.13);border-color:var(--trait-fort);color:var(--cyan)}
.puce b{font-weight:700;margin-left:5px;color:var(--texte)}
.tri{display:flex;align-items:center;gap:7px;margin-left:auto}
.tri label{font:500 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
select,.mini{background:var(--champ);color:var(--texte);border:1px solid var(--trait);
  border-radius:7px;padding:6px 9px;font:14px/1 var(--mono);cursor:pointer;outline:none}
select:focus,.mini:focus-visible{border-color:var(--trait-fort)}
.compte{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--doux)}

.grille-stock{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.article{
  position:relative;display:grid;grid-template-columns:58px 1fr;gap:11px;
  background:var(--panneau);border:1px solid var(--trait);border-left:2px solid var(--doux);
  border-radius:9px;padding:11px;cursor:pointer;text-align:left;color:inherit;
  transition:border-color .18s,transform .18s,background .18s;
}
.article:hover{transform:translateY(-2px);background:rgba(18,30,46,.8)}
.article.perime{border-left-color:var(--rouge)}
.article.critique{border-left-color:var(--rouge)}
.article.tendu{border-left-color:var(--ambre)}
.article.correct{border-left-color:var(--bleu)}
.article.large{border-left-color:var(--vert)}
.article.inconnu{border-left-color:var(--tres-doux)}
.article img{width:58px;height:58px;border-radius:6px;object-fit:contain;
  background:rgba(var(--relief),.05);flex:none}
.article .corps{min-width:0;display:flex;flex-direction:column;gap:3px}
.article .nom{font:600 15px/1.25 var(--sans);color:var(--vif);overflow:hidden;
  padding-right:26px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.article .meta{font:400 12px/1.4 var(--mono);color:var(--doux);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.article .bas{display:flex;align-items:center;gap:6px;margin-top:2px;flex-wrap:wrap}
.article .qte{position:absolute;top:9px;right:9px;min-width:22px;height:22px;padding:0 6px;
  display:grid;place-items:center;border-radius:6px;background:rgba(47,240,200,.14);
  color:var(--cyan);font:700 12.5px/1 var(--mono);border:1px solid rgba(47,240,200,.25)}
.echeance{font:600 11.5px/1 var(--mono);letter-spacing:.06em;padding:3px 6px;border-radius:4px;
  background:rgba(var(--relief),.05);color:var(--doux)}
.echeance.perime,.echeance.critique{background:rgba(255,77,94,.15);color:var(--rouge)}
.echeance.tendu{background:rgba(255,179,71,.15);color:var(--ambre)}
.echeance.correct{background:rgba(73,184,255,.13);color:var(--bleu)}
.echeance.large{background:rgba(63,224,138,.13);color:var(--vert)}
.note-score{width:17px;height:17px;display:grid;place-items:center;border-radius:4px;
  font:700 11.5px/1 var(--mono);color:#06130d;text-transform:uppercase}
.nova{padding:2px 5px;border-radius:4px;border:1px solid var(--trait);
  font:600 11px/1 var(--mono);color:var(--doux);letter-spacing:.08em}
.nova[data-n="4"]{border-color:rgba(255,77,94,.4);color:var(--rouge)}
.nova[data-n="3"]{border-color:rgba(255,179,71,.4);color:var(--ambre)}
.nova[data-n="1"],.nova[data-n="2"]{border-color:rgba(63,224,138,.4);color:var(--vert)}

.vide{grid-column:1/-1;padding:50px 0;text-align:center;font:400 14px/1.6 var(--mono);
  color:var(--doux)}

/* --- flux -------------------------------------------------------------- */
ol.journal,ul.urgents,ol.console{list-style:none;margin:0;padding:0;
  max-height:min(62vh,620px);overflow:auto}
.journal li{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px;align-items:center;
  padding:8px 4px;border-bottom:1px solid rgba(var(--relief),.045);font-size:14.5px}
.journal li:last-child{border-bottom:0}
.journal .ts{font:400 12px/1 var(--mono);color:var(--tres-doux);font-variant-numeric:tabular-nums}
.journal .delta{font:700 12.5px/1 var(--mono);padding:3px 6px;border-radius:4px;min-width:34px;
  text-align:center}
.journal .delta.plus{background:rgba(63,224,138,.14);color:var(--vert)}
.journal .delta.moins{background:rgba(255,122,217,.14);color:var(--magenta)}
.journal .delta.zero{background:rgba(var(--relief),.06);color:var(--doux)}
.journal .nom{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.journal .nom:hover{color:var(--cyan)}
.journal .origine{font:400 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--tres-doux)}
.urgents li{display:flex;align-items:center;gap:9px;padding:8px 4px;cursor:pointer;
  border-bottom:1px solid rgba(var(--relief),.045)}
.urgents li:hover .u-nom{color:var(--cyan)}
.urgents .u-nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14.5px}
.console li{font:400 12px/1.6 var(--mono);color:var(--doux);padding:2px 0;
  border-bottom:1px solid rgba(var(--relief),.035)}
.console .t{color:var(--tres-doux);margin-right:8px}
.console .ok{color:var(--cyan)}
.console .ko{color:var(--rouge)}

/* --- machine ----------------------------------------------------------- */
.schema{margin:0;font:400 12px/1.5 var(--mono);color:var(--doux);white-space:pre;
  overflow-x:auto}
dl.paires{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 14px;font:400 13px/1.4 var(--mono)}
dl.paires dt{color:var(--doux);letter-spacing:.06em}
dl.paires dd{margin:0;color:var(--texte);text-align:right;font-variant-numeric:tabular-nums;
  word-break:break-all}

/* --- tiroir article ---------------------------------------------------- */
.voile{position:fixed;inset:0;z-index:60;background:rgba(2,4,8,.7);backdrop-filter:blur(3px);
  animation:fondu .2s ease}
@keyframes fondu{from{opacity:0}to{opacity:1}}
.tiroir{
  position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(520px,100vw);
  background:linear-gradient(180deg,var(--fond-2),var(--fond));
  border-left:1px solid var(--trait-fort);
  overflow-y:auto;padding:20px 20px 70px;
  animation:glisse .26s cubic-bezier(.2,.9,.25,1);
  box-shadow:-30px 0 70px rgba(0,0,0,.6);
}
@keyframes glisse{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.fermer{position:fixed;top:14px;right:16px;width:30px;height:30px;border-radius:7px;
  background:rgba(6,12,22,.92);border:1px solid var(--trait);color:var(--texte);
  cursor:pointer;font-size:15px;line-height:1;z-index:62}
.fermer:hover{background:rgba(255,77,94,.18);border-color:rgba(255,77,94,.4);color:var(--rouge)}

.fiche-tete{display:grid;grid-template-columns:96px 1fr;gap:14px;margin-bottom:16px}
.fiche-tete img{width:96px;height:96px;border-radius:9px;object-fit:contain;
  background:rgba(var(--relief),.06);border:1px solid var(--trait)}
.fiche-tete h2{margin:0 0 4px;padding-right:34px;font:650 19.5px/1.25 var(--sans);color:var(--vif)}
.fiche-tete .marque-p{font:400 13px/1.4 var(--mono);color:var(--doux)}
.fiche-tete .code{font:400 12px/1.4 var(--mono);color:var(--tres-doux);letter-spacing:.1em}
.fiche-scores{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.gros-score{width:30px;height:30px;display:grid;place-items:center;border-radius:7px;
  font:700 16px/1 var(--mono);color:#06130d;text-transform:uppercase}
.bloc{margin:18px 0}
.bloc h4{margin:0 0 9px;font:600 11.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);display:flex;align-items:center;gap:8px}
.bloc h4::after{content:"";flex:1;height:1px;background:var(--trait)}
.tableau{width:100%;border-collapse:collapse;font:400 14px/1.4 var(--mono)}
.tableau th,.tableau td{padding:6px 0;border-bottom:1px solid rgba(var(--relief),.05);text-align:right}
.tableau th{text-align:left;font-weight:400;color:var(--doux)}
.tableau td{font-variant-numeric:tabular-nums;color:var(--texte)}
.tableau td.total{color:var(--cyan)}
.tableau thead th{color:var(--tres-doux);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.etiquettes{display:flex;gap:6px;flex-wrap:wrap}
.etiquette{padding:4px 8px;border-radius:99px;border:1px solid var(--trait);
  font:400 12px/1 var(--mono);color:var(--doux)}
.etiquette.chaud{border-color:rgba(255,77,94,.35);color:var(--rouge)}
.etiquette.bien{border-color:rgba(63,224,138,.35);color:var(--vert)}
.texte-long{font:400 14px/1.65 var(--sans);color:var(--doux);margin:0}
ul.lots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
ul.lots li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
  background:rgba(var(--relief),.035);border-left:2px solid var(--doux);font-size:14px}
ul.lots li.perime,ul.lots li.critique{border-left-color:var(--rouge)}
ul.lots li.tendu{border-left-color:var(--ambre)}
ul.lots li.correct{border-left-color:var(--bleu)}
ul.lots li.large{border-left-color:var(--vert)}
ul.lots .q{margin-left:auto;font:700 14px/1 var(--mono);color:var(--cyan)}
.jauge-n{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  font:400 12.5px/1 var(--mono);color:var(--doux);margin-bottom:7px}
.jauge-n .crans{display:flex;gap:3px}
.jauge-n .cran{width:100%;min-width:26px;height:5px;border-radius:2px;background:rgba(var(--relief),.08)}
.jauge-n .cran.on.low{background:var(--vert)}
.jauge-n .cran.on.moderate{background:var(--ambre)}
.jauge-n .cran.on.high{background:var(--rouge)}

/* --- bulle ------------------------------------------------------------- */
.bulle{position:fixed;z-index:70;pointer-events:none;padding:7px 10px;border-radius:7px;
  background:rgba(6,12,22,.97);border:1px solid var(--trait-fort);
  font:400 12.5px/1.45 var(--mono);color:var(--texte);max-width:240px;
  box-shadow:0 10px 30px rgba(0,0,0,.55)}
.bulle b{display:block;color:var(--vif);font-weight:600;margin-bottom:2px}
.bulle span{color:var(--doux)}

/* --- pied -------------------------------------------------------------- */
.pied{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
  padding:22px 16px 32px;border-top:1px solid var(--trait);margin-top:40px;
  font:400 12px/1.6 var(--mono);letter-spacing:.06em;color:var(--tres-doux)}
.pied a{color:var(--doux);text-decoration:none;border-bottom:1px solid var(--trait)}
.pied a:hover{color:var(--cyan)}
.pied .sep{opacity:.4}

/* --- surlignage de recherche ------------------------------------------ */
mark{background:rgba(47,240,200,.22);color:var(--vif);border-radius:2px;padding:0 1px}

/* --- mobile ------------------------------------------------------------ */
@media (max-width:780px){
  :root{--entete:52px}
  .entete{flex-wrap:wrap;height:auto;padding:9px 12px;gap:9px}
  .marque{order:1}
  .theme{order:2;margin-left:auto}
  .horloge{order:3;font-size:14.5px}
  .recherche{order:4;flex-basis:100%;max-width:none}
  .onglets{top:0;position:fixed;bottom:0;top:auto;left:0;right:0;height:54px;padding:0;
    border-top:1px solid var(--trait);border-bottom:0;justify-content:space-around}
  .onglet{flex:1;justify-content:center;padding:0 4px;font-size:11px;letter-spacing:.1em}
  .onglet.actif::after{left:18%;right:18%;top:0;bottom:auto}
  main{padding:16px 12px 86px}
  .tiroir{width:100vw;border-left:0;padding:16px 16px 80px}
  .fiche-tete{grid-template-columns:72px 1fr}
  .fiche-tete img{width:72px;height:72px}
  .titre-section{margin:26px 0 12px}
}
@media (max-width:420px){
  .bandeau{grid-template-columns:repeat(2,1fr)}
  .cartouches{grid-template-columns:repeat(2,1fr)}
  .grille-stock{grid-template-columns:1fr}
}

/* --- bascule de theme -------------------------------------------------- */
.theme{flex:none;width:32px;height:32px;display:grid;place-items:center;
  background:none;border:1px solid var(--trait);border-radius:9px;cursor:pointer;
  color:var(--doux);transition:color .15s,border-color .15s}
.theme:hover{color:var(--cyan);border-color:var(--trait-fort)}
.theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round}
/* Le soleil propose le clair, la lune propose le sombre : on montre l'autre
   theme, pas celui qui est deja applique. */
.theme .lune{display:none}
:root[data-theme="clair"] .theme .soleil{display:none}
:root[data-theme="clair"] .theme .lune{display:block}
@media (prefers-color-scheme:light){
  :root:not([data-theme="sombre"]) .theme .soleil{display:none}
  :root:not([data-theme="sombre"]) .theme .lune{display:block}
}

/* --- courses ----------------------------------------------------------- */
.ajout-course{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ajout-course input[type=text]{flex:1;min-width:220px}
.ajout-course input{height:36px;padding:0 12px;background:var(--champ);color:var(--texte);
  border:1px solid var(--trait);border-radius:9px;font:14px/1 var(--mono);outline:none}
.ajout-course input:focus{border-color:var(--trait-fort);background:var(--champ-actif)}
.ajout-course input[type=number]{width:74px;text-align:center}
.primaire{height:36px;padding:0 16px;border-radius:9px;cursor:pointer;
  border:1px solid var(--trait-fort);background:var(--champ-actif);color:var(--cyan);
  font:700 12.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.primaire:hover{background:var(--cyan);color:var(--fond);border-color:var(--cyan)}

.relais{color:var(--rouge);margin:0 0 12px}

.grille-courses{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.courses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.course{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;
  border:1px solid transparent;transition:background .12s,border-color .12s}
.course:hover{background:rgba(var(--relief),.045);border-color:var(--trait)}
.course.prise{opacity:.55}
.course.prise .course-texte b{text-decoration:line-through}

.coche{flex:none;width:22px;height:22px;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--trait-fort);background:none;color:var(--cyan);
  font:700 13px/1 var(--mono);display:grid;place-items:center}
.coche:hover{background:var(--champ-actif)}
.course.prise .coche{background:var(--cyan);color:var(--fond);border-color:var(--cyan)}

.course-photo{flex:none;width:34px;height:34px;border-radius:7px;object-fit:cover;
  background:var(--panneau-plein);border:1px solid var(--trait)}
/* `creuse`, et non `vide` : cette derniere est deja la classe des listes
   sans contenu, avec ses 50 px de rembourrage -- le cadre photo en
   heritait et montait a 102 px de haut. */
.course-photo.creuse{display:block}

.course-texte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.course-texte b{font:600 15px/1.25 var(--sans);color:var(--texte);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.course-texte small{font:400 12px/1 var(--mono);color:var(--doux)}
.course-qte{flex:none;font:700 14px/1 var(--mono);color:var(--cyan);
  font-variant-numeric:tabular-nums}

.retirer{flex:none;width:24px;height:24px;border:0;background:none;cursor:pointer;
  color:var(--tres-doux);font:400 14px/1 var(--mono);border-radius:6px;opacity:0;
  transition:opacity .12s,color .12s}
.course:hover .retirer,.retirer:focus-visible{opacity:1}
.retirer:hover{color:var(--rouge);background:rgba(255,77,94,.1)}

.suggestions{gap:8px}
.suggestions .puce{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.suggestions .puce i{width:8px;height:8px;border-radius:50%;flex:none}
.suggestions .puce small{color:var(--tres-doux);font:400 11px/1 var(--mono)}
.suggestions .puce:hover{background:var(--champ-actif)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

::selection{background:var(--cyan);color:var(--fond)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--trait-fort);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:4px}