/* Hortiloft — feuille sobre, sans framework. */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #1f2933;
  background: #f4f5f7;
}

a { color: #1f6f5c; }

.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: #ffffff;
  border-bottom: 1px solid #e2e5e9;
}

.entete .marque {
  font-weight: 700;
  font-size: 1.1rem;
  text-decoration: none;
  color: #1f2933;
}

.entete nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.entete nav a {
  text-decoration: none;
  color: #3e4c59;
  font-size: 0.95rem;
}

.entete nav a:hover { color: #1f6f5c; }

.contenu {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.carte {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
}

.carte-login {
  max-width: 360px;
  margin: 4rem auto;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.flash-succes { background: #e3f6e8; color: #1c6b34; }
.flash-erreur { background: #fbe4e4; color: #a12525; }
.flash-info { background: #e4eefb; color: #1e5aa1; }

.tableau {
  width: 100%;
  border-collapse: collapse;
}

.tableau th, .tableau td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid #e2e5e9;
}

.tableau tbody tr:nth-child(even) { background: #fafbfc; }

.montant { text-align: right; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.badge-brouillon { background: #e2e5e9; color: #3e4c59; }
.badge-envoye, .badge-emise { background: #e4eefb; color: #1e5aa1; }
.badge-accepte, .badge-payee { background: #e3f6e8; color: #1c6b34; }
.badge-refuse, .badge-expire, .badge-annulee { background: #fbe4e4; color: #a12525; }
.badge-remplace { background: #e2e5e9; color: #7b8794; }
.badge-retard { background: #fdecd8; color: #b1590c; }

.grille {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.bouton, .bouton-secondaire {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: 1px solid #1f6f5c;
  font-size: 0.95rem;
  cursor: pointer;
}

.bouton {
  background: #1f6f5c;
  color: #ffffff;
}

.bouton-secondaire {
  background: transparent;
  color: #1f6f5c;
}

.enligne {
  display: inline;
}

.lien {
  background: none;
  border: none;
  padding: 0;
  color: #3e4c59;
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: none;
}

.lien:hover { color: #1f6f5c; }

/* Formulaires pleine largeur (paramètres, catalogue, et tout écran suivant qui en
   hérite) : un <label> est inline par défaut, ce qui empile les champs bout à bout sur
   une seule ligne plutôt que les uns sous les autres. */
.formulaire label {
  display: block;
  margin-bottom: 0.75rem;
}

.formulaire input,
.formulaire textarea,
.formulaire select {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
}

.carte + .carte,
.formulaire + .carte {
  margin-top: 1rem;
}

.apercu-logo {
  display: block;
  max-width: 240px;
  height: auto;
  margin-bottom: 1rem;
}

/* Lignes de composants d'un pack : la table les affiche à plat, sans hériter du style
   `display: block` de .formulaire ci-dessus (une cellule n'est pas un champ isolé). */
.tableau-composants td {
  vertical-align: middle;
}

.tableau-composants select,
.tableau-composants input {
  margin-top: 0;
}

/* Titre + bouton d'action sur une même ligne (catalogue : « Prestations » / « Nouvelle
   prestation »), sans quoi le bouton retombe sous le titre par défaut. */
.entete-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* Aperçu des totaux recalculé par le navigateur pendant la saisie : discret, il ne doit
   pas rivaliser avec le tableau des totaux enregistrés juste au-dessus. */
.apercu-totaux {
  color: #3e4c59;
  font-size: 0.9rem;
}

.apercu-totaux small {
  color: #7b8794;
}

/* Totaux enregistrés devenus périmés par une saisie en cours : atténués, et accompagnés
   d'une note qui n'apparaît qu'à ce moment-là. Le script se contente de poser la classe. */
.note-perime {
  display: none;
  margin: 0 0 0.75rem;
  color: #b1590c;
  font-size: 0.9rem;
}

.perime {
  opacity: 0.55;
}

.perime .note-perime {
  display: block;
  opacity: 1;
}