/*
 * ESAFOR Magasin — feuille de style unique, mobile d'abord.
 * Aucune dépendance externe. Cibles : Android d'entrée de gamme, 3G lente.
 */

:root {
  color-scheme: light;
  --fond: #f4f6f7;
  --surface: #ffffff;
  --surface-2: #eceff1;
  --encre: #1f2b34;
  --discret: #5a6b77;
  --ligne: #d8dee3;
  --accent: #d55307;      /* orange sécurité ESAFOR */
  --accent-texte: #ffffff;
  --ok: #2c7a4b;
  --alerte: #b3372e;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}
.mono { font-family: ui-monospace, "Courier New", monospace; }

/* --- En-tête ---------------------------------------------------------- */
.entete {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  background: var(--encre); color: #fff;
  padding: .6rem .9rem;
  position: sticky; top: 0; z-index: 10;
}
.marque { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; }
.marque span { color: var(--accent); }
.nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.nav a, .nav-user {
  color: #dfe5e9; text-decoration: none; padding: .45rem .6rem;
  border-radius: 6px; font-size: .95rem;
}
.nav a:active, .nav a:hover { background: rgba(255, 255, 255, .12); }
.form-deconnexion { display: inline; margin: 0; }
.nav-user { background: none; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; }

/* --- Contenu ---------------------------------------------------------- */
.contenu { max-width: 900px; margin: 0 auto; padding: 1rem .9rem 4rem; }
h1 { font-size: 1.45rem; margin: .4rem 0; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
.sous-titre { color: var(--discret); margin: 0 0 1rem; }
.aide { color: var(--discret); font-size: .88rem; }
.vide { color: var(--discret); padding: 1.5rem 0; text-align: center; }

.messages { max-width: 900px; margin: .6rem auto 0; padding: 0 .9rem; }
.message { padding: .6rem .9rem; border-radius: 8px; margin: .3rem 0; background: var(--surface-2); }
.message.success { background: #e2f2e8; color: var(--ok); }
.message.error { background: #f9e5e3; color: var(--alerte); }

/* --- Boutons ---------------------------------------------------------- */
.bouton, .bouton-principal {
  display: inline-block; padding: .55rem .9rem; border-radius: 8px;
  border: 1px solid var(--ligne); background: var(--surface);
  color: var(--encre); text-decoration: none; font-size: .95rem;
  cursor: pointer; min-height: 44px; line-height: 1.6;
}
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); font-weight: 700; }
.bouton-petit { padding: .3rem .55rem; min-height: 0; }
.barre-titre { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; justify-content: space-between; }
.actions-titre { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Accueil : grille de gros boutons tactiles */
.salutation { margin-bottom: 0; }
.grille-boutons { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin: 1.2rem 0; }
@media (min-width: 640px) { .grille-boutons { grid-template-columns: repeat(3, 1fr); } }
.gros-bouton {
  display: block; text-align: center; padding: 1.1rem .5rem 1rem;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px;
  color: var(--encre); text-decoration: none; font-weight: 600; line-height: 1.3;
}
.gros-bouton .picto { display: block; font-size: 1.8rem; margin-bottom: .3rem; }
.gros-bouton:active { background: var(--surface-2); }
.gros-bouton.inactif { opacity: .45; }
.stats-accueil { color: var(--discret); }
.bandeau-transit {
  display: block; padding: .7rem .9rem; border-radius: 10px;
  background: #fdf1e0; color: #a86a00; font-weight: 600;
  text-decoration: none; border: 1px solid #f0d9b0; margin: .8rem 0;
}
.bandeau-alerte {
  display: block; padding: .7rem .9rem; border-radius: 10px;
  background: #f9e5e3; color: var(--alerte); font-weight: 600;
  text-decoration: none; border: 1px solid #eec5c1; margin: .8rem 0;
}
.galerie-photos { display: flex; flex-wrap: wrap; gap: .6rem; }
.galerie-photos img {
  width: 140px; height: 140px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--ligne);
}

/* --- Recherche et listes ---------------------------------------------- */
.barre-recherche { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.barre-recherche input[type="search"] { flex: 1 1 220px; }
input, select, textarea {
  font: inherit; padding: .55rem .7rem; border: 1px solid var(--ligne);
  border-radius: 8px; background: var(--surface); color: var(--encre);
  min-height: 44px; max-width: 100%;
}
input:focus, select:focus, textarea:focus, .bouton:focus {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

.liste-articles { display: flex; flex-direction: column; gap: .45rem; }
.ligne-article {
  display: grid; grid-template-columns: auto 1fr; gap: 0 .8rem;
  background: var(--surface); border: 1px solid var(--ligne); border-radius: 10px;
  padding: .6rem .8rem; text-decoration: none; color: var(--encre);
}
.ligne-article .ref { font-weight: 700; }
.ligne-article .designation { grid-column: 1 / -1; }
.ligne-article .meta { grid-column: 1 / -1; color: var(--discret); font-size: .85rem; }
.ligne-cochable { grid-template-columns: auto auto 1fr; align-items: center; cursor: pointer; }
.ligne-cochable input { min-height: 0; width: 1.3rem; height: 1.3rem; }
.ligne-cochable .designation { grid-column: auto; }

.pagination { display: flex; align-items: center; gap: 1rem; justify-content: center; margin: 1.2rem 0; }

/* --- Tableaux ---------------------------------------------------------- */
.tableau-defilant { overflow-x: auto; }
.tableau { border-collapse: collapse; width: 100%; background: var(--surface); border-radius: 10px; }
.tableau th, .tableau td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--ligne); white-space: nowrap; }
.tableau th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--discret); }
.tableau .num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau tr.alerte td { color: var(--alerte); font-weight: 600; }
.tableau tr.total td { font-weight: 700; border-bottom: 0; }

/* --- Formulaires ------------------------------------------------------- */
.formulaire { max-width: 520px; }
.champ { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .9rem; }
.champ label { font-weight: 600; font-size: .93rem; }
.champ.en-erreur input, .champ.en-erreur select { border-color: var(--alerte); }
.errorlist { color: var(--alerte); margin: .2rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.actions-form { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.actions-collantes { position: sticky; top: 3.4rem; background: var(--fond); padding: .5rem 0; z-index: 5; margin-top: 0; }

/* --- Fiche article ----------------------------------------------------- */
.fiche { display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start; }
.photo-article { max-width: 180px; border-radius: 10px; border: 1px solid var(--ligne); }
.details { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0; }
.details dt { color: var(--discret); font-size: .9rem; }
.details dd { margin: 0; }

/* --- Connexion --------------------------------------------------------- */
.carte { background: var(--surface); border: 1px solid var(--ligne); border-radius: 12px; padding: 1.4rem; }
.carte-connexion { max-width: 380px; margin: 8vh auto 0; display: flex; flex-direction: column; }
.carte-connexion form { display: flex; flex-direction: column; gap: .45rem; }
.carte-connexion label { font-weight: 600; margin-top: .5rem; }

/* --- Saisie des mouvements --------------------------------------------- */
.formulaire-large { max-width: 680px; }
.lignes-saisie { display: flex; flex-direction: column; gap: .55rem; }
.ligne-saisie {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding-bottom: .55rem; border-bottom: 1px dashed var(--ligne);
}
/* Chaque case porte son libellé en permanence, au-dessus */
.ss-champ { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ss-champ > span {
  font-size: .72rem; font-weight: 700; color: var(--discret);
  text-transform: uppercase; letter-spacing: .04em;
}
.ss-article { flex: 1 1 150px; }
.ss-champ:not(.ss-article) { flex: 1 1 110px; max-width: 200px; }
.ss-champ > span { white-space: nowrap; }
.ss-champ input { width: 100%; }
.ligne-saisie.en-erreur input { border-color: var(--alerte); }
.texte-alerte { color: var(--alerte); }
.texte-transit { color: #a86a00; }
.bouton-danger { border-color: var(--alerte); color: var(--alerte); }

.sous-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin: .8rem 0; }
.sous-nav a {
  padding: .35rem .7rem; border-radius: 999px; text-decoration: none;
  color: var(--encre); background: var(--surface-2); font-size: .9rem;
}

/* Commentaire libre d'un article (fiche article) */
.carte-commentaire { margin: 1rem 0; }
.carte-commentaire p { margin: .35rem 0 0; white-space: pre-line; }

/* Import Excel : étapes numérotées */
.etapes-import { padding-left: 1.3rem; }
.etapes-import li { margin: .4rem 0; }

/* Photo d'article : bouton de prise de vue et bloc d'affichage */
.form-photo { display: inline; margin: 0; }
#bouton-photo { cursor: pointer; }
.bloc-photo { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.bloc-photo form { margin: 0; }