:root {
  color-scheme: light;
  --fond: #f6f7f9;
  --carte: #fff;
  --trait: #e2e5ea;
  --texte: #1a1d21;
  --discret: #6b7280;
  --accent: #2f6df6;
  --vert: #15803d;
  --orange: #b45309;
  --rouge: #b91c1c;
  --rayon: 10px;
}

* { box-sizing: border-box; }

/* L'attribut hidden est appliqué par la feuille du navigateur, que
   la moindre règle de display d'auteur écrase — d'où la carte de
   connexion restée visible sous l'application. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--fond);
  color: var(--texte);
}

h1 { font-size: 22px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 28px 0 12px; font-weight: 600; }
h3 { font-size: 14px; margin: 0 0 8px; font-weight: 600; }

button {
  font: inherit;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
button:hover { filter: brightness(1.08); }
button.secondaire { background: var(--carte); color: var(--texte); border-color: var(--trait); }
button.lien { background: none; color: var(--discret); border: none; padding: 4px; }
button.danger { background: var(--carte); color: var(--rouge); border-color: var(--trait); }
button:disabled { opacity: .5; cursor: default; }

input, textarea, select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--carte);
  color: var(--texte);
  width: 100%;
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }

.discret { color: var(--discret); }
.erreur { color: var(--rouge); }

/* Connexion */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.carte-connexion {
  background: var(--carte); border: 1px solid var(--trait); border-radius: 14px;
  padding: 28px; width: 100%; max-width: 360px; display: grid; gap: 10px;
}
.carte-connexion label { font-size: 13px; color: var(--discret); margin-top: 8px; }

/* Charpente */
.entete {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--carte); border-bottom: 1px solid var(--trait);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
}
.marque { font-weight: 600; }
.entete nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
.onglet { background: none; color: var(--discret); }
.onglet.actif { background: var(--fond); color: var(--texte); }
main { padding: 20px; max-width: 1100px; margin: 0 auto; }
.barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
/* Dans une barre, les champs se dimensionnent à leur contenu : la
   règle globale input{width:100%} les faisait occuper toute la ligne
   et rejetait les libellés « à » et « h » à la ligne suivante. */
.barre input[type="number"] { width: 5.5em; flex: 0 0 auto; }
.barre span { flex: 0 0 auto; }
.barre h2 { margin: 0; flex: 1; }

/* Chiffres */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.chiffre {
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 14px;
}
.chiffre .valeur { font-size: 24px; font-weight: 600; }
.chiffre .libelle { color: var(--discret); font-size: 12px; }

/* Tableaux */
.tableau-enveloppe { overflow-x: auto; background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--trait); white-space: nowrap; }
th { font-size: 12px; color: var(--discret); font-weight: 600; }
tr:last-child td { border-bottom: none; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; }

.etiquette { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--fond); }
.etiquette.vert { background: #dcfce7; color: var(--vert); }
.etiquette.orange { background: #ffedd5; color: var(--orange); }
.etiquette.rouge { background: #fee2e2; color: var(--rouge); }

/* Jauge de quota */
.jauge { height: 6px; width: 90px; background: var(--fond); border-radius: 999px; overflow: hidden; }
.jauge span { display: block; height: 100%; background: var(--accent); }
.jauge.orange span { background: var(--orange); }
.jauge.rouge span { background: var(--rouge); }

/* Progression de campagne */
.jauge-large { height: 10px; background: var(--fond); border-radius: 999px; overflow: hidden; }
.jauge-large span { display: block; height: 100%; background: var(--accent); transition: width .4s; }
.valeur.vert { color: var(--vert); }
.valeur.rouge { color: var(--rouge); }

/* Éditeur de campagne */
.carte { background: var(--carte); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 16px; margin-bottom: 12px; }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.champ label { display: block; font-size: 12px; color: var(--discret); margin-bottom: 4px; }
.gabarit { border: 1px solid var(--trait); border-radius: var(--rayon); padding: 12px; margin-bottom: 10px; }
.gabarit .entete-gabarit { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.gabarit .entete-gabarit h3 { margin: 0; flex: 1; }
.gabarit .poids { width: 70px; }
.diagnostic { font-size: 13px; margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.exemples { margin-top: 8px; font-size: 13px; color: var(--discret); }
.exemples li { margin: 3px 0; }
.avertissement { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 8px 10px; border-radius: var(--rayon); font-size: 13px; margin-top: 8px; }

.alerte {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--texte); color: #fff; padding: 10px 16px;
  border-radius: var(--rayon); font-size: 13px; z-index: 20; max-width: 90vw;
}
.alerte.echec { background: var(--rouge); }

/* ---------------------------------------------------------------
   Mobile
   L'interface sert aussi à surveiller la ferme depuis un téléphone :
   c'est souvent là qu'on regarde quand une ligne tombe.
   --------------------------------------------------------------- */
@media (max-width: 720px) {
  main { padding: 14px; }
  h2 { margin: 20px 0 10px; }

  /* La barre de navigation passe sur une seconde ligne, défilable
     horizontalement : empilée verticalement elle mangeait un tiers
     de l'écran et chevauchait la marque. */
  .entete { padding: 10px 14px; gap: 8px; }
  .marque { flex: 1; }
  .entete nav {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none;
  }
  .entete nav::-webkit-scrollbar { display: none; }
  .onglet { white-space: nowrap; flex: none; }

  /* Les tableaux restent défilables, mais plus compacts. */
  th, td { padding: 7px 9px; font-size: 13px; }

  .chiffres { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
  .chiffre { padding: 11px; }
  .chiffre .valeur { font-size: 20px; }

  /* Les commandes s'empilent plutôt que de déborder. */
  .barre { gap: 8px; }
  .barre > button, .barre > input, .barre > select { flex: 1 1 100%; }
  .barre h2 { flex-basis: 100%; }

  .champs { grid-template-columns: 1fr; }
  .carte { padding: 13px; }
  .gabarit textarea { font-size: 13px; }
}

/* Le formulaire d'ajout doit se voir immédiatement, y compris quand
   on l'ouvre depuis le bas de la page. */
.formulaire-actif { scroll-margin-top: 90px; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --fond: #101215; --carte: #181b20; --trait: #2a2f37;
    --texte: #e8eaed; --discret: #9aa3af;
  }
  .etiquette.vert { background: #052e16; }
  .etiquette.orange { background: #3b2306; }
  .etiquette.rouge { background: #450a0a; }
  .avertissement { background: #2a2205; border-color: #4a3c08; color: #fcd34d; }
}

/* Les envois suspendus ne se voyaient nulle part : une campagne
   semblait tourner alors que plus rien ne partait. */
.alerte-suspendu {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid var(--rouge); border-radius: var(--rayon);
  background: #fee2e2; color: var(--rouge); font-size: 13px;
}
@media (prefers-color-scheme: dark) { .alerte-suspendu { background: #450a0a; } }

/* Sélecteur de jours d'envoi. Cibles tactiles de 40px : la ferme se
   pilote aussi depuis un téléphone. */
.jours { display: flex; flex-wrap: wrap; gap: 6px; }
.jour {
  min-width: 52px; min-height: 40px; padding: 0 10px;
  border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--carte); color: var(--texte);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.jour:hover { border-color: var(--accent); }
.jour.actif { background: var(--accent); border-color: var(--accent); color: #fff; }
.rouge { color: var(--rouge); }