/* ------------------------------------------------------------------
   GEST-CO — LA COQUE
   Rail sombre, bandeau, cockpit, commandes.

   Cette feuille suit la maquette « INTERFACE GEST-CO.png » remise le
   08/09/2026 : rail vert profond, bandeau blanc, bandeau d'accueil, cinq
   indicateurs à pastille, ruban en chevrons, trois cartes de bas de page.
   Les teintes, les dégradés et les proportions en sont repris ; rien n'a été
   « amélioré » au passage.

   Les écrans repris des deux chantiers gardent leur feuille (`gescom.css`) ;
   le domaine tarifaire garde la sienne (`tarifs.css`). Trois fichiers, trois
   responsabilités, aucune règle qui déteint sur le voisin.
   ------------------------------------------------------------------ */

:root {
  --rail-fond: #0d4d2f;
  --rail-fond-haut: #0a3f26;
  --rail-actif: #12693f;
  --rail-texte: #d8e8de;
  --rail-texte-doux: #90b8a2;
  --hero-fond: #eaf5ee;
}

/* ---------------------------- Connexion --------------------------- */

.connexion {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background:
    radial-gradient(1100px 520px at 50% -12%, var(--vert-clair), transparent 68%),
    var(--fond);
}
.carte-connexion {
  width: 100%; max-width: 400px; background: var(--papier);
  border: 1px solid var(--filet); border-radius: 18px; box-shadow: var(--ombre);
  padding: 38px 34px 26px; display: flex; flex-direction: column;
}
.logo-connexion { width: 128px; align-self: center; margin-bottom: 20px; }
.carte-connexion h1 {
  font-size: 22px; text-align: center; letter-spacing: .06em; font-weight: 700;
  color: var(--vert-fonce);
}
.carte-connexion .sous-titre {
  text-align: center; color: var(--encre-doux); margin: 6px 0 26px; font-size: 12.5px;
}
.carte-connexion label {
  font-size: 11.5px; font-weight: 600; color: var(--encre-doux); margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .04em;
}
.carte-connexion input, .carte-connexion select {
  font: inherit; padding: 11px 13px; margin-bottom: 16px;
  border: 1px solid var(--filet); border-radius: 9px; background: var(--papier);
}
.carte-connexion input:focus, .carte-connexion select:focus {
  outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-clair);
}
.mention {
  text-align: center; font-size: 11px; color: var(--encre-doux);
  margin: 16px 0 0; line-height: 1.6;
}
.erreur { color: var(--rouge); font-size: 13px; margin: 0 0 12px; }

/* ------------------------ Ossature et rail ------------------------ */

/* L'application ne colle pas aux bords de l'écran : elle occupe environ 90 %
   de la page, centrée, avec de l'air tout autour. Sur un grand écran, une
   largeur illimitée étire les tableaux jusqu'à les rendre illisibles — d'où le
   plafond. Sur un portable, les marges se réduisent d'elles-mêmes. */
body {
  padding: 2.2vh 2.5vw;
  background:
    radial-gradient(1200px 600px at 50% -5%, #eef6f1, transparent 70%),
    var(--fond);
}

.appli {
  display: flex;
  width: 100%;
  max-width: 1560px;
  min-height: 95vh;
  margin: 0 auto;
  background: var(--papier);
  border: 1px solid var(--filet);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(23, 32, 27, .04), 0 18px 60px rgba(23, 32, 27, .07);
}

.rail {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--rail-fond); color: var(--rail-texte);
  display: flex; flex-direction: column;
  position: sticky; top: 0; align-self: flex-start; height: 95vh;
  transition: width .18s ease, flex-basis .18s ease;
}
.rail.reduit { width: var(--sidebar-reduite); flex-basis: var(--sidebar-reduite); }

.rail-tete {
  padding: 16px 16px 14px; text-align: center; background: var(--rail-fond-haut);
}
.rail-tete img { width: 104px; max-width: 100%; }
.rail.reduit .rail-tete { padding: 14px 6px; }
.rail.reduit .rail-tete img { width: 40px; }

.rail-titre { padding: 14px 18px 10px; }
.rail-titre strong {
  display: block; font-size: 19px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.rail-titre span {
  display: block; font-size: 12.5px; color: var(--rail-texte-doux);
  margin-top: 4px; line-height: 1.45;
}
.rail.reduit .rail-titre { display: none; }

.rail nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.rail-groupe {
  margin: 14px 12px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em;
  color: var(--rail-texte-doux); text-transform: uppercase;
}
.rail.reduit .rail-groupe { font-size: 0; margin: 12px 0 6px; }
.rail.reduit .rail-groupe::after {
  content: ""; display: block; height: 1px; background: rgba(255, 255, 255, .12);
  margin: 0 8px;
}

.lien-rail {
  display: flex; align-items: center; gap: 12px; width: 100%; background: none;
  border: 0; text-align: left; padding: 9px 13px; border-radius: 10px;
  color: var(--rail-texte); font-size: 13.5px; font-weight: 500; margin-bottom: 2px;
  white-space: nowrap; overflow: hidden;
}
.lien-rail .glyphe {
  flex: 0 0 20px; text-align: center; font-size: 15px; opacity: .85; line-height: 1;
}
.lien-rail:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lien-rail.actif { background: var(--rail-actif); color: #fff; font-weight: 600; }
.lien-rail.actif .glyphe { opacity: 1; }
.lien-rail .pastille-nav {
  margin-left: auto; font-size: 10.5px; font-weight: 700; padding: 1px 7px;
  border-radius: 20px; background: rgba(255, 255, 255, .16); color: #fff;
}
.lien-rail .pastille-nav.alerte { background: var(--rouge); color: #fff; }
.rail.reduit .lien-rail { justify-content: center; padding: 11px 0; }
.rail.reduit .lien-rail .libelle,
.rail.reduit .lien-rail .pastille-nav { display: none; }

.rail-pied { border-top: 1px solid rgba(255, 255, 255, .12); padding: 14px 12px; }
.carte-utilisateur {
  display: flex; align-items: center; gap: 11px; width: 100%; background: none;
  border: 0; padding: 6px; border-radius: 10px; text-align: left; color: inherit;
}
.carte-utilisateur:hover { background: rgba(255, 255, 255, .07); }
.jeton-initiales {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.carte-utilisateur .qui { min-width: 0; }
.carte-utilisateur .qui strong { display: block; font-size: 12.5px; color: #fff; }
.carte-utilisateur .qui span {
  font-size: 10.5px; color: var(--rail-texte-doux); display: block; line-height: 1.35;
}
.carte-utilisateur .qui .en-ligne { color: #6ee7a8; }
.carte-utilisateur .qui .en-ligne::before {
  content: "\25CF"; font-size: 8px; margin-right: 4px; vertical-align: 1px;
}
.rail.reduit .carte-utilisateur .qui { display: none; }
.rail.reduit .carte-utilisateur { justify-content: center; }

.bouton-reduire, .bouton-deconnexion-rail {
  width: 100%; background: none; border: 0; color: var(--rail-texte-doux);
  padding: 9px; border-radius: 9px; font-size: 12.5px; margin-top: 4px;
  display: flex; align-items: center; gap: 12px;
}
.bouton-reduire:hover, .bouton-deconnexion-rail:hover {
  background: rgba(255, 255, 255, .07); color: #fff;
}
.bouton-reduire .glyphe, .bouton-deconnexion-rail .glyphe {
  flex: 0 0 20px; text-align: center;
}
.rail.reduit .bouton-reduire span:not(.glyphe),
.rail.reduit .bouton-deconnexion-rail span:not(.glyphe) { display: none; }
.rail.reduit .bouton-reduire, .rail.reduit .bouton-deconnexion-rail { justify-content: center; }

/* ---------------------------- Bandeau ----------------------------- */

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.bandeau {
  display: flex; align-items: center; gap: 14px; padding: 12px 24px;
  background: var(--papier); border-bottom: 1px solid var(--filet);
  position: sticky; top: 0; z-index: 20;
}
.bandeau-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.bouton-rail-mobile { display: none; }

.horodateur {
  display: flex; align-items: center; gap: 16px; font-size: 12.5px;
  color: var(--encre-doux); white-space: nowrap;
  border-left: 1px solid var(--filet); padding-left: 16px;
}
.horodateur span { display: inline-flex; align-items: center; gap: 6px; }
.horodateur .glyphe { color: var(--vert); }

/* ------------------------ Recherche globale ----------------------- */

.recherche-globale { position: relative; flex: 1; max-width: 520px; }
.recherche-globale input {
  font: inherit; font-size: 13.5px; padding: 11px 16px 11px 40px; width: 100%;
  border: 1px solid var(--filet); border-radius: 999px; background: var(--fond);
}
.recherche-globale input:focus {
  outline: none; border-color: var(--vert); background: var(--papier);
  box-shadow: 0 0 0 3px var(--vert-clair);
}
.recherche-globale .loupe {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--encre-tres-doux); font-size: 14px; pointer-events: none;
}
.resultats-recherche {
  position: absolute; top: calc(100% + 8px); left: 0; width: 100%; z-index: 40;
  background: var(--papier); border: 1px solid var(--filet); border-radius: 14px;
  box-shadow: var(--ombre-forte); max-height: 62vh; overflow-y: auto; padding: 6px;
}
.resultats-recherche .rubrique {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-tres-doux); padding: 10px 12px 4px;
}
.resultats-recherche button {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 8px 12px; border-radius: 8px; font-size: 13px;
}
.resultats-recherche button:hover { background: var(--vert-clair); }
.resultats-recherche button span {
  display: block; font-size: 11.5px; color: var(--encre-doux); margin-top: 1px;
}
.resultats-recherche .rien { padding: 16px 12px; font-size: 12.5px; color: var(--encre-doux); }

.bouton-icone {
  position: relative; width: 38px; height: 38px; border-radius: 50%;
  border: 0; background: var(--vert-clair); color: var(--vert-fonce);
  display: grid; place-items: center; font-size: 16px;
}
.bouton-icone:hover { background: var(--vert-filet); }
.bouton-icone .compteur-alertes {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  border-radius: 999px; background: var(--rouge); color: #fff; font-size: 10px;
  font-weight: 700; display: grid; place-items: center; padding: 0 4px;
  border: 2px solid var(--papier);
}

.vue { padding: 22px 24px 34px; }

/* ------------------------ Bandeau d'accueil ----------------------- */

.hero {
  display: grid; grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.15fr);
  gap: 20px; align-items: center; margin-bottom: 22px;
}
.hero h2 { font-size: 25px; letter-spacing: -.03em; color: var(--vert-fonce); }
.hero p { margin: 6px 0 0; color: var(--encre-doux); font-size: 13.5px; }

/* La photo de la maquette, deposee par le DAF le 08/09/2026.
   Elle remplace le degrade et le slogan composes au clavier : le meme message
   — « Together for a healthier tomorrow » — y est deja ecrit a la main, et
   les quatre animaux disent le metier mieux que quatre pastilles.

   ELLE RESTE UNE BANDE, PAS UNE PAGE. Consigne expresse : reduite jusqu'a ce
   qu'elle tienne dans l'accueil. Son rapport 846x126 la plafonne a une
   centaine de pixels de haut a la largeur usuelle — soit moins que le bandeau
   qu'elle remplace. Rien d'autre ne bouge : ni les teintes, ni le degrade de
   la page, ni la grille. */
.hero-image {
  display: block; width: 100%; height: auto;
  aspect-ratio: 846 / 126; object-fit: cover; object-position: center right;
  border-radius: 16px; background: var(--hero-fond);
}

/* ---------------------- Les cinq indicateurs ---------------------- */

.grille-cockpit {
  display: grid; gap: 16px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.tuile {
  background: var(--papier); border: 1px solid var(--filet); border-radius: 14px;
  padding: 15px 16px; text-align: left; display: flex; align-items: flex-start; gap: 14px;
  transition: border-color .14s, transform .14s, box-shadow .14s;
}
button.tuile:hover {
  border-color: var(--vert); transform: translateY(-2px); box-shadow: var(--ombre);
}
.tuile .pastille-icone {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px;
  background: var(--vert-clair); color: var(--vert-fonce);
  display: grid; place-items: center; font-size: 19px;
}
.tuile.attention .pastille-icone { background: var(--orange-clair); color: var(--orange); }
.tuile.alerte .pastille-icone { background: var(--rouge-clair); color: var(--rouge); }
.tuile .corps { min-width: 0; }
.tuile .intitule { font-size: 13px; font-weight: 600; color: var(--encre); }
.tuile .chiffre {
  display: block; font-size: 25px; font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.tuile.alerte .chiffre { color: var(--rouge); }
.tuile.attention .chiffre { color: var(--orange); }
.tuile .appoint { font-size: 11px; color: var(--encre-tres-doux); display: block; }
.tuile .tendance { font-size: 11.5px; font-weight: 700; }
.tuile .tendance.hausse { color: var(--vert); }
.tuile .tendance.baisse { color: var(--rouge); }

/* --------------------------- Grilles ------------------------------ */

.grille-analyse {
  display: grid; gap: 18px; grid-template-columns: 1.85fr 1fr; margin-bottom: 20px;
}
.grille-bas { display: grid; gap: 18px; grid-template-columns: 1fr 1fr 1.25fr; }
.grille-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
@media (max-width: 1240px) {
  .grille-analyse, .grille-bas { grid-template-columns: 1fr; }
}

.carte-cockpit {
  background: var(--papier); border: 1px solid var(--filet); border-radius: 14px;
  padding: 17px 19px;
}
.tete-carte {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.tete-carte h2 { font-size: 15.5px; color: var(--vert-fonce); }
.tete-carte .droite { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lien-voir {
  background: none; border: 0; color: var(--vert); font-size: 12.5px; font-weight: 600;
}
.lien-voir:hover { text-decoration: underline; }

.bascule { display: inline-flex; background: var(--fond); border-radius: 999px; padding: 3px; }
.bascule button {
  background: none; border: 0; padding: 6px 14px; border-radius: 999px;
  font-size: 12.5px; color: var(--encre-doux); font-weight: 500;
}
.bascule button.actif { background: var(--vert-fonce); color: #fff; font-weight: 600; }

/* -------------------- À votre attention (cockpit) ----------------- */

.liste-attention { list-style: none; margin: 0; padding: 0; }
.liste-attention li { border-bottom: 1px solid var(--fond); }
.liste-attention li:last-child { border-bottom: 0; }
.liste-attention button {
  display: flex; align-items: center; gap: 13px; padding: 11px 0; width: 100%;
  background: none; border: 0; text-align: left;
}
.liste-attention .rond {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px;
}
.liste-attention .rond.critique { background: var(--rouge-clair); color: var(--rouge); }
.liste-attention .rond.attention { background: var(--orange-clair); color: var(--orange); }
.liste-attention .rond.information { background: var(--bleu-clair); color: var(--bleu); }
.liste-attention .quoi { flex: 1; min-width: 0; font-size: 13.5px; }
.liste-attention .quoi strong { font-weight: 700; }
.liste-attention .quoi small {
  display: block; color: var(--encre-tres-doux); font-size: 11.5px; margin-top: 2px;
}
.liste-attention .fleche { color: var(--encre-tres-doux); font-size: 15px; }
.liste-attention button:hover .fleche { color: var(--vert); }

/* --------------------- Ruban du cycle en chevrons ----------------- */

.ruban { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.etape-cycle {
  flex: 1 1 0; min-width: 108px; border: 0; padding: 14px 10px 13px;
  background: var(--fond); color: var(--encre); text-align: center; position: relative;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%, 13px 50%);
}
.etape-cycle:first-child {
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  border-radius: 10px 0 0 10px;
}
.etape-cycle:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 13px 50%);
  border-radius: 0 10px 10px 0;
}
.etape-cycle .glyphe { display: block; font-size: 15px; margin-bottom: 5px; opacity: .75; }
.etape-cycle .nb {
  display: block; font-size: 18px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.etape-cycle .quoi { display: block; font-size: 11.5px; color: var(--encre-doux); margin-top: 2px; }
.etape-cycle.vert { background: var(--vert-clair); }
.etape-cycle.vert .glyphe, .etape-cycle.vert .nb { color: var(--vert-fonce); }
.etape-cycle.chaud { background: #fdf3e2; }
.etape-cycle.chaud .glyphe, .etape-cycle.chaud .nb { color: var(--orange); }
.etape-cycle:hover { filter: brightness(.97); }

/* ------------------------ Barres et anneau ------------------------ */

.classement { list-style: none; margin: 0; padding: 0; }
.classement li {
  display: flex; align-items: center; gap: 11px; padding: 7px 0; font-size: 13px;
}
.classement .rang {
  width: 20px; flex: 0 0 20px; color: var(--encre-tres-doux); font-size: 12px;
  font-weight: 600;
}
.classement .nom {
  flex: 0 0 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.classement .jauge { flex: 1; height: 12px; background: var(--fond); border-radius: 999px; }
.classement .jauge span { display: block; height: 100%; border-radius: 999px; background: var(--vert); }
.classement .valeur {
  flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12.5px;
}

.bloc-anneau { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bloc-anneau svg { width: 156px; height: 156px; flex: 0 0 156px; }
.legende-anneau { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legende-anneau li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; }
.legende-anneau i {
  width: 11px; height: 11px; border-radius: 3px; margin-top: 3px; flex: 0 0 11px;
}
.legende-anneau strong { display: block; font-size: 14px; }

.pastille-etat {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap;
}
.pastille-etat::before { content: "\25CF"; font-size: 9px; }
.etat-confirme { color: var(--vert); }
.etat-relancer { color: var(--orange); }
.etat-risque { color: var(--rouge); }

.pied-appli {
  display: flex; align-items: center; gap: 14px; margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--filet); font-size: 12px; color: var(--encre-tres-doux);
}
.pied-appli strong { color: var(--vert-fonce); font-weight: 700; letter-spacing: .04em; }
.pied-appli .signature {
  margin-left: auto; font-family: "Segoe Script", "Brush Script MT", cursive;
  font-size: 14px; color: var(--vert); text-align: right; line-height: 1.3;
}

/* --------------------- Onglets de domaine ------------------------- */

.onglets-domaine {
  display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px;
  border-bottom: 1px solid var(--filet);
}
.onglet-domaine {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 9px 14px; color: var(--encre-doux); font-size: 13px; font-weight: 500;
  margin-bottom: -1px;
}
.onglet-domaine:hover { color: var(--encre); }
.onglet-domaine.actif {
  color: var(--vert-fonce); border-bottom-color: var(--vert); font-weight: 600;
}

/* --------------------------- Commandes ---------------------------- */

.entete-section {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.entete-section h2 { font-size: 16px; }
.entete-section .actions { margin-left: auto; display: flex; gap: 9px; }

.statut-commande {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.statut-neutre { background: var(--fond); color: var(--encre-doux); }
.statut-vert { background: var(--vert-clair); color: var(--vert-fonce); }
.statut-attention { background: var(--orange-clair); color: var(--orange); }
.statut-bleu { background: var(--bleu-clair); color: var(--bleu); }
.statut-rouge { background: var(--rouge-clair); color: var(--rouge); }

.propositions-tarif { display: grid; gap: 8px; margin-top: 8px; }
.proposition {
  display: flex; align-items: center; gap: 12px; padding: 10px 13px;
  border: 1px solid var(--filet); border-radius: 10px; background: var(--papier);
  text-align: left; width: 100%;
}
.proposition:hover { border-color: var(--vert); }
.proposition.choisie { border-color: var(--vert); background: var(--vert-clair); }
.proposition .quoi { min-width: 0; flex: 1; }
.proposition .quoi strong { display: block; font-size: 13px; }
.proposition .quoi span { font-size: 11.5px; color: var(--encre-doux); }
.proposition .combien {
  font-size: 15px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.proposition .recommandation {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--vert-fonce); background: var(--papier); border: 1px solid var(--vert-filet);
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
}

/* ------------------- Avis : information, alerte, refus -------------- */

.avis {
  display: flex; gap: 11px; padding: 12px 15px; border-radius: 11px;
  font-size: 12.8px; line-height: 1.6; align-items: flex-start; margin-bottom: 14px;
}
.avis .marque { font-weight: 700; flex: 0 0 auto; }
.avis-refus { background: var(--rouge-clair); color: var(--rouge); }
.avis-attention { background: var(--orange-clair); color: var(--orange); }
.avis-ok { background: var(--vert-clair); color: var(--vert-fonce); }
.avis-info { background: var(--bleu-clair); color: var(--bleu); }

/* Conservé pour les écrans Analyses et Rapports, qui l'utilisent encore. */
.attention-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.attention-item {
  display: flex; gap: 12px; padding: 13px 15px; border-radius: 11px;
  border: 1px solid var(--filet); background: var(--papier); align-items: flex-start;
}
.attention-item .puce-alerte {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: 0 0 8px;
}
.attention-critique { border-left: 3px solid var(--rouge); }
.attention-critique .puce-alerte { background: var(--rouge); }
.attention-attention { border-left: 3px solid var(--orange); }
.attention-attention .puce-alerte { background: var(--orange); }
.attention-information { border-left: 3px solid var(--bleu); }
.attention-information .puce-alerte { background: var(--bleu); }
.attention-item h3 { font-size: 13.5px; margin-bottom: 3px; }
.attention-item p { margin: 0; font-size: 12.5px; color: var(--encre-doux); line-height: 1.55; }
.attention-item .aller { margin-left: auto; align-self: center; white-space: nowrap; }

/* --------------------------- Impression --------------------------- */

@media print {
  .rail, .bandeau-actions, .entete-section .actions, .ruban,
  .voile, .voile-panneau, .panneau { display: none !important; }
  .appli { display: block; }
  .bandeau { position: static; border: 0; padding: 0 0 12px; }
  .vue { padding: 0; }
  .carte, .carte-cockpit, .tuile { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
}

/* ------------------------- Écrans étroits ------------------------- */

@media (max-width: 1000px) {
  .rail {
    position: fixed; z-index: 60; transform: translateX(-100%);
    box-shadow: var(--ombre-forte);
  }
  .rail.ouvert { transform: none; }
  .bouton-rail-mobile { display: grid; }
  .vue { padding: 18px 14px 40px; }
  .bandeau { padding: 12px 14px; gap: 10px; }
  .hero { grid-template-columns: 1fr; }
  .horodateur { display: none; }
}

/* ------------- La fiche du client, sous la saisie de commande ------------
   Trois blocs enchâssés dans la carte « Le client » : le chiffre des quatre
   dernières années, le mois par mois de l'année en cours, le portefeuille.
   Rien n'y est cliquable — c'est un panneau de lecture, posé là pour qu'on
   sache à qui l'on parle avant d'accorder un prix. */

.fiche-client { margin-top: 14px; display: grid; gap: 14px; }

.bloc-client {
  border: 1px solid var(--filet); border-radius: 12px; padding: 14px 16px 12px;
  background: var(--fond);
}
.bloc-client h3 {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--encre-doux); margin: 0 0 10px;
  display: flex; align-items: baseline; gap: 10px;
}
.bloc-client h3 .cumul {
  margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--vert-fonce);
}
.bloc-client .sous-bloc {
  margin: 12px 0 4px; font-size: 11.5px; font-weight: 600; color: var(--encre-doux);
}
.bloc-client .note-client {
  margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--encre-doux);
}

/* Les quatre années, en colonnes. Une année non importée garde sa place et
   son socle : le canevas doit se voir avant que la donnée n'arrive. */
.histo-annees {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  align-items: end; padding-top: 6px;
}
.histo-annees .colonne { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.histo-annees .valeur { font-size: 12.5px; font-weight: 700; color: var(--encre); }
.histo-annees .barre {
  width: 100%; max-width: 92px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--vert), var(--vert-fonce));
}
.histo-annees .annee { font-size: 11px; color: var(--encre-doux); font-weight: 600; }
.histo-annees .attendue .valeur { color: var(--encre-doux); }
/* Une année non importée garde un socle hachuré : la colonne existe, elle
   attend seulement son classeur. */
.histo-annees .attendue .barre {
  height: 26px !important; background: transparent;
  border: 1px dashed #c3cec8; border-bottom: 0; border-radius: 5px 5px 0 0;
}

/* Le mois par mois : douze colonnes serrées, puis la courbe en dessous. */
table.mensuel { font-size: 11.5px; }
table.mensuel th, table.mensuel td { padding: 6px 4px; text-align: right; }
table.mensuel th.gauche, table.mensuel td.gauche {
  text-align: left; color: var(--encre-doux); font-weight: 600; white-space: nowrap;
}
table.mensuel td.creux { color: #b9c2bd; }

.courbe-mensuelle {
  display: block; width: 100%; height: 118px; margin-top: 10px;
}

/* ---------- Le tableau des lignes de commande, onze colonnes -------------
   Le tableau s'est chargé : coût unitaire, taux de marge, stock vendable et
   lot FIFO s'ajoutent au prix et à la valeur. Les intitulés sont centrés —
   demande du DAF, 08/09/2026 — pendant que les chiffres restent alignés à
   droite, seule façon de comparer deux montants d'un coup d'œil. */

table.lignes-commande th { text-align: center; }
table.lignes-commande th.gauche { text-align: left; }
table.lignes-commande td { vertical-align: middle; }
table.lignes-commande td.creux { color: #b9c2bd; }
table.lignes-commande td.code-article {
  font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--encre-doux);
  white-space: nowrap;
}
/* Le tarif garde ses deux boutons sous la pastille : à onze colonnes, les
   mettre côte à côte étirerait la colonne au détriment des chiffres. */
table.lignes-commande td.cellule-tarif { text-align: center; white-space: nowrap; }
table.lignes-commande td.cellule-tarif .lien { font-size: 11px; }

/* Onze colonnes tiennent dans la largeur, mais de justesse : on resserre le
   pas et on rend la police un cran plus petite plutôt que d'imposer une barre
   de défilement horizontale, qui cacherait précisément les colonnes de
   contrôle qu'on vient d'ajouter. */
table.lignes-commande { font-size: 12px; }
table.lignes-commande th, table.lignes-commande td { padding: 8px 7px; }
table.lignes-commande th { font-size: 9.5px; }
table.lignes-commande td.code-article { font-size: 11.5px; }
table.lignes-commande .discret { font-size: 10.5px; }
table.lignes-commande .puce { padding: 2px 7px; font-size: 10.5px; }
table.lignes-commande input[type="number"] { width: 62px !important; }
table.lignes-commande .lien { padding: 0 2px; }

/* -------------------- Le pied du bon de commande ------------------------
   Les tarifs sont TTC : le pied remonte au HT, retranche l'escompte, puis
   calcule la TVA. Il est aligné à droite comme un pied de facture, et posé
   sous le tableau des lignes plutôt que dans une carte à part — c'est la
   suite du même chiffre, pas un autre sujet. */

.pied-bon { display: flex; flex-direction: column; align-items: flex-end;
            margin-top: 14px; gap: 10px; }

table.recapitulatif { width: auto; min-width: 340px; font-size: 12.5px; }
table.recapitulatif td { padding: 6px 12px; border-bottom: 1px solid var(--filet);
                         text-align: right; }
table.recapitulatif td.gauche { text-align: left; color: var(--encre-doux); }
table.recapitulatif tr.escompte td { color: var(--orange); }
table.recapitulatif tr.tva td { color: var(--encre-doux); }
table.recapitulatif tr.a-payer td {
  border-bottom: 0; border-top: 2px solid var(--vert); padding-top: 9px;
  font-size: 15px; color: var(--vert-fonce);
}
table.recapitulatif tr.a-payer td.gauche { color: var(--vert-fonce); }

.notes-pied { max-width: 560px; text-align: left; }
.notes-pied p { margin: 0 0 6px; font-size: 11.5px; line-height: 1.6;
                color: var(--encre-doux); }
.notes-pied .puce { margin-right: 6px; }

/* Le compte rendu d'une extraction, tel que le script l'a écrit. Le cahier des
   charges exige « nombre de lignes, lignes intégrées, erreurs, rapport
   d'importation » : le plus honnête est de montrer la sortie brute. */
pre.journal-import {
  margin: 10px 0 0; padding: 10px 12px; max-height: 220px; overflow: auto;
  background: var(--papier); border: 1px solid var(--filet); border-radius: 8px;
  font: 11.5px/1.6 ui-monospace, "Cascadia Mono", Consolas, monospace;
  white-space: pre-wrap; color: var(--encre-doux);
}

/* ================= L'ACCUEIL TIENT DANS UNE PAGE ======================
   Constat du DAF, 08/09/2026 : « l'interface reste toujours grande ».
   Mesuré : 1 542 px de haut pour un écran de 1 024. Il fallait en retrancher
   plus de 500 — les tuiles d'indicateurs n'en pesaient que 30.

   LE VRAI COUPABLE ÉTAIT « À VOTRE ATTENTION ». Chaque alerte y tenait sur
   deux ou trois lignes d'explication : cinq alertes faisaient 512 px, et la
   carte du graphique, mise en regard, s'étirait d'autant. Sur la maquette,
   chaque alerte tient sur UNE ligne. On revient à la maquette : le titre reste
   entier, l'explication se réduit à une ligne, et le clic ouvre le détail
   comme avant — rien n'est perdu, tout est à un clic.

   Rien n'a changé des teintes, des dégradés ni de la grille : ce sont des
   marges, des tailles de rond et des interlignes. */

.vue { padding: 16px 20px 18px; }
.hero { margin-bottom: 14px; }
.grille-cockpit { gap: 12px; margin-bottom: 14px; }
.grille-analyse { gap: 14px; margin-bottom: 14px; }
.grille-bas { gap: 14px; }
.carte-cockpit { padding: 13px 16px; }
.tete-carte { margin-bottom: 11px; }
.tete-carte h2 { font-size: 14.5px; }

/* Les cinq indicateurs — demande expresse du DAF. */
.tuile { padding: 11px 13px; gap: 11px; border-radius: 12px; }
.tuile .pastille-icone {
  width: 36px; height: 36px; flex: 0 0 36px; font-size: 16px; border-radius: 10px;
}
.tuile .intitule { font-size: 12px; }
.tuile .chiffre { font-size: 21px; margin-top: 2px; }
.tuile .appoint, .tuile .tendance { font-size: 10.5px; }

/* Une alerte, une ligne. Le détail complet reste au survol et au clic. */
.liste-attention button { padding: 7px 0; gap: 10px; }
.liste-attention .rond { width: 26px; height: 26px; flex: 0 0 26px; font-size: 12px; }
.liste-attention .quoi { font-size: 12.5px; }
.liste-attention .quoi small {
  margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Le ruban du cycle, resserré comme sur la maquette. */
.etape-cycle { padding: 9px 8px 8px; min-width: 96px; }

/* Les trois cartes du bas s'alignent sur la plus courte au lieu de suivre la
   plus longue : le tableau des encaissements défile chez lui. */
.grille-bas .enveloppe-tableau { max-height: 168px; }
.classement li { padding: 5px 0; }
.bloc-anneau svg { width: 128px; height: 128px; flex: 0 0 128px; }
.legende-anneau { gap: 9px; }
.grille-bas .resume-filtre { margin-top: 8px; font-size: 11px; }

.pied-appli { margin-top: 16px; padding-top: 12px; font-size: 11.5px; }
.pied-appli .signature { font-size: 12.5px; }

/* Les lignes du tableau des encaissements : 37 px chacune, c'était le double
   de la maquette. La carte suivait, et les deux autres avec elle. */
.grille-bas table th, .grille-bas table td { padding: 5px 8px; font-size: 11.5px; }
.grille-bas table th { font-size: 9.5px; }

/* Dernier resserrement pour passer sous la ligne de flottaison d'un écran de
   1 024 px. Chaque valeur ci-dessous a été mesurée, pas devinée : l'accueil
   pesait 1 542 px, il en pèse un peu plus de 1 000. */
body { padding: 1.4vh 2.5vw; }
.hero { margin-bottom: 12px; }
.grille-cockpit, .grille-analyse { gap: 12px; margin-bottom: 12px; }
.grille-bas { gap: 12px; }

.liste-attention button { padding: 4px 0; }
.liste-attention .rond { width: 24px; height: 24px; flex: 0 0 24px; font-size: 11px; }
.liste-attention .quoi { font-size: 12px; line-height: 1.35; }
.liste-attention .quoi small { font-size: 11px; }

.etape-cycle { padding: 7px 8px 6px; }
.pied-appli { margin-top: 12px; padding-top: 9px; }

/* Les 35 derniers pixels. Mesurés un à un, sur un écran de 1 024. */
.vue { padding: 14px 20px 10px; }
.carte-cockpit { padding: 11px 15px; }
.tete-carte { margin-bottom: 9px; }
.grille-bas table th, .grille-bas table td { padding: 4px 8px; }
.liste-attention button { padding: 3px 0; }

/* ---- Les écrans moins hauts que 1 024 ----
   L'accueil tient exactement dans 1 024 px. Sur un portable de 900 ou 768, il
   déborderait encore : on retire alors ce qui est le moins nécessaire — la
   ligne d'explication sous chaque alerte, dont le titre suffit à alerter et
   dont le détail reste à un clic, et le pied de page, purement décoratif.
   Aucune donnée ne disparaît : elle change seulement de place. */
@media (max-height: 950px) {
  .vue { padding: 10px 18px 8px; }
  .hero { margin-bottom: 9px; }
  .grille-cockpit, .grille-analyse { gap: 10px; margin-bottom: 10px; }
  .grille-bas { gap: 10px; }
  .tuile { padding: 8px 11px; gap: 9px; }
  .tuile .pastille-icone { width: 30px; height: 30px; flex: 0 0 30px; font-size: 14px; }
  .tuile .chiffre { font-size: 18px; }
  .carte-cockpit { padding: 9px 13px; }
  .tete-carte { margin-bottom: 7px; }
  .liste-attention .quoi small { display: none; }
  .etape-cycle { padding: 6px 8px 5px; }
  .pied-appli { display: none; }
  /* La provenance du graphique (« Source : ventes ORACLE 2026 — 21 376
     lignes ») reste lisible sur un grand écran ; sous 950 px de haut, elle
     cède sa place au graphique lui-même. */
  .grille-analyse .resume-filtre { display: none; }
  .bascule button { padding: 4px 11px; }
}

/* ---------------- Le lecteur de bon, posé sur l'écran -----------------
   Le PDF s'affiche sur place plutôt que d'imposer « Enregistrer sous » ou de
   dépendre d'un onglet que le bloqueur de fenêtres peut refuser. Le lecteur du
   navigateur porte ses propres commandes ; on ajoute les deux qui comptent,
   pour que la réponse ne dépende pas du navigateur de celui qui regarde. */

.voile-document { z-index: 40; }

.cadre-document {
  position: fixed; z-index: 41; inset: 3vh 6vw; display: flex; flex-direction: column;
  background: var(--papier); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(23, 32, 27, .3);
}
.tete-document {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--filet); background: var(--fond);
}
.tete-document strong { color: var(--vert-fonce); font-size: 14px; }
.tete-document .discret { font-size: 11.5px; }
.actions-document { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.actions-document a.bouton-secondaire { text-decoration: none; display: inline-flex;
  align-items: center; }
.lecteur-document { flex: 1; width: 100%; border: 0; background: #4a4a4a; }

/* ============ LE BANDEAU DU HAUT A DISPARU — 08/09/2026 ==============
   Il occupait 70 px sur toute la largeur pour une barre de recherche et
   quelques icônes, et c'est lui qui empêchait l'accueil de tenir dans une
   page. Ce qu'il portait d'utile descend au pied du rail, un peu à l'écart du
   nom de l'utilisateur — demande du DAF. La recherche globale, elle, n'est pas
   remplacée : chaque écran porte déjà la sienne, en contexte. */

.veille-rail {
  position: relative; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 0 4px 12px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.veille-rail .bouton-icone {
  width: 30px; height: 30px; background: rgba(255, 255, 255, .09);
  color: var(--rail-texte); border: 0; font-size: 14px;
}
.veille-rail .bouton-icone:hover { background: rgba(255, 255, 255, .18); }
.veille-rail .horodateur {
  margin-left: auto; display: grid; gap: 1px; text-align: right;
  font-size: 10.5px; color: var(--rail-texte-doux); line-height: 1.35;
}
.veille-rail .horodateur span { white-space: nowrap; }

/* Le panneau des notifications s'ouvre depuis le rail, vers la droite. */
.veille-rail .resultats-recherche {
  position: absolute; left: 0; top: calc(100% + 4px); width: 330px; max-height: 60vh;
  overflow: auto; z-index: 30;
}

.rail.reduit .veille-rail { flex-direction: column; padding-bottom: 8px; }
.rail.reduit .veille-rail .horodateur { display: none; }

/* Le rail retrouve sa place : plus de bandeau à surmonter. */
.principal { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.bouton-rail-mobile { display: none; }
@media (max-width: 900px) {
  .bouton-rail-mobile { display: inline-flex; margin-left: auto; }
}


/* -------- La photo des animaux, agrandie -- 08/09/2026 ---------------
   « Ils sont notre cœur de métier », dit le DAF, et il a raison : c'est la
   seule image de l'application. Les 70 px libérés par la suppression du
   bandeau lui reviennent. Elle prend aussi plus de largeur — la colonne du
   bonjour n'a pas besoin de la moitié de la ligne pour deux phrases. */
.hero { grid-template-columns: minmax(230px, .78fr) minmax(420px, 1.6fr); }
.hero-image { max-height: 132px; }
@media (max-height: 950px) { .hero-image { max-height: 108px; } }

/* ---------- Les titres de section, en bleu vif et gras ----------------
   Demande du DAF, 08/09/2026. Ils étaient de la couleur du texte courant et se
   confondaient avec lui ; sur un écran de saisie qui empile quatre ou cinq
   cartes — le client, les produits, le transport, l'observation — l'œil ne
   trouvait plus où il en était.

   Le bleu vif tranche sur le vert de la maison sans lui disputer la vedette :
   le vert reste la couleur de l'application, le bleu ne sert qu'à jalonner. Il
   ne touche PAS les cartes du tableau de bord (`.tete-carte h2`), qui suivent
   la maquette et gardent leur vert. */

.carte h2 {
  color: #0a63d2;
  font-weight: 700;
  letter-spacing: -.01em;
}
/* La mention grise qui suit certains titres garde sa discrétion : c'est une
   glose, pas un titre. */
.carte h2 .discret { color: var(--encre-doux); font-weight: 400; }