/* Charte reprise des bons de commande existants : même rouge, mêmes lignes de
   tableau rosées, même typographie. L'application ressemble ainsi aux
   documents qu'elle produit. */

:root {
  --rouge: #FF0000;
  --rouge-fonce: #C10000;
  --rose: #FCE8E8;
  --rose-fort: #FBDADA;
  --gris-clair: #F2F2F2;
  --gris-bloc: #EEEEEE;
  --bordure: #D8D8D8;
  --texte: #1A1A1A;
  --texte-doux: #5A5A5A;
  --vert: #15803D;
  --vert-clair: #E8F5EC;
  --ambre: #92400E;
  --ambre-clair: #FEF3E2;
  --noir: #1A1A1A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--gris-clair);
  color: var(--texte);
  font-size: 15px;
}

a { color: var(--rouge-fonce); text-decoration: none; }
a:hover { color: #8A0000; text-decoration: underline; }

/* --- Bandeau --------------------------------------------------------------- */
/* Hauteur minimale et non fixe, et un menu qui accepte de passer à la ligne :
   les postes groupe portent huit entrées de menu, ce qui déborde d'un écran
   d'ordinateur portable. Un menu qui déborde recouvre le nom de la personne au
   lieu de se replier. Quand tout tient sur une ligne, le rendu est inchangé. */
.bandeau {
  background: var(--rouge);
  color: #fff;
  min-height: 64px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}
.bandeau.groupe { background: var(--noir); }
.bandeau-gauche { display: flex; align-items: center; gap: 12px 30px; flex-wrap: wrap; }
.bandeau-titre { font-size: 19px; font-weight: bold; letter-spacing: -0.3px; }
.bandeau-titre .portee { color: #FF9A9A; font-weight: normal; }
.bandeau.groupe .bandeau-titre .portee { color: #FF5A5A; }
.menu { display: flex; gap: 8px 22px; font-size: 15px; flex-wrap: wrap; }
.menu a { color: #fff; padding-bottom: 4px; opacity: .85; text-decoration: none; }
.menu a:hover { opacity: 1; text-decoration: none; color: #fff; }
.menu a.actif { font-weight: bold; opacity: 1; border-bottom: 3px solid #fff; }
.bandeau.groupe .menu a.actif { border-bottom-color: var(--rouge); }
.identite { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.identite .nom { font-size: 14px; font-weight: bold; }
.identite .fonction { font-size: 12px; opacity: .9; }
.pastille {
  background: #fff; color: var(--rouge);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold;
}
.bandeau.groupe .pastille { background: var(--rouge); color: #fff; }

/* --- Structure ------------------------------------------------------------- */
.page { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.titre-page { font-size: 25px; font-weight: bold; margin: 0; }
.sous-titre { font-size: 15px; color: var(--texte-doux); margin: 7px 0 0; }
.ligne-titre { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }

.carte { background: #fff; border: 1px solid var(--bordure); }
.carte-corps { padding: 20px 22px; }
.carte-entete {
  padding: 15px 20px; border-bottom: 1px solid #ECECEC;
  display: flex; align-items: center; justify-content: space-between;
}
.carte-entete h2 { font-size: 16px; font-weight: bold; margin: 0; }

.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.chiffre { background: #fff; border: 1px solid var(--bordure); padding: 17px 19px; }
.chiffre.sombre { background: var(--noir); color: #fff; border-color: var(--noir); }
.chiffre .etiquette {
  font-size: 12px; color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .6px;
}
.chiffre.sombre .etiquette { color: rgba(255,255,255,.8); }
.chiffre .valeur { font-size: 29px; font-weight: bold; margin-top: 7px; }
.chiffre .valeur.alerte { color: var(--rouge-fonce); }
.chiffre .precision { font-size: 12px; color: #7A7A7A; margin-top: 3px; }
.chiffre.sombre .precision { color: rgba(255,255,255,.8); }

/* --- Tableaux -------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  background: var(--rouge); color: #fff;
  font-size: 12px; font-weight: bold; text-align: left;
  padding: 12px 14px;
}
.groupe thead th { background: var(--noir); }
tbody td { padding: 12px 14px; font-size: 13px; border-top: 1px solid #ECECEC; }
tbody tr:nth-child(even) td { background: #FAFAFA; }
tbody tr.surligne td { background: var(--rose); }
td.nombre, th.nombre { text-align: right; }
td.gras { font-weight: bold; }

/* --- Étiquettes d'état ----------------------------------------------------- */
.etat { padding: 4px 9px; font-size: 12px; display: inline-block; }
.etat.ok { background: var(--vert-clair); color: var(--vert); }
.etat.attention { background: var(--ambre-clair); color: var(--ambre); }
.etat.probleme { background: var(--rose); color: var(--rouge-fonce); font-weight: bold; }
.etat.neutre { background: var(--gris-bloc); color: #3A3A3A; }

/* --- Encadrés -------------------------------------------------------------- */
.encadre { padding: 15px 18px; font-size: 14px; line-height: 1.6; }
.encadre.info { background: var(--gris-bloc); }
.encadre.alerte { background: var(--rose); border-left: 4px solid var(--rouge); }
.encadre.attention { background: var(--ambre-clair); border-left: 4px solid #D97706; }
.encadre.ok { background: var(--vert-clair); border-left: 4px solid var(--vert); }

/* --- Formulaires ---------------------------------------------------------- */
label { display: block; font-size: 14px; font-weight: bold; margin-bottom: 7px; }
input[type=text], input[type=password], input[type=search], select {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid #B9B9B9; background: #fff;
  font-family: inherit; font-size: 16px; color: var(--texte);
}
input:focus, select:focus { outline: 2px solid var(--rouge); outline-offset: -2px; }
.champ { margin-bottom: 20px; }
.aide { font-size: 13px; color: var(--texte-doux); margin-top: 6px; font-weight: normal; }

/* Zone de dépôt d'un fichier : glisser-déposer ou clic. Le champ natif reste
   dans le DOM et porte toujours le fichier — le glisser-déposer ne fait que le
   remplir. Sans JavaScript, le clic sur la zone ouvre le sélecteur : rien
   n'est perdu si le script ne s'exécute pas. */
.depot {
  position: relative;
  border: 2px dashed #B9B9B9; background: #FAFAFA;
  padding: 26px 20px; text-align: center; cursor: pointer;
  transition: border-color .12s, background .12s;
}
.depot:hover { border-color: var(--rouge); background: #fff; }
.depot.survol { border-color: var(--rouge); background: var(--rose); }
/* Le champ est rendu mais invisible, et non « display:none » : un champ
   « required » que le navigateur considère non affiché bloque l'envoi du
   formulaire sans message visible. Il reste donc dans le flux, transparent,
   et ne capte pas les clics — c'est la zone qui les relaie. */
.depot input[type=file] {
  position: absolute; left: 50%; bottom: 8px;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.depot .depot-titre { font-size: 15px; font-weight: bold; }
.depot .depot-precision { font-size: 13px; color: var(--texte-doux); margin-top: 6px; }
.depot .depot-fichier { font-size: 14px; color: var(--rouge-fonce); font-weight: bold; margin-top: 10px; }
/* --- Onglets --------------------------------------------------------------- */
/* Des onglets plutôt qu'une liste déroulante : les choix restent tous visibles,
   et chacun peut porter son explication en dessous. Servent au choix de
   l'extraction et aux deux vues des bons de commande. */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; }
.onglet {
  padding: 9px 16px; border: 1px solid var(--bordure); background: #fff;
  font-size: 14px; color: var(--texte); text-decoration: none;
}
.onglet:hover { border-color: var(--rouge); color: var(--texte); }
.onglet.actif {
  background: var(--rouge); border-color: var(--rouge);
  color: #fff; font-weight: bold;
}

/* Champ de mot de passe avec son bouton « Afficher ». Le bouton est injecté
   par mot_de_passe.js, qui pose aussi « avec-bouton » : sans JavaScript, le
   champ reste un champ ordinaire et rien ne réserve de place pour rien. */
.mdp { position: relative; }
.mdp.avec-bouton input { padding-right: 50px; }
/* L'œil est posé dans le champ, sans fond ni bordure : une barre grise au bout
   d'un champ de saisie se lit comme un second champ. La zone cliquable fait
   tout de même 44 px de large, atteignable sans viser. */
.mdp-bouton {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 44px; border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--texte-doux); cursor: pointer;
}
.mdp-bouton:hover { color: var(--rouge); }
/* Affiché, l'œil barré passe au rouge : le mot de passe est en clair à
   l'écran, et l'état doit se voir sans avoir à comparer les deux icônes. */
.mdp-bouton[aria-pressed="true"] { color: var(--rouge-fonce); }
.mdp-bouton:focus-visible { outline: 2px solid var(--rouge); outline-offset: -3px; }
/* Edge affiche son propre œil dans un champ de mot de passe : deux boutons
   côte à côte pour la même fonction, dont un que l'application ne maîtrise
   pas. On garde le nôtre, dont le libellé est explicite. */
.mdp input::-ms-reveal, .mdp input::-ms-clear { display: none; }

/* --- Grille de saisie des pièces d'une intervention ------------------------ */
/* Quatre colonnes sur un écran, empilées avec leurs étiquettes sur un
   téléphone. Voir la media query en bas de fichier : c'est l'écran que les
   mécaniciens utilisent debout à côté du camion, et il décide du sort de
   l'inventaire. S'il est pénible, il ne sera pas utilisé. */
.lignes-saisie { display: flex; flex-direction: column; }
.entete-saisie,
.ligne-saisie {
  display: grid;
  grid-template-columns: 26% 1fr 11% 13%;
  gap: 10px;
  align-items: center;
}
.entete-saisie {
  background: var(--rouge); color: #fff;
  font-size: 12px; font-weight: bold;
  padding: 12px 14px;
}
.groupe .entete-saisie { background: var(--noir); }
.ligne-saisie { padding: 8px 14px; border-top: 1px solid #ECECEC; }
.ligne-saisie:nth-child(even) { background: #FAFAFA; }
/* Un bloc replié par atelier.js doit disparaître. La règle « [hidden] {
   display: none } » du navigateur ne suffit pas : « .ligne-saisie { display:
   grid } » ci-dessus a plus de poids qu'elle, et le bloc resterait affiché.
   Sans cette ligne, l'attribut hidden est posé et ne se voit pas. */
.ligne-saisie[hidden] { display: none; }
.cellule-saisie { display: block; margin: 0; font-weight: normal; }
/* Les étiquettes par champ ne servent qu'au téléphone : sur un écran, c'est
   l'en-tête de colonne qui les porte, et les répéter ferait du bruit. */
.etiquette-saisie { display: none; }
.cellule-case { display: flex; align-items: center; justify-content: center; }
.cellule-case input[type=checkbox] { width: 22px; height: 22px; }
.etiquette-case { display: none; }

.depot.sans-script { cursor: default; }
.depot.sans-script input[type=file] {
  position: static; width: auto; height: auto;
  opacity: 1; pointer-events: auto; margin: 12px auto 0;
}

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px;
  background: var(--rouge); color: #fff; border: none;
  font-family: inherit; font-size: 15px; font-weight: bold;
  cursor: pointer; text-decoration: none;
}
.bouton:hover { background: var(--rouge-fonce); color: #fff; text-decoration: none; }
.bouton.secondaire { background: #fff; color: var(--texte); border: 1px solid #B9B9B9; }
.bouton.secondaire:hover { background: #F7F7F7; color: var(--texte); }
.bouton.pleine-largeur { width: 100%; }

/* --- Connexion ------------------------------------------------------------ */
.connexion { min-height: 100vh; display: flex; flex-direction: column; }
.connexion .filet { background: var(--rouge); height: 10px; }
.connexion .centre {
  flex-grow: 1; display: flex; align-items: center; justify-content: center; padding: 40px;
}
.connexion .colonnes { display: flex; gap: 56px; align-items: flex-start; max-width: 1000px; }
.connexion .boite { width: 430px; background: #fff; border: 1px solid var(--bordure); padding: 40px; }
.connexion .marque { font-size: 26px; font-weight: bold; color: var(--rouge); letter-spacing: -.5px; }
.connexion .marque-sous { font-size: 15px; color: var(--texte-doux); margin-top: 6px; }
.connexion .trait { height: 3px; background: var(--rouge); width: 48px; margin: 26px 0 30px; }
.connexion .explication { width: 470px; padding-top: 8px; }
.connexion .pied {
  height: 54px; background: #fff; border-top: 1px solid var(--bordure);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #7A7A7A;
}

/* --- Recherche ------------------------------------------------------------- */
.barre-recherche { display: flex; gap: 12px; }
.barre-recherche input { border: 2px solid var(--rouge); height: 50px; font-size: 17px; }
.barre-recherche .bouton { height: 50px; }
.filtres { display: flex; gap: 10px; align-items: center; font-size: 13px; margin-top: 16px; flex-wrap: wrap; }
.filtres select { width: auto; height: 38px; font-size: 13px; }

.resultat { background: #fff; border: 1px solid var(--bordure); margin-bottom: 14px; }
.resultat-entete {
  padding: 15px 20px; border-bottom: 1px solid #ECECEC;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.resultat-entete .designation { font-size: 16px; font-weight: bold; }
.resultat-entete .reference { font-size: 13px; color: #6A6A6A; margin-top: 3px; }
.resultat-entete .meilleur { text-align: right; white-space: nowrap; }
.resultat-entete .meilleur .etiquette {
  font-size: 11px; color: #2A6B3E; text-transform: uppercase; letter-spacing: .6px;
}
.resultat-entete .meilleur .prix { font-size: 21px; font-weight: bold; color: var(--vert); }
.prix-bas { color: var(--vert); font-weight: bold; }
.prix-haut { color: var(--rouge-fonce); font-weight: bold; }
.badge-catalogue {
  background: var(--gris-bloc); padding: 2px 7px; font-size: 12px; color: #3A3A3A;
}

.vide { padding: 40px; text-align: center; color: var(--texte-doux); }
.erreur { background: var(--rose); border-left: 4px solid var(--rouge); padding: 14px 18px; font-size: 14px; }


/* --- Téléphone ------------------------------------------------------------- */
/* Ajouté pour les mécaniciens : la fiche d'intervention se saisit debout à
   côté du camion, sur le téléphone qu'on a dans la poche. Le reste de
   l'application reste conçu pour un écran de bureau — un responsable de parc
   qui rapproche des prix n'a rien à faire sur un téléphone — mais rien ne doit
   casser si quelqu'un y ouvre une autre page.
   Un seul palier, à 760 px : il sépare le téléphone et la tablette en portrait
   du reste. Multiplier les paliers rendrait la feuille impossible à relire. */
@media (max-width: 760px) {

  /* Le bandeau. Sur un compte d'atelier il ne porte qu'un lien, mais le nom et
     le bouton Quitter doivent rester atteignables au pouce. */
  .bandeau { padding: 10px 16px; gap: 8px 14px; }
  .bandeau-titre { font-size: 17px; }
  .bandeau-gauche { gap: 8px 16px; width: 100%; }
  .menu { gap: 6px 16px; font-size: 15px; }
  .identite { gap: 12px; }
  .identite .nom { font-size: 13px; }

  .page { padding: 18px 16px; gap: 16px; }
  .titre-page { font-size: 21px; }
  .sous-titre { font-size: 14px; }

  /* Un titre et son bouton côte à côte deviennent illisibles : on empile, et
     le bouton prend toute la largeur pour être touché sans viser. */
  .ligne-titre { flex-direction: column; align-items: stretch; gap: 14px; }
  .ligne-titre > div:last-child { display: flex; flex-direction: column; gap: 10px; }
  .ligne-titre .bouton { width: 100%; }

  .chiffres { grid-template-columns: 1fr 1fr; gap: 10px; }
  .chiffre { padding: 12px 14px; }
  .chiffre .valeur { font-size: 22px; }
  .chiffre .etiquette { font-size: 11px; }

  .carte-corps { padding: 16px; }
  .carte-entete { padding: 13px 16px; flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Les champs : 50 px de haut, et 16 px de police. Le second n'est pas
     cosmétique — sous 16 px, Safari sur iOS zoome la page à chaque fois qu'on
     entre dans un champ, et il faut ensuite la dézoomer à la main. C'est la
     raison d'être du « !important » : plusieurs gabarits imposent 13 px en
     ligne pour tenir dans un tableau, ce qui n'a plus de sens ici. */
  input[type=text], input[type=password], input[type=search],
  input[type=date], select, textarea {
    height: 50px !important;
    font-size: 16px !important;
  }
  .champ { margin-bottom: 16px; }

  /* Les boutons prennent la largeur : viser une cible de 120 px avec un pouce
     gras, debout, ne marche pas. */
  .bouton { width: 100%; height: 52px; font-size: 16px; }
  .barre-recherche { flex-direction: column; gap: 10px; }
  .barre-recherche .bouton { width: 100%; }
  .filtres { flex-direction: column; align-items: stretch !important; gap: 14px; }
  .filtres > * { width: 100%; }

  /* Les tableaux de consultation défilent horizontalement dans leur carte
     plutôt que d'élargir la page : une page qui déborde latéralement se
     manipule très mal au doigt. */
  .carte table { display: block; overflow-x: auto; white-space: nowrap; }
  tbody td, thead th { padding: 10px 12px; }

  /* La saisie des pièces d'une intervention : une pièce par bloc, chaque champ
     avec son étiquette. C'est le cœur de l'usage mobile. */
  .entete-saisie { display: none; }
  .ligne-saisie {
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 14px 16px;
    border-top: 2px solid var(--bordure);
  }
  /* Trois lignes par pièce, et pas quatre : la référence et la quantité se
     partagent la première — l'une est courte, l'autre tient en deux
     caractères. La désignation prend toute la largeur, c'est le seul champ
     dont le contenu ne tient pas sur une demi-ligne. Placement explicite
     parce que l'ordre à l'écran n'est pas celui du formulaire, qui doit
     rester Référence / Désignation / Quantité pour la version de bureau. */
  .ligne-saisie .cellule-saisie:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
  .ligne-saisie .cellule-saisie:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
  .ligne-saisie .cellule-saisie:nth-child(2) { grid-area: 2 / 1 / 3 / 3; }
  .ligne-saisie .cellule-case { grid-area: 3 / 1 / 4 / 3; }
  .etiquette-saisie {
    display: block;
    font-size: 12px; font-weight: bold; color: var(--texte-doux);
    text-transform: uppercase; letter-spacing: .4px;
    margin-bottom: 5px;
  }
  /* La case « remise en stock » retrouve son libellé, et devient une zone
     qu'on touche sans viser plutôt qu'un carré de 13 px. */
  .cellule-case {
    justify-content: flex-start; gap: 12px;
    min-height: 48px;
    padding: 0 2px;
  }
  .cellule-case input[type=checkbox] { width: 26px; height: 26px; flex: none; }
  .etiquette-case { display: inline; font-size: 15px; }

  /* Les encadrés d'explication restent lisibles mais cessent de manger
     l'écran : le texte est long, et sur un téléphone il repousse le
     formulaire hors de vue. */
  .encadre { padding: 13px 15px; font-size: 13.5px; }

  /* L'écran de connexion. Les deux colonnes deviennent une, et l'explication
     passe sous le formulaire — c'est le formulaire qu'on vient utiliser. */
  .colonnes { display: flex; flex-direction: column; gap: 22px; }
  .boite { padding: 24px 20px; }
  .connexion .centre { padding: 20px 16px; }
  .explication { order: 2; }

  /* Les onglets : sur deux lignes plutôt qu'un défilement horizontal. */
  .onglets { gap: 6px; }
  .onglet { padding: 10px 14px; font-size: 14px; }
}

/* Très petits écrans : les chiffres passent sur une colonne. À deux colonnes,
   « 1 260,43 € » se coupe en plein milieu sous 380 px. */
@media (max-width: 380px) {
  .chiffres { grid-template-columns: 1fr; }
}

/* Sous 340 px, la saisie d'une pièce passe elle aussi sur une colonne. Le
   palier est nettement plus bas que celui des chiffres, et volontairement :
   un iPhone SE fait 375 px de large, deux colonnes y tiennent très bien, et
   les mettre l'une sous l'autre allongerait la page de cinq cents pixels
   pour rien. Il faut annuler les placements explicites du palier 760 px :
   une cellule posée en colonne 2 recréerait une deuxième colonne implicite,
   et la grille resterait à deux colonnes malgré le « 1fr ». */
@media (max-width: 340px) {
  .ligne-saisie { grid-template-columns: 1fr; }
  .ligne-saisie .cellule-saisie:nth-child(1),
  .ligne-saisie .cellule-saisie:nth-child(2),
  .ligne-saisie .cellule-saisie:nth-child(3),
  .ligne-saisie .cellule-case { grid-area: auto; }
  /* L'ordre à l'écran reste référence, quantité, désignation, remise. */
  .ligne-saisie .cellule-saisie:nth-child(1) { order: 1; }
  .ligne-saisie .cellule-saisie:nth-child(3) { order: 2; }
  .ligne-saisie .cellule-saisie:nth-child(2) { order: 3; }
  .ligne-saisie .cellule-case { order: 4; }
}

/* Le bouton « Ajouter une pièce », injecté par atelier.js. Sans JavaScript il
   n'existe pas, et les six blocs de saisie sont visibles d'emblée. */
.ajouter-piece { margin-top: 12px; }

/* Les deux liens proposés juste après un enregistrement : ouvrir la fiche,
   l'imprimer. Sur téléphone ils s'empilent et prennent la largeur, comme tous
   les autres boutons. */
.apres-fiche { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .apres-fiche { flex-direction: column; }
  .apres-fiche .bouton { width: 100%; }
}
@media (max-width: 760px) { .ajouter-piece { width: 100%; } }