/* Mont Vert — interface de l'exploitation.
   Plan : en-tête fixe, une vue à la fois ; couleurs = familles botaniques. */
:root {
  --fond: #f5f6f1;
  --surface: #ffffff;
  --texte: #1f2a1f;
  --texte-doux: #5b665b;
  --bordure: #dfe3d8;
  --accent: #2f6b3a;
  --accent-doux: #e3eee2;
  --alerte: #b42318;
  --alerte-fond: #fdecea;
  --ok: #2f6b3a;
  --attention: #9a6700;
  --rayon: 8px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* familles */
  --f-solanacees: #c2412d;
  --f-cucurbitacees: #e0a21b;
  --f-melange_feuilles: #4c9a4f;
  --f-fabacees: #7b5ea7;
  --f-apiacees: #e07a2d;
  --f-poacees: #a1887f;
  --f-brassicacees: #3f7cac;
  --f-alliacees: #b05a8f;
  --f-convolvulacees: #8d6e3c;
  --f-passifloracees: #6a3d9a;
  --f-autre: #9aa39a;
  --f-libre: #eef0ea;
  /* séries du graphique de production (ordre validé pour le daltonisme) */
  --fond-plan: #e9ede3; --route: #c9c2b4;
  --s-tomate: #c2412d; --s-poivron: #6a4fa3; --s-melon: #e0a21b; --s-jp: #4c9a4f; --s-autres: #9aa39a;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #141914; --surface: #1c231c; --texte: #e6ece5; --texte-doux: #a3ada2; --bordure: #2e382e;
    --accent: #7cc489; --accent-doux: #243a27; --alerte: #f2877c; --alerte-fond: #3a1f1c; --ok: #7cc489;
    --attention: #e3b341; --f-libre: #232b23;
    --fond-plan: #1a201a; --route: #3a3a33;
    --s-tomate: #e66767; --s-poivron: #9085e9; --s-melon: #c98500; --s-jp: #199e70; --s-autres: #6e766e;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 15px; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; }
h2 { font-size: 1.05rem; margin-top: 1.5rem; }
.muted { color: var(--texte-doux); }
.centre { text-align: center; padding: 2rem 1rem; }
.erreur { color: var(--alerte); }
.note { font-size: .8rem; color: var(--texte-doux); margin: .5rem 0 0; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: .45rem .9rem; }
button.secondaire { background: transparent; color: var(--accent); }
button.lien { background: none; border: none; color: var(--accent); padding: 0; text-decoration: underline; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select, input[type=date], input[type=search], input[type=email], input[type=password], input[type=number], input[type=text], textarea {
  background: var(--surface); color: var(--texte); border: 1px solid var(--bordure); border-radius: 6px; padding: .4rem .5rem;
}
input::placeholder, textarea::placeholder { color: var(--texte-doux); opacity: .8; }
@media (prefers-color-scheme: dark) { input, select, textarea { color-scheme: dark; } }

/* Connexion */
.connexion { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.connexion-carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 2rem; width: min(100%, 380px); display: flex; flex-direction: column; gap: .5rem; }
.connexion-carte h1 { font-size: 1.4rem; color: var(--accent); }
.connexion-carte button { margin-top: .75rem; }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--surface); border-bottom: 1px solid var(--bordure); }
.marque { font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.onglets { display: flex; gap: .25rem; }
.onglets a { padding: .4rem .8rem; border-radius: 6px; color: var(--texte); text-decoration: none; }
.onglets a.actif { background: var(--accent-doux); color: var(--accent); font-weight: 600; }
.utilisateur { margin-left: auto; display: flex; gap: .75rem; align-items: center; font-size: .9rem; }
main { padding: 1rem; max-width: 1500px; margin: 0 auto; }

.barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .75rem; }
.barre-outils input[type=range] { flex: 1 1 220px; accent-color: var(--accent); }

/* Carte */
.carte-grille { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .carte-grille { grid-template-columns: 1fr; } }
.carte-cadre, .fiche { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem; min-width: 0; }
#plan { width: 100%; height: auto; display: block; }
#plan .zone-fond { fill: var(--f-libre); stroke: var(--bordure); }
#plan .zone-titre { fill: var(--texte-doux); font-size: 11px; }
#plan .parcelle rect { stroke: var(--surface); stroke-width: 1.2; cursor: pointer; }
#plan .parcelle.prevue rect { stroke-dasharray: 3 2; stroke: var(--texte); }
#plan .parcelle.choisie rect { stroke: var(--texte); stroke-width: 2.5; }
#plan .parcelle text { font-size: 7.5px; pointer-events: none; fill: var(--texte); }
#plan .parcelle .alerte { fill: var(--alerte); stroke: #fff; stroke-width: 1; }
#plan .photo .parcelle polygon { stroke: rgba(255,255,255,.9); stroke-width: 1.5; cursor: pointer; }
#plan .photo .parcelle.libre polygon { fill: rgba(255,255,255,.08); stroke-dasharray: 5 4; }
#plan .photo .parcelle.prevue polygon { stroke-dasharray: 6 4; stroke: #fff; }
#plan .photo .parcelle.choisie polygon { stroke: #ffd84d; stroke-width: 4; stroke-dasharray: none; }
#plan .photo .parcelle:hover polygon, #plan .photo .parcelle:focus polygon { stroke-width: 3; }
#plan .photo .parcelle text { pointer-events: none; font-size: 14px; font-weight: 600; fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.75); stroke-width: 3px; }
#plan .photo .parcelle text.culture { font-size: 12px; font-weight: 500; }
#plan .photo image { opacity: .95; }
.bascule { display: inline-flex; margin-left: auto; }
.bascule button { border-radius: 0; }
.bascule button:first-child { border-radius: 6px 0 0 6px; }
.bascule button:last-child { border-radius: 0 6px 6px 0; border-left: none; }
.bascule button.actif { background: var(--accent); color: var(--surface); }
.legende { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: var(--texte-doux); margin-top: .5rem; }
.legende span { display: inline-flex; align-items: center; gap: .35rem; }
.legende i { width: .8rem; height: .8rem; border-radius: 2px; display: inline-block; }
.legende i.prevu { background: transparent !important; border: 1.5px dashed var(--texte-doux); }
.legende i.alerte { border-radius: 50%; width: .55rem; height: .55rem; background: var(--alerte); }

.fiche h3 { font-size: 1.15rem; }
.fiche dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; margin: .5rem 0 1rem; font-size: .9rem; }
.fiche dt { color: var(--texte-doux); }
.fiche dd { margin: 0; }
.fiche ol { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; }
.fiche li { display: grid; grid-template-columns: .7rem 1fr; gap: .5rem; align-items: start; }
.fiche li i { width: .7rem; height: .7rem; border-radius: 2px; margin-top: .25rem; }
.fiche li.prevue i { background: transparent !important; border: 1.5px dashed var(--texte-doux); }
.fiche li.encours { font-weight: 600; }
.pastille { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--bordure); color: var(--texte-doux); }
.pastille.alerte { background: var(--alerte-fond); color: var(--alerte); border-color: transparent; }
.pastille.ok { background: var(--accent-doux); color: var(--ok); border-color: transparent; }
.alerte-texte { color: var(--alerte); font-size: .88rem; margin: 0 0 .35rem; }

/* Frise */
.frise { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem; overflow-x: auto; }
.frise svg { display: block; }
.frise .grille { stroke: var(--bordure); }
.frise .mois { fill: var(--texte-doux); font-size: 11px; }
.frise .etiquette { fill: var(--texte); font-size: 11px; font-variant-numeric: tabular-nums; }
.frise .barre { cursor: default; }
.frise .aujourdhui { stroke: var(--texte); stroke-dasharray: 3 3; }
.frise .separateur { stroke: var(--bordure); }

/* Tables */
.table-cadre { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); overflow: auto; max-height: 70vh; }
table { border-collapse: collapse; width: 100%; font-size: .88rem; }
th { position: sticky; top: 0; background: var(--surface); text-align: left; font-weight: 600; color: var(--texte-doux);
  padding: .5rem .6rem; border-bottom: 1px solid var(--bordure); white-space: nowrap; }
td { padding: .45rem .6rem; border-bottom: 1px solid var(--bordure); vertical-align: top; }
td.date { white-space: nowrap; font-variant-numeric: tabular-nums; }

.infobulle { position: fixed; z-index: 10; pointer-events: none; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.15); padding: .4rem .6rem; font-size: .82rem; max-width: 18rem; }
.infobulle b { display: block; }

/* Simulation */
.espace { flex: 1 1 auto; }
button.danger { color: var(--alerte); border-color: var(--alerte); }
button.danger:not(.secondaire) { background: var(--alerte); color: #fff; }
body.occupe { cursor: progress; }
body.occupe button { pointer-events: none; opacity: .6; }
.message { background: var(--accent-doux); border-radius: var(--rayon); padding: .6rem .8rem; margin: 0 0 .75rem; }
.message.erreur { background: var(--alerte-fond); color: var(--alerte); }
.resume { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin: .5rem 0 1rem; }
.tuile { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .7rem .9rem; }
.tuile-titre { font-size: .8rem; color: var(--texte-doux); }
.tuile-valeur { font-size: 1.45rem; font-weight: 650; font-variant-numeric: tabular-nums; margin: .15rem 0; }
.tuile-detail { font-size: .8rem; color: var(--texte-doux); }
.tuile.alerte .tuile-valeur { color: var(--alerte); }
.tuile.ok .tuile-valeur { color: var(--ok); }
.sim-grille { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .sim-grille { grid-template-columns: 1fr; } }
.sim-principal { min-width: 0; }
#sim-panneau { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow: auto; }
.frise .hors-annee { fill: var(--texte); opacity: .05; }
.frise .grille.annee { stroke: var(--texte-doux); }
.frise .ligne-fond { fill: transparent; cursor: copy; }
.frise .ligne-fond:hover { fill: var(--accent-doux); }
.frise .barre-passe { opacity: .3; }
.frise .barre-sim { cursor: pointer; }
.frise .barre-sim rect { stroke: var(--surface); stroke-width: 1; }
.frise .barre-sim.prevu rect { fill-opacity: .78; }
.frise .barre-sim.en_place rect { fill-opacity: 1; }
.frise .barre-sim.choisie rect { stroke: var(--texte); stroke-width: 2.5; }
.frise .barre-sim:hover rect, .frise .barre-sim:focus rect { stroke: var(--texte); stroke-width: 1.5; }
.frise .barre-sim text { font-size: 10.5px; fill: #fff; pointer-events: none; }
.frise .barre-sim .alerte { fill: var(--alerte); stroke: #fff; stroke-width: 1; }
.frise .repere-ajout { stroke: var(--accent); stroke-width: 2; }
tr.cliquable { cursor: pointer; }
tr.cliquable:hover td { background: var(--accent-doux); }
.formulaire { display: grid; grid-template-columns: auto 1fr; gap: .4rem .75rem; align-items: center; margin: .75rem 0; }
.formulaire select, .formulaire input { width: 100%; }
.boutons { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 1rem; }
label.case { display: block; font-size: .88rem; margin: .25rem 0; }
.conseil-texte { color: var(--attention); font-size: .88rem; margin: 0 0 .35rem; }
.alerte-texte.petit { font-size: .8rem; margin: .15rem 0 0; }
ol.propositions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
ol.propositions li { display: grid; grid-template-columns: .7rem 1fr auto; gap: .55rem; align-items: start;
  border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .5rem .6rem; font-size: .86rem; }
ol.propositions li > i { width: .7rem; height: .7rem; border-radius: 2px; margin-top: .3rem; }
ol.propositions li button { padding: .3rem .7rem; font-size: .85rem; }
.prop-chiffres { font-variant-numeric: tabular-nums; }
.prop-etat { margin-top: .2rem; }
.hausse { color: var(--ok); }
.baisse { color: var(--alerte); }

/* Production */
h2.sans-marge { margin-top: 0; }
#prod-graphe svg { display: block; }
.axe-grille { stroke: var(--bordure); }
.axe-texte { fill: var(--texte-doux); font-size: 11px; font-variant-numeric: tabular-nums; }
.zone-survol { fill: transparent; }
.zone-survol:hover { fill: var(--texte); opacity: .04; }
.repere-comparaison { stroke: var(--texte); stroke-width: 2; }
.serie-tomate { fill: var(--s-tomate); background: var(--s-tomate); }
.serie-poivron { fill: var(--s-poivron); background: var(--s-poivron); }
.serie-melon { fill: var(--s-melon); background: var(--s-melon); }
.serie-jp { fill: var(--s-jp); background: var(--s-jp); }
.serie-autres { fill: var(--s-autres); background: var(--s-autres); }
.legende i.repere { height: 2px; width: 1rem; background: var(--texte); border-radius: 0; }
th.nombre, td.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.fort, tr.total td { font-weight: 650; }
tr.total td { border-top: 2px solid var(--bordure); }
td.depasse { color: var(--alerte); font-weight: 650; }
td.depasse::after { content: ' ▲'; font-size: .7em; }

/* Vue par culture */
.frise .barre-sim.autre-groupe rect { fill-opacity: .18; }
.frise .barre-sim.autre-groupe text { display: none; }
.graphe-mois { margin-bottom: 1rem; }
.graphe-mois svg { display: block; }
.axe-titre { fill: var(--texte); font-size: 12px; font-weight: 600; }
button.lien { font-size: .85rem; margin-bottom: .4rem; }

/* Plan dessiné d'après la photo */
#plan .vecteur .fond-plan { fill: var(--fond-plan); }
#plan .vecteur .route { fill: none; stroke: var(--route); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
#plan .vecteur .nom-zone { fill: var(--texte-doux); font-size: 20px; font-weight: 600; letter-spacing: .04em; }
#plan .vecteur .parcelle polygon { stroke: var(--surface); stroke-width: 2; }
#plan .vecteur .parcelle.libre polygon { stroke: var(--bordure); stroke-dasharray: none; }
#plan .vecteur .parcelle.prevue polygon { stroke: var(--texte-doux); stroke-dasharray: 6 4; }
#plan .vecteur .parcelle.choisie polygon { stroke: var(--texte); stroke-width: 4; stroke-dasharray: none; }
#plan .vecteur .parcelle.libre text { fill: var(--texte-doux); stroke: none; }

label.champ { display: inline-flex; align-items: center; gap: .4rem; }
.petit { font-size: .78rem; }
td .fort { font-weight: 600; }

/* Paramètres */
table.parametres td { vertical-align: top; }
.saisie { padding: .25rem .35rem; }
input.saisie[type=number] { width: 6.5rem; }
input.court { width: 5rem; }
.avec-unite { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.retenu { font-size: .76rem; color: var(--texte-doux); margin-top: .2rem; }
.retenu.objectif { color: var(--accent); font-weight: 600; }
.params-regle { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .85rem; }
.params-regle label { display: inline-flex; align-items: center; gap: .3rem; }
input.large { width: 100%; min-width: 16rem; font-weight: 600; }
tr.inactive td { opacity: .5; }
.ajout-regle { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; background: var(--surface);
  border: 1px solid var(--bordure); border-radius: var(--rayon); padding: .75rem; margin-top: 1rem; }
.ajout-regle h3 { width: 100%; margin: 0; font-size: 1rem; }
.ajout-regle label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; }
.ajout-regle .note { width: 100%; }

/* Bilan de rotation */
.barre-familles { display: flex; height: .8rem; width: min(260px, 100%); border-radius: 3px; overflow: hidden; gap: 1px; background: var(--bordure); }
.barre-familles span { display: block; height: 100%; }
.pastille.ev { background: var(--accent-doux); color: var(--ok); border-color: transparent; margin: 0 .25rem .2rem 0; }
.pastille.coupure { margin: 0 .25rem .2rem 0; }
.pastille.prevu { border-style: dashed; border-color: currentColor; }
.legende i.ev { background: repeating-linear-gradient(45deg, var(--f-poacees) 0 3px, rgba(255,255,255,.6) 3px 5px); }
.frise .barre-sim .hachures { pointer-events: none; }
#sim-bilan td { vertical-align: middle; }

.ok-texte { color: var(--ok); font-weight: 600; }
.attention-texte { color: var(--attention); font-weight: 600; }

table.parametres .avec-unite + .avec-unite { margin-top: .3rem; }
table.parametres td > .avec-unite { display: flex; }

/* Sous-onglets */
nav.sous-onglets { display: flex; gap: .25rem; border-bottom: 1px solid var(--bordure); margin: .5rem 0 1rem; flex-wrap: wrap; }
nav.sous-onglets button { background: none; border: none; border-bottom: 3px solid transparent; border-radius: 0;
  color: var(--texte-doux); padding: .55rem .9rem; font-weight: 500; display: inline-flex; align-items: center; gap: .4rem; }
nav.sous-onglets button:hover { color: var(--texte); }
nav.sous-onglets button.actif { color: var(--accent); border-bottom-color: var(--accent); font-weight: 650; }
nav.sous-onglets .badge { font-size: .72rem; min-width: 1.3rem; padding: .05rem .4rem; border-radius: 999px; background: var(--accent-doux); color: var(--accent); text-align: center; }
nav.sous-onglets .badge.alerte { background: var(--alerte-fond); color: var(--alerte); }
.panneau-onglet > .table-cadre { max-height: none; }
details.detail-tableau { margin-top: .75rem; }
details.detail-tableau summary { cursor: pointer; color: var(--accent); font-size: .9rem; margin-bottom: .5rem; }

/* Glisser sur la frise */
.barre-outils.glisser { font-size: .85rem; margin-bottom: .4rem; }
.frise .barre-sim.prevu { cursor: grab; }
.frise .barre-sim.en_place { cursor: pointer; }
.frise .barre-sim .poignee { fill: transparent; cursor: ew-resize; }
.frise .barre-sim:hover .poignee { fill: var(--texte); opacity: .25; }
.frise.en-glisse, .frise.en-glisse * { cursor: grabbing !important; user-select: none; }
.frise .barre-sim.bouge rect:not(.poignee) { stroke: var(--texte); stroke-width: 1.5; stroke-dasharray: 4 2; }
.frise .barre-sim.bouge { opacity: .9; }
.frise .barre-sim rect.poignee { stroke: none; }