/* FarmOS — système de composants visuels (Chantier 6c — refonte UI)
   Inspiré du benchmark concurrentiel (PoultryOne, Clicken, CloudPoultry, SKOV FarmOnline+,
   Farmbrite, AgriWebb, Massla, StokData...) et de la maquette fournie par Racine : indicateurs
   "feu tricolore", cartes KPI avec sparkline/delta/objectif, panneaux de graphiques, timeline
   d'événements, classements en barres. Thème clair conservé (cohérence avec l'existant déployé) —
   seule la charte visuelle est reprise de la maquette, pas son thème sombre "cockpit".
   Complète app/static/tailwind.css (utilitaires de mise en page) sans le remplacer. */

:root {
  --ink: #10241b;
  --ink-soft: #5e7468;
  --ink-faint: #879b90;
  --surface: #ffffff;
  --surface-soft: #eaf3ee;
  --surface-warm: #fff8e9;
  --border: #dce9e1;
  --border-strong: #b4d1be;
  --bg: #f3f8f5;
  --primary: #23966a;
  --primary-deep: #176a49;
  --primary-soft: #dff4e9;
  --blue: #2f84bf;
  --blue-soft: #e4f2fb;
  --gold: #a86d14;
  --gold-soft: #fff1d2;
  --red: #c64d47;
  --red-soft: #fbe7e4;
  --shadow: 0 18px 40px rgba(29, 75, 52, .09);
  --shadow-small: 0 6px 18px rgba(29, 75, 52, .07);
  --radius: 16px;
  --radius-small: 10px;
  --grid: #e3efe8;
}

body.fx-body { background: var(--bg); }

/* ---------- Coquille / navigation ---------- */
.fx-shell { min-height: 100vh; display: flex; background: var(--bg); }
.fx-sidebar {
  width: 222px; flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 18px 12px 14px;
}
.fx-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; flex-shrink: 0; }
.fx-brand-mark {
  width: 32px; height: 32px; border-radius: 10px; background: var(--surface); color: #fff;
  display: grid; place-items: center; font-size: 16px; box-shadow: 0 0 0 4px var(--primary-soft);
  overflow: hidden; flex-shrink: 0;
}
.fx-brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.fx-brand-copy strong { display: block; font-size: 14.5px; letter-spacing: -.02em; color: var(--ink); }
.fx-brand-copy span { color: var(--ink-faint); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; }
/* La nav défile indépendamment du reste de la sidebar : sur un écran bas, s'il y a plus
   d'éléments que de place, c'est la liste qui scrolle — jamais le bloc utilisateur/déconnexion
   qui se retrouve poussé hors de l'écran, invisible. */
.fx-nav { display: grid; align-content: start; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; padding-right: 2px; }
.fx-nav-label { color: var(--ink-faint); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 11px 10px 5px; }
.fx-nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
  color: var(--ink-soft); font-size: 12.5px; font-weight: 600; text-decoration: none;
  border: 1px solid transparent; transition: background .15s ease, color .15s ease;
}
.fx-nav a:hover { background: var(--surface-soft); color: var(--ink); }
.fx-nav a.active { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--border-strong); box-shadow: inset 3px 0 0 var(--primary); }
.fx-nav a .fx-nav-icon { font-size: 14px; width: 16px; text-align: center; }
.fx-nav a.disabled { color: var(--ink-faint); cursor: not-allowed; opacity: .6; }
.fx-sidebar-bottom { margin-top: 10px; flex-shrink: 0; }
.fx-user-card { background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.fx-user-card .name { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.fx-user-card .role { color: var(--ink-faint); font-size: 11px; text-transform: capitalize; margin-top: 1px; }
.fx-user-card a { display: block; text-align: center; margin-top: 9px; background: var(--surface); border: 1px solid var(--border); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; padding: 7px; border-radius: 8px; text-decoration: none; transition: background .15s ease; }
.fx-user-card a:hover { background: var(--surface-soft); }

.fx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fx-content { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 30px 32px 60px; }

/* Pages hors app (login, /contact) : même principe, footer collé en bas quelle que soit la
   hauteur du contenu — jamais "remonté" sur un écran haut avec peu de contenu. */
.fx-public-page { min-height: 100vh; display: flex; flex-direction: column; }
.fx-public-main { flex: 1; display: flex; flex-direction: column; }

/* ---------- En-tête de page ---------- */
.fx-page-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--surface) 65%);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 22px;
}
.fx-page-head .icon {
  width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff;
  box-shadow: 0 8px 20px rgba(23, 106, 73, .28);
}
.fx-page-head h1 { font-family: 'Poppins', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.fx-page-head p { color: var(--ink-soft); font-size: 13px; margin: 2px 0 0; }
.fx-page-head-row { display: flex; align-items: center; gap: 13px; }
.fx-page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- Boutons ---------- */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 10px; padding: 8px 15px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  text-decoration: none; transition: all .15s ease; cursor: pointer;
}
.fx-btn:hover { background: var(--surface-soft); color: var(--ink); border-color: var(--border-strong); }
.fx-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.fx-btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); color: #fff; }
.fx-btn-ghost { border-color: transparent; background: transparent; }
.fx-btn-sm { padding: 5px 11px; font-size: 11.5px; border-radius: 999px; }

/* ---------- Sélecteur de période / pilules ---------- */
.fx-pill-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow-small); margin-bottom: 22px; }
.fx-pill {
  border: 0; background: transparent; color: var(--ink-soft); border-radius: 999px;
  padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .15s ease;
  text-decoration: none; display: inline-flex;
}
.fx-pill:hover { background: var(--surface-soft); color: var(--ink); }
.fx-pill.active { background: var(--primary); color: #fff; }
.fx-pill-meta { color: var(--ink-faint); font-size: 11.5px; margin-left: auto; white-space: nowrap; }

/* ---------- Cartes KPI ---------- */
.fx-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
@media (max-width: 1100px) { .fx-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fx-kpi-grid { grid-template-columns: 1fr 1fr; } }
.fx-kpi-card {
  position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px; min-height: 128px; transition: all .15s ease;
  text-decoration: none; display: block; color: inherit;
}
.fx-kpi-card.linkable:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-small); }
.fx-kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fx-kpi-label { color: var(--ink-soft); font-size: 11.5px; font-weight: 700; }
.fx-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fx-status-dot.normal { background: #2fb573; }
.fx-status-dot.surveillance { background: var(--gold); }
.fx-status-dot.critique { background: var(--red); }
.fx-status-dot.indisponible { background: var(--ink-faint); }
.fx-kpi-value { font-size: 25px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin: 10px 0 4px; font-variant-numeric: tabular-nums; }
.fx-kpi-value .unit { font-size: 11px; font-weight: 500; color: var(--ink-faint); }
.fx-kpi-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.fx-delta { font-weight: 800; }
.fx-delta.up { color: var(--primary); }
.fx-delta.down { color: var(--red); }
.fx-target { color: var(--ink-faint); }
.fx-kpi-empty { color: var(--ink-faint); font-size: 12.5px; font-style: italic; margin-top: 10px; }
.fx-kpi-empty-reason { color: var(--ink-faint); font-size: 10.5px; margin-top: 3px; font-style: normal; }
.fx-sparkline-wrap { position: relative; width: 100%; height: 30px; margin-top: 8px; }
.fx-sparkline { width: 100%; height: 100%; }

/* ---------- Panneaux (graphiques, tableaux, listes) ---------- */
.fx-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 20px; }
.fx-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fx-panel-title { font-weight: 700; font-size: 14.5px; color: var(--ink); }
.fx-panel-subtitle { color: var(--ink-soft); font-size: 11.5px; margin-top: 2px; }
.fx-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fx-grid-2.uneven { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 900px) { .fx-grid-2, .fx-grid-2.uneven { grid-template-columns: 1fr; } }

/* ---------- Listes d'alertes ---------- */
.fx-alert-list { display: grid; gap: 0; }
.fx-alert-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--border); }
.fx-alert-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fx-alert-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.fx-alert-icon.red { background: var(--red-soft); color: var(--red); }
.fx-alert-icon.gold { background: var(--gold-soft); color: var(--gold); }
.fx-alert-icon.blue { background: var(--blue-soft); color: var(--blue); }
.fx-alert-item strong { display: block; font-size: 12.5px; color: var(--ink); }
.fx-alert-item span { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }

.fx-pill-badge { font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.fx-pill-badge.critical, .fx-pill-badge.bad { color: var(--red); background: var(--red-soft); }
.fx-pill-badge.watch { color: var(--gold); background: var(--gold-soft); }
.fx-pill-badge.info, .fx-pill-badge.neutral { color: var(--blue); background: var(--blue-soft); }
.fx-pill-badge.good, .fx-pill-badge.normal { color: var(--primary-deep); background: var(--primary-soft); }

/* ---------- Classements en barres ---------- */
.fx-bar-list { display: grid; gap: 11px; }
.fx-bar-row { display: grid; grid-template-columns: minmax(90px, auto) 1fr 56px; align-items: center; gap: 10px; font-size: 12px; text-decoration: none; color: inherit; padding: 2px 0; border-radius: 8px; transition: background .15s ease; }
a.fx-bar-row:hover { background: var(--surface-soft); }
.fx-bar-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-bar-label .sub { color: var(--ink-faint); }
.fx-bar-track { height: 9px; background: var(--surface-soft); border-radius: 99px; overflow: hidden; }
.fx-bar-fill { height: 100%; border-radius: 99px; background: var(--primary); }
.fx-bar-fill.gold { background: var(--gold); }
.fx-bar-fill.blue { background: var(--blue); }
.fx-bar-value { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- Timeline ---------- */
.fx-timeline { display: grid; gap: 0; }
.fx-timeline-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 0 0 16px; position: relative; }
.fx-timeline-item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: 0; width: 1px; background: var(--border-strong); }
.fx-timeline-item:last-child::before { display: none; }
.fx-timeline-point { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-soft); border: 2px solid var(--border); display: grid; place-items: center; font-size: 10px; z-index: 1; }
.fx-timeline-item strong { display: block; font-size: 12.5px; color: var(--ink); }
.fx-timeline-item span.detail { display: block; color: var(--ink-soft); font-size: 11.5px; margin-top: 1px; }
.fx-timeline-item .date { color: var(--ink-faint); font-size: 10.5px; }

/* ---------- Statistiques ("route-stat") ---------- */
.fx-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
@media (max-width: 900px) { .fx-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; }
.fx-stat-label { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.fx-stat-value { font-size: 23px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 3px; font-variant-numeric: tabular-nums; color: var(--ink); }
.fx-stat-meta { color: var(--ink-faint); font-size: 11px; }

/* ---------- Tables ---------- */
.fx-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.fx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fx-table thead { background: var(--surface-soft); }
.fx-table th { text-align: left; color: var(--ink-soft); font-weight: 700; font-size: 11px; padding: 10px 14px; }
.fx-table td { padding: 11px 14px; border-top: 1px solid var(--border); color: var(--ink-soft); vertical-align: middle; }
.fx-table td strong, .fx-table td.strong { color: var(--ink); font-weight: 600; }
.fx-table tbody tr:hover { background: var(--surface-soft); }
.fx-table-empty { padding: 26px; text-align: center; color: var(--ink-faint); font-size: 12.5px; }

/* ---------- Formulaires ---------- */
.fx-field-label { display: block; font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; }
.fx-field-hint { font-size: 11.5px; color: var(--ink-faint); margin-top: 6px; line-height: 1.4; }
.fx-input, .fx-select, select.fx-input, input.fx-input, textarea.fx-input {
  width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; padding: 8px 11px;
  font-size: 13px; color: var(--ink); background: var(--surface-soft); transition: border-color .15s ease, background .15s ease;
}
.fx-input:focus, .fx-select:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft); }
.fx-input::placeholder { color: var(--ink-faint); }

/* ---------- Bannières / callouts ---------- */
.fx-banner { display: flex; gap: 11px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 18px; font-size: 12.5px; }
.fx-banner.info { background: var(--primary-soft); color: var(--primary-deep); }
.fx-banner.warn { background: var(--gold-soft); color: var(--gold); }
.fx-banner.error { background: var(--red-soft); color: var(--red); }
.fx-banner strong { display: block; margin-bottom: 2px; }
.fx-banner span { color: var(--ink-soft); }
.fx-banner.success { background: var(--primary-soft); color: var(--primary-deep); }

/* ---------- Sections ---------- */
.fx-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 28px 0 13px; }
.fx-section-head h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.fx-section-head p { color: var(--ink-soft); font-size: 11.5px; margin: 2px 0 0; }

/* ---------- Calendrier ---------- */
.fx-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fx-cal-nav .title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 18px; color: var(--ink); text-transform: capitalize; }
.fx-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 6px; }
.fx-cal-weekdays span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.fx-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.fx-cal-day { min-height: 92px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 8px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.fx-cal-day:hover { border-color: var(--border-strong); background: var(--surface-soft); }
.fx-cal-day.empty { background: transparent; border-color: transparent; }
.fx-cal-day.today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.fx-cal-day.selected { background: var(--primary-soft); border-color: var(--primary); }
.fx-cal-day-num { font-weight: 700; font-size: 13px; color: var(--ink); }
.fx-cal-day-dots { display: flex; flex-wrap: wrap; gap: 3px; }
.fx-cal-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }
.fx-cal-dot.traitement, .fx-cal-dot.sante { background: var(--blue); }
.fx-cal-dot.mortalite { background: var(--red); }
.fx-cal-dot.incident { background: var(--gold); }
.fx-cal-dot.creance { background: var(--primary); }
.fx-cal-dot.dette { background: var(--gold); }
.fx-cal-day-more { font-size: 9.5px; color: var(--ink-faint); }
.fx-cal-event { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.fx-cal-event:last-child { border-bottom: none; }
.fx-cal-event .icon { font-size: 16px; }

/* ---------- Grilles à colonnes fixes (variantes de fx-grid-2), responsives ---------- */
.fx-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fx-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fx-grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
@media (max-width: 900px) {
  .fx-grid-3, .fx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-grid-21 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .fx-grid-3, .fx-grid-4 { grid-template-columns: 1fr; }
}

/* ---------- Responsive : navigation mobile (tiroir hors-écran + bouton "fixer") ----------
   Sous 900px, la barre latérale (250px fixes) prenait la moitié de l'écran d'un téléphone et
   écrasait le reste (graphiques, tableaux). Elle devient un tiroir masqué par défaut, ouvert par
   le bouton ☰, avec un bouton "Fixer" qui la rend persistante (mémorisé en localStorage) pour qui
   préfère la garder ouverte en permanence, même sur petit écran. */
.fx-menu-btn { display: none; }
.fx-sidebar-backdrop { display: none; }
.fx-sidebar-mobile-bar { display: none; }

@media (max-width: 900px) {
  .fx-shell { display: block; }
  .fx-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 76vw; max-width: 230px;
    transform: translateX(-100%); transition: transform .22s ease; z-index: 60; box-shadow: var(--shadow);
  }
  .fx-sidebar.open { transform: translateX(0); }
  .fx-content { padding: 16px 14px 40px; }
  .fx-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
    border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink);
    font-size: 18px; cursor: pointer; margin-bottom: 14px;
  }
  .fx-sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(16, 36, 27, .35); z-index: 55;
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .fx-sidebar-backdrop.show { opacity: 1; pointer-events: auto; }
  .fx-sidebar-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
  .fx-sidebar-mobile-bar button {
    border: 1px solid var(--border); background: var(--surface-soft); color: var(--ink-soft);
    border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer;
  }
  .fx-sidebar-mobile-bar button.active { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary); }

  html.fx-pinned .fx-shell { display: flex; }
  html.fx-pinned .fx-sidebar { position: sticky; transform: none; width: 190px; max-width: 190px; box-shadow: none; z-index: 1; }
  html.fx-pinned .fx-menu-btn, html.fx-pinned .fx-sidebar-backdrop { display: none; }
}

/* Tableaux : défilement horizontal plutôt qu'écrasement sur petit écran */
.fx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 560px) {
  .fx-table { font-size: 11.5px; }
  .fx-table th, .fx-table td { padding: 8px 10px; }
}

/* Calendrier : cases plus compactes sur petit écran */
@media (max-width: 560px) {
  .fx-cal-day { min-height: 54px; padding: 5px; border-radius: 8px; }
  .fx-cal-day-num { font-size: 11px; }
  .fx-cal-grid, .fx-cal-weekdays { gap: 4px; }
}

/* Ajout rapide : menu flottant en haut à droite, masqué par défaut, pour créer vite
   une bande, un lot, un mouvement de stock, une vente, une dépense, etc. */
.fx-quickadd { position: fixed; top: 18px; right: 18px; z-index: 70; }
.fx-quickadd-toggle {
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 20px; line-height: 1;
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(16, 36, 27, .25);
  transition: transform .18s ease, background .18s ease;
}
.fx-quickadd-toggle:hover { background: var(--primary-deep); }
.fx-quickadd.open .fx-quickadd-toggle { transform: rotate(45deg); }
.fx-quickadd-panel {
  position: absolute; top: 56px; right: 0; min-width: 220px; max-height: calc(100vh - 80px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(16, 36, 27, .18);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-8px) scale(.98); pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.fx-quickadd.open .fx-quickadd-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fx-quickadd-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); padding: 6px 10px 4px;
}
.fx-quickadd-panel a {
  display: block; padding: 9px 10px; border-radius: 8px; text-decoration: none;
  color: var(--ink); font-size: 13.5px; font-weight: 600;
}
.fx-quickadd-panel a:hover { background: var(--primary-soft); color: var(--primary-deep); }

@media (max-width: 900px) {
  .fx-quickadd { top: 12px; right: 12px; }
  .fx-quickadd-toggle { width: 40px; height: 40px; font-size: 18px; }
  .fx-quickadd-panel { min-width: 190px; top: 48px; }
}

/* Barre d'onglets mobile en bas de l'écran (icône + libellé, défilement horizontal) —
   inspirée d'apps mobiles agricoles grand public : plus naturelle au pouce qu'un tiroir
   latéral sur petit écran. Le tiroir (.fx-sidebar) reste accessible via le bouton ☰ pour les
   sections secondaires (Administration, à venir...). */
.fx-bottom-tabs { display: none; }
@media (max-width: 900px) {
  .fx-bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
    background: var(--surface); border-top: 1px solid var(--border);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    box-shadow: 0 -8px 20px rgba(16, 36, 27, .06);
  }
  .fx-bottom-tabs a {
    flex: 0 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 6px 8px; border-radius: 10px; text-decoration: none;
    color: var(--ink-faint); font-size: 10px; font-weight: 700;
  }
  .fx-bottom-tabs a .fx-bt-icon { font-size: 18px; }
  .fx-bottom-tabs a.active { color: var(--primary-deep); background: var(--primary-soft); }
  html.fx-pinned .fx-bottom-tabs { display: none; }
  .fx-footer { padding-bottom: 84px; }
}

/* ---------- Barre d'étapes (cycle de vie d'une bande, inspirée des jauges de stade cultural) ---------- */
.fx-stage-bar { display: flex; gap: 3px; border-radius: var(--radius-small); overflow: hidden; margin-bottom: 18px; }
.fx-stage-bar span {
  flex: 1; text-align: center; padding: 9px 6px; font-size: 11px; font-weight: 800;
  color: #fff; text-transform: uppercase; letter-spacing: .03em; opacity: .38; transition: opacity .15s ease;
}
.fx-stage-bar span.active { opacity: 1; }
.fx-stage-bar .demarrage { background: var(--ink-faint); }
.fx-stage-bar .ponte { background: var(--primary); }
.fx-stage-bar .reformee { background: var(--gold); }
.fx-stage-bar .cloturee { background: var(--red); }

/* ---------- Footer (toutes les pages, toujours collé en bas et centré) ---------- */
.fx-footer { border-top: 1px solid var(--border); margin-top: 24px; flex-shrink: 0; }
.fx-footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 16px 24px 28px; display: flex; flex-wrap: wrap;
  justify-content: center; text-align: center; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-faint);
}
.fx-footer-inner a { color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.fx-footer-inner a:hover { color: var(--primary-deep); }
.fx-footer-sep { color: var(--border-strong); }

/* ---------- Formulaire public (/contact) ---------- */
.fx-public-shell { flex: 1; display: flex; justify-content: center; padding: 48px 20px; }
.fx-public-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px; align-self: flex-start; }
.fx-public-brand { display: flex; align-items: center; gap: 9px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: var(--primary-deep); margin-bottom: 6px; }
.fx-public-card h1, .fx-public-card h2 { font-family: 'Poppins', sans-serif; font-size: 22px; color: var(--ink); margin: 0 0 4px; }
.fx-public-card .sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 24px; }
.fx-module-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 4px; }
.fx-module-check {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.fx-module-check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.fx-module-check input { accent-color: var(--primary); }
.fx-module-badge { margin-left: auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.fx-module-check.disponible .fx-module-badge { color: var(--primary-deep); }
/* Formulaire /contact sur petit écran (vérification responsive du 11/10/2026) : une filière par ligne,
   sinon le libellé + le badge débordaient de 20 à 50 px à 360–390 px de large. */
@media (max-width: 480px) { .fx-module-grid { grid-template-columns: 1fr; } }

/* Barre du haut : logo cliquable vers l'accueil public (terangafarm.com), à droite sur toutes les pages. */
.fx-topbar { padding-right: 62px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; min-height: 38px; }
.fx-topbar .fx-menu-btn { margin-bottom: 0; }
.fx-home-logo { margin-left: auto; display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 10px; }
.fx-home-logo:hover { background: var(--primary-soft); }
.fx-home-logo img { height: 30px; width: auto; display: block; }
.fx-topbar-public { max-width: 1240px; width: 100%; margin: 0 auto; padding: 14px 20px 0; box-sizing: border-box; }