/* Volt -- feuille de style unique, aucune dependance. */
:root{
  --fond:#0f1115; --carte:#171a21; --bord:#242833; --texte:#e8eaf0;
  --doux:#98a0b3; --vif:#5ac8fa; --ok:#3ddc97; --alerte:#ff6b6b; --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--fond);color:var(--texte);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* Le 17.08.2026, l'ecran de connexion restait visible SOUS l'application :
   l'attribut hidden est ignore sur un element en display:flex ou grid.
   Cette ligne est la parade, et elle ne se retire pas. */
[hidden]{display:none !important}

.enveloppe{max-width:620px;margin:0 auto;padding:16px 16px 96px}
h1{font-size:1.4rem;margin:8px 0 4px;letter-spacing:.5px}
h2{font-size:1.05rem;margin:20px 0 8px;color:var(--doux);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:var(--r);
  padding:14px;margin:10px 0}
label{display:block;font-size:.82rem;color:var(--doux);margin:10px 0 4px}
input,select,button{font:inherit}
input,select{width:100%;padding:11px 12px;background:#0d0f14;color:var(--texte);
  border:1px solid var(--bord);border-radius:10px}
input:focus,select:focus{outline:2px solid var(--vif);outline-offset:0}
button{padding:11px 16px;background:var(--vif);color:#06131a;border:0;border-radius:10px;
  font-weight:700;cursor:pointer}
button.fantome{background:transparent;color:var(--doux);border:1px solid var(--bord)}
button.danger{background:transparent;color:var(--alerte);border:1px solid var(--bord);padding:6px 10px}
.rang{display:flex;gap:10px;align-items:flex-end}
.rang>*{flex:1}
.rang.serre{gap:6px}

.compteur{display:flex;align-items:baseline;gap:10px}
.compteur .gros{font-size:2.6rem;font-weight:800;letter-spacing:-1px}
.compteur .unite{color:var(--doux)}
.jauge{height:10px;background:#0d0f14;border:1px solid var(--bord);border-radius:99px;
  overflow:hidden;margin:10px 0 4px}
.jauge>i{display:block;height:100%;background:var(--ok);width:0}
.jauge>i.trop{background:var(--alerte)}
.macros{display:flex;gap:14px;color:var(--doux);font-size:.85rem;flex-wrap:wrap}

ul.liste{list-style:none;margin:0;padding:0}
ul.liste li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--bord)}
ul.liste li:first-child{border-top:0}
ul.liste .nom{flex:1;min-width:0}
ul.liste .nom b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.liste .nom small{color:var(--doux)}
.kcal{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.repas{margin-top:14px}
.repas>h3{font-size:.8rem;color:var(--doux);text-transform:uppercase;letter-spacing:.08em;margin:0 0 2px}

/* Le graphique : chaque barre a une hauteur en pourcentage, donc le conteneur
   DOIT avoir une hauteur explicite. Sans elle, tout s'ecrase a zero -- defaut
   constate le 17.08.2026. */
.graphe{display:flex;align-items:flex-end;gap:4px;height:130px;margin-top:6px}
.graphe>div{flex:1;background:var(--vif);border-radius:4px 4px 0 0;min-height:2px;position:relative}
.graphe>div.sous{background:#2b6f8c}
.graphe>div>span{position:absolute;bottom:-18px;left:0;right:0;text-align:center;
  font-size:.62rem;color:var(--doux)}

nav.onglets{position:fixed;bottom:0;left:0;right:0;display:flex;background:#12141a;
  border-top:1px solid var(--bord)}
nav.onglets button{flex:1;background:transparent;color:var(--doux);border:0;border-radius:0;
  padding:14px 4px;font-size:.78rem;font-weight:600}
nav.onglets button[aria-current="page"]{color:var(--vif);box-shadow:inset 0 2px 0 var(--vif)}

.mot{padding:10px 12px;border-radius:10px;margin:10px 0;font-size:.9rem;display:none}
.mot.vu{display:block}
.mot.erreur{background:#2a1618;color:#ffb3b3;border:1px solid #4a2226}
.mot.bien{background:#132a22;color:#9df0cd;border:1px solid #1f4a3b}
.vide{color:var(--doux);font-size:.9rem;padding:8px 0}