/* =========================================================================
   GESTION DÉPÔT — module mobile
   =========================================================================

   Les valeurs de couleur sont celles de la maquette validée. Elles ne sont
   pas « inspirées de » : ce sont les mêmes, pour que ce qui a été arbitré à
   l'écran soit ce qui arrive sur le téléphone.

   L'écran du téléphone est CLAIR et ne bascule pas avec le thème du système.
   C'est un choix : les couleurs d'état — rouge, ambre, vert — ont été
   calibrées sur fond clair, et un thème sombre les rendrait toutes trois
   moins distinctes au moment précis où la distinction compte.
   ========================================================================= */

:root {
  /* Marque */
  --vert:        #1B5E3B;
  --vert-sombre: #164C30;
  --or:          #C9A84C;
  --or-vif:      #E8C96A;
  --or-texte:    #8A6A1B;   /* l'or de marque donne 2,29:1 sur blanc : illisible */
  --creme:       #F5F0E8;

  /* Surfaces */
  --fond:        #F5F7F8;
  --carte:       #FFFFFF;
  --filet:       #E3E9ED;
  --texte:       #16202A;
  --gris:        #5F6E7A;
  /* #8A97A2 donnait 2,99:1 sur blanc, et servait de texte courant à des
     endroits qui portent une datation ou une valeur. Celui-ci tient 4,75:1. */
  --gris-pale:   #67757F;

  /* États de stock. Sémantiques, jamais décoratives. */
  --critique:    #B03A2E;
  --tension:     #A06A12;
  --calme:       #2E7D32;

  --display: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Encoches et barre d'accueil iOS. Sans ces réserves, la barre du haut
     passe sous l'encoche et la barre d'onglets sous le trait d'accueil. */
  --haut: env(safe-area-inset-top, 0px);
  --bas:  env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;   /* pas de rebond qui recharge la page */
}

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* L'anneau de focus était peint avec l'or de la marque, dont ce fichier a
   déjà calculé qu'il est illisible : 2,13:1 sur le fond. Ici : encre sur les
   surfaces claires, blanc sur la coque verte — 3:1 dans les deux cas. */
:focus-visible { outline: 3px solid var(--texte); outline-offset: 2px; }
.appbar :focus-visible,
.badge-tete :focus-visible,
#ecran-connexion :focus-visible { outline-color: #FFFFFF; }

.masque { display: none !important; }

/* La CSP du site est `default-src 'self'` sans `unsafe-inline` : un attribut
   `style=` ecrit dans le balisage est BLOQUE par le navigateur. Tout ce qui
   aurait ete pose en ligne vit donc ici — ou est applique par script, ce que
   la CSP autorise (elle ne couvre pas le CSSOM). */
.defs { position: absolute; }

/* ---------------------------------------------------------------- chrome */

.appbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--vert); color: #fff;
  padding: calc(10px + var(--haut)) 14px 11px;
}
.appbar .rang { display: flex; align-items: center; gap: 10px; }
.marque {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: linear-gradient(135deg, #0E1F16, #1A1A2D);
  display: grid; place-items: center;
}
.marque svg { width: 16px; height: 22px; display: block; }
.appbar h1 { font-family: var(--display); font-size: 18px; font-weight: 700; margin: 0; flex: 1; }

.appbar .age {
  font-size: 11.5px; color: #C9DED2; margin-top: 3px;
  display: flex; align-items: center; gap: 6px;
}
.pastille { width: 7px; height: 7px; border-radius: 50%; background: var(--or-vif); flex: none; }
.pastille.rouge { background: #F0A9A0; }

/* Le nom se tronque plutôt que de pousser le bouton hors de l'écran : sur un
   téléphone de 320 px, « Edouma Gilles Sorel MAWANDZA » ne tient pas, et c'est
   le bouton de déconnexion qui disparaîtrait le premier. */
.appbar .qui {
  font-size: 12px; color: #C9DED2; font-weight: 600;
  max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: none;
}

.deconnexion {
  color: #C9DED2; font-size: 12px;
  min-height: 44px; min-width: 44px; padding: 0 2px;
  display: flex; align-items: center; justify-content: flex-end;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--carte); border-top: 1px solid var(--filet);
  padding-bottom: var(--bas);
}
.tabbar button {
  padding: 8px 4px; font-size: 10.5px; color: var(--gris);
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  position: relative;
}
.tabbar button .ic { font-size: 16px; line-height: 1; }
.tabbar button[aria-current="page"] {
  color: var(--vert); font-weight: 700; box-shadow: inset 0 2px 0 var(--vert);
}
.tabbar .compteur {
  position: absolute; top: 5px; left: 50%; transform: translateX(4px);
  background: var(--critique); color: #fff; font-size: 9.5px; font-weight: 700;
  min-width: 15px; height: 15px; border-radius: 8px; padding: 0 4px;
  display: grid; place-items: center;
}

/* La réserve du bas est calée sur la hauteur RÉELLE de la barre d'onglets
   (52 px + ses marges), plus la barre d'accueil iOS. Une valeur au jugé
   laisserait la dernière carte sous la barre, là où on ne peut pas la lire. */
main { padding: 11px 11px calc(64px + var(--bas)); }

/* ------------------------------------------------------- tirer / bandeaux */

.tirer {
  text-align: center; font-size: 10.5px; color: var(--gris-pale);
  height: 0; overflow: hidden; transition: height .18s ease;
}
.tirer.ouvert { height: 22px; }

.bandeau {
  display: flex; align-items: center; gap: 9px;
  border-radius: 9px; padding: 9px 11px; margin-bottom: 10px;
  font-size: 12.5px; line-height: 1.4;
}
.bandeau b { font-weight: 700; }
.bandeau button {
  font-size: 12.5px; font-weight: 700; text-decoration: underline; flex: none;
  /* Ce bouton est la seule sortie d'un écran en panne : il ne peut pas être
     le plus petit de l'application. */
  min-height: 44px; padding: 0 6px;
}
.bandeau.info    { background: #EAF2ED; border: 1px solid #C6DCCE; color: #1F4632; }
.bandeau.alerte  { background: #FBF0DC; border: 1px solid #E8D3A2; color: #6B4E12; }
.bandeau.rupture { background: #FAE9E7; border: 1px solid #E9C2BC; color: #7A281E; }

/* L'invitation a installer. Discrete : elle ne parle pas de stock, et elle
   ne doit pas prendre le pas sur ce qui en parle. */
.bandeau.install { background: #F1EEE4; border: 1px solid #DED6C2; color: #4A4230; align-items: flex-start; }
.bandeau.install b { color: #2E2919; }
.bandeau.install button[data-action="installer"] {
  color: #fff; background: var(--vert); border-radius: 20px;
  text-decoration: none; padding: 0 14px; min-height: 44px; white-space: nowrap;
}
.bandeau.install .ecarter {
  color: #8A8067; font-size: 18px; text-decoration: none;
  min-height: 44px; min-width: 32px; padding: 0; line-height: 1;
}

/* ------------------------------------------------------------- états vides */

/* ATTENTION : `.vide` est le BLOC d'état vide, avec bordure et remplissage.
   Le marqueur « pas de valeur » d'une décomposition s'appelle `.rien` — les
   confondre transforme un tiret en rectangle de 49 sur 69 pixels. */
.vide {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 11px; padding: 26px 18px; text-align: center;
}
.vide .ic { font-size: 26px; color: var(--gris-pale); line-height: 1; }
.vide .t { font-family: var(--display); font-weight: 700; font-size: 15px; margin-top: 9px; }
.vide .m { font-size: 12.5px; color: var(--gris); margin-top: 6px; line-height: 1.45; }
.vide button {
  margin-top: 14px; font-size: 13px; font-weight: 700; color: #fff;
  background: var(--vert); border-radius: 22px; padding: 0 20px;
  min-height: 44px;
}

/* --------------------------------------------------------- carte de dépôt */

.badge-depot {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 12px; overflow: hidden; margin-bottom: 11px;
}
.badge-tete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; background: var(--vert); color: #fff;
}
.badge-tete .nom { font-family: var(--display); font-weight: 700; font-size: 14px; }
.badge-tete .seuil { font-size: 10px; color: #C9DED2; }

.ligne {
  padding: 9px 12px; border-top: 1px solid var(--filet);
  display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; align-items: baseline;
  border-left: 4px solid transparent;
}
.ligne.calme      { border-left-color: var(--calme); }
.ligne.tension    { border-left-color: var(--tension); }
.ligne.impossible { border-left-color: var(--critique); background: #FCF3F1; }
.ligne.indetermine{ border-left-color: var(--gris-pale); background: #F7F9FA; }

.prod { font-weight: 700; font-size: 13.5px; }
.jours { font-family: var(--display); font-weight: 700; font-size: 25px; line-height: 1; text-align: right; }
.jours .u { font-size: 12px; font-weight: 500; color: var(--gris); margin-left: 2px; }
.calme .jours      { color: var(--calme); }
.tension .jours    { color: var(--tension); }
.impossible .jours { color: var(--critique); font-size: 17px; }
.indetermine .jours{ color: var(--gris-pale); font-size: 17px; }

.dispo { grid-column: 1/-1; font-size: 12.5px; color: var(--gris); margin-top: 1px; }
.dispo b { color: var(--texte); font-weight: 700; font-size: 13.5px; }
.dispo b.neg { color: var(--critique); }

.decomp {
  grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 2px 11px;
  font-size: 11.5px; color: var(--gris); margin-top: 3px;
}
.decomp b { color: var(--texte); font-weight: 700; }
.decomp b.neg { color: var(--critique); }
.decomp b.rien { color: var(--gris-pale); font-weight: 400; }

/* La seconde ligne : autonomie sur le stock national (Pointe-Noire) et
   autonomie projetée. Elle se distingue de la première par un léger retrait,
   parce qu'elle porte des jours et non des mètres cubes. */
.decomp.seconde {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px dashed var(--filet);
  font-size: 11.5px;
}

.mentions {
  grid-column: 1/-1; margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--filet);
  font-size: 11px; color: var(--gris); line-height: 1.45;
}
.mentions li { margin: 0 0 2px; list-style: none; }
.mentions ul { margin: 0; padding: 0; }

/* ------------------------------------------------------------- les sorties */

.datenav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 9px; padding: 7px 6px; margin-bottom: 10px;
  font-size: 13px; font-weight: 600;
}
.datenav button {
  /* 44 px : le plancher d'une cible tactile. Ces deux chevrons sont le SEUL
     chemin vers un autre jour ; à 25 px de haut ils se ratent une fois sur
     trois, et l'écran ne bouge pas sans qu'on sache pourquoi. */
  min-width: 44px; min-height: 44px;
  display: grid; place-items: center;
  font-size: 19px; color: var(--vert); line-height: 1;
}
.datenav button[disabled] { color: var(--gris-pale); cursor: default; }

.fraicheur {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 10px;
}
.fraicheur .h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; margin-bottom: 6px;
}
.fraicheur .h .part { font-weight: 700; }
.fraicheur .h .quand { color: var(--gris); }
.fraicheur .barre { height: 7px; border-radius: 4px; background: var(--filet); overflow: hidden; }
.fraicheur .barre i { display: block; height: 100%; background: var(--vert); }
.fraicheur .note { font-size: 10.5px; color: var(--gris); margin-top: 6px; }

.badge-prod {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 11px; padding: 10px 12px; margin-bottom: 9px;
}
.bp-tete { display: flex; justify-content: space-between; align-items: baseline; }
.bp-nom { font-family: var(--display); font-weight: 700; font-size: 13.5px; }
.bp-camions { font-size: 11.5px; color: var(--gris); }
.bp-lignes {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 10px;
  font-size: 12px; margin-top: 6px;
}
.bp-lignes .k { color: var(--gris); }
.bp-lignes .v { text-align: right; font-weight: 600; }
.bp-total {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--filet);
}
.bp-total .lab { font-size: 10.5px; color: var(--gris); }
.bp-total .val { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.1; }
/* Le plus gros chiffre de l'écran était le seul sans unité, sur une
   application dont l'autre onglet chiffre les mêmes produits en m³. */
.bp-total .val .u { font-size: 12px; font-weight: 500; color: var(--gris); }
.bp-total .veille { text-align: right; font-size: 10.5px; color: var(--gris-pale); line-height: 1.4; }
.bp-total .veille .d { color: var(--gris); font-weight: 600; }
.bp-total .veille .bas { color: var(--critique); font-weight: 700; }
.bp-total .veille .haut { color: var(--calme); font-weight: 700; }
.bp-total .veille .egal { color: var(--gris-pale); font-weight: 700; }

.aucun-chargement {
  background: var(--carte); border: 1px solid var(--filet); border-radius: 10px;
  padding: 13px 12px; margin-bottom: 9px;
  font-size: 12.5px; color: var(--gris); text-align: center;
}

.bloc-tete {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gris); margin: 16px 0 7px 2px;
}
.mkt {
  background: var(--carte); border: 1px solid var(--filet);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 7px;
}
.mkt .h { display: flex; justify-content: space-between; align-items: baseline; }
.mkt .n { font-weight: 700; font-size: 13px; }
.mkt .c { font-size: 11px; color: var(--gris); }
.mkt .p {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  font-size: 12px; color: var(--gris); margin-top: 4px;
}
.mkt .p b { color: var(--texte); font-weight: 700; }

/* ------------------------------------------------------------- les alertes */

.alerte {
  background: var(--carte); border: 1px solid var(--filet);
  border-left: 4px solid var(--gris-pale);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 9px;
}
.alerte.tension    { border-left-color: var(--tension); }
.alerte.impossible { border-left-color: var(--critique); }
.alerte .t { font-family: var(--display); font-weight: 700; font-size: 13.5px; }
.alerte .m { font-size: 12.5px; color: #3B4A55; margin-top: 2px; line-height: 1.45; }
.alerte .d { font-size: 11px; color: var(--gris-pale); margin-top: 5px; }

/* ------------------------------------------------------------- la connexion */

/* Le meme decor que la connexion, deliberement : changer son mot de passe est
   la suite immediate de la connexion, pas un ailleurs. */
#ecran-connexion,
#ecran-motdepasse {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: calc(28px + var(--haut)) 22px calc(28px + var(--bas));
  background:
    radial-gradient(120% 85% at 50% 0%, rgba(46,138,87,.30) 0%, rgba(46,138,87,0) 62%),
    linear-gradient(150deg, #0E1F16 0%, #12261C 45%, #1A1A2D 100%);
}
#ecran-connexion,
#ecran-motdepasse .marque-haute { display: flex; flex-direction: column; align-items: center; gap: 13px; }
#ecran-connexion,
#ecran-motdepasse .marque-haute svg { width: 46px; height: 69px; display: block; }
#ecran-connexion,
#ecran-motdepasse .marque-haute .nom {
  font-size: 11.5px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase;
  color: var(--or-vif); padding-left: .42em;   /* recentre : l'approche suit la dernière lettre */
}

.carte-connexion {
  background: var(--creme); border-radius: 14px; padding: 26px 22px 20px;
  width: 100%; max-width: 380px; box-shadow: 0 18px 44px rgba(0,0,0,.38);
}
.carte-connexion h2 {
  font-family: var(--display); font-size: 17px; font-weight: 700;
  color: var(--vert); text-align: center; margin: 0;
}
.carte-connexion .st { font-size: 12.5px; color: #5A6B60; text-align: center; margin: 4px 0 0; }
.carte-connexion .filet { width: 32px; height: 2px; background: var(--or); border-radius: 2px; margin: 13px auto 18px; }

.champ { margin-bottom: 13px; }
.champ label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #4A5A50; margin-bottom: 5px;
}
.champ input {
  width: 100%; background: #fff; border: 1px solid #D2DAD0; border-radius: 8px;
  padding: 11px 12px; font: inherit; font-size: 16px;  /* 16px : en dessous, iOS zoome */
  color: var(--texte);
}
.champ input:focus { outline: none; border-color: var(--or); box-shadow: 0 0 0 3px rgba(201,168,76,.28); }

.bouton-vert {
  width: 100%; background: var(--vert); color: #fff; border-radius: 8px;
  padding: 12px; font-weight: 700; font-size: 15px; margin-top: 4px;
}
.bouton-vert:disabled { background: #6D9682; cursor: default; }

.erreur-connexion {
  background: #F8D7DA; border: 1px solid #E9C2BC; color: #721C24;
  border-radius: 8px; padding: 9px 11px; font-size: 12.5px; margin-bottom: 13px;
}

.pied-connexion { font-size: 11px; color: #9FB3A6; text-align: center; }

/* L'enonce de la regle, sous le champ : il doit se lire AVANT la saisie, pas
   apres le refus. */
.champ .regle { font-size: 11px; color: #5A6B60; margin: 6px 0 0; line-height: 1.4; }

/* La seule sortie de l'ecran de changement, et elle ne mene pas a
   l'application : on ne passe pas cette etape, on la quitte. */
.lien-sortie {
  display: inline-block; margin-left: 6px;
  color: #C9DED2; font-size: 11px; text-decoration: underline;
  min-height: 44px; padding: 0 6px;
}

/* ------------------------------------------------------------------ divers */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}