/* ==========================================================================
   Les Racines Cubiques · Calendrier de culture — charte
   Palette tirée du logo (cube de terre à 3 couches + semis).
   Les 3 phases d'un lot : levée (canard) · élevage (orange) · vente (pousse).
   Le rouge tomate est réservé aux alertes. Signature : la plaque alvéolée.
   ========================================================================== */

@font-face {
  font-family: "Erica One";
  src: url("../fonts/erica-one-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin-var-2.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  /* Logo */
  --canard-nuit: #072026;
  --canard: #0f4c5c;
  --canard-clair: #1b7f96;
  --canard-voile: #dcebee;
  --orange: #fb8b24;
  --orange-brun: #b7631d;
  --orange-voile: #feecd9;
  --pousse: #2e783b;
  --pousse-clair: #8ac53f;
  --pousse-voile: #e3f0d8;
  --pousse-vif: #5eb24d;   /* commandé, à venir (à côté du réalisé, vert foncé) */
  --tomate: #c6062f;
  --tomate-fonce: #9a031e;
  --tomate-voile: #fbe4e8;
  --terreau: #5b3f33;

  /* Phases (palette validée : clarté, chroma, daltonisme) */
  --phase-levee: #0a84a6;
  --phase-elevage: #fb8b24;
  --phase-vente: #2e783b;

  /* Encres et surfaces */
  --encre: #13201f;
  --encre-2: #3f4e4d;
  --encre-3: #5f6e6d;
  --fond: #e7efed;
  --feuille: #ffffff;
  --filet: #d2ddda;
  --filet-fort: #9db0ac;
  --alveole: #e2eae8;
  --alveole-bord: #c3d1ce;

  --titre: "Erica One", "Arial Black", sans-serif;
  --texte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --rayon: 10px;
  --rayon-petit: 4px;
  --marge: clamp(16px, 3.2vw, 40px);
  --nav: 252px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 15.5px;
  font-weight: 460;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Zones qui défilent : elles contiennent aussi leurs éléments positionnés (libellés masqués), sinon la page déborde. */
.liste-defile, .tableau-defile, .gantt-defile, .plaque-defile { position: relative; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
svg.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nombres { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

/* ---------- Coquille ---------------------------------------------------- */

.coquille {
  display: grid;
  grid-template-columns: var(--nav) minmax(0, 1fr);
  min-height: 100vh;
}

.nav {
  position: sticky;
  z-index: 20;   /* au-dessus des en-têtes collants de la page (liste de recherche) */
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 16px 20px;
  background: var(--canard);
  color: #fff;
}
.nav__logo { display: block; padding: 0 6px; }
.nav__logo img { display: block; width: 100%; max-width: 204px; height: auto; }
.nav__liens { display: grid; gap: 2px; }
.nav__lien {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--rayon-petit);
  color: rgba(255, 255, 255, .84);
  text-decoration: none;
  font-weight: 560;
}
.nav__lien:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav__lien[aria-current="page"] { background: #fff; color: var(--canard-nuit); }
.nav__lien[aria-disabled="true"] { color: rgba(255, 255, 255, .5); cursor: default; }
.nav__lien[aria-disabled="true"]:hover { background: none; }
.nav__bientot { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, .5); }

.nav__saison {
  margin-top: auto;
  padding: 14px 12px 0;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .78);
}
.nav__saison strong { display: block; color: #fff; font-size: 17px; font-weight: 720; }

.page { min-width: 0; padding: 0 var(--marge) 64px; }

.bandeau {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 calc(var(--marge) * -1) 0;
  padding: 10px var(--marge);
  background: var(--pousse-voile);
  border-bottom: 1px solid var(--filet);
  color: var(--pousse);
  font-size: 14.5px;
  font-weight: 560;
}
.bandeau--erreur { background: var(--tomate-voile); color: var(--tomate-fonce); }
.bandeau--info { background: var(--canard-voile); color: var(--canard); }

/* ---------- En-tête de vue ---------------------------------------------- */

.entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 28px;
  padding: 30px 0 22px;
  border-bottom: 2px solid var(--canard-nuit);
}
.entete__contexte { color: var(--encre-2); font-size: 14.5px; }
.entete h1 {
  font-family: var(--titre);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .95;
  letter-spacing: .5px;
  color: var(--canard-nuit);
  margin: 6px 0 8px;
}
.entete__sous { font-size: 17px; font-weight: 560; color: var(--encre-2); }
.entete__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
.entete__actions .bouton { white-space: nowrap; }

.bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: var(--feuille);
  color: var(--encre);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.bouton:hover { border-color: var(--canard); }
.bouton--icone { padding: 8px 10px; }
.bouton--plein { background: var(--canard); border-color: var(--canard); color: #fff; }
.bouton--plein:hover { background: var(--canard-nuit); border-color: var(--canard-nuit); }
.bouton[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Feuilles ------------------------------------------------------ */

.feuille {
  background: var(--feuille);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
}
.section { margin-top: 28px; }
.section__titre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 12px;
}
.section__titre h2 { font-size: 19px; font-weight: 760; letter-spacing: -.1px; }
.section__titre p { color: var(--encre-3); font-size: 14px; }

/* Pastille de phase : un petit cube de terre */
.motte {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c, var(--terreau));
  flex: none;
}
.motte--levee { --c: var(--phase-levee); }
.motte--elevage { --c: var(--phase-elevage); }
.motte--vente { --c: var(--phase-vente); }
.motte--avenir { --c: var(--pousse-vif); }

/* ---------- Chiffres de la semaine -------------------------------------- */

.chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
  margin-top: 24px;
}
.chiffre { padding: 18px 20px 20px; border-left: 1px solid var(--filet); }
.chiffre:first-child { border-left: 0; }
.chiffre__libelle { display: flex; align-items: center; gap: 8px; font-weight: 640; color: var(--encre-2); }
.chiffre__valeur { margin-top: 6px; font-size: 38px; line-height: 1.05; font-weight: 720; letter-spacing: -.6px; }
.chiffre__valeur small { font-size: 16px; font-weight: 560; letter-spacing: 0; color: var(--encre-2); margin-left: 4px; }
.chiffre__detail { margin-top: 4px; color: var(--encre-3); font-size: 14px; }

.jauges { display: grid; gap: 10px; margin-top: 10px; }
.jauge { display: grid; grid-template-columns: 74px minmax(0, 1fr) 62px; align-items: center; gap: 10px; font-size: 14px; }
.jauge__nom { color: var(--encre-2); font-weight: 560; }
.jauge__piste { position: relative; height: 10px; border-radius: 999px; background: var(--alveole); overflow: hidden; }
.jauge__plein { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); border-radius: 999px; background: var(--terreau); transform-origin: left; }
.jauge.est-depasse .jauge__plein { background: var(--tomate); }
.jauge.est-attention .jauge__plein { background: var(--orange-brun); }
.jauge__valeur { text-align: right; font-weight: 680; white-space: nowrap; }
.jauge.est-depasse .jauge__valeur { color: var(--tomate-fonce); }

/* ---------- Alertes ---------------------------------------------------- */

.alertes { display: grid; }
.alerte {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: start;
  padding: 14px 18px;
  border-top: 1px solid var(--filet);
}
.alerte:first-child { border-top: 0; }
.alerte__icone { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--tomate-voile); color: var(--tomate); }
.alerte__icone svg.ico { width: 17px; height: 17px; stroke-width: 2; }
.alerte__icone--info { background: var(--canard-voile); color: var(--canard); }
.alerte strong { font-weight: 680; }
.alerte p { color: var(--encre-2); font-size: 14.5px; }
.alerte a { font-size: 14px; font-weight: 600; color: var(--canard); white-space: nowrap; }
.alerte--ok { color: var(--encre-2); }

/* ---------- Travail de la semaine : 3 colonnes ------------------------- */

.travail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.colonne__tete { padding: 16px 18px 14px; border-bottom: 2px solid var(--encre); }
.colonne__titre { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 740; }
.colonne__total { margin-top: 4px; color: var(--encre-2); font-size: 14px; }
.colonne__total b { color: var(--encre); font-weight: 700; font-variant-numeric: tabular-nums; }
.colonne__vide { padding: 18px; color: var(--encre-3); font-size: 14.5px; }

.groupe { padding: 10px 18px 12px; border-top: 1px solid var(--filet); }
.groupe:first-of-type { border-top: 0; }
.groupe__tete { display: flex; justify-content: space-between; gap: 10px; font-weight: 720; font-size: 15px; }
.groupe__tete span { font-variant-numeric: tabular-nums; color: var(--encre-2); font-weight: 600; }
.ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 5px 0 0; }
.ligne__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.ligne__qte { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ligne__info { color: var(--encre-3); font-size: 13.5px; }

.format {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  font-size: 12.5px;
  font-weight: 620;
  line-height: 19px;
  color: var(--encre-2);
}

/* ---------- Plaque alvéolée (signature) -------------------------------- */

.plaque-cadre { padding: 18px 18px 16px; }
.plaque-defile { overflow-x: auto; padding-bottom: 4px; }
.plaque {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: 22px repeat(3, 38px);
  grid-template-columns: 150px;
  grid-auto-columns: minmax(26px, 1fr);
  gap: 5px;
  min-width: max-content;
  padding: 12px 14px 14px 0;
}
.plaque__zone { display: flex; flex-direction: column; justify-content: center; font-weight: 680; font-size: 14px; line-height: 1.15; padding-right: 8px; position: sticky; left: 0; background: var(--feuille); z-index: 1; }
.plaque__zone small { font-weight: 500; color: var(--encre-3); font-size: 12px; }
.plaque__sem { font-size: 11.5px; font-weight: 600; color: var(--encre-3); text-align: center; font-variant-numeric: tabular-nums; line-height: 22px; border-radius: var(--rayon-petit); }
.plaque__sem.est-courante { background: var(--canard-nuit); color: #fff; }
.plaque__sem small { display: block; margin-top: -5px; font-size: 10px; line-height: 10px; }
.plaque__coin { position: sticky; left: 0; background: var(--feuille); z-index: 1; }

.alveole {
  position: relative;
  width: 100%;
  max-width: 42px;
  justify-self: center;
  height: 38px;
  padding: 0;
  border: 1px solid var(--alveole-bord);
  border-top-width: 3px;
  border-radius: 3px 3px 5px 5px;
  background: var(--alveole);
  overflow: hidden;
  cursor: default;
}
.alveole__terre {
  position: absolute;
  inset: auto 0 0 0;
  height: calc(var(--p, 0) * 1%);
  background: var(--terreau);
  transform-origin: bottom;
}
.alveole.est-depasse { border-color: var(--tomate-fonce); }
.alveole.est-depasse .alveole__terre { height: 100%; background: var(--tomate); }
.alveole.est-depasse::after {
  content: "!";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.alveole.est-attention .alveole__terre { background: var(--orange-brun); }
.alveole.est-courante { outline: 2px solid var(--canard-nuit); outline-offset: 2px; }
.alveole:hover, .alveole:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.legende { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; color: var(--encre-2); font-size: 13.5px; }
.legende span { display: inline-flex; align-items: center; gap: 8px; }
.legende i { display: inline-block; width: 14px; height: 16px; border: 1px solid var(--alveole-bord); border-top-width: 3px; border-radius: 2px 2px 4px 4px; background: linear-gradient(to top, var(--terreau) 55%, var(--alveole) 55%); }
.legende i.depasse { background: var(--tomate); border-color: var(--tomate-fonce); }
.legende i.vide { background: var(--alveole); }
.legende i.attention { background: linear-gradient(to top, var(--orange-brun) 88%, var(--alveole) 88%); }

details.tableau-vue { margin-top: 12px; border-top: 1px solid var(--filet); padding-top: 10px; }
details.tableau-vue summary { cursor: pointer; font-weight: 620; color: var(--canard); font-size: 14px; }
.tableau-defile { overflow-x: auto; margin-top: 10px; }
table.tableau { border-collapse: collapse; font-size: 13.5px; }
.tableau td + td { font-variant-numeric: tabular-nums; }
.tableau th, .tableau td { padding: 6px 10px; border-bottom: 1px solid var(--filet); text-align: right; white-space: nowrap; }
.tableau th:first-child, .tableau td:first-child { text-align: left; }
.tableau thead th { font-weight: 680; color: var(--encre-2); border-bottom: 2px solid var(--encre); }
.tableau td.est-depasse { color: var(--tomate-fonce); font-weight: 700; }
.tableau td.gauche, .impact .tableau th:nth-child(2) { text-align: left; }

/* Infobulle */
.bulle {
  position: fixed;
  z-index: 50;
  min-width: 170px;
  max-width: 320px;
  padding: 9px 11px;
  border-radius: var(--rayon-petit);
  background: var(--canard-nuit);
  color: #fff;
  font-size: 13px;
  line-height: 1.35;
  pointer-events: none;
}
.bulle strong { display: block; font-size: 16px; font-weight: 720; font-variant-numeric: tabular-nums; }
.bulle span { color: rgba(255, 255, 255, .75); }
.bulle[hidden] { display: none; }
.bulle__lots { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .2); display: grid; gap: 2px; font-size: 12px; color: rgba(255, 255, 255, .88); }

/* ---------- Vue « Nouvelle commande » ----------------------------------- */

.commande { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 24px; }
.formulaire { padding: 20px; display: grid; gap: 16px; }
.champ { display: grid; gap: 6px; }
.champ label, .champ legend { font-weight: 660; font-size: 14.5px; }
.champ small { color: var(--encre-3); font-size: 13px; }
.champ input, .champ select {
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--rayon-petit);
  background: var(--feuille);
  font-weight: 540;
}
.champ input, .champ select, .champ textarea { width: 100%; min-width: 0; }
.champ input:focus, .champ select:focus { border-color: var(--canard); outline: 3px solid var(--canard-voile); outline-offset: 0; }
.champ--duo { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 10px; }
fieldset.serie { border: 1px solid var(--filet); border-radius: var(--rayon-petit); padding: 12px 14px 14px; margin: 0; display: grid; gap: 10px; }
fieldset.serie legend { padding: 0 6px; font-weight: 660; font-size: 14.5px; }
.serie__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; font-size: 14.5px; }
.serie__morceau { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
fieldset.serie:has(#f-serie:not(:checked)) .serie__ligne { opacity: .55; }
.formulaire > .bouton--plein { justify-content: center; min-height: 46px; font-size: 16px; }
.serie__ligne input[type="number"] { width: 52px; min-height: 38px; padding: 6px 8px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); }
.case { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.case input { width: 18px; height: 18px; accent-color: var(--canard); }

.apercu { padding: 22px 22px 18px; }
.apercu__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; padding-bottom: 16px; border-bottom: 2px solid var(--encre); }
.apercu__libelle { color: var(--encre-2); font-weight: 600; }
.apercu__semis { font-size: 52px; line-height: 1; font-weight: 760; letter-spacing: -1.2px; margin-top: 6px; }
.apercu__date { font-size: 18px; font-weight: 600; color: var(--encre-2); margin-top: 6px; }
.apercu__article { text-align: right; color: var(--encre-2); font-size: 14.5px; }
.apercu__article strong { display: block; color: var(--encre); font-size: 17px; font-weight: 720; }

.frise { margin-top: 18px; }
.frise svg { display: block; width: 100%; height: auto; overflow: visible; }
.frise text { font-family: var(--texte); fill: var(--encre-2); font-size: 13px; font-weight: 560; }
.frise text.fort { fill: var(--encre); font-weight: 700; font-size: 14px; }
.frise .axe { stroke: var(--filet); stroke-width: 1; }
.frise .tic { stroke: var(--filet-fort); stroke-width: 1; }
.frise .repere { stroke: var(--encre); stroke-width: 1; }
.legende-phases { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 4px; color: var(--encre-2); font-size: 13.5px; }
.legende-phases span { display: inline-flex; align-items: center; gap: 7px; }

.faits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border-top: 1px solid var(--filet); }
.fait { padding: 14px 16px 4px 0; }
.fait + .fait { padding-left: 16px; border-left: 1px solid var(--filet); }
.fait dt { color: var(--encre-2); font-size: 14px; font-weight: 600; }
.fait dd { font-size: 24px; font-weight: 720; letter-spacing: -.3px; margin-top: 2px; }
.fait dd small { display: block; font-size: 13px; font-weight: 500; color: var(--encre-3); letter-spacing: 0; margin-top: 2px; }

.avertissement { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 11px 13px; border-radius: var(--rayon-petit); background: var(--orange-voile); color: #5a3205; font-size: 14.5px; }
.avertissement--erreur { background: var(--tomate-voile); color: var(--tomate-fonce); }
.avertissement svg.ico { margin-top: 1px; }

.impact { margin-top: 20px; }
.impact h3 { font-size: 16px; font-weight: 740; }
.impact__phrase { margin-top: 4px; color: var(--encre-2); font-size: 14.5px; }
.faits + .impact__phrase, .serie-liste + .impact__phrase, .avertissement + .impact__phrase { margin-top: 16px; }
.impact__phrase b { color: var(--encre); }
.impact table { margin-top: 10px; width: 100%; }
.impact td .marque { display: inline-flex; align-items: center; gap: 6px; }
.impact td .marque::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tomate); }

.serie-liste { margin-top: 18px; }
.serie-liste h3 { font-size: 16px; font-weight: 740; }
.enregistrer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--filet); color: var(--encre-3); font-size: 13.5px; }

/* ---------- Application : navigation, formulaires, listes -------------- */

.nav__pied { margin-top: auto; display: grid; gap: 12px; padding: 14px 12px 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.nav__pied .nav__saison { margin: 0; padding: 0; border: 0; }
.nav__saison select { margin-top: 6px; width: 100%; min-height: 36px; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--rayon-petit); background: transparent; color: #fff; font-weight: 600; }
.nav__saison select option { color: var(--encre); }
.nav__sortie { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .78); font-size: 13.5px; font-weight: 560; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.nav__sortie:hover { color: #fff; }

.champ input.est-invalide, .champ select.est-invalide { border-color: var(--tomate); }
.champ__erreur { color: var(--tomate-fonce); font-size: 13.5px; font-weight: 600; }
.champ textarea { min-height: 72px; padding: 9px 11px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); background: var(--feuille); font: inherit; font-weight: 540; resize: vertical; }
.champ--trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
details.options { border-top: 1px solid var(--filet); padding-top: 12px; }
details.options summary { cursor: pointer; font-weight: 620; color: var(--canard); font-size: 14px; }
details.options[open] summary { margin-bottom: 12px; }
details.options .champ + .champ { margin-top: 12px; }

/* Connexion */
.connexion { position: relative; isolation: isolate; min-height: 100vh; min-height: 100dvh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 32px 16px; background: var(--canard-nuit); }
.connexion__carte { position: relative; width: min(100%, 400px); padding: 34px 26px 26px; display: grid; gap: 18px; border: 0; box-shadow: 0 2px 0 rgb(255 255 255 / .06) inset, 0 30px 80px rgb(1 10 12 / .6), 0 8px 24px rgb(1 10 12 / .35); }
/* Les trois couches du cube (levée, élevage, vente) en haut de la carte. */
.connexion__carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 7px; border-radius: var(--rayon) var(--rayon) 0 0; background: linear-gradient(90deg, var(--phase-levee) 0 33.4%, var(--phase-elevage) 33.4% 66.7%, var(--phase-vente) 66.7%); }
.connexion__pied { max-width: 400px; padding: 6px 14px; border-radius: 999px; background: rgb(3 16 19 / .7); color: rgb(255 255 255 / .85); font-size: 13px; text-align: center; }
.fond-connexion { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Les pousses sortent en vague, de la motte semée au plant prêt. */
  .fond-connexion .fc-pousse { transform-box: fill-box; transform-origin: center; animation: fc-sort .9s cubic-bezier(.2, .8, .25, 1.25) both; }
  .fond-connexion .d1 { animation-delay: .07s; } .fond-connexion .d2 { animation-delay: .14s; } .fond-connexion .d3 { animation-delay: .21s; }
  .fond-connexion .d4 { animation-delay: .28s; } .fond-connexion .d5 { animation-delay: .35s; } .fond-connexion .d6 { animation-delay: .42s; }
  .fond-connexion .d7 { animation-delay: .49s; } .fond-connexion .d8 { animation-delay: .56s; } .fond-connexion .d9 { animation-delay: .63s; }
  .fond-connexion .d10 { animation-delay: .7s; } .fond-connexion .d11 { animation-delay: .77s; } .fond-connexion .d12 { animation-delay: .84s; }
  @keyframes fc-sort { from { opacity: 0; transform: scale(.2); } }
  .connexion__carte { animation: fc-carte .6s cubic-bezier(.2, .7, .2, 1) both .15s; }
  @keyframes fc-carte { from { opacity: 0; transform: translateY(16px) scale(.98); } }
}
.connexion__logo { display: block; width: 220px; max-width: 100%; height: auto; }
.connexion h1 { font-family: var(--titre); font-weight: 400; font-size: 30px; line-height: 1; color: var(--canard-nuit); }
.connexion .bouton--plein { justify-content: center; }
.connexion__aide { color: var(--encre-3); font-size: 13.5px; }
.connexion__aide code { font-size: 12.5px; }

/* Filtres au-dessus d'une liste */
.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 22px; padding: 14px 16px; }
.filtres .champ { gap: 4px; }
.filtres .champ label { font-size: 13px; font-weight: 640; color: var(--encre-2); }
.filtres .champ input, .filtres .champ select { min-height: 40px; padding: 7px 10px; }
.filtres .champ--large { flex: 1 1 220px; }
.filtres .champ--semaine input { width: 76px; }
.filtres__actions { display: flex; gap: 8px; margin-left: auto; }

.resume { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 18px 0 10px; color: var(--encre-2); font-size: 14.5px; }
.resume b { color: var(--encre); font-variant-numeric: tabular-nums; }

/* Liste des lots */
.liste-defile { overflow-x: auto; }
.liste-defile.tient-en-largeur { overflow-x: visible; }   /* les titres de colonnes restent alors en haut de l'écran */
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; }
.liste th, .liste td { padding: 9px 12px; border-bottom: 1px solid var(--filet); text-align: left; vertical-align: top; }
.liste thead th { position: sticky; top: 0; z-index: 1; background: var(--feuille); font-size: 13px; font-weight: 680; color: var(--encre-2); border-bottom: 2px solid var(--encre); white-space: nowrap; }
.liste td.n, .liste th.n { text-align: right; font-variant-numeric: tabular-nums; }
.liste tbody tr:hover { background: #f4f8f7; }
.liste tbody tr.est-annule { color: var(--encre-3); }
.liste tbody tr.est-annule .liste__plante { text-decoration: line-through; }
.liste tbody tr.est-nouveau { background: var(--pousse-voile); }
.liste__semaine { white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste__semaine small { display: block; color: var(--encre-3); font-size: 12.5px; }
.liste__plante a { font-weight: 640; text-decoration: none; }
.liste__plante a:hover { text-decoration: underline; }
.liste__plante small { display: block; color: var(--encre-3); font-size: 12.5px; }
.liste tr.groupe-semaine th { position: static; background: var(--fond); border-bottom: 1px solid var(--filet-fort); color: var(--encre); font-size: 14px; font-weight: 720; padding-top: 14px; }
.liste tr.groupe-semaine th span { color: var(--encre-2); font-weight: 560; margin-left: 8px; }
.liste__vide { padding: 28px; text-align: center; color: var(--encre-3); }

.etiquette { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 640; line-height: 20px; white-space: nowrap; background: var(--alveole); color: var(--encre-2); }
.etiquette svg.ico { width: 14px; height: 14px; }
.etiquette--annule { background: var(--tomate-voile); color: var(--tomate-fonce); }
.etiquette--verrou { background: var(--canard-voile); color: var(--canard); }
.etiquette--alerte { background: var(--orange-voile); color: #5a3205; }

/* Fiche d'un lot */
.fiche { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 24px; }
.fiche__actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.bouton--danger { color: var(--tomate-fonce); border-color: #e6a3b0; }
.bouton--danger:hover { border-color: var(--tomate); }
.reel { margin-top: 18px; }
.reel dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; margin-top: 10px; }
.reel dt { color: var(--encre-3); font-size: 13px; font-weight: 600; }
.reel dd { font-weight: 680; font-variant-numeric: tabular-nums; }

/* Réglages : compte rendu d'import */
.notes { display: grid; }
.note { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 12px 18px; border-top: 1px solid var(--filet); font-size: 14.5px; }
.note:first-child { border-top: 0; }
.note small { display: block; color: var(--encre-3); font-size: 12.5px; font-weight: 600; }
.effectifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.effectif { padding: 14px 18px; border-left: 1px solid var(--filet); border-top: 1px solid var(--filet); margin: -1px 0 0 -1px; }
.effectif b { display: block; font-size: 26px; font-weight: 720; font-variant-numeric: tabular-nums; letter-spacing: -.4px; }
.effectif span { color: var(--encre-2); font-size: 13.5px; }

/* Page d'erreur */
.erreur { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.erreur--dans-l-outil { min-height: 60vh; }
.erreur__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.erreur__carte { max-width: 560px; padding: 28px; display: grid; gap: 12px; }
.erreur__code { font-family: var(--titre); font-size: 56px; line-height: 1; color: var(--canard-nuit); }
.erreur pre { overflow: auto; max-height: 50vh; font-size: 12px; background: var(--fond); padding: 12px; border-radius: var(--rayon-petit); }

/* ---------- Semaine : navigation, vide ----------------------------------- */
.semaine-vide { padding: 22px; display: grid; gap: 10px; }
.semaine-vide p { color: var(--encre-2); }
.semaine-vide .entete__actions { margin-top: 4px; }
.ligne__lots { color: var(--encre-3); font-size: 12.5px; }
.ligne__lots a { color: inherit; }

/* ---------- Occupation : comparaison et capacités ---------------------- */
.comparaison { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparaison__zone { padding: 16px 18px; border-left: 1px solid var(--filet); }
.comparaison__zone:first-child { border-left: 0; }
.comparaison__zone h3 { font-size: 15px; font-weight: 720; }
.comparaison__zone dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
.comparaison__zone dt { color: var(--encre-2); }
.comparaison__zone dd { font-weight: 700; }
.comparaison__zone dd.est-depasse { color: var(--tomate-fonce); }
.comparaison__note { padding: 12px 18px; border-top: 1px solid var(--filet); color: var(--encre-2); font-size: 14px; }
.capacites { padding: 18px; display: grid; gap: 14px; }
.capacites__ligne { display: grid; grid-template-columns: 140px repeat(2, minmax(0, 230px)); gap: 12px; align-items: end; }
.capacites__ligne strong { padding-bottom: 10px; }

/* ---------- Planning (Gantt) ------------------------------------------ */
.gantt-defile { overflow: auto; max-height: calc(100vh - 220px); }
.gantt__entete, .gantt__ligne { display: grid; grid-template-columns: 280px max-content; width: max-content; min-width: 100%; }
.gantt__entete { position: sticky; top: 0; z-index: 3; background: var(--feuille); border-bottom: 2px solid var(--encre); }
.gantt__entete .gantt__nom { z-index: 4; font-size: 13px; font-weight: 680; color: var(--encre-2); align-self: stretch; display: flex; align-items: center; }
.gantt__nom { position: sticky; left: 0; z-index: 1; background: var(--feuille); padding: 4px 12px; border-right: 1px solid var(--filet); font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gantt__nom a { font-weight: 640; text-decoration: none; }
.gantt__nom a:hover { text-decoration: underline; }
.gantt__nom small { color: var(--encre-3); font-size: 12px; margin-left: 6px; }
.gantt__ligne { border-bottom: 1px solid var(--filet); }
.gantt__ligne:hover .gantt__nom { background: #f4f8f7; }
.gantt__ligne svg, .gantt__entete svg { display: block; }
.gantt__groupe > summary { list-style: none; cursor: pointer; }
.gantt__groupe > summary::-webkit-details-marker { display: none; }
.gantt__resume { background: var(--fond); border-bottom: 1px solid var(--filet-fort); }
.gantt__resume .gantt__nom { background: var(--fond); font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.gantt__resume .gantt__nom strong { flex: 0 1 auto; font-weight: 740; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gantt__resume .gantt__nom small { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gantt__resume .gantt__nom svg.ico { width: 16px; height: 16px; flex: none; transition: transform .15s; }
.gantt__groupe[open] > .gantt__resume .gantt__nom svg.ico { transform: rotate(90deg); }
.gantt__resume:hover .gantt__nom, .gantt__resume:focus-visible .gantt__nom { color: var(--canard); }
.gantt__resume:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.gantt .g-grille, .g-grille { stroke: var(--filet); stroke-width: 1; }
.g-courante { fill: var(--canard-voile); }
.g-levee { fill: var(--phase-levee); }
.g-elevage { fill: var(--phase-elevage); }
.g-vente { fill: var(--phase-vente); }
.g-bande { fill: var(--filet-fort); }
.g-sem { font-family: var(--texte); font-size: 10.5px; font-weight: 600; fill: var(--encre-3); }
.g-sem.est-courante { fill: var(--canard-nuit); font-weight: 800; }
.g-an { font-family: var(--texte); font-size: 11px; font-weight: 700; fill: var(--encre-2); }
.gantt-defile .liste__vide { padding: 28px; text-align: center; color: var(--encre-3); }
button.lien { padding: 0; border: 0; background: none; color: var(--canard); font: inherit; font-weight: 620; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Graines et fournitures ------------------------------------ */
.onglets { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 18px; border-bottom: 1px solid var(--filet-fort); }
.onglet { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; margin-bottom: -1px; border: 1px solid transparent; border-radius: var(--rayon-petit) var(--rayon-petit) 0 0; color: var(--encre-2); font-weight: 620; text-decoration: none; }
.onglet:hover { color: var(--canard); }
.onglet[aria-current="page"] { background: var(--feuille); border-color: var(--filet-fort); border-bottom-color: var(--feuille); color: var(--canard-nuit); }
.chiffres--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.chiffre--alerte .chiffre__valeur { color: var(--tomate-fonce); }
.chiffre__libelle svg.ico { width: 18px; height: 18px; }
.filtres .case { min-height: 40px; }
table.graines .liste__plante { font-weight: 640; }
.saisie { width: 76px; min-height: 34px; padding: 4px 7px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); background: var(--feuille); text-align: right; font: inherit; font-variant-numeric: tabular-nums; }
.saisie:focus { border-color: var(--canard); outline: 3px solid var(--canard-voile); outline-offset: 0; }
.saisie--x { background: var(--orange-voile); }
.graines tr.est-manque .graines__solde { color: var(--tomate-fonce); font-weight: 720; }
.graines__solde small, .graines__achat { display: block; color: var(--encre-3); font-size: 12.5px; font-weight: 500; }
.graines__achat { margin-top: 3px; white-space: nowrap; }
.liste td small { color: var(--encre-3); font-size: 12.5px; }
.liste td.n small { display: block; }
.barre-enregistrer { position: sticky; bottom: 0; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 16px; background: var(--feuille); border: 1px solid var(--filet); border-radius: var(--rayon); box-shadow: 0 -6px 18px rgba(7, 32, 38, .08); color: var(--encre-3); font-size: 13.5px; }

/* ---------- Suivi, prix, réglages -------------------------------------- */
.section__compte { display: inline-block; min-width: 26px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--alveole); font-size: 13px; font-weight: 700; text-align: center; vertical-align: middle; }
.section__titre h2 .motte { vertical-align: 1px; }
.suivi { display: grid; }
.suivi__lot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 18px; padding: 12px 18px; border-top: 1px solid var(--filet); }
.suivi__lot:first-child { border-top: 0; }
.suivi__lot.est-termine { background: var(--pousse-voile); }
.suivi__nom { min-width: 220px; flex: 1 1 260px; }
.suivi__nom a { font-weight: 680; text-decoration: none; }
.suivi__nom a:hover { text-decoration: underline; }
.suivi__nom small { display: block; color: var(--encre-3); font-size: 13px; }
.suivi__champs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.suivi__champ { display: grid; gap: 3px; font-size: 12.5px; font-weight: 640; color: var(--encre-2); }
.suivi__champ input { width: 86px; min-height: 42px; padding: 6px 9px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); background: var(--feuille); font: inherit; font-size: 15px; text-align: right; }
.suivi__case { min-height: 42px; padding: 0 12px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); background: var(--feuille); }
.suivi__case input { width: 22px; height: 22px; }
.reel__champs { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; margin: 10px 0 12px; }
.reel .section__titre h3 { font-size: 16px; font-weight: 740; }
.saisie--courte { width: 56px; }
.saisie--texte { width: 100%; max-width: 320px; text-align: left; }
.bouton--petit { min-height: 34px; padding: 5px 11px; font-size: 13.5px; }
.prix__reglage { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13.5px; color: var(--encre-2); }
.prix__reglage .saisie { width: 60px; }
.prix__reglage .saisie--courte { width: 46px; }
table.prix td.n small { display: block; max-width: 140px; margin-left: auto; white-space: normal; }
table.prix td.prix__cout small { max-width: none; white-space: nowrap; }
table.prix .liste__plante { min-width: 180px; }
.texte-alerte { color: var(--tomate-fonce); font-weight: 680; }
table.prix small.texte-alerte { color: var(--tomate-fonce); }
.formulaire--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.formulaire--ligne .champ { flex: 0 1 140px; }
.formulaire--ligne .champ--large { flex: 1 1 260px; }
.formulaire--large { max-width: 860px; }
.format--grand { font-family: var(--texte); font-size: 18px; line-height: 28px; vertical-align: middle; letter-spacing: 0; }
.itineraire tr.est-vide { color: var(--encre-3); }
.itineraire tr.est-vide .liste__semaine { opacity: .7; }
.clients { display: grid; }
.clients__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 18px; border-top: 1px solid var(--filet); }
.clients__ligne:first-child { border-top: 0; }
.clients__ligne.est-annule { background: #f5f7f6; }
.clients__compte { flex: 1 1 160px; color: var(--encre-3); font-size: 13.5px; }
.clients__compte a { color: inherit; }
.clients__remise { display: inline-flex; align-items: center; gap: 6px; color: var(--encre-2); font-size: 13.5px; }
.mot-de-passe { max-width: 460px; }

.process__code { min-width: 170px; font-weight: 700; }
.regle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.regle + .regle { margin-top: 10px; }
.champ__aide { color: var(--encre-3); font-size: 13.5px; }
.formulaire fieldset.serie .champ--trio { margin-top: 4px; }
@media (max-width: 640px) { .regle { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- Tableau de bord, clients, plantes ------------------------- */
.tableau-de-bord { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.carte { padding: 18px 20px 16px; }
.carte h2 { font-size: 17px; font-weight: 740; }
.carte__sous { color: var(--encre-3); font-size: 13.5px; margin-top: 2px; }
.carte__pied { margin-top: 12px; font-size: 14px; }
.carte__pied a { color: var(--canard); font-weight: 620; }
.progression { position: relative; height: 8px; margin-top: 10px; border-radius: 999px; background: var(--alveole); overflow: hidden; }
.progression span { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 1%); border-radius: 999px; background: var(--phase-vente); }

/* Barres horizontales classées : une seule série, la valeur écrite au bout. */
.barres { display: grid; gap: 2px; margin-top: 12px; }
.barres__ligne { display: grid; grid-template-columns: minmax(110px, 38%) minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 5px 0; border-top: 1px solid var(--filet); }
.barres__ligne:first-child { border-top: 0; }
.barres__nom { font-weight: 620; font-size: 14px; min-width: 0; }
.barres__nom a { text-decoration: none; }
.barres__nom a:hover { text-decoration: underline; }
.barres__nom small { display: block; color: var(--encre-3); font-size: 12px; font-weight: 500; }
.barres__piste { position: relative; height: 12px; }
.barres__plein { position: absolute; inset: 0 auto 0 0; width: max(2px, calc(var(--p, 0) * 1%)); background: var(--canard); border-radius: 0 4px 4px 0; }
.barres__valeur { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* Histogramme hebdomadaire : colonnes fines, bout arrondi, 2 px d'air. */
.histo-cadre { margin-top: 10px; }
.histo__legende { justify-content: flex-start; }
.histo__echelle { margin-left: auto; color: var(--encre-3); }
.histo-defile { overflow-x: auto; position: relative; padding-top: 22px; }
.histo { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(18px, 64px); justify-content: start; gap: 2px; align-items: end; height: 180px; min-width: max-content; border-bottom: 1px solid var(--encre-3);
  background: linear-gradient(to top, transparent calc(50% - 1px), var(--filet) calc(50% - 1px), var(--filet) 50%, transparent 50%); }
.histo__col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0; border: 0; background: none; cursor: default; }
.histo__barre { display: block; width: 100%; height: max(2px, calc(var(--p, 0) * 1%)); border-radius: 4px 4px 0 0; background: var(--pousse-vif); }
.histo__col.est-passe .histo__barre { background: var(--phase-vente); }
.histo__col.p-0 .histo__barre { height: 0; }
.histo__col:hover .histo__barre, .histo__col:focus-visible .histo__barre { filter: brightness(1.15); }
.histo__col:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.histo__sem { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--encre-3); text-align: center; }
.histo__pic { position: absolute; bottom: calc(var(--p, 0) * 1% + 4px); left: 50%; transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--encre); white-space: nowrap; }
.histo-defile { padding-bottom: 22px; }

.fiche-client__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 1240px) { .tableau-de-bord { grid-template-columns: minmax(0, 1fr); } }

/* Petite fenêtre du Planning : détail et liens (on peut y entrer avec la souris). */
.pop { position: fixed; z-index: 60; width: max-content; max-width: min(340px, calc(100vw - 16px)); padding: 11px 13px 12px; border-radius: var(--rayon); background: var(--canard-nuit); color: #fff; font-size: 13.5px; line-height: 1.4; box-shadow: 0 10px 28px rgba(7, 32, 38, .28); }
.pop[hidden] { display: none; }
.pop__titre { display: block; font-size: 15px; font-weight: 720; }
.pop p { color: rgba(255, 255, 255, .82); }
.pop__dates { color: rgba(255, 255, 255, .82); }
.pop__liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.pop__lien { padding: 4px 9px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; color: #fff; font-size: 12.5px; font-weight: 640; text-decoration: none; }
.pop__lien:hover, .pop__lien:focus-visible { background: #fff; color: var(--canard-nuit); }
.gantt__ligne svg { cursor: pointer; }
.gantt__client { color: inherit; }

/* ---------- Recherche globale ----------------------------------------- */
.recherche { position: relative; display: flex; align-items: center; margin: -8px 0 -10px; }
.recherche > svg.ico { position: absolute; left: 10px; width: 17px; height: 17px; color: rgba(255, 255, 255, .7); pointer-events: none; }
.recherche input { width: 100%; min-height: 38px; padding: 7px 34px 7px 34px; border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--rayon-petit); background: rgba(255, 255, 255, .08); color: #fff; font: inherit; font-size: 14.5px; }
.recherche input::placeholder { color: rgba(255, 255, 255, .62); }
.recherche input:focus { outline: 3px solid var(--orange); outline-offset: 1px; background: rgba(255, 255, 255, .14); }
.recherche kbd { position: absolute; right: 9px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 4px; color: rgba(255, 255, 255, .7); font: 600 12px/18px var(--texte); pointer-events: none; }
.recherche input:focus ~ kbd { display: none; }
.recherche__liste { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: min(440px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 6px; border-radius: var(--rayon); background: var(--feuille); color: var(--encre); box-shadow: 0 14px 36px rgba(7, 32, 38, .3); }
.recherche__groupe { padding: 8px 10px 4px; color: var(--encre-3); font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.recherche__vide { padding: 12px; color: var(--encre-3); font-size: 14px; }
.resultats { display: grid; padding: 4px; }
.resultat, .recherche__item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--rayon-petit); color: var(--encre); text-decoration: none; }
.resultat:hover, .recherche__item:hover, .recherche__item[aria-selected="true"] { background: var(--canard-voile); }
.resultat svg.ico, .recherche__item svg.ico { color: var(--canard); }
.resultat span, .recherche__item span { display: grid; min-width: 0; }
.resultat strong, .recherche__item strong { font-weight: 660; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultat strong { white-space: normal; }
.resultat svg.ico:has(> use[href^="#i-p-"]), .recherche__item svg.ico:has(> use[href^="#i-p-"]) { color: var(--pousse); }
.resultats__suite { margin-top: 10px; }
.resultat small, .recherche__item small { color: var(--encre-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recherche__tout { display: block; margin-top: 4px; padding: 9px 12px; border-top: 1px solid var(--filet); color: var(--canard); font-size: 13.5px; font-weight: 640; text-decoration: none; }
@media (max-width: 900px) {
  .recherche { order: 3; width: 100%; margin: 0; }
  .recherche kbd { display: none; }
}

/* Icônes des plantes : trait vert pousse, au fil du texte. */
svg.ico.ico--plante { width: 18px; height: 18px; color: var(--pousse); vertical-align: -3px; }
.avec-icone { display: inline-flex; align-items: center; gap: 7px; }
.titre-plante { display: flex; align-items: center; gap: 14px; }
.titre-plante svg.ico.ico--plante { width: clamp(34px, 5vw, 52px); height: clamp(34px, 5vw, 52px); stroke-width: 1.5; flex: none; }
.barres__nom { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; }
.barres__nom > svg.ico--plante { grid-row: span 2; }
.barres__nom small { grid-column: 2; }
.barres__nom > a, .barres__nom > small { min-width: 0; }
.barres__nom:not(:has(> svg)) { display: block; }
.gantt__resume .gantt__nom svg.ico--plante, .gantt__resume .gantt__nom svg.ico:not(:first-child) { width: 18px; height: 18px; transform: none; }
.gantt__groupe[open] > .gantt__resume .gantt__nom svg.ico ~ svg.ico { transform: none; }
.groupe__tete .avec-icone { gap: 8px; }
.recherche__item svg.ico, .resultat svg.ico { flex: none; }

/* ---------- Mouvement (sobre, coupé si demandé) ------------------------- */

/* Rang d'une alvéole dans la plaque : calculé sur l'alvéole puis hérité (sinon chaque enfant recalcule le sien). */
@property --rang { syntax: "<integer>"; inherits: true; initial-value: 0; }

/* Typographie moderne : titres équilibrés, pas de mot orphelin en fin de paragraphe. */
h1, h2, h3, .apercu__semis { text-wrap: balance; }
p, small, .ligne__info { text-wrap: pretty; }
textarea { field-sizing: content; min-height: 72px; max-height: 40vh; }

/* Suivi : une ligne cochée se colore aussitôt (sans script). */
.suivi__lot:has(input[type="checkbox"]:checked) { background: var(--pousse-voile); }
.suivi__case:has(input:checked) { border-color: var(--pousse); color: var(--pousse); }
.liste tbody tr:has(.saisie:focus) { background: var(--canard-voile); }

@media (prefers-reduced-motion: no-preference) {
  /* Transitions entre les pages : la barre latérale reste en place, le titre glisse, le contenu se fond. */
  @view-transition { navigation: auto; }
  .nav { view-transition-name: navigation; }
  .entete h1 { view-transition-name: titre; }
  .apercu__semis { view-transition-name: semis; }
  ::view-transition-old(root) { animation: .18s ease-out both fond-sort; }
  ::view-transition-new(root) { animation: .28s cubic-bezier(.2, .7, .2, 1) both fond-entre; }
  ::view-transition-group(titre), ::view-transition-group(semis) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  @keyframes fond-sort { to { opacity: 0; } }
  @keyframes fond-entre { from { opacity: 0; transform: translateY(8px); } }

  /* Apparitions en cascade. */
  .apparait { animation: monte .5s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
  .apparait--1 { --i: 1; } .apparait--2 { --i: 2; } .apparait--3 { --i: 3; }
  .jauge__plein, .barres__plein, .progression span { animation: allonge .8s cubic-bezier(.2, .7, .2, 1) both .2s; transform-origin: left; }
  .histo__barre { animation: remplit .6s cubic-bezier(.2, .7, .2, 1) both; transform-origin: bottom; animation-delay: calc(var(--rang, 0) * 12ms + 100ms); }
  .histo__col { --rang: sibling-index(); }
  /* La plaque se remplit alvéole après alvéole (navigateurs récents ; ailleurs, toutes ensemble). */
  .alveole__terre { animation: remplit .7s cubic-bezier(.2, .7, .2, 1) both .15s; }
  .alveole { --rang: sibling-index(); }
  .alveole .alveole__terre { animation-delay: calc(var(--rang, 0) * 4ms + 150ms); }
  .apercu__semis.est-maj { animation: maj .5s cubic-bezier(.2, .7, .2, 1); }
  @keyframes maj { from { color: var(--orange-brun); transform: translateY(-6px); } }
  @keyframes monte { from { opacity: 0; transform: translateY(10px); } }
  @keyframes remplit { from { transform: scaleY(0); } }
  @keyframes allonge { from { transform: scaleX(0); } }

  /* Messages, infobulle et blocs repliables : entrée douce. */
  .bandeau { transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .2, 1); @starting-style { opacity: 0; transform: translateY(-6px); } }
  .bulle, .pop { transition: opacity .15s, transform .15s; @starting-style { opacity: 0; transform: translateY(4px); } }
  :root { interpolate-size: allow-keywords; }
  details::details-content { height: 0; overflow: clip; transition: height .3s cubic-bezier(.2, .7, .2, 1), content-visibility .3s allow-discrete; }
  details[open]::details-content { height: auto; }

  /* Boutons et alvéoles : réponse au geste. */
  .bouton, .onglet, .nav__lien, .alveole { transition: background-color .15s, border-color .15s, color .15s, transform .12s; }
  .bouton:active { transform: translateY(1px); }
  .alveole:hover { transform: translateY(-2px); }
}

/* ---------- Écrans plus étroits ---------------------------------------- */

@media (max-width: 1240px) {
  .travail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chiffre--serre { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--filet); }
  .commande, .fiche { grid-template-columns: minmax(0, 1fr); }
  .chiffres--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chiffres--quatre .chiffre:nth-child(3) { border-left: 0; border-top: 1px solid var(--filet); }
  .chiffres--quatre .chiffre:nth-child(4) { border-top: 1px solid var(--filet); }
  .comparaison { grid-template-columns: minmax(0, 1fr); }
  .comparaison__zone { border-left: 0; border-top: 1px solid var(--filet); }
  .comparaison__zone:first-child { border-top: 0; }
}

@media (max-width: 900px) {
  .coquille { grid-template-columns: minmax(0, 1fr); }
  .nav { position: relative; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; }
  .nav__logo img { max-width: 150px; }
  .nav__liens { display: flex; gap: 4px; width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .nav__lien { white-space: nowrap; padding: 7px 10px; }
  .nav__bientot, .nav__saison { display: none; }
  .nav__pied { margin: 0 0 0 auto; padding: 0; border: 0; }
  .travail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .chiffres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .chiffre { padding: 14px 14px 16px; }
  .chiffre:nth-child(3) { border-left: 0; border-top: 1px solid var(--filet); }
  .chiffre:nth-child(2) { border-left: 1px solid var(--filet); }
  /* Trois chiffres puis un bloc pleine largeur : le troisième prend toute la ligne plutôt que de laisser un trou. */
  .chiffre:nth-child(3):has(+ .chiffre--serre) { grid-column: 1 / -1; }
  .chiffre__valeur { font-size: 30px; }
  .entete__actions { width: 100%; }
  .entete__actions .bouton--plein { flex: 1; justify-content: center; }
  .faits { grid-template-columns: minmax(0, 1fr); }
  .fait + .fait { padding-left: 0; border-left: 0; border-top: 1px solid var(--filet); }
  .apercu__semis { font-size: 42px; }
  .apercu__article { text-align: left; }
  .alerte { grid-template-columns: 28px minmax(0, 1fr); }
  .alerte a { grid-column: 2; }
  .plaque { grid-template-columns: 92px; grid-auto-columns: 26px; }
  .plaque__zone small { display: none; }
  .tableau th, .tableau td { padding: 6px 6px; }
  .apercu { padding: 18px 16px 16px; }
  .filtres__actions { margin-left: 0; width: 100%; }
  .champ--trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .liste th, .liste td { padding: 8px 8px; }
  .colonne-large { display: none; }
  .barre-enregistrer { padding: 10px 12px; }
  .barre-enregistrer span { display: none; }
  .capacites__ligne { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .capacites__ligne strong { grid-column: 1 / -1; padding: 0; }
  .gantt__entete, .gantt__ligne { grid-template-columns: 170px max-content; }
}

@media print {
  .nav, .bandeau, .entete__actions, .filtres, .no-print, .section--serre, .section--alertes { display: none; }
  .coquille { display: block; }
  body { background: #fff; }
  .feuille { border-color: #999; }
  .travail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Remplissage des alvéoles et des jauges : .p-0 … .p-100 (la CSP interdit les styles en ligne) */
.p-0 { --p: 0; }
.p-1 { --p: 1; }
.p-2 { --p: 2; }
.p-3 { --p: 3; }
.p-4 { --p: 4; }
.p-5 { --p: 5; }
.p-6 { --p: 6; }
.p-7 { --p: 7; }
.p-8 { --p: 8; }
.p-9 { --p: 9; }
.p-10 { --p: 10; }
.p-11 { --p: 11; }
.p-12 { --p: 12; }
.p-13 { --p: 13; }
.p-14 { --p: 14; }
.p-15 { --p: 15; }
.p-16 { --p: 16; }
.p-17 { --p: 17; }
.p-18 { --p: 18; }
.p-19 { --p: 19; }
.p-20 { --p: 20; }
.p-21 { --p: 21; }
.p-22 { --p: 22; }
.p-23 { --p: 23; }
.p-24 { --p: 24; }
.p-25 { --p: 25; }
.p-26 { --p: 26; }
.p-27 { --p: 27; }
.p-28 { --p: 28; }
.p-29 { --p: 29; }
.p-30 { --p: 30; }
.p-31 { --p: 31; }
.p-32 { --p: 32; }
.p-33 { --p: 33; }
.p-34 { --p: 34; }
.p-35 { --p: 35; }
.p-36 { --p: 36; }
.p-37 { --p: 37; }
.p-38 { --p: 38; }
.p-39 { --p: 39; }
.p-40 { --p: 40; }
.p-41 { --p: 41; }
.p-42 { --p: 42; }
.p-43 { --p: 43; }
.p-44 { --p: 44; }
.p-45 { --p: 45; }
.p-46 { --p: 46; }
.p-47 { --p: 47; }
.p-48 { --p: 48; }
.p-49 { --p: 49; }
.p-50 { --p: 50; }
.p-51 { --p: 51; }
.p-52 { --p: 52; }
.p-53 { --p: 53; }
.p-54 { --p: 54; }
.p-55 { --p: 55; }
.p-56 { --p: 56; }
.p-57 { --p: 57; }
.p-58 { --p: 58; }
.p-59 { --p: 59; }
.p-60 { --p: 60; }
.p-61 { --p: 61; }
.p-62 { --p: 62; }
.p-63 { --p: 63; }
.p-64 { --p: 64; }
.p-65 { --p: 65; }
.p-66 { --p: 66; }
.p-67 { --p: 67; }
.p-68 { --p: 68; }
.p-69 { --p: 69; }
.p-70 { --p: 70; }
.p-71 { --p: 71; }
.p-72 { --p: 72; }
.p-73 { --p: 73; }
.p-74 { --p: 74; }
.p-75 { --p: 75; }
.p-76 { --p: 76; }
.p-77 { --p: 77; }
.p-78 { --p: 78; }
.p-79 { --p: 79; }
.p-80 { --p: 80; }
.p-81 { --p: 81; }
.p-82 { --p: 82; }
.p-83 { --p: 83; }
.p-84 { --p: 84; }
.p-85 { --p: 85; }
.p-86 { --p: 86; }
.p-87 { --p: 87; }
.p-88 { --p: 88; }
.p-89 { --p: 89; }
.p-90 { --p: 90; }
.p-91 { --p: 91; }
.p-92 { --p: 92; }
.p-93 { --p: 93; }
.p-94 { --p: 94; }
.p-95 { --p: 95; }
.p-96 { --p: 96; }
.p-97 { --p: 97; }
.p-98 { --p: 98; }
.p-99 { --p: 99; }
.p-100 { --p: 100; }

/* ---------- Espace client (lien privé, lecture seule) ------------------- */

.espace__largeur { width: min(100% - 32px, 960px); margin-inline: auto; }
.espace__bandeau { position: relative; padding: 22px 0 40px; background: var(--canard); color: #fff; }
/* Les trois couches du cube du logo, dans les couleurs des trois étapes d'un lot. */
.espace__bandeau::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12px;
  background: linear-gradient(var(--phase-levee) 0 4px, var(--phase-elevage) 4px 8px, var(--phase-vente) 8px);
}
.espace__marque { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.espace__marque img { display: block; width: 168px; height: auto; }
.espace__badge { padding: 3px 11px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; font-size: 12.5px; font-weight: 680; letter-spacing: .5px; text-transform: uppercase; color: rgb(255 255 255 / .92); }
.espace__bandeau h1 { margin-top: 28px; font-family: var(--titre); font-weight: 400; font-size: clamp(32px, 6.4vw, 50px); line-height: 1; color: #fff; text-wrap: balance; overflow-wrap: anywhere; }
.espace__intro { max-width: 58ch; margin-top: 10px; color: rgb(255 255 255 / .84); text-wrap: pretty; }
.espace__saisons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.espace__saisons a { padding: 4px 13px; border-radius: 999px; background: rgb(255 255 255 / .12); color: #fff; font-weight: 660; font-variant-numeric: tabular-nums; text-decoration: none; }
.espace__saisons a:hover { background: rgb(255 255 255 / .22); }
.espace__saisons a[aria-current] { background: #fff; color: var(--canard); }
.espace__corps { padding: 4px 0 44px; }
.espace__ferme { margin-top: 20px; }
.espace__vide { margin-top: 24px; padding: 26px 24px; }
.espace__vide h2 { font-size: 19px; font-weight: 760; }
.espace__vide p { margin-top: 6px; color: var(--encre-2); }

.espace__legende { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: -2px 0 0; padding: 0; list-style: none; color: var(--encre-2); font-size: 13.5px; }
.espace__legende li { display: inline-flex; align-items: center; gap: 7px; }
.espace__legende li::before { content: ""; width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.etape--semis { --c: var(--phase-levee); }
.etape--repiquage { --c: var(--phase-elevage); }
.etape--vente { --c: var(--phase-vente); }

.espace__corps .chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.espace-semaine { margin-top: 18px; }
.espace-semaine > summary { list-style: none; cursor: pointer; }
.espace-semaine > summary::-webkit-details-marker { display: none; }
.espace-semaine h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 4px 0 8px; border-bottom: 2px solid var(--encre); font-size: 17px; font-weight: 760; }
.espace-semaine h3::before { content: ""; align-self: center; width: 7px; height: 7px; margin: 0 2px 0 3px; border: solid var(--canard); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.espace-semaine[open] h3::before { transform: rotate(45deg) translate(-2px, -2px); }
.espace-semaine > summary:hover h3 { color: var(--canard); }
.espace-semaine:not([open]) h3 { border-bottom-width: 1px; border-bottom-color: var(--filet-fort); }
.espace-semaine h3 span { color: var(--encre-3); font-size: 13.5px; font-weight: 520; }
.espace__astuce { margin-top: 12px; color: var(--encre-3); font-size: 13.5px; }
.espace-lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.espace-lot { display: grid; align-content: start; gap: 12px; padding: 14px 16px 12px; }
.espace-lot__tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.espace-lot__nom { display: flex; align-items: flex-start; gap: 8px; line-height: 1.3; text-wrap: pretty; }
.espace-lot__nom svg.ico.ico--plante { width: 22px; height: 22px; margin-top: -2px; vertical-align: 0; }
.espace-lot__qte { flex: none; text-align: right; color: var(--encre-2); font-size: 13.5px; white-space: nowrap; }
.espace-lot__qte strong { display: block; color: var(--encre); font-size: 21px; font-weight: 740; line-height: 1.1; font-variant-numeric: tabular-nums; }
.espace-lot__qte .format { margin-left: 2px; }
.espace-lot__etat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: -4px; }
.espace-lot__ref { color: var(--encre-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.etat { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 680; line-height: 20px; background: var(--alveole); color: var(--encre-2); }
.etat--levee { background: var(--canard-voile); color: var(--canard); }
.etat--elevage { background: var(--orange-voile); color: #5a3205; }
.etat--pret { background: var(--pousse-voile); color: var(--pousse); }

/* Avancement : un petit cube par étape, plein quand l'étape est faite ; le trait en pointillé, c'est l'étape en cours. */
.etapes { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
.etape { position: relative; padding: 20px 8px 0 0; font-size: 12.5px; line-height: 1.3; }
.etape::before { content: ""; position: absolute; top: 5px; left: 12px; right: 0; height: 2px; background: var(--filet); }
.etape:last-child::before { display: none; }
.etape::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border: 2px solid var(--c); border-radius: 3px; background: var(--feuille); }
.etape.est-fait::after { background: var(--c); }
.etape.est-fait::before { background: var(--c); }
.etape.est-encours::before { background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 10px); }
.etape__nom { display: block; color: var(--encre-2); font-weight: 640; }
.etape.est-fait .etape__nom { color: var(--encre); font-weight: 720; }
.etape__date { display: block; color: var(--encre-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.etape__date span { display: block; color: var(--encre-3); font-weight: 460; }

.espace__plie > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 10px; list-style: none; cursor: pointer; }
.espace__plie > summary::-webkit-details-marker { display: none; }
.espace__plie > summary h2 { display: inline-flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 760; }
.espace__plie > summary h2::before { content: ""; width: 8px; height: 8px; border: solid var(--canard); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.espace__plie[open] > summary h2::before { transform: rotate(45deg) translate(-2px, -2px); }
.espace__plie > summary span { color: var(--encre-3); font-size: 14px; }
.espace__plie > summary:hover h2 { color: var(--canard); }
.espace__annules { margin: 0; padding: 4px 16px; list-style: none; font-size: 14px; }
.espace__annules li { padding: 9px 0; border-top: 1px solid var(--filet); color: var(--encre-2); }
.espace__annules li:first-child { border-top: 0; }
.espace__annules small { margin-left: 6px; color: var(--encre-3); }

.espace__pied { margin-top: 38px; padding-top: 14px; border-top: 1px solid var(--filet-fort); color: var(--encre-3); font-size: 13.5px; text-wrap: pretty; }
.espace__pied p + p { margin-top: 6px; }

/* Lien inactif */
.espace--vide { display: grid; place-items: center; min-height: 100vh; padding: 24px 16px; background: var(--canard); }
.espace__carte { display: grid; gap: 14px; width: min(100%, 440px); padding: 28px 26px 24px; }
.espace__carte h1 { font-family: var(--titre); font-weight: 400; font-size: 28px; line-height: 1.05; color: var(--canard-nuit); text-wrap: balance; }
.espace__carte p { color: var(--encre-2); }
.espace__logo-couleur { display: block; width: 200px; max-width: 100%; height: auto; }

/* Fiche du client, côté ferme : le lien à envoyer */
.lien-espace { display: grid; gap: 12px; padding: 18px 20px; }
.lien-espace__ligne { display: flex; flex-wrap: wrap; gap: 8px; }
.lien-espace__ligne input { flex: 1 1 320px; max-width: none; min-width: 0; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.lien-espace__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lien-espace__actions form { display: contents; }
.lien-espace p { color: var(--encre-2); font-size: 14px; text-wrap: pretty; }
.lien-espace .lien-espace__vu { color: var(--encre-3); font-size: 13.5px; }

@media (max-width: 640px) {
  .espace__bandeau { padding: 16px 0 34px; }
  .espace__marque img { width: 140px; }
  .espace__bandeau h1 { margin-top: 22px; }
  .espace-lot { padding: 13px 14px 11px; }
  .espace__corps .chiffres { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .espace__corps .chiffre:nth-child(3) { grid-column: 1 / -1; }
}

@media print {
  .espace__bandeau { padding: 0 0 12px; background: none; color: var(--encre); }
  .espace__bandeau::after, .espace__marque img, .espace__saisons, .espace__ferme { display: none; }
  .espace__bandeau h1, .espace__intro { color: var(--encre); }
  .espace-lot { break-inside: avoid; }
}

/* ---------- Fiche d'un lot : les trois étapes en couleur ----------------- */

.etat--livre { background: var(--pousse); color: #fff; }
.etat--annule { background: var(--tomate-voile); color: var(--tomate-fonce); }
.entete__sous .etat, .entete__sous .etiquette { margin-left: 6px; vertical-align: 1px; }
.enregistrer .etat { margin-left: 2px; }

.fiche__titre { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--encre); font-size: 17px; font-weight: 760; }
.fiche__titre svg.ico { color: var(--canard-clair); }

/* Phases : couleur franche (--c), teinte de fond (--v) et encre lisible sur la teinte (--t). */
.parcours__etape--semis, .phase-reel--levee { --c: var(--phase-levee); --v: var(--canard-voile); --t: var(--canard); }
.parcours__etape--repiquage, .phase-reel--elevage { --c: var(--phase-elevage); --v: var(--orange-voile); --t: #8a4810; }
.parcours__etape--vente, .phase-reel--vente { --c: var(--phase-vente); --v: var(--pousse-voile); --t: var(--pousse); }

.parcours { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.parcours__etape { position: relative; padding: 14px 16px 14px; border-top: 6px solid var(--c); border-radius: var(--rayon-petit); background: var(--v); }
.parcours__etape.est-encours { box-shadow: inset 0 0 0 2px var(--c); }
.parcours__nom { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--t); font-size: 14px; font-weight: 720; }
.parcours__cube { width: 13px; height: 13px; border: 2px solid var(--c); border-radius: 3px; background: var(--feuille); }
.parcours__etape.est-fait .parcours__cube { background: var(--c); }
.parcours__puce { margin-left: auto; padding: 0 8px; border-radius: 999px; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 700; line-height: 19px; letter-spacing: .2px; }
.parcours__etape--repiquage .parcours__puce { color: #3d2104; }
.parcours__semaine { margin-top: 6px; color: var(--t); font-size: 38px; font-weight: 780; line-height: 1; letter-spacing: -.8px; font-variant-numeric: tabular-nums; }
.parcours__etape--semis .parcours__semaine { font-size: 46px; }
.parcours__date { margin-top: 4px; color: var(--encre); font-weight: 640; }
.parcours__detail { margin-top: 6px; color: var(--encre-2); font-size: 13.5px; text-wrap: pretty; }
.parcours__reel { margin-top: 6px; color: var(--t); font-size: 13px; font-weight: 680; }

/* Frise proportionnelle : une case par semaine, comme les alvéoles d'une plaque. */
.parcours__frise { margin-top: 14px; }
.parcours__barre { display: block; width: 100%; height: 18px; clip-path: inset(0 round 5px); }
.barre-levee { fill: var(--phase-levee); }
.barre-elevage { fill: var(--phase-elevage); }
.barre-vente { fill: var(--phase-vente); }
.barre-semaine { stroke: var(--feuille); stroke-width: 2; }
.barre-jour { fill: var(--encre); }
.parcours__echelle { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--encre-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.parcours__echelle > span:first-child, .parcours__echelle > span:last-child { color: var(--encre-2); font-weight: 680; }
.parcours__jour { display: inline-flex; align-items: center; gap: 5px; color: var(--encre); font-weight: 680; }
.parcours__jour::before { content: ""; width: 4px; height: 12px; border-radius: 1px; background: var(--encre); }

.fait dt { display: flex; align-items: center; gap: 7px; }
.reel__champs label .motte, .phase-reel legend .motte { margin-right: 6px; vertical-align: -1px; }

/* Réalisé, rangé par étape */
.phases-reel { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.phase-reel { min-width: 0; margin: 0; padding: 12px 14px 14px; border: 0; border-top: 4px solid var(--c); border-radius: var(--rayon-petit); background: color-mix(in srgb, var(--v) 55%, var(--feuille)); }
.phase-reel legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; color: var(--t); font-size: 14px; font-weight: 740; }
.phase-reel__champs { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.phase-reel .champ--plein { grid-column: 1 / -1; }
.phase-reel .champ label { font-size: 13.5px; }
.phase-reel .champ input::placeholder { color: var(--encre-3); }
.phase-reel .champ input:not(:placeholder-shown) { border-color: var(--c); box-shadow: inset 3px 0 0 var(--c); font-weight: 680; }

@media (max-width: 640px) {
  .parcours { grid-auto-flow: row; }
  .parcours__etape { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; padding: 12px 14px; }
  .parcours__nom { grid-column: 1; }
  .parcours__semaine, .parcours__etape--semis .parcours__semaine { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-size: 32px; }
  .parcours__date, .parcours__detail, .parcours__reel { grid-column: 1; margin-top: 0; }
  .parcours__echelle { font-size: 12.5px; }
}

.champ { align-content: start; }   /* une aide sous un champ n'étire pas ses voisins */

/* ---------- Choix de la semaine (« Cette semaine », « Suivi ») ---------- */
/* Les flèches encadrent le titre ; un clic sur « Semaine N » ouvre l'année, mois par mois. */

.semainier { min-width: 0; }
.semainier__retour {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 6px;
  padding: 2px 10px 2px 7px;
  border-radius: 999px;
  background: var(--canard-voile);
  color: var(--canard);
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.semainier__retour svg.ico { width: 15px; height: 15px; }
.semainier__retour:hover { background: var(--canard); color: #fff; }
.semainier__ligne { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; }
.entete .semainier h1 { margin: 0; }
.semainier__titre {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 6px 10px;
  border: 0;
  border-radius: var(--rayon);
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  cursor: pointer;
  anchor-name: --titre-semaine;
}
.semainier__titre svg.ico { width: .42em; height: .42em; stroke-width: 2.6; color: var(--canard-clair); }
.semainier__titre:hover, .semainier__titre:focus-visible { background: var(--canard-voile); }
.semainier__fleche {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  background: var(--feuille);
  color: var(--canard);
}
.semainier__fleche svg.ico { width: 22px; height: 22px; stroke-width: 2.2; }
.semainier__fleche:hover { border-color: var(--canard); background: var(--canard); color: #fff; }

/* Le panneau : centré par défaut, sous le titre quand le navigateur sait l'y accrocher. */
.choix-semaine {
  width: min(390px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 16px 16px 14px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--feuille);
  color: var(--encre);
  box-shadow: 0 18px 50px rgb(7 32 38 / .25);
}
.choix-semaine::backdrop { background: rgb(7 32 38 / .3); }
@supports (position-anchor: --a) {
  @media (min-width: 700px) {
    .choix-semaine { position-anchor: --titre-semaine; position-area: bottom span-right; position-try-fallbacks: flip-block; inset: auto; margin: 6px 0; }
    .choix-semaine::backdrop { background: transparent; }
  }
}
.choix-semaine__tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.choix-semaine__tete p { font-family: var(--titre); font-size: 21px; color: var(--canard-nuit); }
.choix-semaine__tete a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px 8px;
  border-radius: var(--rayon-petit);
  color: var(--canard);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.choix-semaine__tete a svg.ico { width: 16px; height: 16px; stroke-width: 2.2; }
.choix-semaine__tete a:hover { background: var(--canard-voile); }
.choix-semaine__mois { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.choix-semaine__mois li { display: grid; grid-template-columns: 46px repeat(5, minmax(0, 1fr)); gap: 4px; align-items: center; }
.choix-semaine__nom { color: var(--encre-3); font-size: 13px; font-weight: 600; }
.alveole-semaine {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 0 5px;
  border: 1px solid var(--alveole-bord);
  border-radius: 6px;
  background: var(--alveole);
  color: var(--encre);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
}
.alveole-semaine:hover { border-color: var(--canard); background: var(--canard-voile); }
.alveole-semaine.est-calme { background: transparent; border-color: var(--filet); color: var(--encre-3); font-weight: 500; }
.alveole-semaine.est-aujourdhui { box-shadow: inset 0 0 0 2px var(--canard-nuit); border-color: var(--canard-nuit); }
.alveole-semaine[aria-current] { background: var(--canard); border-color: var(--canard); color: #fff; }
.alveole-semaine[aria-current].est-aujourdhui { box-shadow: inset 0 0 0 2px #fff; }
.alveole-semaine__phases { display: flex; gap: 2px; }
.alveole-semaine__phases i { width: 6px; height: 6px; border-radius: 1.5px; }
.alveole-semaine__phases .phase--levee { background: var(--phase-levee); }
.alveole-semaine__phases .phase--elevage { background: var(--phase-elevage); }
.alveole-semaine__phases .phase--vente { background: var(--phase-vente); }
.alveole-semaine[aria-current] .alveole-semaine__phases i[class] { box-shadow: 0 0 0 1px #fff; }
.choix-semaine__legende {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--filet);
  color: var(--encre-2);
  font-size: 13px;
  list-style: none;
}
.choix-semaine__legende li { display: inline-flex; align-items: center; gap: 6px; }
.choix-semaine__legende .motte { width: 9px; height: 9px; border-radius: 2px; }
.choix-semaine__jour { width: 16px; height: 12px; border-radius: 3px; box-shadow: inset 0 0 0 2px var(--canard-nuit); }
.choix-semaine__pied { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .semainier__fleche, .semainier__titre, .alveole-semaine { transition: background-color .15s, border-color .15s, color .15s; }
  .choix-semaine { transition: opacity .16s, transform .16s cubic-bezier(.2, .7, .2, 1), overlay .16s allow-discrete, display .16s allow-discrete; }
  .choix-semaine:popover-open { @starting-style { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 640px) {
  .semainier__ligne { gap: 4px; margin-inline: -4px; }
  .semainier__fleche { width: 38px; height: 38px; }
  .entete .semainier h1 { font-size: clamp(28px, 8.6vw, 40px); }
  .semainier__titre { padding-inline: 6px 2px; }
}
@media print {
  .semainier__fleche, .semainier__retour, .semainier__titre svg.ico { display: none; }
  .semainier__titre { padding: 0; }
}

/* ---------- Longues listes de lots : aller à une semaine de vente ------- */

.aller-semaine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.aller-semaine__titre { margin-right: 4px; color: var(--encre-2); font-size: 13.5px; font-weight: 620; }
.aller-semaine__lien {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-height: 32px;
  padding: 5px 9px;
  border: 1px solid var(--alveole-bord);
  border-radius: 6px;
  background: var(--feuille);
  color: var(--encre);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.aller-semaine__lien small { color: var(--encre-3); font-size: 11.5px; font-weight: 600; }
.aller-semaine__lien:hover { border-color: var(--canard); background: var(--canard-voile); }
.aller-semaine__lien.est-passee { background: transparent; border-color: var(--filet); color: var(--encre-3); font-weight: 560; }
.aller-semaine__lien.est-prochaine { border-color: var(--phase-vente); box-shadow: inset 0 0 0 1px var(--phase-vente); color: var(--pousse); }
.liste tr.groupe-semaine { scroll-margin-top: 12px; }
.liste tr.groupe-semaine:target th { background: var(--pousse-voile); }
.carte-seule { display: none; }

/* Sur téléphone, chaque lot devient une petite fiche : plante, puis lot · client · plants, puis les trois dates en couleur. */
@media (max-width: 640px) {
  .liste--cartes { display: block; font-size: 14px; }
  .liste--cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .liste--cartes tbody { display: block; }
  .liste--cartes tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-bottom: 1px solid var(--filet); }
  .liste--cartes tbody tr.groupe-semaine { display: block; padding: 0; }
  .liste--cartes tr.groupe-semaine th { display: block; padding: 12px 14px 8px; }
  .liste--cartes tr.groupe-semaine th span { display: block; margin: 2px 0 0; font-size: 13px; }
  .liste--cartes td, .liste--cartes .colonne-large { display: block; padding: 0; border: 0; text-align: left; }
  .liste--cartes .carte-seule { display: inline; color: var(--encre-3); font-weight: 500; font-size: 13px; }
  .liste--cartes .c-plante { grid-area: 1 / 1 / 2 / -1; font-size: 15px; }
  .liste--cartes .c-lot { grid-area: 2 / 1; color: var(--encre-2); }
  .liste--cartes .c-client { grid-area: 2 / 2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .liste--cartes .c-qte { grid-area: 2 / 3; text-align: right; font-weight: 700; }
  .liste--cartes .c-montant { grid-area: 3 / 3; text-align: right; color: var(--encre-2); }
  .liste--sans-client .c-lot { grid-area: 2 / 1 / 3 / 3; }
  .liste--cartes td[data-titre] { grid-row: 4; margin-top: 4px; padding: 6px 0 0; border-top: 2px solid var(--c, var(--filet)); }
  .liste--cartes td[data-titre]::before { content: attr(data-titre); display: block; color: var(--t, var(--encre-2)); font-size: 11px; font-weight: 720; letter-spacing: .05em; text-transform: uppercase; }
  .liste--cartes .c-semis { --c: var(--phase-levee); --t: var(--phase-levee); grid-column: 1; }
  .liste--cartes .c-repiquage { --c: var(--phase-elevage); --t: var(--orange-brun); grid-column: 2; }
  /* Fiches d'un client ou d'une plante : semis à gauche, état au milieu, montant à droite. */
  .liste--cartes.liste--lots td.c-semis { grid-area: 3 / 1; }
  .liste--cartes.liste--lots td.c-etat { grid-area: 3 / 2; align-self: end; }
  .liste--cartes.liste--lots td.c-montant { grid-area: 3 / 3; align-self: end; }
  .liste--cartes .liste__vide { grid-column: 1 / -1; }
}

/* ---------- Suivi : raccourcis vers les étapes, « tout cocher » ---------- */

.aller-etape { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.aller-etape__lien {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: 999px;
  background: var(--feuille);
  color: var(--encre);
  font-weight: 650;
  text-decoration: none;
}
.aller-etape__lien b { min-width: 24px; padding: 0 7px; border-radius: 999px; background: var(--alveole); font-size: 13px; text-align: center; }
.aller-etape__lien:hover { border-color: var(--canard); }
.section--suivi { scroll-margin-top: 12px; }
.section--suivi .section__titre { align-items: center; }
.tout-cocher { margin-left: auto; }
.tout-cocher svg.ico { width: 17px; height: 17px; }
@media (max-width: 640px) {
  /* Une seule case à cocher : elle reste à droite du nom, la liste est deux fois plus courte. */
  .section--sow .suivi__lot { flex-wrap: nowrap; padding: 10px 14px; }
  .section--sow .suivi__nom { min-width: 0; flex: 1 1 auto; }
  .tout-cocher { margin-left: 0; }
}

/* Fiches client et plante : ventes passées repliées sous les ventes à venir. */
.lots-passes { margin-top: 14px; }
.lots-passes > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 12px 16px;
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  background: var(--feuille);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.lots-passes > summary::before { content: ""; width: 8px; height: 8px; border: solid var(--canard); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
.lots-passes[open] > summary::before { transform: rotate(45deg); }
.lots-passes > summary::-webkit-details-marker { display: none; }
.lots-passes > summary small { color: var(--encre-3); font-weight: 560; font-size: 13.5px; }
.lots-passes[open] > summary { margin-bottom: 10px; }
.liste td small.vendus-moins { color: var(--orange-brun); font-weight: 650; }
.liste .c-etat .etat { white-space: nowrap; }

/* Réglages : la création d'une saison se déplie et se confirme. */
.nouvelle-saison { margin-top: 12px; }
.nouvelle-saison > summary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--canard); font-weight: 700; cursor: pointer; list-style: none; }
.nouvelle-saison > summary::-webkit-details-marker { display: none; }
.nouvelle-saison form { display: grid; gap: 12px; justify-items: start; padding: 0 16px 16px; }
.nouvelle-saison form p { max-width: 70ch; color: var(--encre-2); }
.rapport-import .feuille + .feuille, .rapport-import .section__titre { margin-top: 12px; }
.liste tr:has(> td > .bouton--petit) > * { vertical-align: middle; }

/* Grille d'itinéraire : chaque colonne porte la couleur de son étape. */
.liste thead th.ph { border-bottom-width: 3px; }
.liste thead th.ph .motte { width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.liste thead th.ph--levee { border-bottom-color: var(--phase-levee); }
.liste thead th.ph--elevage { border-bottom-color: var(--phase-elevage); }
.liste thead th.ph--vente { border-bottom-color: var(--phase-vente); }

/* Tableaux par semaine : semaines passées en retrait, semaine en cours marquée. */
.liste--semaines tr.est-passee { color: var(--encre-3); }
.liste--semaines tr.est-courante > * { background: var(--pousse-voile); }
.liste--semaines tr.est-courante > th { box-shadow: inset 4px 0 0 var(--phase-vente); }
.liste--semaines tr.est-courante { scroll-margin-top: 60px; }

/* ---------- Téléphone : barre d'écrans en bas et menu complet ---------- */

.onglets-bas { display: none; }
.menu-complet {
  inset: auto 0 0 0;
  width: 100%;
  max-width: none;
  max-height: 85dvh;
  margin: 0;
  overflow: auto;
  padding: 16px 16px calc(18px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--canard-nuit);
  color: #fff;
}
.menu-complet::backdrop { background: rgb(7 32 38 / .45); }
.menu-complet__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.menu-complet__tete p { font-family: var(--titre); font-size: 22px; }
.menu-complet__liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.menu-complet__liens a {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 6px;
  min-height: 76px;
  padding: 10px 6px;
  border-radius: var(--rayon);
  background: rgb(255 255 255 / .08);
  color: #fff;
  font-size: 13px;
  font-weight: 640;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.menu-complet__liens a svg.ico { width: 24px; height: 24px; }
.menu-complet__liens a[aria-current="page"] { background: #fff; color: var(--canard-nuit); }
.menu-complet__pied { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .15); }
.menu-complet__pied form { display: grid; gap: 4px; }
.menu-complet__pied label { color: rgb(255 255 255 / .75); font-size: 13px; }
.menu-complet__pied select { min-height: 44px; min-width: 120px; padding: 6px 10px; border-radius: var(--rayon-petit); font: inherit; }

@media (max-width: 640px) {
  .nav__liens, .nav__pied { display: none; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .onglets-bas {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
    background: var(--canard-nuit);
    box-shadow: 0 -4px 18px rgb(7 32 38 / .25);
  }
  .onglets-bas__lien {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 56px;
    padding: 8px 2px 6px;
    border: 0;
    border-radius: var(--rayon-petit);
    background: none;
    color: rgb(255 255 255 / .78);
    font: inherit;
    font-size: 11.5px;
    font-weight: 640;
    text-decoration: none;
    cursor: pointer;
  }
  .onglets-bas__lien svg.ico { width: 23px; height: 23px; }
  .onglets-bas__lien[aria-current="page"] { color: #fff; box-shadow: inset 0 3px 0 var(--orange); background: rgb(255 255 255 / .08); }
  .barre-enregistrer { bottom: calc(66px + env(safe-area-inset-bottom)); }
}
@media print {
  .onglets-bas, .menu-complet { display: none !important; }
}

/* Tableau plus large que l'écran : la première colonne (le nom) reste visible quand on fait défiler sur le côté. */
.liste-defile:not(.tient-en-largeur) .liste tbody th[scope="row"],
.liste-defile:not(.tient-en-largeur) .liste thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--feuille); box-shadow: 1px 0 0 var(--filet); }
.liste-defile:not(.tient-en-largeur) .liste thead th:first-child { z-index: 2; }

/* ---------- Commandes ----------------------------------------------------- */

/* Filtres : repliables sur téléphone (le résumé ne s'affiche que là). */
.filtres-plies > summary { display: none; }
.filtres-plies > summary::-webkit-details-marker { display: none; }
.filtres .champ--plage { margin: 0; padding: 0; border: 0; }
.filtres .champ--plage legend { margin-bottom: 4px; padding: 0; font-size: 13px; font-weight: 640; color: var(--encre-2); }
.filtres .champ--plage div { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--encre-2); }
.filtres .champ--plage input { width: 64px; min-height: 40px; padding: 7px 8px; border: 1px solid var(--filet-fort); border-radius: var(--rayon-petit); font: inherit; }
.filtres .champ--plage label + input { margin-right: 4px; }

/* Filtres actifs : une étiquette par filtre, la croix le retire. */
.filtres-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; color: var(--encre-2); font-size: 14px; }
.filtre-actif {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 6px 4px 12px;
  border-radius: 999px;
  background: var(--canard);
  color: #fff;
  font-weight: 640;
  text-decoration: none;
}
.filtre-actif > span[aria-hidden] { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgb(255 255 255 / .18); font-size: 15px; line-height: 1; }
.filtre-actif:hover > span[aria-hidden] { background: var(--tomate); }
.filtres-actifs__tout { margin-left: 4px; font-weight: 640; }

/* En-tête de semaine : le total à gauche, l'ajout d'une commande pour cette semaine à droite. */
.groupe-semaine__ligne { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.groupe-semaine__ajout { display: inline-flex; align-items: center; gap: 4px; color: var(--canard); font-size: 13.5px; font-weight: 650; text-decoration: none; }
.groupe-semaine__ajout svg.ico { width: 16px; height: 16px; }
.groupe-semaine__ajout:hover { text-decoration: underline; }

/* Toute la ligne ouvre le lot (app.js) ; le client garde son propre lien. */
.liste--commandes tbody tr:not(.groupe-semaine):hover { background: var(--canard-voile); cursor: pointer; }
.liste--commandes .c-etat { white-space: normal; }
.liste--commandes .c-etat .etiquette { margin: 2px 0 0 4px; }
.liste--commandes td.c-qte small { color: var(--encre-3); }

@media (max-width: 640px) {
  .filtres-plies > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--filet);
    border-radius: var(--rayon);
    background: var(--feuille);
    color: var(--canard);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }
  .filtres-plies > summary b { min-width: 22px; padding: 0 7px; border-radius: 999px; background: var(--canard); color: #fff; font-size: 13px; text-align: center; }
  .filtres-plies[open] > summary { border-radius: var(--rayon) var(--rayon) 0 0; border-bottom: 0; }
  .filtres-plies[open] .filtres { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }
  .filtres .champ--plage { flex: 1 1 100%; }
  /* Fiches : plante ; lot · client · plants ; semis · repiquage ; état. */
  .liste--commandes td.c-semis { grid-area: 3 / 1; }
  .liste--commandes td.c-repiquage { grid-area: 3 / 2 / 4 / 4; }
  .liste--commandes td.c-etat { grid-area: 4 / 1 / 5 / -1; }
  .liste--commandes .groupe-semaine__ajout { font-size: 13px; }
}

/* En-têtes de semaine : titre en gras ; sur téléphone, une semaine se replie d'un geste. */
.liste tr.groupe-semaine th .groupe-semaine__titre { margin: 0; color: var(--encre); font-weight: 720; }
.liste tr.groupe-semaine th .groupe-semaine__titre > span { margin-left: 8px; color: var(--encre-2); font-weight: 560; }
.groupe-semaine__plier { display: inline-flex; align-items: baseline; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.groupe-semaine__plier svg.ico { width: 16px; height: 16px; align-self: center; flex: none; color: var(--canard); transition: transform .15s; }
.semaine-groupe:not(.est-plie) .groupe-semaine__plier svg.ico { transform: rotate(90deg); }
.semaine-groupe.est-plie > tr:not(.groupe-semaine) { display: none; }
.semaine-groupe.est-plie .groupe-semaine th { border-bottom-color: var(--filet); }
@media (max-width: 640px) {
  .liste--cartes tr.groupe-semaine th .groupe-semaine__titre > span { display: block; margin: 2px 0 0; }
  .liste--cartes .semaine-groupe { display: block; }
}

/* ---------- Commandes : fiche du lot dans une fenêtre --------------------- */

.fenetre-lot {
  width: min(1120px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  border: 0;
  border-radius: var(--rayon);
  background: var(--fond);
  color: var(--encre);
  box-shadow: 0 24px 70px rgb(7 32 38 / .35);
}
.fenetre-lot::backdrop { background: rgb(7 32 38 / .45); }
.fenetre-lot__barre {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--canard-nuit);
  color: #fff;
}
.fenetre-lot__page { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 640; }
.fenetre-lot__page svg.ico { width: 17px; height: 17px; }
.fenetre-lot [data-fermer] svg.ico { transform: rotate(45deg); }
.fenetre-lot__corps { padding: 0 24px 24px; }
.fenetre-lot__corps[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.fenetre-lot__corps > .bandeau { margin: 16px 0 0; border-radius: var(--rayon-petit); }
.fenetre-lot__attente { padding: 48px 0; color: var(--encre-3); text-align: center; }
.fenetre-lot .entete { padding-top: 18px; }
.fenetre-lot .entete h1 { font-size: clamp(30px, 4vw, 46px); view-transition-name: none; }
.liste--commandes tr.est-maj > * { animation: maj-ligne 2.4s ease-out; }
@keyframes maj-ligne { from { background: var(--pousse-voile); } }
@media (max-width: 640px) {
  .fenetre-lot { width: 100vw; height: 100dvh; max-height: none; margin: 0; border-radius: 0; }
  .fenetre-lot__corps { padding: 0 16px calc(24px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
  .fenetre-lot[open] { animation: fenetre-entre .22s cubic-bezier(.2, .7, .2, 1); }
  @keyframes fenetre-entre { from { opacity: 0; transform: translateY(14px); } }
}

/* ---------- Comptes ------------------------------------------------------- */

.nav__compte { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #fff; font-size: 14px; font-weight: 650; }
.nav__compte svg.ico { width: 17px; height: 17px; color: rgb(255 255 255 / .75); }
.invitation h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 760; }
.invitation h2 svg.ico { color: var(--canard); }
.invitation { border-color: var(--canard-clair); box-shadow: inset 4px 0 0 var(--canard-clair); }
.comptes td small, .comptes th small { display: block; color: var(--encre-3); font-size: 12.5px; font-weight: 500; }
.comptes__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.comptes__actions form { margin: 0; }
.formulaire--ligne .champ:has(> .bouton) { flex: none; }
.formulaire--ligne .champ > .bouton { white-space: nowrap; }
@media (max-width: 640px) {
  .comptes__actions { justify-content: flex-start; }
}

/* ---------- Page d'une variété ------------------------------------------- */

.fiche-variete { display: grid; align-content: start; gap: 12px; }
.fiche-variete__accroche { color: var(--encre); font-size: 17px; font-weight: 620; line-height: 1.4; }
.fiche-variete p { line-height: 1.5; }
.fiche-variete__faits { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 4px 0 0; padding: 12px 0 0; border-top: 1px solid var(--filet); }
.fiche-variete__faits dt { color: var(--encre-3); font-size: 12.5px; font-weight: 640; }
.fiche-variete__faits dd { margin: 2px 0 0; font-weight: 640; }
.fiche-variete__latin { font-style: italic; }
.fiche-variete__complete summary { color: var(--canard); font-weight: 650; cursor: pointer; }
.fiche-variete__complete p { margin-top: 8px; color: var(--encre-2); font-size: 14.5px; }