/* ERP AMR - feuille de style unique.
   Polices systeme uniquement : aucune ressource externe, fonctionne hors ligne. */

:root {
  /* LA PALETTE VIENT DU LOGO (11/09). Le bleu marine est releve au
     pixel sur APPLICATION_MECANIQUE_RHONE_LOGO_Bleu : #140175. Tout le
     reste en decoule. Une couleur inventee a cote d'un logo, ca se voit
     tout de suite, et l'ERP sort des documents qui portent ce logo. */
  --marine:    #140175;   /* bleu du logo, releve au pixel */
  --marine-fc: #0D004E;   /* survol, etat actif */
  --marine-cl: #EAE8F6;   /* fonds, lignes survolees */

  --fond:      #EEEFF4;
  --surface:   #FFFFFF;
  --encre:     #14181C;
  --acier:     #5A6672;   /* texte secondaire */
  --trait:     #D5D7E0;
  --accent:    var(--marine);
  --accent-cl: var(--marine-cl);
  --oxyde:     #A03412;   /* alerte / retard */
  --oxyde-cl:  #F7E7E2;
  --vert:      #2F6B3A;
  --ambre:     #8A6100;

  /* DIX LIGNES, PAS UNE DE PLUS (11/09). « Je ne veux pas que les
     tableaux affichent plus de 10 lignes ; s'il y en a plus, le TABLEAU
     défile. » Une ligne fait ~2,4 rem (8 px de marge haute, 8 px basse,
     13,5 px de texte sur 1,5), l'en-tête ~2,4 rem aussi. Dix lignes plus
     l'en-tête : 26,4 rem. Écrit une fois ici, appliqué partout. */
  --dix-lignes: 26.4rem;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 15px/1.5 var(--texte);
}

/* ------------------------------------------------------------ en-tete */

.bandeau {
  /* Le bandeau porte la couleur du logo (11/09) : l'ecran et les
     documents parlent enfin la meme langue. */
  background: var(--marine);
  color: #F2F1FA;
  border-bottom: 3px solid var(--marine-fc);
}
.bandeau-haut {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px 9px;
}
.marque {
  font-family: var(--mono);
  font-weight: 700; letter-spacing: .16em; font-size: 15px;
}
.marque span { color: #A79FE0; }
/* LE LOGO SE VOIT (13/09). Il faisait 30 px de haut, en couleur, sur le
   marine du bandeau — c'est-à-dire sur SA PROPRE couleur : l'hexagone
   disparaissait et le « AMR », noir dans le fichier d'origine, ne
   faisait plus qu'une tache sombre. Version monochrome blanche, et
   40 px de haut : on lit la baseline. */
.marque-logo { display: block; height: 40px; width: auto; }
.sous-marque { color: #B3ACE0; font-size: 12px; letter-spacing: .04em; }
.identite { margin-left: auto; font-size: 12.5px; color: #CFCAEC; }
.identite a { color: #CFCAEC; }

nav.onglets {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 2px 16px 0;
}
nav.onglets a {
  padding: 9px 15px 11px;
  font-size: 13.5px; letter-spacing: .015em;
  color: #CFCAEC; text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -3px;
  border-radius: 4px 4px 0 0;
  transition: none;
}
nav.onglets a:hover { color: #fff; background: rgba(255,255,255,.06); }
nav.onglets a.actif {
  /* Sur fond marine, un soulignement marine serait invisible : l'onglet
     actif se marque en clair. */
  color: #fff; border-bottom-color: #fff;
  background: rgba(255,255,255,.10);
}

/* -------------------------------------------------------------- corps */

main { max-width: 1180px; margin: 0 auto; padding: 20px 16px 60px; }

h1 { font-size: 20px; font-weight: 650; margin: 0 0 4px; letter-spacing: -.01em; }
h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--acier); font-weight: 650;
  margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--trait);
}
.chapeau { color: var(--acier); font-size: 13.5px; margin: 0 0 18px; }

.carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
  padding: 16px 18px;
}

.grille { display: grid; gap: 14px; }
.grille-4 { grid-template-columns: repeat(4, 1fr); }
.grille-2 { grid-template-columns: repeat(2, 1fr); }

/* Indicateurs */
.indic { background: var(--surface); border: 1px solid var(--trait); border-radius: 3px; padding: 12px 14px; }
.indic .valeur { font-family: var(--mono); font-size: 26px; font-weight: 600; line-height: 1.1; }
.indic .etiquette { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--acier); margin-top: 5px; }
.indic.alerte .valeur { color: var(--oxyde); }

/* --------------------------------------- jauge de charge (element signature) */

.jauge { margin-bottom: 14px; }
.jauge-tete {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13px; margin-bottom: 5px;
}
.jauge-tete .poste { font-weight: 600; }
.jauge-tete .jour { font-family: var(--mono); color: var(--acier); font-size: 12px; }
.jauge-tete .val { margin-left: auto; font-family: var(--mono); font-size: 12.5px; }
.jauge-piste {
  position: relative; height: 16px;
  background: repeating-linear-gradient(90deg, #E5E8EA 0 1px, transparent 1px 20px) , #F4F6F7;
  border: 1px solid var(--trait);
}
.jauge-barre { height: 100%; background: var(--accent); }
.jauge-barre.sature { background: var(--oxyde); }
/* trait de cote : capacite nominale */
.jauge-nominal {
  position: absolute; top: -4px; bottom: -4px; left: 75%;
  width: 1px; background: var(--encre);
}
.jauge-nominal::after {
  content: "capacite";
  position: absolute; top: -14px; left: 3px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .06em; color: var(--acier);
}

/* ------------------------------------------------------------ tableaux */

table { width: 100%; border-collapse: collapse; background: var(--surface); }
thead th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--acier); font-weight: 650;
  padding: 8px 10px; border-bottom: 1px solid var(--encre);
  background: #F7F8F9;
}
tbody td { padding: 8px 10px; border-bottom: 1px solid var(--trait); font-size: 13.5px; vertical-align: top; }
tbody tr:hover td { background: #F7F9FA; }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 13px; }
td.ref { font-family: var(--mono); font-size: 12.5px; }
.enveloppe-table { border: 1px solid var(--trait); border-radius: 3px; overflow-x: auto; }

/* --------------------------------------------------------------- pastilles */

.pastille {
  display: inline-block; padding: 2px 7px; border-radius: 2px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em;
  border: 1px solid transparent; white-space: nowrap;
}
.p-neutre { background: #EEF1F3; color: var(--acier); border-color: var(--trait); }
.p-accent { background: var(--accent-cl); color: var(--accent); border-color: #BBD8DD; }
.p-alerte { background: var(--oxyde-cl); color: var(--oxyde); border-color: #E9C7BC; }
.p-vert   { background: #E6F0E8; color: var(--vert); border-color: #C3DCC8; }
.p-ambre  { background: #F6EFDA; color: var(--ambre); border-color: #E2D3AA; }

/* Plusieurs pastilles cote a cote dans une cellule de suivi : elles doivent
   respirer, et pouvoir passer a la ligne sur un ecran etroit. */
td .pastille + .pastille { margin-left: 4px; }
td .pastille { margin-bottom: 2px; }

/* ------------------------------------------------------------ formulaires */

form.bloc { max-width: 460px; }
label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
        color: var(--acier); font-weight: 600; margin: 14px 0 4px; }
input[type=text], input[type=password], input[type=email], select {
  width: 100%; padding: 9px 10px;
  border: 1px solid var(--trait); border-radius: 2px; background: #fff;
  font: 15px var(--texte); color: var(--encre);
}
input:focus, select:focus, button:focus, a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.aide { font-size: 12px; color: var(--acier); margin-top: 5px; }

button, .bouton {
  display: inline-block; padding: 9px 16px; margin-top: 16px;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 2px; font: 600 14px var(--texte); cursor: pointer; text-decoration: none;
}
button:hover, .bouton:hover { background: #094A55; }
button.secondaire, .bouton.secondaire {
  background: #fff; color: var(--encre); border-color: var(--trait);
}
button.secondaire:hover { background: #F1F3F5; }
button.danger { background: #fff; color: var(--oxyde); border-color: #E9C7BC; }
button.danger:hover { background: var(--oxyde-cl); }
.barre-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.barre-actions form { display: inline; }

/* --------------------------------------------------------------- messages */

.message, .erreur {
  padding: 10px 13px; border-radius: 2px; font-size: 13.5px; margin-bottom: 16px;
  border-left: 3px solid;
}
.message { background: var(--accent-cl); border-color: var(--accent); }
.erreur  { background: var(--oxyde-cl);  border-color: var(--oxyde); }
.vide { color: var(--acier); font-size: 13.5px; padding: 18px 0; }

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

.page-connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.035) 0 1px, transparent 1px 32px),
    var(--fond);
}
.page-connexion .carte { width: 100%; max-width: 370px; padding: 26px 26px 30px; }
.page-connexion .marque { color: var(--encre); font-size: 18px; }
.page-connexion .sous-marque { display: block; margin: 6px 0 4px; }
.page-connexion button { width: 100%; }

/* ------------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .grille-4, .grille-2 { grid-template-columns: repeat(2, 1fr); }
  .bandeau-haut { flex-wrap: wrap; gap: 8px 12px; }
  .identite { margin-left: 0; width: 100%; }
  main { padding: 16px 12px 48px; }
  tbody td, thead th { padding: 7px 8px; }

  /* LA BARRE PRINCIPALE MANGE LA MOITIÉ DE L'ÉCRAN (17/09). Sur un
     téléphone étroit, huit onglets et six étapes de fil ne tiennent pas
     sur une ligne : `flex-wrap` (la valeur normale, gardée telle quelle
     pour le PC) les repliait en trois ou quatre rangées empilées, et le
     bandeau — fixe en hauteur, RÈGLE 4 oblige — prenait tout ce qu'il
     réclamait sur le dos de `main`. Rien ne change au-delà de 760px :
     ces trois barres restent à une seule ligne, qui défile au doigt au
     lieu de s'empiler. Le PC n'est pas concerné.*/
  nav.flux, nav.onglets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav.flux::-webkit-scrollbar, nav.onglets::-webkit-scrollbar { display: none; }
  nav.flux a, nav.onglets a { white-space: nowrap; flex: 0 0 auto; }
  .flux-fleche { flex: 0 0 auto; }
  nav.onglets .onglets-sep { flex: 0 0 auto; }
}
@media (max-width: 460px) {
  .grille-4, .grille-2 { grid-template-columns: 1fr; }
}

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

/* ------------------------------------------- fil conducteur d'une affaire */

.fil {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  margin-bottom: 20px;
  overflow: hidden;
}
.fil-tete {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 9px 14px; background: #F7F8F9; border-bottom: 1px solid var(--trait);
  font-size: 12.5px;
}
.fil-affaire { font-family: var(--mono); font-weight: 700; font-size: 13px; }
.fil-client { color: var(--encre); }
.fil-ref, .fil-avancement { color: var(--acier); font-size: 11.5px; }
.fil-avancement { margin-left: auto; font-family: var(--mono); }

.fil-etapes { display: flex; align-items: stretch; overflow-x: auto; }
.fil-etape {
  flex: 1 1 0; min-width: 132px; padding: 10px 12px 12px;
  border-top: 3px solid var(--trait);
}
.fil-libelle {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--acier); font-weight: 650; margin-bottom: 6px;
}
.fil-doc {
  display: block; font-family: var(--mono); font-size: 12px;
  text-decoration: none; color: var(--accent); margin-bottom: 3px;
}
.fil-doc:hover { text-decoration: underline; }
/* Au-dela de six ordres, le reste se replie : sur une commande de 32
   postes le bandeau prenait tout l'ecran (02/09). */
.fil-reste > summary { cursor: pointer; font-size: .78rem; color: var(--acier);
                       padding: 2px 0; }
.fil-reste[open] > summary { color: var(--encre); }
.fil-doc span {
  display: block; font-family: var(--texte); font-size: 10.5px; color: var(--acier);
}
.fil-vide { font-size: 11.5px; color: var(--acier); font-style: italic; }
.fil-action {
  display: inline-block; margin-top: 8px; padding: 5px 11px;
  background: var(--accent); color: #fff; text-decoration: none;
  border-radius: 2px; font-size: 12px; font-weight: 600;
}
.fil-action:hover { background: #094A55; }
.fil-fleche {
  display: flex; align-items: center; padding: 0 2px;
  color: var(--trait); font-size: 22px; user-select: none;
}

.fil-fait      { border-top-color: var(--vert); }
.fil-en_cours  { border-top-color: var(--accent); }
.fil-partiel   { border-top-color: var(--ambre); }
.fil-a_faire   { border-top-color: var(--trait); }
.fil-sans_objet{ border-top-color: var(--trait); opacity: .6; }
.fil-courant   { background: var(--accent-cl); }

@media (max-width: 760px) {
  .fil-etapes { display: block; }
  .fil-etape { border-top-width: 3px; border-bottom: 1px solid var(--trait); }
  .fil-fleche { display: none; }
  .fil-avancement { margin-left: 0; width: 100%; }
}

/* ------------------------------------------ navigation : le flux de travail */

nav.flux {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0 2px; padding: 6px 12px 0;
  background: rgba(255,255,255,.04);
}
nav.flux a {
  padding: 7px 15px 8px; font-size: 13.5px; font-weight: 600;
  color: #C6D2DA; text-decoration: none; border-radius: 3px 3px 0 0;
}
nav.flux a:hover { color: #fff; background: rgba(255,255,255,.07); }
nav.flux a.actif { color: var(--encre); background: var(--fond); }
.flux-fleche { color: #5A6672; font-size: 17px; padding: 0 1px; user-select: none; }

/* Seconde ligne : les ecrans de la famille ouverte. Volontairement plus
   discrete que la premiere — c'est une precision a l'interieur d'un choix
   deja fait, pas un choix concurrent. Sans cette hierarchie visuelle, deux
   barres identiques l'une sous l'autre se liraient comme quatorze onglets
   au lieu de huit plus quelques-uns. */
nav.onglets.onglets-famille {
  padding: 0 16px 2px;
  background: rgba(255,255,255,.05);
  gap: 2px;
}
nav.onglets.onglets-famille a {
  padding: 6px 12px 7px; font-size: 12.5px; color: #9AA7B2;
  border-bottom-width: 2px; margin-bottom: 0;
}
nav.onglets.onglets-famille a.actif { color: #fff; border-bottom-color: var(--ambre); }

nav.onglets .onglets-sep {
  width: 1px; align-self: center; height: 15px;
  background: #3A444E; margin: 0 8px;
}

/* --------------------------------------------------- interface atelier */

body.atelier { font-size: 16px; }
.bandeau-atelier { border-bottom-color: var(--ambre); }
.bandeau-atelier .marque span { color: var(--ambre); }
nav.onglets-atelier a { font-size: 15px; padding: 11px 18px 13px; }
nav.onglets-atelier a.actif { border-bottom-color: var(--ambre); }
main.main-atelier { max-width: 900px; padding: 20px 14px 60px; }

/* Cartes d'OF, pensées pour le tactile */
.of-carte {
  background: var(--surface); border: 1px solid var(--trait);
  border-left: 4px solid var(--accent); border-radius: 3px;
  padding: 15px 17px; margin-bottom: 14px;
}
.of-carte.urgent { border-left-color: var(--oxyde); }
.of-carte.attente { border-left-color: var(--ambre); }
.of-carte-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; }
.of-carte-num { font-family: var(--mono); font-weight: 700; font-size: 17px; }
.of-carte-ref { font-family: var(--mono); font-size: 15px; color: var(--accent); }
.of-carte-client { color: var(--acier); font-size: 14px; }
.of-carte-corps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px; margin: 13px 0 4px;
}
.of-champ .val { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.of-champ .lib {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--acier); margin-top: 2px;
}
.of-carte-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.of-carte-actions .bouton, .of-carte-actions button {
  margin-top: 0; padding: 12px 20px; font-size: 15px;
}
.exigence {
  background: var(--oxyde-cl); border-left: 3px solid var(--oxyde);
  padding: 9px 12px; margin-top: 11px; font-size: 13.5px;
}

/* Saisie tactile : champs et boutons plus grands */
body.atelier input[type=text], body.atelier input[type=password],
body.atelier select { padding: 13px 12px; font-size: 17px; }
body.atelier button, body.atelier .bouton { padding: 13px 22px; font-size: 16px; }
body.atelier label { font-size: 13px; margin: 18px 0 5px; }
body.atelier tbody td, body.atelier thead th { padding: 11px 10px; }
body.atelier .indic .valeur { font-size: 30px; }

/* =====================================================================
   TABLEAU DE BORD ECONOMIQUE

   Regle typographique de la page : aucun nombre ne doit jamais etre
   coupe en fin de ligne. Les valeurs sont produites avec des espaces
   insecables par les filtres euros/taux/heures/pourcent, et toutes les
   cellules numeriques portent white-space: nowrap. Les chiffres sont en
   chasse tabulaire pour que les colonnes s'alignent a la virgule.
   ===================================================================== */

.eco-titre { display:flex; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.eco-titre h1 { margin-bottom:2px; }
.eco-mois { margin-left:auto; display:flex; align-items:center; gap:8px;
            font-size:13px; }
.eco-mois label { margin:0; }
h2.eco-section { font-size:13px; text-transform:uppercase; letter-spacing:.09em;
                 color:var(--acier); margin:26px 0 10px; font-weight:600; }

/* --- niveau 1 : tuiles --- */
.tuiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tuiles .tuile .etiq { font-size:12px; color:var(--acier);
                       text-transform:uppercase; letter-spacing:.06em; }
.tuiles .valeur { font-size:27px; font-weight:600; line-height:1.2;
                  font-variant-numeric:tabular-nums; white-space:nowrap;
                  margin:6px 0 2px; }
.tuiles .detail { font-size:12.5px; color:var(--acier); }
.tuiles .detail.cumul { margin-top:6px; white-space:nowrap; }
.tuile.marge { border-left:4px solid var(--vert); }
.tuile.marge .valeur { color:var(--vert); }
.tuile.marge-neg { border-left:4px solid var(--oxyde); }
.tuile.marge-neg .valeur { color:var(--oxyde); }
.tendance { font-weight:600; white-space:nowrap; }
.hausse { color:var(--vert); } .baisse { color:var(--oxyde); }

/* --- niveau 2 : jauge --- */
.jauge-libelle { display:flex; justify-content:space-between; align-items:baseline;
                 gap:12px; font-size:13px; color:var(--acier); margin-bottom:8px; }
.ecart-cle { font-family:var(--mono); font-size:20px; font-weight:700;
             white-space:nowrap; }
.ecart-cle.negatif { color:var(--oxyde); } .ecart-cle.positif { color:var(--vert); }
.jauge { position:relative; height:34px; background:var(--fond);
         border-radius:3px; overflow:hidden; }
.jauge .remplissage { height:100%; opacity:.88; }
.jauge .remplissage.sous { background:var(--oxyde); }
.jauge .remplissage.sur  { background:var(--vert); }
.jauge .objectif { position:absolute; top:-3px; bottom:-3px; width:3px;
                   background:var(--encre); }
.jauge .lecture { position:absolute; top:0; left:12px; height:34px;
                  display:flex; align-items:center; color:#fff; font-weight:600;
                  font-variant-numeric:tabular-nums; white-space:nowrap; }
.jauge-pieds { display:flex; justify-content:space-between; font-size:12px;
               color:var(--acier); margin-top:6px; white-space:nowrap; }
.note.sous-jauge { margin-top:8px; }
.titre-bloc { margin:16px 0 8px; }

/* --- tableaux economiques --- */
table.eco-effets td { border-bottom:1px solid #EEF1F3; }
.eco-section + .carte td.num, .carte td.num, .carte th.num { text-align:right; }
.carte td.num, .carte th.num { white-space:nowrap;
                               font-variant-numeric:tabular-nums; }
.carte td.lib { word-break:normal; overflow-wrap:anywhere; }
.col-barre { width:34%; text-align:right; }
.col-pastille { width:22%; white-space:nowrap; }
.moins { color:var(--oxyde); font-weight:600; }
.plus, .bien { color:var(--vert); font-weight:600; }
.bof { color:var(--ambre); font-weight:600; }

.barre { display:inline-block; width:100%; min-width:60px; height:7px;
         background:var(--fond); border-radius:4px; overflow:hidden;
         vertical-align:middle; }
.barre i { display:block; height:100%; }
.b-rouge i { background:var(--oxyde); }
.b-ambre i { background:var(--ambre); }
.b-vert  i { background:var(--vert); }

.pastille { display:inline-block; padding:1px 7px; border-radius:9px;
            font-size:11.5px; font-weight:600; white-space:nowrap; }
.p-prix  { background:var(--oxyde-cl); color:var(--oxyde); }
.p-temps { background:#FBF0D8; color:var(--ambre); }
.p-ok    { background:#E4F0E6; color:var(--vert); }

.duo { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.encadre { background:var(--accent-cl); border-left:4px solid var(--accent);
           padding:12px 14px; border-radius:0 4px 4px 0; font-size:13.5px;
           margin-top:14px; }
.vide { color:var(--acier); font-size:13.5px; font-style:italic; }
.note.pied { margin-top:22px; }

@media (max-width:760px) {
  .tuiles { grid-template-columns:1fr; }
  .duo { grid-template-columns:1fr; }
  .masq { display:none; }
  .eco-mois { margin-left:0; }
  .col-barre { width:22%; }
}

/* Suivi d'expedition : deux numeros, l'interne et celui du transporteur. */
table.suivi-bl { margin-top:12px; width:auto; }
table.suivi-bl th { text-align:left; padding-right:16px; white-space:nowrap; }
table.suivi-bl td { padding:6px 10px 6px 0; }
table.suivi-bl td.aide { color:var(--acier); font-size:12.5px; }

/* Selection des OF a imprimer : la case doit rester facile a viser au
   doigt, l'ecran servant aussi depuis une tablette a l'atelier. */
table.of-impression td { vertical-align: top; }
table.of-impression input[type=checkbox] { width: 20px; height: 20px; }
table.of-impression td .aide { font-size: 12px; }

/* Heure du dernier affichage : discrete, mais elle repond a la question
   « ce que je vois date de quand ? » sans avoir a recharger pour verifier. */
.fraicheur { font-variant-numeric: tabular-nums; opacity: .75; white-space: nowrap; }

/* Retour : discret mais toujours au meme endroit, en haut a gauche du
   contenu. Une cible large au doigt pour la tablette de l'atelier. */
.retour {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 12px 6px 8px;
  font-size: 14px;
  color: var(--acier);
  text-decoration: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, .03);
}
.retour:hover { background: rgba(0, 0, 0, .07); color: var(--encre); }

/* --- Barre d'outils du bandeau : recherche globale et raccourcis ------
   Le menu « + Nouveau » est un <details> natif : il s'ouvre sans script,
   ce qui est la seule façon de tenir la contrainte zéro JavaScript. */
.bandeau-outils {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0 4px; flex-wrap: wrap;
}
.recherche-globale { display: flex; gap: 6px; flex: 1 1 320px; margin: 0; }
.recherche-globale input {
  flex: 1; margin: 0; min-width: 0;
}
.recherche-globale button { margin: 0; white-space: nowrap; }
.menu-nouveau { position: relative; }
.menu-nouveau > summary {
  cursor: pointer; list-style: none; white-space: nowrap;
  padding: 8px 14px; border-radius: 4px;
  background: var(--encre); color: #fff; font-weight: 600; font-size: 14px;
}
.menu-nouveau > summary::-webkit-details-marker { display: none; }
.menu-nouveau .menu-liste {
  position: absolute; right: 0; z-index: 20; min-width: 200px;
  background: #fff; border: 1px solid var(--trait); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px 0; margin-top: 4px;
}
.menu-nouveau .menu-liste a {
  display: block; padding: 8px 14px; text-decoration: none; font-size: 14px;
}
.menu-nouveau .menu-liste a:hover { background: var(--brume, #f4f5f7); }

/* --- Tableaux : tri, filtres memorises, menu d'actions ---------------
   Tout repose sur des liens et des <details> natifs : la contrainte zero
   JavaScript vaut aussi pour le confort. */
th a.tri { color: inherit; text-decoration: none; white-space: nowrap; }
th a.tri:hover { text-decoration: underline; }

.barre-recherche-liste { display: flex; gap: 6px; margin: 10px 0; }
.barre-recherche-liste input { flex: 1; margin: 0; min-width: 0; }
.barre-recherche-liste button { margin: 0; }

.barre-filtres {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 8px 0 14px;
}
.etiq-filtres {
  font-size: 12px; color: var(--acier);
  text-transform: uppercase; letter-spacing: .08em;
}
.pastille-lien {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  background: var(--brume, #f4f5f7); border: 1px solid var(--trait);
  font-size: 12.5px; text-decoration: none; color: var(--encre);
}
.pastille-lien:hover { border-color: var(--accent); }
.bouton-mini { padding: 4px 10px !important; font-size: 12px !important;
               margin-top: 0 !important; }
.filtre-enregistrer > summary {
  cursor: pointer; font-size: 12.5px; color: var(--acier);
}
.filtre-enregistrer { position: relative; }

/* Menu d'actions d'une ligne de tableau : l'information principale reste
   visible, les fonctions secondaires s'ouvrent en un clic. */
.menu-ligne { display: inline-block; position: relative; }
.menu-ligne > summary {
  cursor: pointer; list-style: none; padding: 2px 8px;
  border: 1px solid var(--trait); border-radius: 4px; font-size: 14px;
}
.menu-ligne > summary::-webkit-details-marker { display: none; }
.menu-ligne .menu-liste {
  position: absolute; right: 0; z-index: 15; min-width: 210px; text-align: left;
  background: #fff; border: 1px solid var(--trait); border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 4px 0;
}
.menu-ligne .menu-liste a,
.menu-ligne .menu-liste button {
  display: block; width: 100%; text-align: left; padding: 7px 12px;
  font-size: 13.5px; text-decoration: none; background: none; border: 0;
  margin: 0; color: var(--encre); cursor: pointer;
}
.menu-ligne .menu-liste a:hover,
.menu-ligne .menu-liste button:hover { background: var(--brume, #f4f5f7); }
/* Action destructrice dans un menu : même mise en forme que les liens
   voisins, mais teintée, pour qu'elle ne se clique pas par erreur. */
.menu-ligne .menu-liste .danger-lien { color: var(--oxyde, #a33); }

/* --- Suggestions contextuelles ---------------------------------------
   Elles signalent sans decider. Discretes par construction : une bande
   coloree et un texte, jamais un encadre qui coupe la lecture. */
.conseils { margin: 8px 0 12px; }
.conseil {
  padding: 6px 10px; margin: 4px 0; font-size: 13px;
  border-left: 3px solid var(--acier); background: var(--brume, #f4f5f7);
  border-radius: 0 3px 3px 0;
}
.conseil a { margin-left: 6px; }
.conseil-info { border-left-color: var(--accent, #4a6fa5); }
.conseil-attention { border-left-color: var(--ambre, #c8901d); }
.conseil-alerte { border-left-color: var(--oxyde, #a33); }

/* --- Planning par personne -------------------------------------------
   Une ligne par personne, cinq colonnes de jours. La charge est étalée :
   un ordre long occupe plusieurs cases. */
.planning-semaine td.case-jour { vertical-align: top; min-width: 150px; }
.planning-semaine th.jour-actuel { background: var(--brume, #f4f5f7); }
.case-jour.ferme { background: repeating-linear-gradient(
    45deg, transparent, transparent 6px, rgba(0,0,0,.03) 6px, rgba(0,0,0,.03) 12px); }
.charge-barre {
  height: 6px; background: #e3ded4; border-radius: 3px; overflow: hidden;
  margin-bottom: 3px;
}
.charge-remplissage { height: 100%; background: #a9c48c; }
.charge-remplissage.deborde { background: var(--oxyde, #a33); }
.case-of { margin: 4px 0; font-size: 12.5px; line-height: 1.3; }
.case-of a { font-weight: 600; }

/* Ordre de passage dans la journée : deux flèches discrètes. */
.of-ordre { margin-left: auto; }
.of-ordre button {
  margin: 0 0 0 2px; padding: 2px 7px; font-size: 12px;
  background: none; border: 1px solid var(--trait); color: var(--acier);
  border-radius: 3px; cursor: pointer;
}
.of-ordre button:hover { border-color: var(--accent); color: var(--accent); }

/* La suite de la semaine, sous la journée en cours. */
.semaine-perso { display: flex; gap: 10px; flex-wrap: wrap; }
.jour-perso {
  flex: 1 1 180px; border: 1px solid var(--trait); border-radius: 4px;
  padding: 8px 10px; background: #fff;
}
.jour-perso.ferme { background: var(--brume, #f4f5f7); }
.jour-tete { display: flex; justify-content: space-between; align-items: baseline; }
.jour-liste { margin: 6px 0 0; padding-left: 16px; font-size: 13px; }
/* Deux charges superposees : la machine decide de la duree, l'operateur
   decide de ce qu'on peut mener de front. */
.charge-remplissage.operateur { background: #4a6fa5; }

/* Version du logiciel : discrète, mais toujours là quand on appelle à l'aide. */
.pied-version { text-align: center; color: #9a9a9a; font-size: 0.75rem;
                padding: 10px 0 14px; }

/* -------------------------------------------- écran paramètres */

details.section-param {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: 3px;
  margin-bottom: 12px;
}
details.section-param > summary {
  cursor: pointer; list-style: none;
  padding: 13px 18px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
details.section-param > summary::-webkit-details-marker { display: none; }
details.section-param > summary::before {
  content: "▸"; color: var(--acier); font-size: 12px;
}
details.section-param[open] > summary::before { content: "▾"; }
details.section-param[open] > summary {
  border-bottom: 1px solid var(--trait);
}
details.section-param > summary .aide { font-weight: 400; }
details.section-param > form { padding: 4px 18px 16px; border: 0; background: none; }
details.section-param textarea {
  width: 100%; font: inherit; padding: 7px 10px;
  border: 1px solid var(--trait); border-radius: 3px; resize: vertical;
}

/* =====================================================================
   SOCLE D'ERGONOMIE COMMUN  (note du 13/08 — points 8, 9 et 10)
   =====================================================================

   Trois regles, valables sur TOUS les ecrans, sans exception non
   justifiee en commentaire :

     1. l'essentiel est visible sans defiler : en-tete de fiche en haut,
        identite a gauche, piece maitresse (plan, chiffres) a droite ;
     2. les actions frequentes tiennent en un clic : barre d'actions
        dans l'en-tete, filtres au-dessus du tableau ;
     3. le secondaire se replie : onglets de fiche et blocs <details>.

   Zero JavaScript : les onglets sont des liens (?onglet=...), les
   replis sont des <details> natifs. Tout fonctionne sur Safari iOS.
   ===================================================================== */

/* La largeur de l'ecran est une ressource : on s'en sert. 1180 px
   laissait un tiers d'ecran vide sur un 24 pouces et obligeait a
   defiler la ou deux colonnes suffisaient. */
main { max-width: 1500px; }
main.etroit { max-width: 900px; }

/* --- En-tete de fiche : QUI / QUOI, puis la piece maitresse --------- */

.fiche-entete {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.fiche-entete.sans-lateral { grid-template-columns: minmax(0, 1fr); }
.fiche-identite { min-width: 0; }
.fiche-lateral { min-width: 0; }
.fiche-titre {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 2px;
}
.fiche-titre h1 { margin: 0; }
.fiche-entete .chapeau { margin: 4px 0 12px; }

.identite-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
  margin-top: 4px;
}
.identite-grille .champ { min-width: 0; }
.identite-grille .etiq {
  display: block;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--acier); font-weight: 650;
}
.identite-grille .valeur {
  display: block; font-size: 14.5px; margin-top: 2px;
  overflow-wrap: anywhere;
}
.identite-grille .valeur.nombre {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.fiche-entete .barre-actions { margin-top: 14px; }
.fiche-entete .barre-actions .bouton,
.fiche-entete .barre-actions button { margin-top: 0; }

/* Panneau lateral : le plan d'une piece, les chiffres cles d'un devis.
   Il porte ce qu'on veut voir AVANT de lire le reste. */
.lateral-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--acier); font-weight: 650; margin: 0 0 8px;
}
.apercu-plan {
  display: block; width: 100%; height: 210px;
  border: 1px solid var(--trait); border-radius: 3px; background: #fff;
}
.apercu-vignette {
  display: block; width: 100%; max-height: 210px; object-fit: contain;
  border: 1px solid var(--trait); border-radius: 3px; background: #fff;
}
.apercu-absent {
  display: flex; align-items: center; justify-content: center;
  height: 120px; border: 1px dashed var(--trait); border-radius: 3px;
  color: var(--acier); font-size: 13px; text-align: center; padding: 10px;
}

/* --- Onglets de fiche : le secondaire ne s'empile plus ------------- */

nav.onglets-fiche {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 2px solid var(--trait);
  margin: 0 0 16px;
}
nav.onglets-fiche a {
  padding: 9px 15px 10px; margin-bottom: -2px;
  font-size: 13.5px; font-weight: 600; color: var(--acier);
  text-decoration: none;
  border-bottom: 2px solid transparent; border-radius: 3px 3px 0 0;
}
nav.onglets-fiche a:hover { background: rgba(0,0,0,.04); color: var(--encre); }
nav.onglets-fiche a.actif {
  color: var(--encre); border-bottom-color: var(--accent);
  background: var(--surface);
}
nav.onglets-fiche .compte {
  font-family: var(--mono); font-size: 11px; color: var(--acier);
  background: var(--fond); border-radius: 8px; padding: 0 6px; margin-left: 4px;
}

/* --- Colonnes : deux blocs cote a cote plutot qu'un long rouleau --- */

.colonnes {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  align-items: start;
}
.colonnes > * { min-width: 0; }
.colonnes-2 { display: grid; gap: 16px; grid-template-columns: 1fr 1fr;
              align-items: start; }
.colonnes-2 > * { min-width: 0; }

/* Un bloc = un titre, un contenu. Meme forme partout. */
.bloc-fiche { background: var(--surface); border: 1px solid var(--trait);
              border-radius: 3px; margin-bottom: 16px; }
.bloc-fiche > h2 {
  margin: 0; padding: 10px 16px;
  border-bottom: 1px solid var(--trait); background: #F7F8F9;
}
.bloc-fiche > .contenu { padding: 14px 16px; }
.bloc-fiche > .contenu > :first-child { margin-top: 0; }
.bloc-fiche .enveloppe-table { border: 0; border-radius: 0; }
.bloc-fiche > .enveloppe-table { border: 0; }

/* Bloc secondaire replie : sous-traitance, parametres avances, detail
   historique. Present, mais il ne mange pas l'ecran. */
details.bloc-secondaire {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 3px; margin-bottom: 12px;
}
details.bloc-secondaire > summary {
  cursor: pointer; list-style: none; padding: 11px 16px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 650; color: var(--acier);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
details.bloc-secondaire > summary::-webkit-details-marker { display: none; }
details.bloc-secondaire > summary::before { content: "▸"; font-size: 11px; }
details.bloc-secondaire[open] > summary::before { content: "▾"; }
details.bloc-secondaire[open] > summary { border-bottom: 1px solid var(--trait); }
details.bloc-secondaire > .contenu { padding: 14px 16px; }
details.bloc-secondaire > .contenu > :first-child { margin-top: 0; }
details.bloc-secondaire .aide-resume { font-weight: 400; text-transform: none;
                                       letter-spacing: 0; font-size: 12px; }

/* --- Tableau de travail : lire, trier, filtrer comme un tableur ---- */

details.filtres-tableau {
  background: var(--surface); border: 1px solid var(--trait);
  border-radius: 3px; margin: 0 0 12px;
}
details.filtres-tableau > summary {
  cursor: pointer; list-style: none; padding: 9px 14px;
  font-size: 13px; font-weight: 600; color: var(--encre);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
details.filtres-tableau > summary::-webkit-details-marker { display: none; }
details.filtres-tableau > summary::before { content: "▸"; color: var(--acier); font-size: 11px; }
details.filtres-tableau[open] > summary::before { content: "▾"; }
details.filtres-tableau > form { padding: 4px 14px 14px; }
.grille-filtres {
  display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.grille-filtres label { margin: 0 0 3px; }
.grille-filtres input[type=text], .grille-filtres select { padding: 7px 9px; font-size: 14px; }
.grille-filtres .case { display: flex; align-items: center; gap: 7px; margin-top: 20px; }
.grille-filtres .case input { width: auto; }
.grille-filtres .case label { margin: 0; text-transform: none; letter-spacing: 0;
                              font-size: 13.5px; font-weight: 500; color: var(--encre); }
.filtres-pied { display: flex; gap: 8px; align-items: center;
                flex-wrap: wrap; margin-top: 12px; }
.filtres-pied button, .filtres-pied .bouton { margin-top: 0; }
.filtres-actifs { font-size: 12.5px; color: var(--acier); }

/* Un tableau de travail se lit du coin de l'oeil : en-tetes toujours
   visibles, lignes alternees, colonnes numeriques alignees. */
table.tableur thead th {
  position: sticky; top: 0; z-index: 2;
  background: #EFF2F4; box-shadow: inset 0 -1px 0 var(--encre);
}
table.tableur tbody tr:nth-child(even) td { background: #FBFCFC; }
table.tableur tbody tr:hover td { background: #EDF4F5; }
table.tableur td { white-space: nowrap; }
table.tableur td.libre { white-space: normal; }
.enveloppe-table.haute { max-height: var(--dix-lignes); overflow: auto; }

/* La sous-traitance du planning : sa propre molette, bornee.
   Demande du 17/08 — « a la rigueur pouvoir utiliser la roulette pour la
   sous-traitance ». Elle sortait du meme tableau que les machines et
   poussait le Gantt vers le bas : plus il y avait de prestataires, moins
   on voyait l'atelier. Deux questions differentes, deux zones. C'est
   l'exception assumee a la regle 4, et elle est bornee : la zone plafonne
   au lieu de pousser le reste de la page. Sur ecran etroit le plafond se
   releve — deux molettes imbriquees sur un telephone sont penibles. */
.enveloppe-table.sous-traitance { max-height: var(--dix-lignes); overflow: auto; }
.enveloppe-table.sous-traitance thead th { position: sticky; top: 0; z-index: 2; }
@media (max-width: 900px) {
  .enveloppe-table.sous-traitance { max-height: none; }
}

/* --- Longueurs : on saisit en millimetres, on lit en metres -------- */
.mesure { font-family: var(--mono); font-variant-numeric: tabular-nums;
          white-space: nowrap; }
.mesure .brut { color: var(--acier); font-size: 11px; }

/* --- Confirmation d'une suppression : jamais un simple bouton ------ */
.confirmation {
  background: var(--oxyde-cl); border-left: 3px solid var(--oxyde);
  padding: 10px 13px; border-radius: 0 3px 3px 0; margin-top: 10px;
  font-size: 13.5px;
}
.confirmation label { text-transform: none; letter-spacing: 0;
                      font-size: 13.5px; color: var(--encre);
                      display: flex; align-items: flex-start; gap: 8px;
                      margin: 8px 0 0; font-weight: 500; }
.confirmation input[type=checkbox] { width: 18px; height: 18px; margin-top: 1px; }
.confirmation input[type=text] { margin-top: 6px; }

@media (max-width: 900px) {
  .fiche-entete { grid-template-columns: minmax(0, 1fr); }
  .colonnes-2 { grid-template-columns: 1fr; }
}

/* =====================================================================
   RÈGLE 4 — LE CADRE ÉCRAN : on ne fait pas rouler la page
   =====================================================================

   La molette ne doit servir que dans une liste. Sur toute autre page,
   ce qui compte est déjà à l'écran, ou un bouton y mène. Concrètement :

     - la fenêtre est un cadre fixe : bandeau en haut, pied en bas,
       contenu au milieu, et le total fait exactement une hauteur
       d'écran ;
     - dans un écran de travail, la SEULE zone qui roule est le tableau
       lui-même : les en-têtes de colonnes restent visibles, les filtres
       et le titre ne partent pas en haut ;
     - une fiche ne roule pas du tout : ce qui ne tient pas passe dans un
       onglet, un repli, ou un autre écran atteint par un bouton.

   `main` garde `overflow:auto` : c'est un filet, pas une permission.
   Si une page l'utilise, c'est qu'elle est à refaire — jamais qu'on a
   perdu du contenu.
   ===================================================================== */

html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;          /* iPad : la barre d'adresse ne triche plus */
  overflow: hidden;
}

.bandeau, .pied-version { flex: 0 0 auto; }

main {
  flex: 1 1 auto;
  min-height: 0;           /* sans ça, un enfant long repousse le cadre */
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
  padding-top: 14px;
  padding-bottom: 14px;
}
main > * { flex: 0 0 auto; }

/* DIX LIGNES, ET LE TABLEAU DÉFILE AU-DELÀ (11/09).

   « Je ne veux pas que les tableaux affichent plus de 10 lignes, et
   s'il y en a plus alors tu fais défiler le tableau. Cette règle vaut
   pour tous les tableaux de tout type et de toute origine. »

   Correction d'une erreur de la 119 : j'avais supprimé le plafond et
   laissé la PAGE défiler. Avec le temps, aucun tableau ne contiendra
   deux lignes — les commandes, les devis, les ordres s'accumulent — et
   la page serait devenue interminable. C'est le TABLEAU qui défile,
   dans une fenêtre de dix lignes, et la page garde son cadre.

   `max-height` et non `height` : une liste de trois lignes garde ses
   trois lignes, la page s'y adapte toute seule. C'est un plafond, jamais
   un plancher.

   L'en-tête reste collé en haut pendant qu'on défile, sinon on perd le
   nom des colonnes dès la troisième ligne. */
main > .enveloppe-table,
main > .zone-extensible {
  /* `flex-shrink: 0` — LE POINT CRITIQUE (13/09). Avec la valeur 1, le
     cadre écran écrasait encore le tableau : sur la liste des commandes
     d'achat il tombait à trois lignes, et sur celle des demandes de prix
     — qui porte un bloc de création plus haut — il était réduit à RIEN,
     les consultations semblaient effacées alors qu'elles étaient toutes
     en base. C'est la même vieille cause qu'en 117 : le tableau reçoit
     « la place qui reste ». Il ne rétrécit plus. `max-height` seul borne
     la fenêtre à dix lignes, et le tableau y défile. */
  flex: 0 0 auto;
  min-height: 0;
  max-height: var(--dix-lignes);
  overflow: auto;
}
/* L'en-tete se colle au haut de la zone qui defile — `main`, desormais. */
main > .enveloppe-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--marine-cl); box-shadow: inset 0 -1px 0 var(--encre);
}
main > .enveloppe-table.haute { max-height: var(--dix-lignes); }

/* Bandeau compact : chaque pixel repris en haut est un pixel de travail.
   La recherche et « + Nouveau » rejoignent la ligne du titre au lieu de
   coûter une rangée à elles seules. */
.bandeau-haut { align-items: center; padding: 7px 20px; gap: 12px; }
.bandeau-outils { padding: 0; flex: 1 1 300px; align-items: center; }
.bandeau-outils .recherche-globale input { padding: 6px 9px; font-size: 13px; }
.bandeau-outils .recherche-globale button,
.menu-nouveau > summary { padding: 6px 12px; font-size: 13px; }
nav.flux { padding: 3px 10px 0; }
nav.flux a { padding: 5px 13px 6px; font-size: 13px; }
nav.onglets { padding: 1px 14px 0; }
nav.onglets a { padding: 6px 12px 8px; font-size: 13px; }
.pied-version { padding: 3px 0 5px; font-size: .68rem; }

/* À l'impression, le cadre n'a plus de sens : la page redevient un rouleau. */
@media print {
  body { display: block; height: auto; overflow: visible; }
  main { display: block; overflow: visible; }
  /* Sur papier, une molette n'a aucun sens : le plafond saute, sinon on
     imprimerait dix lignes sur trente. */
  main > .enveloppe-table, .enveloppe-table {
    max-height: none !important; overflow: visible !important; }
  .bandeau, .pied-version, .retour { display: none; }
}

/* Apercu d'un fichier : il prend la hauteur restante et roule chez lui,
   jamais la page. */
.zone-extensible { overflow: auto; }
.apercu-texte { margin: 0; font-size: 11.5px; }

/* Petites classes nees du passage des fiches en onglets : elles
   remplacent des styles poses en dur dans les modeles, que la regle 4
   interdit desormais. */
.lateral-etats { margin-top: 8px; }
.fiche-lateral .aide { margin: 8px 0 0; }
.fiche-lateral .exigence { margin-top: 10px; }
.rappel-lignes { margin: 0 0 10px; font-size: 13.5px; }
.texte-alerte { color: var(--oxyde); }
tr.ligne-alerte td { background: var(--oxyde-cl); }

/* Le fil de l'affaire, juste sous l'en-tete de fiche : son bandeau
   repete le numero, le client et l'avancement, qui sont deja dans
   l'en-tete. On garde les etapes — c'est la navigation — et on rend la
   redondance a la hauteur d'ecran. */
.fiche-entete + .fil > .fil-tete { display: none; }
.fiche-entete + .fil { margin-bottom: 12px; }
.fiche-entete + .fil .fil-etape { padding: 8px 12px 10px; }
.valeur-gain { color: var(--vert); }
.valeur-perte { color: var(--oxyde); }
.message-ambre { border-left-color: var(--ambre); background: #FBF3E2; }
.maillon { display: inline-block; margin: 3px 0; }
.maillon-fleche { color: var(--acier); }
.actions-ligne { white-space: nowrap; }
.form-en-ligne { margin: 0; display: inline-block; }
.champ-court { max-width: 200px; }
.discret { color: var(--acier); font-size: 12.5px; }
.parcours { font-size: 11.5px; }
.sous-titre { font-size: 14px; margin: 16px 0 4px; }
.carte.pilotage { margin-bottom: 12px; border-left: 3px solid var(--trait); }
.pilotage-critique, .pilotage-surcharge { border-left-color: var(--oxyde); }
.pilotage-vigilance { border-left-color: var(--ambre); }
.pilotage-tete { display: flex; justify-content: space-between;
                 align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pilotage-prix { margin: 8px 0 0; font-size: 13.5px; }
.carte.pilotage .aide { margin: 4px 0 0; }
.lecture-vue { margin: 0 0 10px; }
.plans-atelier { margin-top: 12px; padding: 10px 14px; }

/* =====================================================================
   DÉROGATION RÈGLE 4 — les écrans de PARAMÉTRAGE (note du 17/08)
   =====================================================================
   La règle générale reste : on ne fait pas rouler la page. Un écran de
   TRAVAIL QUOTIDIEN tient dans sa hauteur, et la molette ne sert que
   dans sa liste.

   Les écrans de PARAMÉTRAGE sont l'exception écrite. Ils ne se
   consultent pas d'un coup d'œil : on les lit et on les remplit de haut
   en bas, une fois de temps en temps. Les comprimer dans une hauteur
   d'écran ne les rendait pas plus lisibles — seulement plus étroits, et
   la molette agissait dans un cadre interne au lieu de la page.

   Portent la classe `page-deroulante` :
     configuration  la check-liste de mise en route (douze étapes)
     parametres     la liste complète des réglages
     atelier        postes, machines et un formulaire par machine
     operateurs     une fiche de compétences par personne
     textes         mentions et textes types, longs pavés à relire
     utilisateurs   un formulaire par compte
     fermetures     le calendrier des fermetures et sa saisie

   Ce n'est PAS une échappatoire pour un écran simplement trop chargé :
   dans ce cas la réponse reste des onglets. Toute nouvelle dérogation
   s'ajoute à cette liste, avec sa raison, et à ERGONOMIE.md. */
body.page-deroulante { display: block; height: auto; overflow: auto; }
body.page-deroulante main { display: block; overflow: visible; height: auto; }
body.page-deroulante main > .enveloppe-table { max-height: none; overflow: visible; }
body.page-deroulante main > .enveloppe-table thead th { position: static; box-shadow: none; }

/* Largeur : réservée aux écrans qui ont vraiment besoin de s'étaler — la
   check-liste de configuration, dont la zone des étapes gagne ~×2,5. On ne
   l'applique pas partout : un pavé de texte étalé sur 1900 px devient
   pénible à lire, la ligne est trop longue pour l'œil. */
body.page-large main { max-width: none; padding-left: 28px; padding-right: 28px; }
.config-deux-colonnes { display: flex; gap: 22px; align-items: flex-start; }
.config-deux-colonnes .config-etapes { flex: 1 1 auto; min-width: 0; }
.config-deux-colonnes .config-ordre { flex: 0 0 300px; }
.config-etapes table { width: 100%; }
.config-etapes td { font-size: 14px; }
@media (max-width: 1100px) {
  .config-deux-colonnes { display: block; }
  .config-deux-colonnes .config-ordre { margin-top: 18px; }
}

/* =====================================================================
   LES LISTES DE SUIVI DANS LES FICHES (note du 17/08)
   =====================================================================
   Sur une fiche commande, les blocs OF, bons de livraison et factures
   s'étalaient sur toute leur longueur : vingt-cinq OF poussaient tout le
   reste de la page hors de vue, et il fallait faire défiler longtemps
   pour retrouver ce qui suit.

   Le cadre écran ne les couvrait pas : `main > .enveloppe-table` ne vise
   que les enfants DIRECTS de <main>, et ces tableaux-là vivent à
   l'intérieur d'un onglet de fiche.

   La réponse retenue : ne rien cacher — tout reste présent et cherchable
   par le navigateur — mais donner à la liste sa propre molette. Elle
   occupe une place fixe, avec son en-tête de colonnes qui reste visible
   pendant qu'on défile dedans.

   Le plafond ne s'applique qu'au-delà : une liste de trois lignes garde
   exactement la hauteur de ses trois lignes. */
.enveloppe-table {
  /* MEME REGLE, MEME VALEUR (11/09). Les listes logees dans une fiche
     plafonnaient a 46vh — huit lignes sur un portable, quatorze sur un
     grand ecran. Deux tableaux cote a cote n'avaient donc pas la meme
     hauteur selon la machine. Dix lignes partout, exprimees en lignes :
     « tous les tableaux de tout type et de toute origine ». */
  max-height: var(--dix-lignes);
  overflow: auto;
}
.enveloppe-table > table > thead th,
.enveloppe-table > table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #EFF2F4; box-shadow: inset 0 -1px 0 var(--encre);
}
/* Une liste qui mérite plus de place : les lignes d'un document en cours
   de saisie, qu'on relit en entier avant de valider. */
/* La seule exception ecrite : les lignes d'un document en cours de
   saisie, qu'on relit EN ENTIER avant de valider. Quinze lignes. */
.enveloppe-table.ample { max-height: calc(var(--dix-lignes) * 1.5); }
/* Et celle qu'on ne borne pas du tout, quand le tableau EST la page. */
.enveloppe-table.sans-plafond { max-height: none; overflow: visible; }

/* Le cadre écran garde la priorité : quand le tableau est l'objet même de
   la page, il prend toujours la hauteur restante, ni plus ni moins. */
main > .enveloppe-table,
main > .zone-extensible { max-height: var(--dix-lignes); }

/* Sur un écran de paramétrage qui défile, même logique : les longues
   listes imbriquées gardent leur molette, sinon la page redevient
   interminable. Seul le tableau principal suit la page. */
/* Meme sur un ecran de parametrage qui defile, un tableau garde sa
   fenetre de dix lignes : c'est la regle, sans exception d'origine. */
body.page-deroulante main > .enveloppe-table {
  max-height: var(--dix-lignes); overflow: auto; }

/* Écran étroit : le plafond se relâche, il n'y a plus de place à gagner
   et deux molettes imbriquées sur un téléphone sont pénibles. */
/* Sur un ecran etroit la ligne est plus haute (le texte passe a la
   ligne) : le plafond suit, pour rester a dix lignes et non a six. */
@media (max-width: 760px) {
  .enveloppe-table, .enveloppe-table.ample {
    max-height: calc(var(--dix-lignes) * 1.35); }
}

/* =====================================================================
   LE GANTT — 17/08 au soir

   Les styles vivaient en clair dans le gabarit : chaque cellule portait
   sa recopie, et une semaine de sept machines faisait naitre soixante
   fois la meme declaration dans le HTML envoye au telephone. Ils sont
   ici, ecrits une fois. La page qui en sort est deux a trois fois plus
   legere, pour un rendu identique — et le style se corrige a un seul
   endroit, ce qui etait la vraie raison.
   ===================================================================== */
.gantt { border-collapse: separate; border-spacing: 2px; table-layout: fixed;
         width: 100%; }
.gantt th.jour { text-align: center; font-size: 14px; padding: 9px 4px;
                 border-radius: 5px; line-height: 1.35; font-weight: 600;
                 background: var(--papier-fonce, #f2efe9); }
.gantt th.jour.aujourdhui { background: var(--vert); color: #fff; font-weight: 700; }
.gantt th.jour.ferme { background: #e8e4dc; color: var(--acier); }
.gantt th.jour em { font-weight: 400; font-style: normal; display: block; }

.gantt th.bande { text-align: left; padding: 12px 10px 6px 0;
                  vertical-align: top; border-top: 1px dashed var(--trait, #d8d2c6); }
.gantt th.bande.machine { padding-top: 14px; border-top: 2px solid var(--trait, #d8d2c6); }
.gantt th.bande.premiere { border-top: 0; padding-top: 6px; vertical-align: middle; }
.gantt th.bande .aide { margin: 2px 0 0; }
.gantt a.deplier { display: inline-block; margin-top: 3px; font-size: 12px;
                   text-decoration: none; border: 1px solid var(--trait, #d8d2c6);
                   border-radius: 4px; padding: 1px 8px; color: var(--acier);
                   background: var(--papier-fonce, #f2efe9); }
.gantt a.deplier:hover { color: var(--encre); }

.gantt td.cel { border-radius: 4px; text-align: center; vertical-align: middle;
                font-size: 12px; font-weight: 600; height: 22px; }
.gantt td.cel.haute { height: 30px; font-size: 13px; font-weight: 700; }
.gantt td.cel.moyenne { height: 24px; }
.gantt td.c-hors { background: #e8e4dc; }
.gantt td.c-sature { background: #c0392b; color: #fff; }
.gantt td.c-tendu { background: #e6a23c; color: #fff; }
.gantt td.c-libre { background: #dde5d3; color: #3a4030; }

.gantt td.bloc { padding: 0; }
.gantt a.ordre { display: block; padding: 7px 10px; border-radius: 6px;
                 margin: 2px 0; font-size: 13px; line-height: 1.4; color: #fff;
                 text-decoration: none; overflow: hidden; background: #4a6fa5; }
.gantt a.ordre.mince { padding: 4px 9px; border-radius: 5px; font-size: 12px;
                       line-height: 1.35; white-space: nowrap;
                       text-overflow: ellipsis; background: #5b7fb5; }
/* Remplaces plus bas : l'etat passe en lisere, le fond revient a la
   personne. Conserves ici comme repli si aucune couleur n'est reglee. */
.gantt a.ordre.retard { background: #a8503f; }
.gantt a.ordre.encours { background: #3f7a4a; }
.gantt a.ordre.vise { outline: 3px solid var(--encre); }
.gantt a.ordre b, .gantt a.ordre span.l { display: block; white-space: nowrap;
                                          overflow: hidden; text-overflow: ellipsis; }
.gantt a.ordre span.l { opacity: .95; }
.gantt a.ordre em { background: rgba(255, 255, 255, .22); border-radius: 4px;
                    padding: 1px 7px; font-weight: 600; font-style: normal; }
.gantt a.ordre.st { color: #4a3800; background: #efe0ae; border: 1px dashed #b89a2e; }
.gantt a.ordre.st.parti { background: #e6c04a; border: 0; }

/* Le tri par personne et le repli : des liens, pas des widgets. */
.filtres-gantt { display: flex; align-items: baseline; gap: 6px;
                 flex-wrap: wrap; margin: 0 0 8px; }
.filtres-gantt .aide { margin: 0; }

/* --- Codes couleur du planning (17/08 au soir) ------------------------
   « Reconnaitre qui fait quoi et ou. » Trois questions, trois signes :
   le FOND du bloc dit la personne, la PASTILLE dit la machine, le LISERE
   dit l'etat. En fondre deux dans une seule couleur revient a n'en
   montrer aucune — c'est pour cela que l'etat a quitte le fond, ou il
   empechait la personne de s'y mettre. */
.pastille-machine { display: inline-block; width: 10px; height: 10px;
                    border-radius: 3px; margin-right: 5px;
                    border: 1px solid rgba(0, 0, 0, .25);
                    vertical-align: baseline; }
.etiquette-couleur { display: inline-block; padding: 1px 8px; border-radius: 4px;
                     color: #fff; font-weight: 600; }
.gantt a.ordre.retard { border-left: 6px solid #c0392b; }
.gantt a.ordre.encours { border-left: 6px solid #2e7d32; }

/* La demi-journee (17/08 au soir) : deux colonnes par jour, donc des
   colonnes deux fois plus etroites — la largeur totale ne bouge pas, et
   le planning ne demande pas plus de defilement qu'avant. */
.gantt th.demi { text-align: center; font-size: 11px; padding: 2px 0;
                 font-weight: 500; color: var(--acier);
                 background: var(--papier-fonce, #f2efe9); border-radius: 3px; }
.gantt th.demi.ferme { background: #e8e4dc; }
.gantt td.cel { font-size: 11px; }
.gantt td.cel.haute { font-size: 12px; }

/* =====================================================================
   PLANNING : DES CADRES PLUS GRANDS, UNE POLICE INCHANGÉE
   ---------------------------------------------------------------------
   Correction du 21/08. La version précédente grossissait le TEXTE, et
   c'était le mauvais levier — deux fois dit, deux fois ignoré :

     « Ce n'est pas la grosseur du texte qui gêne, c'est qu'on n'a pas
       assez d'infos dans le cadre. Sinon une police plus grosse ne sert
       à rien. »
     « La police doit être la même que sur les autres pages. »

   Une police plus grande dans un cadre inchangé RETIRE de l'information :
   elle coûte des caractères par ligne et des lignes par bloc. C'est
   l'inverse exact du but.

   La police revient donc à celle du reste de l'application, partout. Seuls
   grandissent les CADRES : hauteur des bandes, hauteur des blocs d'ordre,
   place rendue aux zones repliables. Le curseur `planning_echelle_pct` ne
   pilote plus que cela.
   ===================================================================== */
body.planning-grand { --pl: 3; }

/* Les blocs d'ordre : ils portent déjà l'OF, la pièce, la quantité, la
   machine, les temps, la personne et le client. Tout était coupé à
   l'ellipse dans une cellule d'une demi-journée. On laisse le texte
   s'écrire sur plusieurs lignes et le bloc prendre la hauteur qu'il faut :
   c'est CELA qui met l'information dans le cadre. */
body.planning-grand .gantt a.ordre b,
body.planning-grand .gantt a.ordre span.l {
  white-space: normal; overflow: visible; text-overflow: clip; }
body.planning-grand .gantt a.ordre { padding: 9px 11px; margin: 3px 0; }

/* Les bandes et les réglettes de charge : plus hautes, pour que quatre
   lignes de travail tiennent sous une même bande sans se toucher. */
body.planning-grand .gantt td.cel { height: calc(22px * var(--pl) / 1.6); }
body.planning-grand .gantt td.cel.haute { height: calc(30px * var(--pl) / 1.6); }
body.planning-grand .gantt td.cel.moyenne { height: calc(24px * var(--pl) / 1.6); }
body.planning-grand .gantt th.bande { padding: 14px 12px 10px 0; }

/* ---------------------------------------------------------------------
   LE PLANNING DÉFILE. C'ÉTAIT ÇA, LE VRAI COUPABLE.
   ---------------------------------------------------------------------
   Capture du 21/08 : le Gantt tenait dans 130 px de haut. Aucune échelle
   n'y pouvait rien, et voici pourquoi.

   L'application suit la règle 4 : l'écran ne roule pas, seule une zone
   roule. Le corps est verrouillé à 100vh, <main> est une colonne flex, et
   chaque `enveloppe-table` enfant direct prend `flex: 1 1 auto` avec un
   plancher de 140 px.

   Or la page Planning en contient DEUX — le Gantt et la sous-traitance —
   plus un titre, des onglets, des filtres et une longue légende, tous à
   hauteur fixe. Les deux tableaux se partageaient donc les miettes :
   140 px chacun. Le « gain de place » ne gagnait rien du tout, il rendait
   les deux cadres illisibles.

   La règle 4 vaut pour une liste, pas pour un Gantt. Sur cette page, et
   sur elle seule, la page redevient un rouleau : chaque cadre prend la
   hauteur de son contenu, on lit Alexis ET Christian ET les machines, et
   c'est la molette qui parcourt le reste. C'est le choix demandé dès le
   20/08 — un tableau plus grand qu'il faut faire défiler vaut mieux qu'un
   tableau compact qu'on ne lit pas.
   --------------------------------------------------------------------- */
body.planning-grand { display: block; height: auto; overflow: auto; }
body.planning-grand main {
  display: block; overflow: visible; height: auto; min-height: 0; }
/* « Tous les tableaux de tout type et de toute origine » : le Gantt
   aussi (11/09). Il echappait au plafond depuis la 21/08 ; il rentre
   dans le rang, avec sa fenetre de dix lignes et sa propre molette. La
   raison d'alors — deux tableaux qui se partageaient 140 px — n'existe
   plus : le plafond ne prend plus la place, il la borne. */
body.planning-grand main > .enveloppe-table,
body.planning-grand main > .zone-extensible {
  max-height: var(--dix-lignes); overflow: auto;
  min-height: 0; flex: 0 0 auto; }
/* La sous-traitance vit dans un bloc, donc hors du sélecteur ci-dessus :
   elle plafonnait à 34vh et n'en utilisait qu'une fraction. Même cadre
   que le Gantt, comme demandé — « le cadre sous-traitance doit être
   identique ». */
body.planning-grand .enveloppe-table.sous-traitance,
body.planning-grand .enveloppe-table.haute,
body.planning-grand .enveloppe-table.ample,
body.planning-grand .enveloppe-table {
  max-height: var(--dix-lignes); overflow: auto; }
/* Les en-têtes de colonnes restent visibles pendant qu'on descend : sans
   cela, à mi-parcours on ne sait plus quel jour on regarde. */
body.planning-grand .gantt thead th { position: sticky; top: 0; z-index: 3; }

/* ---------------------------------------------------------------------
   AVANCE ET RETARD (note du 20/08, point 11)
   Un ordre terminé avant l'heure a libéré de la capacité. Ça se voit au
   premier regard, ou ça ne sert à rien.
   --------------------------------------------------------------------- */
.avance { background: #dde5d3; color: #2e5c33; border: 1px solid #b7c9a8; }
.retard-constate { background: #f6dcd6; color: #8c3423; border: 1px solid #dfae9f; }

/* Le calcul de capacité, dépliable (note du 20/08, points 2 et 18). */
.calcul-capacite { font-weight: 400; margin-top: 4px; }
.calcul-capacite summary { cursor: pointer; font-size: 11.5px;
                           color: var(--acier); text-align: right; }
.calcul-capacite > div { border: 1px solid var(--trait); border-radius: 3px;
                         padding: 8px 10px; margin-top: 5px;
                         background: var(--papier-fonce, #f2efe9); }
.calcul-capacite p { margin: 3px 0; }

/* --- Une ligne qui ne produit pas ---------------------------------
   Un jour ferme reste visible : le masquer cacherait justement
   l'information qui explique un total plus faible qu'attendu. */
.tableur tr.attenue td { opacity: .55; }

/* --- La ligne qu'on est en train de modifier ----------------------
   Le formulaire de modification est en bas de page : sans repere, on
   ne sait plus quelle ligne on edite. */
.tableur tr.surligne td { background: var(--papier-fonce, #f2efe9);
                          box-shadow: inset 3px 0 0 var(--acier, #4A5568); }

/* --- Le code d'un tiers, en second (note du 24/08, point 1) --------
   D03 reste utile : il figure sur les documents, il se cherche, il
   fait le lien avec EBP. Mais il n'est plus ce qu'on lit en premier.
   Assez lisible pour servir, assez discret pour ne pas s'imposer. */
.tiers-code { font-family: var(--mono, ui-monospace, monospace);
              font-size: 11px; color: var(--acier, #4A5568);
              opacity: .7; white-space: nowrap; }
td .tiers-code, th .tiers-code { display: inline-block; margin-left: 4px; }


/* Liste de selection longue (series d'une operation commune, schema 85) :
   la seule zone de l'application qui defile a l'interieur d'un bloc. Elle
   le fait ici, dans le cadre commun, et non dans un modele — sans quoi
   chaque ecran finirait par inventer son propre rouleau. */
.liste-choix {
  max-height: 18rem;
  overflow-y: auto;
}

/* ------------------------------------------- couche d'ergonomie (118)

   Styles au service de app/static/erp.js. Ils ne s'appliquent qu'a des
   elements que le script cree : sans lui, rien de tout ceci n'existe et
   la page garde son aspect d'avant. */

.filtre-liste {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px;
}
.filtre-liste input {
  margin: 0; max-width: 260px; padding: 6px 10px;
  font-size: 13.5px;
}
.filtre-compte { color: var(--acier); font-size: 12.5px; }

.bouton-crayon {
  margin-top: 0 !important;
  padding: 3px 9px !important; font-size: 12px !important;
  margin-right: 5px;
}

/* La ligne en cours de correction se distingue : sans reperе visuel, on
   corrige la ligne d'a cote. */
tr.ligne-en-edition > td { background: var(--marine-cl); }
tr.rangee-edition > td {
  background: var(--marine-cl);
  border-left: 3px solid var(--marine);
  padding: 12px 14px 14px;
}
tr.rangee-edition form { margin: 0; }
tr.rangee-edition label { margin-top: 8px; }

.apercu-prix { margin-top: 4px; min-height: 1em; }

button.en-cours { opacity: .55; cursor: default; }

.flash.efface, .message.efface {
  opacity: 0;
  transition: opacity .35s ease;
}