/* Le Fermier v2 — feuille de style principale (issue de la maquette validée). */

:root {
  --fond: #F3F5F2;
  --surface: #FFFFFF;
  --surface-2: #F7F9F7;
  --bord: #DDE3DE;
  --bord-fort: #C9D3CC;
  --filet: #E7ECE8;
  --encre: #16211C;
  --encre-2: #3C4842;
  --discret: #55615A;
  --vert: #1E6B4A;
  --vert-fonce: #134A33;
  --vert-vif: #2F8A5F;
  --vert-pale: #E3F1E9;
  --vert-tres-pale: #EEF3EF;
  --foret: #173A2E;
  --foret-2: #24503F;
  --foret-texte: #C9D8CF;
  --foret-discret: #8FA99A;
  --mais: #E3A72F;
  --mais-pale: #FBEFD2;
  --mais-texte: #7A4E05;
  --orange-pale: #FDF0E4;
  --orange-texte: #9A3412;
  --bleu-pale: #E6EEF8;
  --bleu-texte: #1D4E89;
  --rouge: #B42318;
  --rouge-pale: #FDECEA;
  --rayon: 14px;
  --rayon-petit: 10px;
  --police: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--vert); }
a:hover { color: var(--vert-fonce); }
h1, h2, h3 { margin: 0; line-height: 1.25; }
:focus-visible { outline: 3px solid var(--mais); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { flex-shrink: 0; }
.evitement { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 14px; border-radius: 8px; }
.evitement:focus { left: 8px; }

/* ---------- Cadre général ---------- */
.cadre { display: flex; min-height: 100vh; }
.barre {
  flex: 0 0 256px; background: var(--foret); color: var(--foret-texte);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 6px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marque { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; text-decoration: none; }
.marque-logo {
  width: 40px; height: 40px; border-radius: 12px; background: var(--mais); color: var(--foret);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.marque-logo.grand { width: 56px; height: 56px; border-radius: 16px; }
.marque-texte { display: flex; flex-direction: column; }
.marque-texte strong { color: #fff; font-size: 18px; letter-spacing: -0.01em; }
.marque-texte small { color: #9FB7A9; font-size: 12px; }
.menu { display: flex; flex-direction: column; gap: 14px; }
.menu-section { display: flex; flex-direction: column; gap: 2px; }
.menu-titre { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--foret-discret); padding: 0 10px 4px; }
.menu-lien {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px;
  border-radius: var(--rayon-petit); color: var(--foret-texte); text-decoration: none; font-size: 14px; font-weight: 500;
}
.menu-lien:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu-lien.actif { background: var(--foret-2); color: #fff; font-weight: 600; }
.menu-lien.actif .ico { color: var(--mais); }

.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.entete {
  display: flex; align-items: center; gap: 14px; padding: 12px 28px; background: var(--surface);
  border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 20;
}
.entete-date { font-size: 14px; color: var(--discret); }
.entete-espace { flex: 1; }
.ouvrir-menu { display: none; }
.contenu { width: 100%; max-width: 1200px; padding: 28px; display: flex; flex-direction: column; gap: 22px; }
.contenu:focus { outline: none; }

.fil { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--discret); }
.fil [aria-current] { color: var(--encre); font-weight: 600; }
.tete-page { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tete-page h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.sous-titre { margin: 4px 0 0; color: var(--discret); }
.tete-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: var(--rayon-petit); border: 1px solid transparent; font: inherit; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-principal { background: var(--vert); color: #fff; }
.btn-principal:hover { background: var(--vert-fonce); color: #fff; }
.btn-secondaire { background: var(--surface); border-color: var(--bord-fort); color: var(--encre); }
.btn-secondaire:hover { background: var(--surface-2); color: var(--encre); }
.btn-lien { background: none; border: 0; color: var(--vert); padding: 0 6px; text-decoration: underline; }
.btn-petit { min-height: 38px; padding: 0 14px; font-size: 13px; }
.btn-large { width: 100%; min-height: 50px; font-size: 16px; }
.btn-pointille { border: 1px dashed #9FB3A6; color: var(--vert); background: none; min-height: 40px; font-size: 13px; }
.btn-icone {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid transparent; background: none; color: var(--encre-2); cursor: pointer; font: inherit;
}
.btn-icone:hover { background: var(--vert-tres-pale); color: var(--encre); }
.btn-icone.danger:hover { background: var(--rouge-pale); color: var(--rouge); }

/* ---------- Cartes, pastilles, alertes ---------- */
.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); }
.bloc { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bloc h2, .centre-tete h2, .liste-outils h2 { font-size: 17px; font-weight: 700; }
.pastille {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
.pastille-vert { background: var(--vert-pale); color: var(--vert); }
.pastille-mais { background: var(--mais-pale); color: var(--mais-texte); }
.pastille-gris { background: #EEF1EF; color: var(--encre-2); }
.pastille-bleu { background: var(--bleu-pale); color: var(--bleu-texte); }
.pastille-orange { background: var(--orange-pale); color: var(--orange-texte); }

.alerte { padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; }
.alerte ul { margin: 6px 0 0; padding-left: 20px; }
.alerte-succes { background: var(--vert-pale); color: var(--vert-fonce); border-color: #BFDCCB; }
.alerte-info { background: var(--bleu-pale); color: var(--bleu-texte); border-color: #C7D6EA; }
.alerte-erreur { background: var(--rouge-pale); color: var(--rouge); border-color: #F4C7C2; }
.alerte-erreur a { color: var(--rouge); }
.debug { white-space: pre-wrap; font-size: 12px; margin: 10px 0 0; }

/* ---------- Tableau de bord ---------- */
.grille-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.kpi-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--discret); }
.kpi-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--vert-tres-pale); color: var(--vert); display: inline-flex; align-items: center; justify-content: center; }
.kpi-valeur { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.kpi-sub { font-size: 13px; color: var(--discret); }

.alertes { display: flex; flex-direction: column; gap: 10px; }
.alerte-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; }
.alerte-ico { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alerte-texte { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--encre-2); }
.alerte-texte strong { font-size: 14px; }
.ton-orange { background: var(--orange-pale); }
.ton-orange strong, .ton-orange .alerte-ico { color: var(--orange-texte); }
.ton-mais { background: var(--mais-pale); }
.ton-mais strong, .ton-mais .alerte-ico { color: var(--mais-texte); }
.ton-bleu { background: var(--bleu-pale); }
.ton-bleu strong, .ton-bleu .alerte-ico { color: var(--bleu-texte); }
.calme { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--vert); }

.centre { display: flex; flex-direction: column; gap: 12px; }
.centre-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.centre-tete span { font-size: 13px; color: var(--discret); }
.grille-batiments { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.batiment { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.batiment-tete, .batiment-bande { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.batiment-tete strong { font-size: 15px; }
.batiment-bande a { font-weight: 600; font-size: 14px; }
.batiment-bande span { font-size: 13px; color: var(--discret); }
.barre-progression { height: 8px; border-radius: 999px; background: var(--filet); overflow: hidden; }
.barre-progression span { display: block; height: 100%; border-radius: 999px; background: var(--vert-vif); }
.barre-progression span.mais { background: var(--mais); }
.batiment-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.batiment-chiffres span { display: flex; flex-direction: column; gap: 2px; }
.batiment-chiffres small { font-size: 12px; color: var(--discret); }
.batiment-chiffres strong { font-size: 15px; }
.note-orange { font-size: 12px; font-weight: 600; color: var(--orange-texte); }
.note-bleu { font-size: 12px; font-weight: 600; color: var(--bleu-texte); }
.batiment-chiffres .pleine { grid-column: 1 / -1; }
.batiment-libre { margin: 0; font-size: 13px; color: var(--discret); }

.vide-etat { padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; color: var(--discret); }
.vide-etat h2 { color: var(--encre); font-size: 18px; }
.vide-etat p { margin: 0; max-width: 560px; }

/* ---------- Listes ---------- */
.liste { display: flex; flex-direction: column; }
.liste-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.liste-recherche { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 380px; }
.champ-recherche {
  flex: 1 1 260px; max-width: 440px; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--bord); border-radius: var(--rayon-petit); background: var(--surface-2); color: var(--discret);
}
.champ-recherche input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--encre); outline: none; }
.champ-recherche:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.table-defile { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  background: var(--surface-2); color: var(--discret); text-align: left; padding: 10px 14px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap;
}
.table th a { color: inherit; text-decoration: none; }
.table th a:hover { color: var(--encre); }
.table td { padding: 11px 14px; border-top: 1px solid var(--filet); vertical-align: middle; }
.table tbody tr:hover td { background: #FAFBFA; }
.table .num { text-align: right; white-space: nowrap; }
.table .actions { text-align: right; white-space: nowrap; width: 1%; padding-top: 4px; padding-bottom: 4px; }
.table .vide { text-align: center; color: var(--discret); padding: 28px 14px; }
.en-ligne { display: inline; }
.liste-pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--filet); font-size: 13px; color: var(--discret);
}
.liste-pp select { margin-left: 6px; min-height: 36px; border: 1px solid var(--bord); border-radius: 8px; font: inherit; padding: 0 8px; background: var(--surface); }
.pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.pagination a, .pagination span {
  min-width: 36px; height: 36px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--bord); color: var(--encre); text-decoration: none;
}
.pagination a.actif { background: var(--vert); border-color: var(--vert); color: #fff; font-weight: 700; }
.pagination .inactif { color: #A9B3AD; }
.pagination .ellipse { border: 0; }

/* Menus déroulants (export, compte) */
.menu-deroulant { position: relative; }
.menu-deroulant > summary { list-style: none; cursor: pointer; }
.menu-deroulant > summary::-webkit-details-marker { display: none; }
.menu-panneau {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; z-index: 30; background: var(--surface);
  border: 1px solid var(--bord); border-radius: 12px; box-shadow: 0 10px 30px rgba(22,33,28,.12); padding: 6px;
  display: flex; flex-direction: column;
}
.menu-panneau a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--encre); text-decoration: none; font-size: 14px; }
.menu-panneau a:hover { background: var(--vert-tres-pale); }
.compte > summary { display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 12px; }
.compte > summary:hover { background: var(--surface-2); }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--vert-pale); color: var(--vert); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.compte-texte { display: flex; flex-direction: column; line-height: 1.2; }
.compte-texte strong { font-size: 14px; }
.compte-texte small { font-size: 12px; color: var(--discret); }

/* ---------- Formulaires ---------- */
.formulaire { padding: 8px 24px 24px; display: flex; flex-direction: column; gap: 6px; max-width: 900px; }
.formulaire > .alerte { margin-top: 16px; }
.form-section { padding: 18px 0; border-bottom: 1px solid var(--filet); display: flex; flex-direction: column; gap: 14px; }
.form-section h2 { font-size: 16px; }
.grille-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.champ.large { grid-column: 1 / -1; }
.champ label, .champ legend { font-size: 14px; font-weight: 600; color: var(--encre); padding: 0; }
.champ input, .champ select, .champ textarea {
  min-height: 46px; padding: 10px 12px; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit);
  font: inherit; color: var(--encre); background: var(--surface); width: 100%;
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.champ .aide { margin: 0; font-size: 12px; color: var(--discret); }
.champ .erreur { margin: 0; font-size: 13px; font-weight: 600; color: var(--rouge); }
.en-erreur input, .en-erreur select, .en-erreur textarea { border-color: var(--rouge); }
.requis { color: var(--rouge); }
.segments { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); overflow: hidden; width: fit-content; max-width: 100%; }
.segments input { position: absolute; opacity: 0; pointer-events: none; }
.segments label { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; cursor: pointer; font-weight: 500; border-right: 1px solid var(--bord-fort); }
.segments label:last-child { border-right: 0; }
.segments input:checked + label { background: var(--vert); color: #fff; font-weight: 600; }
.segments input:focus-visible + label { outline: 3px solid var(--mais); outline-offset: -3px; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 18px; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.pile-bas { margin-top: 10px; text-align: center; }
.mdp { position: relative; display: flex; }
.mdp input { padding-right: 48px; }
.mdp .btn-icone { position: absolute; right: 3px; top: 3px; }

.grille-deux { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.infos { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.infos dt { color: var(--discret); font-size: 14px; }
.infos dd { margin: 0; font-weight: 600; }

/* ---------- Connexion ---------- */
.page-connexion { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: linear-gradient(160deg, var(--foret) 0 38%, var(--fond) 38% 100%); }
.connexion { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 22px; }
.connexion-marque { display: flex; align-items: center; gap: 14px; color: #fff; }
.connexion-marque h1 { font-size: 26px; }
.connexion-marque p { margin: 2px 0 0; color: var(--foret-texte); font-size: 14px; }
.connexion-carte { padding: 26px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 50px rgba(22,33,28,.15); }
.connexion-carte h2 { font-size: 20px; }
.aide-texte { margin: 0; font-size: 13px; color: var(--discret); }

/* ---------- Mobile ---------- */
.voile { display: none; }
@media (max-width: 900px) {
  .barre { position: fixed; left: 0; top: 0; bottom: 0; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; }
  .barre.ouverte { transform: none; }
  .voile:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
  .ouvrir-menu { display: inline-flex; }
  .entete { padding: 10px 14px; }
  .entete-date, .compte-texte { display: none; }
  .contenu { padding: 18px 14px; }
  .tete-page h1 { font-size: 24px; }
  .formulaire { padding: 4px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .barre { transition: none; } }
@media print {
  .barre, .entete, .tete-actions, .liste-outils, .liste-pied .pagination, .actions { display: none !important; }
  body { background: #fff; }
  .carte { border: 0; }
}

/* ---------- Étape 2 : référentiels ---------- */
.btn-icone.inactif { color: #B7C0BA; cursor: help; }
.btn-icone.inactif:hover { background: none; color: #B7C0BA; }
.onglets { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--bord); }
.onglets a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; color: var(--discret); text-decoration: none; font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglets a:hover { color: var(--encre); }
.onglets a.actif { color: var(--encre); font-weight: 700; border-bottom-color: var(--vert); }
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtres .champ { min-width: 220px; }
.cellule-sous { display: block; font-size: 12px; color: var(--discret); }
.encart { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--filet); font-size: 14px; color: var(--encre-2); }
.encart strong { color: var(--encre); }
.masque { display: none !important; }

/* ---------- Étape 3 : élevage ---------- */
.danger-texte { color: var(--rouge); }
.texte-orange { color: var(--orange-texte); }
.libelle-fixe { font-size: 14px; font-weight: 600; }
.valeur-fixe { margin: 0; min-height: 46px; display: flex; align-items: center; color: var(--encre-2); }
.bloc-tete { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.fiche-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px; }
.fiche-ident { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 14px; color: var(--encre-2); }
.fiche-avancement { display: flex; flex-direction: column; gap: 8px; }
.fiche-avancement-texte { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--encre-2); }
.fiche-avancement-texte strong { color: var(--encre); }
.barre-progression.grande { height: 10px; }
.histo { display: flex; align-items: flex-end; gap: 6px; height: 150px; border-bottom: 1px solid var(--bord); padding-bottom: 4px; }
.histo-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.histo-val { font-size: 11px; font-weight: 600; color: var(--encre-2); }
.histo-barre { width: 100%; max-width: 22px; border-radius: 5px 5px 0 0; background: var(--vert-vif); }
.histo-barre.fort { background: var(--mais); }
.histo-barre.vide { background: var(--filet); }
.histo-legende { display: flex; justify-content: space-between; font-size: 11px; color: var(--discret); }
.barre-couts { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--filet); }
.c1 { background: var(--vert); } .c2 { background: var(--mais); } .c3 { background: var(--bleu-texte); } .c4 { background: var(--orange-texte); }
.couts-lignes { display: flex; flex-direction: column; gap: 10px; }
.couts-ligne { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.couts-ligne .couts-lib { flex: 1; }
.couts-ligne strong { min-width: 100px; text-align: right; }
.puce { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pied-bloc { padding: 0 18px 16px; }
.ligne-active td { background: var(--mais-pale) !important; }
.grille-programme { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.grille-programme .formulaire { max-width: none; }
.grille-programme .form-section { gap: 14px; }
@media (max-width: 1000px) { .grille-programme { grid-template-columns: 1fr; } }

/* Saisie du jour (pensée pour le téléphone) */
.choix-bandes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.choix-bande { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--encre); align-items: flex-start; }
.choix-bande:hover { border-color: var(--vert); color: var(--encre); }
.choix-bande-tete { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.saisie { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.saisie-jour { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.saisie-jour > div { display: flex; flex-direction: column; }
.champ-date-compact input { min-height: 44px; padding: 0 10px; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); font: inherit; }
.puces-jours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.puce-jour { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--orange-pale); color: var(--orange-texte); text-decoration: none; font-weight: 600; font-size: 13px; }
.puce-jour.actif { background: var(--orange-texte); color: #fff; }
.encart-bleu { background: var(--bleu-pale); border-color: #C7D6EA; color: var(--bleu-texte); display: flex; gap: 8px; align-items: center; }
.encart-mais { background: var(--mais-pale); border-color: #F1D79B; color: var(--mais-texte); display: flex; gap: 8px; align-items: center; }
.saisie-carte { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.saisie-morts { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.saisie-morts label { display: flex; flex-direction: column; }
.saisie-morts .erreur { width: 100%; margin: 0; font-size: 13px; font-weight: 600; color: var(--rouge); }
.stepper { display: flex; align-items: center; gap: 8px; }
.btn-pas { width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--bord-fort); background: var(--surface); font: inherit; font-size: 24px; cursor: pointer; color: var(--encre); }
.btn-pas.plus { background: var(--vert); border-color: var(--vert); color: #fff; }
.stepper-valeur { width: 72px; min-height: 48px; text-align: center; font: inherit; font-size: 24px; font-weight: 700; border: 1px solid var(--bord-fort); border-radius: 12px; }
.grille-saisie { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.bascule { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.bascule input { width: 22px; height: 22px; accent-color: var(--vert); }
.separateur { height: 1px; background: var(--filet); }
.saisie-actions { display: flex; flex-wrap: wrap-reverse; gap: 10px; justify-content: flex-end; }
.saisie-actions .btn-large { width: auto; flex: 1 1 260px; }
@media (max-width: 600px) { .saisie-actions .btn { width: 100%; } }

/* ---------- Étape 4 : enlèvements et chambre froide ---------- */
.filtres-carte { padding: 14px 18px; }
.filtres-carte .filtres .champ { min-width: 160px; flex: 1 1 160px; }
.champ-qte { width: 110px; min-height: 42px; padding: 0 10px; text-align: right; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); font: inherit; }
.table tfoot th, .table tfoot td { padding: 12px 14px; border-top: 2px solid var(--bord); text-align: right; }
.table tfoot th { text-align: left; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--encre); background: none; }
tr.en-erreur td { background: var(--rouge-pale); }

.kpi-note { font-size: 11px; line-height: 1.4; color: var(--discret); border-top: 1px dashed var(--filet); padding-top: 6px; margin-top: 2px; }
.segments input:disabled + label { color: #A9B3AD; background: var(--surface-2); cursor: not-allowed; }

/* ---------- Étape 5 : boutiques et caisse ---------- */
.caisse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 18px; align-items: start; }
.caisse-produits { display: flex; flex-direction: column; gap: 14px; }
.caisse-produits .champ-recherche { max-width: none; }
.tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tuile {
  min-height: 104px; padding: 14px; border-radius: var(--rayon); border: 1px solid var(--bord); background: var(--surface);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; text-align: left;
  font: inherit; color: var(--encre); cursor: pointer;
}
.tuile:hover { border-color: var(--vert); box-shadow: 0 4px 14px rgba(22,33,28,.08); }
.tuile:active { transform: scale(.98); }
.tuile:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.tuile-nom { font-weight: 700; }
.tuile-prix { color: var(--vert); font-weight: 700; }
.tuile-stock { font-size: 12px; color: var(--discret); }
.caisse-ticket { padding: 18px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.caisse-ticket h2 { font-size: 17px; }
.lignes-panier { display: flex; flex-direction: column; gap: 10px; max-height: 40vh; overflow-y: auto; }
.ligne-panier { display: grid; grid-template-columns: 1fr auto auto auto; grid-template-areas: "nom moins qte plus" "montant montant montant montant"; align-items: center; gap: 4px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--filet); }
.ligne-panier .ligne-nom { grid-area: nom; font-weight: 600; }
.ligne-panier .ligne-nom small { font-weight: 400; color: var(--discret); }
.ligne-panier .ligne-qte { grid-area: qte; min-width: 28px; text-align: center; }
.ligne-panier .ligne-montant { grid-area: montant; text-align: right; font-weight: 600; }
.btn-pas.petit { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
.total-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 18px; padding-top: 4px; }
.total-ligne strong { font-size: 24px; }
.caisse-bloc { display: flex; flex-direction: column; gap: 10px; border: 0; margin: 0; padding: 0; }
.caisse-bloc > label, .caisse-bloc legend { font-size: 14px; font-weight: 600; padding: 0; }
.caisse-bloc select { min-height: 46px; padding: 0 10px; border: 1px solid var(--bord-fort); border-radius: var(--rayon-petit); font: inherit; background: var(--surface); }
.segments-pleins { width: 100%; }
.segments-pleins label { flex: 1 1 auto; justify-content: center; padding: 0 10px; }
.large-txt { width: 130px; text-align: left; }
.form-action { display: inline-flex; gap: 6px; align-items: center; margin-left: 4px; }
@media (max-width: 1000px) { .caisse { grid-template-columns: 1fr; } .caisse-ticket { position: static; } }

.ticket { max-width: 520px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.ticket-tete { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; font-size: 14px; }
.ticket-tete strong { font-size: 17px; }
.ticket-infos { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; font-size: 14px; }
.ticket-infos dt { color: var(--discret); }
.ticket-infos dd { margin: 0; }
.ticket-lignes td, .ticket-lignes th { padding: 8px 6px; }
.ticket-merci { text-align: center; color: var(--discret); margin: 0; }
@media print {
  .fil, .tete-page, .sans-impression, .alerte, .filtres-carte { display: none !important; }
  .contenu { padding: 0; max-width: none; }
  .ticket { max-width: 80mm; padding: 0; font-size: 12px; box-shadow: none; }
  .ticket .table th { background: none; }
}
.liste-produits { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.table-receptions td { vertical-align: top; }

/* ---------- Situation des boutiques ---------- */
.variation { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.var-bon { background: var(--vert-pale); color: var(--vert); }
.var-mauvais { background: var(--rouge-pale); color: var(--rouge); }
.var-neutre { background: #EEF1EF; color: var(--encre-2); }
.raccourcis { margin-top: 10px; }
.puce-periode { min-height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--bord-fort); color: var(--encre); text-decoration: none; font-size: 13px; font-weight: 600; }
.puce-periode.actif { background: var(--vert); border-color: var(--vert); color: #fff; }
.legende { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--discret); }
.c-prec { background: #C9D3CC; }
.graphe { width: 100%; height: auto; }
.graphe-axe { stroke: var(--bord); stroke-width: 1; }
.graphe-cur { fill: var(--vert-vif); }
.graphe-prec { fill: #C9D3CC; }
.graphe-txt { font-size: 10px; fill: var(--discret); text-anchor: middle; font-family: var(--police); }
.couts-ligne .variation { min-width: 70px; text-align: center; }
.c5 { background: #6B5B95; }
.texte-rouge { color: var(--rouge); }
.titre-groupe { font-size: 15px; font-weight: 700; color: var(--encre-2); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; }
.table-serree th, .table-serree td { padding: 9px 10px; font-size: 13px; }

.table-compte .ligne-titre th { background: var(--surface-2); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--encre); }
.table-compte .ligne-total td, .table-compte .ligne-total-charge td { border-top: 2px solid var(--bord); }
.table-compte .ligne-resultat td { border-top: 2px solid var(--encre-2); background: var(--vert-tres-pale); font-size: 15px; }

/* ---------- Étape 7 : comptes et droits ---------- */
.grille-droits { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.droit { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); cursor: pointer; }
.droit:hover { border-color: var(--vert); }
.droit input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--vert); flex-shrink: 0; }
.droit span { display: flex; flex-direction: column; gap: 2px; }
.droit small { color: var(--discret); font-size: 12px; }
.droit:has(input:checked) { background: var(--vert-tres-pale); border-color: var(--vert); }
.droit-ancien { opacity: .7; }
fieldset.droits { border: 0; margin: 0; }
fieldset.droits legend { padding: 0; }
.droits-puces { display: flex; flex-wrap: wrap; gap: 4px; }
.puce-droit { font-size: 11px; padding: 2px 8px; }
.texte-vert { color: var(--vert); font-weight: 600; }

/* ---------- Droits v2 ---------- */
.formulaire-large { max-width: 1100px; }
.table-droits th[scope="row"] { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--encre); background: none; white-space: normal; min-width: 180px; }
.table-droits .centre { text-align: center; }
.table-droits td { vertical-align: middle; width: 12%; padding-top: 6px; padding-bottom: 6px; }
.table-droits th[scope="row"] { width: 52%; }
.desc-niveau { display: block; font-size: 12px; font-weight: 400; color: var(--discret); margin-top: 2px; }
.table-droits .ligne-titre th { background: var(--surface-2); text-transform: uppercase; font-size: 11px; }
.choix-niveau { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; cursor: pointer; border-radius: 8px; }
.choix-niveau input { width: 20px; height: 20px; accent-color: var(--vert); }
.choix-niveau:has(input:checked) { background: var(--vert-tres-pale); }
.sans-objet { color: #B7C0BA; }
.liste-cases { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 12px; border: 1px solid var(--bord); border-radius: var(--rayon-petit); max-height: 200px; overflow-y: auto; }
.liste-cases .bascule { min-height: 36px; font-weight: 500; }
.raccourcis-niveaux { font-size: 13px; color: var(--discret); }

/* Grille des droits par module (version compacte) */
.titre-section-droits { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--discret); margin: 6px 0 0; }
.grille-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.module-droit { border: 1px solid var(--bord); border-radius: var(--rayon-petit); padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.module-droit legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.segments-compacts { width: 100%; }
.segments-compacts label { flex: 1 1 0; min-height: 34px; padding: 0 6px; justify-content: center; font-size: 13px; }
.segments-compacts input:disabled + label { color: #B7C0BA; background: var(--surface-2); cursor: not-allowed; }
.module-droit .desc-niveau { margin: 0; min-height: 16px; }

.btn-danger { background: var(--rouge); color: #fff; }
.btn-danger:hover { background: #8F1C13; color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.alerte-session { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 14px 18px; border-radius: 14px; background: var(--foret); color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); max-width: calc(100% - 24px); }
.alerte-session[hidden] { display: none; }

/* ---------- Identité Kiff Volailles ---------- */
.marque-image { background: #fff; overflow: hidden; }
.marque-image img { width: 100%; height: 100%; object-fit: contain; padding: 3px; box-sizing: border-box; }
.pied-page { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--bord); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--discret); }
.pied-connexion { margin: 0; text-align: center; font-size: 12px; color: var(--discret); }
.ticket-logo { width: 120px; height: auto; margin-bottom: 6px; }
@media print { .pied-page { display: none; } }
.caisse-produits .champ-recherche { flex: 0 0 auto; }

/* ---------- Étiquettes QR et photos ---------- */
.zone-scan { display: flex; flex-direction: column; gap: 8px; }
.zone-scan .champ-recherche { flex: 0 0 auto; max-width: none; border-color: var(--vert); background: var(--vert-tres-pale); }
.retour-scan { margin: 0; padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.retour-scan.ok { background: var(--vert-pale); color: var(--vert-fonce); }
.retour-scan.erreur { background: var(--rouge-pale); color: var(--rouge); }
.tuile-photo { width: 100%; height: 86px; object-fit: contain; border-radius: 8px; background: #fff; }
.produit-ligne { display: inline-flex; align-items: center; gap: 10px; }
.vignette { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--bord); flex-shrink: 0; }
.vignette.vide { display: inline-flex; align-items: center; justify-content: center; color: #B7C0BA; }
.photo-produit { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.photo-apercu { width: 120px; height: 120px; border: 1px solid var(--bord); border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #fff; color: #B7C0BA; overflow: hidden; }
.photo-apercu img { width: 100%; height: 100%; object-fit: contain; }
.historique { display: flex; flex-direction: column; gap: 14px; }
.historique-etape { display: flex; gap: 12px; align-items: flex-start; }
.rond-etape { width: 36px; height: 36px; border-radius: 50%; background: var(--vert-pale); color: var(--vert); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ligne-active td { background: var(--vert-tres-pale); }
.btn-whatsapp { white-space: nowrap; }

/* ---------- Commandes en ligne (étape 9.2) ---------- */
.encart-wa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.commande-grille { align-items: start; }
.action-commande form + form, .action-commande form + details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bord); }
.annuler-commande summary { cursor: pointer; color: var(--rouge); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.historique-commande { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; }
.tournee { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.tournee-carte .bloc-tete h2 { font-size: 16px; }
.tournee-adresse { margin: 0; display: flex; align-items: center; gap: 6px; }
.tournee-contact { display: flex; flex-wrap: wrap; gap: 8px; }
.tournee-carte details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; color: var(--encre-2); }
.impression-seule { display: none; }
@media print {
  body:has(.bon-preparation) .barre, body:has(.bon-preparation) .entete, body:has(.bon-preparation) .tete-actions,
  body:has(.bon-preparation) .fil, body:has(.bon-preparation) .commande-grille > .pile, body:has(.bon-preparation) .encart-wa,
  body:has(.bon-preparation) .pied-page, body:has(.bon-preparation) .messages { display: none !important; }
  .bon-preparation { border: 0; box-shadow: none; }
  .impression-seule { display: block; }
  th.impression-seule, td.impression-seule { display: table-cell; }
}
.pastille-rouge { background: var(--rouge-pale); color: var(--rouge); }
.actions-web { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.actions-web details { flex-basis: 100%; }
fieldset.sans-cadre { border: 0; margin: 0; padding: 0; min-width: 0; }
/* ---------- Marketing ---------- */
.grille-segments { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.segment-carte { text-decoration: none; color: inherit; }
.segment-carte:hover { border-color: var(--vert); }
.segment-carte.actif { border: 2px solid var(--vert); background: var(--vert-tres-pale); }
.offre-caisse { background: var(--mais-pale, #FBEFD2); border: 1px solid #F1D79B; border-radius: 12px; padding: 10px 12px; margin: 8px 0; }
.offre-caisse .bascule span { font-weight: 600; }
.apercu-message { background: var(--fond); border-radius: 12px; padding: 14px; margin: 0; white-space: normal; }