/* ============================================================================= APABA Phyto v2 — Styles shortcode [ppp_bio] ============================================================================= */ /* Les 11 tokens ci-dessous s'appelaient --apaba-* et étaient posés sur :root : ils MASQUAIENT --apaba-text, --apaba-radius et --apaba-shadow-sm/lg du thème dans toute la page portant ce formulaire. Préfixe --mtp- (MaraichageTools Phyto) : plus aucune collision, et chaque token consomme désormais celui du design system, avec repli littéral. Ils restent sur :root et NON sur .apaba-phyto-app : le JavaScript déplace les deux modales vers pour échapper au contexte d'empilement du thème (assets/script.js, « Portal vers document.body »). Scopées sur l'application, les variables ne seraient plus héritées par les modales déplacées. */ :root { --mtp-primary: var(--mt-brand, #1a8781); --mtp-primary-bg: var(--mt-brand-tint, #e6f2f0); --mtp-text: var(--mt-ink, #2b3128); --mtp-text-light: var(--mt-muted, #6c7266); --mtp-border: var(--mt-line, #e5dfd4); --mtp-bg-card: var(--mt-surface, #ffffff); --mtp-bg-soft: var(--mt-surface-warm, #f4efe7); --mtp-radius: var(--mt-radius-lg, 16px); --mtp-shadow-sm: var(--mt-shadow-sm, 0 1px 2px rgba(43, 49, 40, .06)); --mtp-shadow-md: var(--mt-shadow, 0 3px 12px rgba(43, 49, 40, .08)); --mtp-shadow-lg: var(--mt-shadow-lg, 0 12px 32px rgba(43, 49, 40, .12)); } /* ----- Container ------------------------------------------------------- */ .apaba-phyto-app { box-sizing: border-box; width: 100%; color: var(--mtp-text); /* Barlow explicite : sur Fedora, la pile « système » retombe en monospace (cf. docs/09_DESIGN_SYSTEM_FRONT.md d'adminapaba). */ font-family: var(--mt-font-body, "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); font-size: var(--mt-fs-body, 16px); line-height: 1.5; } .apaba-phyto-app *, .apaba-phyto-app *::before, .apaba-phyto-app *::after { box-sizing: border-box; } /* ----- Filtres --------------------------------------------------------- */ .apaba-phyto-filters { background: var(--mtp-bg-soft); border: 1px solid var(--mtp-border); border-radius: var(--mtp-radius); padding: 18px 20px 16px; margin-bottom: 16px; box-shadow: var(--mtp-shadow-sm); } /* Intitulé de section : même cran que `.mt-app h2` (Barlow 22/700, casse normale). Les capitales 12 px + tracking sont le cran retiré du DS. `font-weight` est ici parce que `.mt-app h2` ne le pose pas — le thème laisse souvent les h2 en 400 (Amatic), et Barlow 400 à 22 px ne fait pas un titre. */ .apaba-phyto-filters__title { font-family: inherit; font-size: var(--mt-fs-title-lg, 22px); font-weight: 700; line-height: 1.25; color: var(--mt-ink, #2b3128); margin-bottom: 12px; } .apaba-phyto-filters__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } /* La recherche occupe sa propre ligne au-dessus, sur toute la largeur des 4 selects. Les selects flow ensuite en row 2. */ .apaba-phyto-filters__row > :first-child { grid-column: 1 / -1; } /* Pied du formulaire : fraîcheur du catalogue à gauche, filtre Bio à droite, sur une seule ligne. Les deux étaient en `position: fixed` — le toggle recouvrait le dernier résultat et rien ne les rattachait au formulaire. */ .apaba-phyto-filters__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mtp-border); } .apaba-phyto-filters__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .apaba-phyto-filters__label { font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mt-ink, #2b3128); } .apaba-phyto-input, .apaba-phyto-select { min-height: 44px; margin: 0; padding: 10px 13px; border: 1px solid var(--mtp-border); border-radius: var(--mt-radius, 10px); background: var(--mtp-bg-card); color: var(--mtp-text); font-family: inherit; font-size: var(--mt-fs-field, 16px); font-weight: 400; width: 100%; box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; } .apaba-phyto-input:focus, .apaba-phyto-select:focus { outline: none; border-color: var(--mtp-primary); box-shadow: 0 0 0 3px rgba(26, 135, 129, .20); } .apaba-phyto-input[type="search"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 16px 16px; background-position: 10px 50%; padding-left: 34px; } /* ----- Overrides Choices.js (aligne avec le look du plugin) ----- */ .apaba-phyto-filters .choices { margin-bottom: 0; position: relative; } /* Dissolve le stacking context du theme Agrikole sur `#inner-content` (position: relative; z-index: 1). Ce wrapper plafonne tout son contenu à z=1 au niveau root → quand un dropdown Choices.js s'ouvre vers le haut (manque de place en bas), il passe derrière le header sticky du theme (z=9989). En remettant z-index:auto sur ce wrapper, on dissout le stacking context et nos enfants accèdent au z-axis root. Surveille les widgets theme qui dépendraient de ce contexte (parallax, mega menu) — aucun cas connu APABA à date. */ #inner-content { z-index: auto !important; } /* Quand le dropdown est ouvert, on bump l'élément à un z-index qui couvre les menus sticky du theme WP (header agrikole z=9989). */ .apaba-phyto-filters .choices.is-open { z-index: 2147483000; } .apaba-phyto-filters .choices__inner { min-height: 44px; padding: 8px 13px; background: var(--mtp-bg-card); border: 1px solid var(--mtp-border); border-radius: var(--mt-radius, 10px); font-family: inherit; font-size: var(--mt-fs-field, 16px); } .apaba-phyto-filters .choices.is-focused .choices__inner, .apaba-phyto-filters .choices.is-open .choices__inner { border-color: var(--mtp-primary); box-shadow: 0 0 0 3px rgba(26, 135, 129, .20); } .apaba-phyto-filters .choices__list--dropdown, .apaba-phyto-filters .choices__list[aria-expanded] { border: 1px solid var(--mtp-border); border-radius: 10px; box-shadow: var(--mtp-shadow-md); margin-top: 4px; /* Le dropdown déborde du trigger pour laisser de la place aux items longs (cultures/atoms peuvent dépasser 25% de la grille). */ min-width: 260px; background: #ffffff; overflow: hidden; } .apaba-phyto-filters .choices__list--dropdown .choices__list, .apaba-phyto-filters .choices__list[aria-expanded] .choices__list { max-height: 280px; } .apaba-phyto-filters .choices__list--dropdown .choices__item, .apaba-phyto-filters .choices__list[aria-expanded] .choices__item { padding: 8px 12px; font-size: var(--mt-fs-field, 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .apaba-phyto-filters .choices__list--dropdown .choices__item--selectable.is-highlighted, .apaba-phyto-filters .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background: var(--mtp-primary-bg); color: var(--mtp-primary); } .apaba-phyto-filters .choices__input { background: var(--mtp-bg-soft); border-radius: 6px; padding: 8px 10px; font-size: var(--mt-fs-field, 16px); margin-bottom: 4px; } /* Cache la fleche par défaut WP qui se cumule avec celle de Choices */ .apaba-phyto-filters .choices[data-type*="select-one"]::after { border-color: var(--mtp-text-light) transparent transparent; } /* ----- Compteur résultats --------------------------------------------- */ .apaba-phyto-count { font-size: var(--mt-fs-body, 16px); font-weight: 400; color: var(--mtp-text); margin: 4px 0 12px; min-height: 18px; /* Laisse le compteur sous le header sticky du thème au scrollIntoView. */ scroll-margin-top: 96px; } /* ----- Résultats : liste de cards ------------------------------------- */ .apaba-phyto-results { padding-bottom: 0; } /* ============================================================ Modal Calcul pulvé (§13 V2 — fidélité SaaS) ============================================================ */ .apaba-phyto-modal[hidden] { display: none; } .apaba-phyto-modal { position: fixed; inset: 0; /* Le menu/admin-bar WordPress monte jusqu'à 99999 selon le theme + certains theme-builders (Elementor) jusqu'à 999999. On reste au-dessus. */ z-index: 2147483000; display: flex; align-items: center; justify-content: center; } /* Modal Aide doit s'overlay au-dessus du modal Calc */ .apaba-phyto-modal--help { z-index: 2147483001; } .apaba-phyto-modal__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); } .apaba-phyto-modal__dialog { position: relative; /* Le JS porte les deux modales vers (« Portal vers document.body ») : elles sortent de `.apaba-phyto-app` et perdent sa famille comme ses `font-family: inherit` sur h2/h3 — le titre reprenait alors le serif du thème. Le dialogue ne PARIE sur aucun ancêtre. */ box-sizing: border-box; font-family: var(--mt-font-body, "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); background: var(--mtp-bg-card); border-radius: var(--mt-radius-lg, 16px); box-shadow: var(--mtp-shadow-lg); width: min(640px, calc(100% - 24px)); max-width: 100%; max-height: 90vh; /* Le dialogue ne défile PLUS : c'est son corps (cf. `__body` ci-dessous). Tant que l'ascenseur appartenait au dialogue, il prélevait ses ~15 px sur la LARGEUR UTILE — marge droite de 39 px contre 24 à gauche, et des champs qui n'atteignaient jamais le bord. Bénéfice de bord : le titre et le produit traité restent visibles pendant qu'on fait défiler. */ display: flex; flex-direction: column; overflow: hidden; padding: 22px 24px 20px; } .apaba-phyto-modal__dialog *, .apaba-phyto-modal__dialog *::before, .apaba-phyto-modal__dialog *::after { box-sizing: border-box; } /* Titre à gauche, Aide à droite. La croix de fermeture est en absolu dans la gouttière (top 10 / right 12) : la réserve à droite l'empêche de recouvrir le bouton plutôt que de compter sur la chance des longueurs de libellés. */ .apaba-phyto-modal__header { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-right: 40px; margin-bottom: 16px; } .apaba-phyto-modal__heading { min-width: 0; } .apaba-phyto-modal__close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; cursor: pointer; font-size: 22px; line-height: 1; color: var(--mtp-text-light); padding: 4px 8px; } .apaba-phyto-modal__close:hover { color: var(--mtp-text); } .apaba-phyto-modal h2, .apaba-phyto-modal h3 { font-family: inherit; } .apaba-phyto-modal__header h2 { margin: 0 0 4px; font-size: var(--mt-fs-title, 18px); font-weight: 700; color: var(--mtp-text); } .apaba-phyto-modal__subtitle { font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); } .apaba-phyto-modal__body { display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-width: 0; min-height: 0; /* sans ça un enfant flex refuse de rétrécir sous son contenu */ overflow-x: hidden; overflow-y: auto; /* L'ascenseur se loge DANS la gouttière droite du dialogue au lieu de rogner le contenu : la marge négative vaut exactement sa largeur, et `scrollbar-gutter: stable` la réserve même quand il n'y a rien à faire défiler — sinon le contenu sauterait de 15 px d'un état à l'autre. */ margin-right: calc(-1 * var(--mtp-scrollbar, 0px)); scrollbar-gutter: stable; } /* --------------------------------------------------------------------------- Refonte « recette de cuve » (août 2026). Ordre de lecture : LES MOLETTES (le formulaire) → LA RECETTE (eau + produit pour une cuve, la répartition, la jauge de concentration) → APRÈS LE PASSAGE → la fiche produit repliée. La prose ANSES n'ouvre plus la modale. Le squelette est STABLE : aucun bloc n'apparaît ni ne disparaît pendant la frappe, seules les valeurs passent de « — » aux nombres. Ce qui est parti : l'émeraude #ecfdf5/#a7f3d0 (une seconde marque dans un système teal), les intitulés en capitales 12 px (cran retiré du design system), les champs à 38 px (cible tactile 44 px), le bloc « Informations » centré (une seule grammaire : à gauche ce qui nomme, à droite ce qui vaut). --------------------------------------------------------------------------- */ /* ----- Les molettes : grammaire Ferti (ADR-0001) -------------------------- * Rangée = libellé 16/700 encre | contrôle. Le nombre et l'unité partagent * un chrome (`.mt-ferti__row-ctrl--unit`). Les paliers vivent DANS le * contrôle, empilés au-dessus du champ : plus de piste partagée, plus * d'escalier, plus de rangée `--wide` (POST_MORTEM #21). */ .apaba-phyto-spray-dials { display: block; } .apaba-phyto-spray-dial { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); align-items: center; column-gap: var(--mt-space-3, 12px); row-gap: 4px; padding: 10px 0; } /* `display: grid` auteur bat le [hidden] user-agent par ORIGINE de cascade : sans cette ligne, la molette « Milieu » resterait visible (POST_MORTEM #3). */ .apaba-phyto-spray-dial[hidden] { display: none; } /* Filet EN HAUT et non en bas : la molette « Milieu » est masquée la plupart du temps, et un `border-bottom` + `:last-child` laisserait un trait orphelin sous la dernière rangée visible — CSS ne sait pas viser « le dernier visible ». Le sélecteur adjacent, lui, s'en moque : la rangée masquée ne dessine rien et la suivante porte le filet. */ .apaba-phyto-spray-dial + .apaba-phyto-spray-dial { border-top: 1px solid var(--mtp-border); } .apaba-phyto-spray-dial__label { min-width: 0; font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mt-ink, #2b3128); } .apaba-phyto-spray-dial__ctrl { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--mt-space-2, 8px); } .apaba-phyto-spray-dial__unitbox { display: flex; align-items: center; width: auto; min-width: 12.5ch; max-width: 100%; background: var(--mtp-bg-card); border: 1px solid var(--mtp-border); border-radius: var(--mt-radius, 10px); } .apaba-phyto-spray-dial__unitbox:focus-within { border-color: var(--mtp-primary); box-shadow: 0 0 0 3px rgba(26, 135, 129, .20); } .apaba-phyto-spray-dial__unitbox input[type="number"] { width: 7ch; min-height: 42px; margin: 0; padding: 8px 6px 8px 10px; font-family: inherit; font-size: var(--mt-fs-field, 16px); font-weight: 400; color: var(--mtp-text); background: transparent; border: 0; box-shadow: none; text-align: right; } .apaba-phyto-spray-dial__unitbox input[type="number"]:focus, .apaba-phyto-spray-dial__unitbox input[type="number"]:focus-visible { outline: none; box-shadow: none; } .apaba-phyto-spray-dial__unit { padding-right: 10px; font-size: var(--mt-fs-annex, 13.5px); font-weight: 700; color: var(--mtp-text-light); white-space: nowrap; } /* Dans une rangée, le segmenté a la taille du champ (16 px / 42 px), pas le cran annex : c'est un contrôle, pas une légende. */ .apaba-phyto-spray-dial__ctrl .apaba-phyto-segmented button { min-height: 42px; padding: 9px 14px; font-size: var(--mt-fs-body, 16px); } /* ----- Intitulés de section : corps 700 en teal, jamais des capitales ----- */ .apaba-phyto-spray-sectlabel { margin: 20px 0 8px; font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-primary); } /* ----- La recette : ce qui va dans la cuve ----- */ .apaba-phyto-spray-recipe { padding: 18px 18px 20px; background: var(--mtp-bg-soft); border-radius: var(--mt-radius, 10px); } .apaba-phyto-spray-recipe__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .apaba-phyto-spray-recipe__slot { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 10px; border-top: 2px solid var(--mtp-primary); } /* Cran micro : étiquette de donnée, comme les N / P / K de Fertilisation. */ .apaba-phyto-spray-recipe__what { font-size: var(--mt-fs-micro, 12px); font-weight: 700; letter-spacing: .04em; color: var(--mt-ink-soft, #404a3d); overflow-wrap: anywhere; } .apaba-phyto-spray-recipe__qty { font-size: var(--mt-fs-display, 28px); font-weight: 700; line-height: 1.1; color: var(--mtp-primary); font-variant-numeric: tabular-nums; } /* En attente de saisie, le tiret reste muet : en teal 28 px il se lirait comme un second filet sous celui de l'intitulé. */ .apaba-phyto-spray-recipe.is-empty .apaba-phyto-spray-recipe__qty, .apaba-phyto-spray-recipe.is-empty .apaba-phyto-spray-recipe__tanks { color: var(--mtp-text-light); } .apaba-phyto-spray-recipe__of { font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); } /* Message d'exception (unité de dose non convertible en cuve) : il prend la place de la table de répartition, qui n'a alors rien de vrai à dire. */ .apaba-phyto-spray-recipe__tanks { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--mtp-border); font-size: var(--mt-fs-body, 16px); color: var(--mt-ink-soft, #404a3d); font-variant-numeric: tabular-nums; } .apaba-phyto-spray-recipe__tanks[hidden] { display: none; } /* Sauvegarde du dosage : même vert que « Calcul dosage » et « Aide », posée sous le total et alignée sur son bord droit. */ .apaba-phyto-spray-save { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin-top: 18px; } .apaba-phyto-spray-save__btn { appearance: none; margin: 0; min-height: 44px; padding: 10px 20px; font-family: inherit; font-size: var(--mt-fs-body, 16px); font-weight: 700; line-height: 1.2; color: #ffffff; background: var(--mtp-primary); border: 1px solid var(--mtp-primary); border-radius: var(--mt-radius, 10px); box-shadow: var(--mtp-shadow-sm); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; } .apaba-phyto-spray-save__btn:hover:not(:disabled), .apaba-phyto-spray-save__btn:focus:not(:disabled) { background: var(--mt-brand-strong, #14655f); border-color: var(--mt-brand-strong, #14655f); box-shadow: var(--mtp-shadow-md); } .apaba-phyto-spray-save__btn:focus-visible { outline: 2px solid var(--mtp-primary); outline-offset: 2px; } /* Désactivé plutôt que masqué : le squelette de la modale ne bouge pas pendant la frappe (même règle que les valeurs qui restent à « — »). */ .apaba-phyto-spray-save__btn:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; } .apaba-phyto-spray-save__msg { margin: 0; font-size: var(--mt-fs-annex, 13.5px); font-weight: 700; text-align: right; color: var(--mtp-text-light); } .apaba-phyto-spray-save__msg:empty { display: none; } .apaba-phyto-spray-save__msg.is-ok { color: var(--mt-brand-strong, #14655f); } .apaba-phyto-spray-save__msg.is-danger { color: var(--mt-danger, #b8402d); } /* ----- La répartition des passages ----- * Sous la concentration : d'abord ce qu'on verse dans UNE cuve, puis à quelle * force, puis combien de cuves. Une rangée par nature de pulvérisation, les * quantités par pulvérisateur, le cumul en pied. */ .apaba-phyto-spray-split { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--mtp-border); } .apaba-phyto-spray-split[hidden] { display: none; } .apaba-phyto-spray-split__label { margin: 0 0 8px; font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-primary); } /* La modale est portée vers : les styles de table du thème s'appliquent ici, d'où les remises à zéro explicites de fond et de bordure. */ .apaba-phyto-spray-split__table { width: 100%; margin: 0; border: none; background: none; border-collapse: collapse; font-size: var(--mt-fs-body, 16px); font-variant-numeric: tabular-nums; } .apaba-phyto-spray-split__table tr { background: none; } .apaba-phyto-spray-split__table th, .apaba-phyto-spray-split__table td { padding: 9px 0; text-align: right; vertical-align: baseline; background: none; border: none; } .apaba-phyto-spray-split__table th:first-child, .apaba-phyto-spray-split__table td:first-child { text-align: left; } /* Cran micro, comme les intitulés de la recette : l'en-tête nomme la colonne, il ne la concurrence pas. */ .apaba-phyto-spray-split__table thead th { padding-bottom: 4px; font-size: var(--mt-fs-micro, 12px); font-weight: 700; letter-spacing: .04em; color: var(--mt-ink-soft, #404a3d); } .apaba-phyto-spray-split__table tbody th { font-weight: 400; color: var(--mt-ink-soft, #404a3d); } .apaba-phyto-spray-split__table tbody td { font-weight: 700; color: var(--mtp-text); white-space: nowrap; } .apaba-phyto-spray-split__table tbody tr + tr th, .apaba-phyto-spray-split__table tbody tr + tr td { border-top: 1px solid var(--mtp-border); } .apaba-phyto-spray-split__table tfoot th, .apaba-phyto-spray-split__table tfoot td { padding-top: 10px; border-top: 2px solid var(--mtp-primary); font-weight: 700; color: var(--mtp-primary); white-space: nowrap; } /* ----- La jauge de concentration ----- */ .apaba-phyto-spray-gauge { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--mtp-border); } .apaba-phyto-spray-gauge__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .apaba-phyto-spray-gauge__name { font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-primary); } .apaba-phyto-spray-gauge__value { font-size: var(--mt-fs-title, 18px); font-weight: 700; color: var(--mtp-text); font-variant-numeric: tabular-nums; white-space: nowrap; } #apaba-phyto-spray-gaugebar { margin-top: 14px; } #apaba-phyto-spray-gaugebar[hidden] { display: none; } /* Ce que la barre mesure, dit au-dessus d'elle : la dose, pas la concentration (cf. renderSprayGauge() — le volume de bouillie se simplifie dans le rapport des concentrations, une barre bornée par la dose max ne peut pas en parler). */ .apaba-phyto-spray-gauge__caption { margin: 0 0 6px; font-size: var(--mt-fs-annex, 13.5px); color: var(--mt-ink-soft, #404a3d); } .apaba-phyto-spray-gauge__track { position: relative; overflow: hidden; height: 12px; background: var(--mtp-bg-card); border: 1px solid var(--mtp-border); border-radius: var(--mt-radius-pill, 999px); } /* Remplissage : 0 → dose maximale homologuée. Teal, la couleur de ce qui est autorisé — pas de sémantique ok/warn, la barre situe, elle ne juge pas. */ .apaba-phyto-spray-gauge__fill { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; background: var(--mtp-primary); border-radius: var(--mt-radius-pill, 999px); /* `transform` et non `width` : le remplissage se met à jour à chaque frappe, et animer une largeur relance une passe de layout à chaque image. L'origine à gauche fait croître la barre depuis le zéro. */ transform-origin: left center; transform: scaleX(0); transition: transform .2s cubic-bezier(.2, .8, .3, 1); } .apaba-phyto-spray-gauge__ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font-size: var(--mt-fs-micro, 12px); color: var(--mtp-text-light); font-variant-numeric: tabular-nums; } .apaba-phyto-spray-gauge__note { margin: 9px 0 0; font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); } .apaba-phyto-spray-gauge__note:empty { display: none; } /* ----- Après le passage : rangées label / valeur ----- */ .apaba-phyto-spray-lines { display: flex; flex-direction: column; } .apaba-phyto-spray-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; } .apaba-phyto-spray-line[hidden] { display: none; } /* Même raison que les molettes : « Applications » et « Intervalle » sont conditionnelles. */ .apaba-phyto-spray-line + .apaba-phyto-spray-line { border-top: 1px solid var(--mtp-border); } .apaba-phyto-spray-line__label { color: var(--mt-ink-soft, #404a3d); } .apaba-phyto-spray-line__value { font-size: var(--mt-fs-title, 18px); font-weight: 700; color: var(--mtp-text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* ----- Fiche produit repliée ----- */ .apaba-phyto-spray-sheet { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--mtp-border); } .apaba-phyto-spray-sheet > summary { display: flex; align-items: center; gap: 7px; padding: 6px 0; list-style: none; cursor: pointer; font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mt-brand-strong, #14655f); } .apaba-phyto-spray-sheet > summary::-webkit-details-marker { display: none; } .apaba-phyto-spray-sheet > summary:hover, .apaba-phyto-spray-sheet > summary:focus-visible { color: var(--mtp-primary); } .apaba-phyto-spray-sheet > summary svg { flex: 0 0 auto; transition: transform .16s ease; } .apaba-phyto-spray-sheet[open] > summary svg { transform: rotate(90deg); } .apaba-phyto-spray-sheet p { margin: 10px 0 0; font-size: var(--mt-fs-annex, 13.5px); line-height: 1.55; color: var(--mtp-text-light); } .apaba-phyto-spray-sheet p[hidden] { display: none; } .apaba-phyto-spray-sheet p strong { color: var(--mtp-text); font-weight: 700; } /* ----- Segmenté : track papier chaud, pilule intérieure blanche ----------- * Le style précédent (actif = teal plein) était celui d'un ONGLET. Dans le * design system, un segmenté choisit une valeur : pilule blanche + ombre de * contact sur un track chaud. `background` ET `color` dans chaque état — sans * quoi le `button:hover` vert-encre du thème parent reprend la main. */ .apaba-phyto-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--mtp-bg-soft); border: 1px solid var(--mtp-border); border-radius: var(--mt-radius-pill, 999px); } .apaba-phyto-segmented button { appearance: none; margin: 0; padding: 7px 13px; font-family: inherit; font-size: var(--mt-fs-annex, 13.5px); font-weight: 700; color: var(--mt-ink-soft, #404a3d); background: transparent; border: 0; border-radius: var(--mt-radius-pill, 999px); cursor: pointer; transition: background-color .16s ease, color .16s ease; } .apaba-phyto-segmented button:hover, .apaba-phyto-segmented button:focus { color: var(--mt-brand-strong, #14655f); background: var(--mtp-primary-bg); } .apaba-phyto-segmented button.is-active, .apaba-phyto-segmented button.is-active:hover, .apaba-phyto-segmented button.is-active:focus { color: var(--mt-brand-strong, #14655f); background: var(--mtp-bg-card); box-shadow: var(--mtp-shadow-sm); } .apaba-phyto-segmented button:focus-visible { outline: 2px solid var(--mtp-primary); outline-offset: 2px; } /* ----- Aide bouton ----- */ .apaba-phyto-help-btn { appearance: none; flex: none; margin: 0; min-height: 44px; padding: 10px 20px; font-family: inherit; font-size: var(--mt-fs-body, 16px); font-weight: 700; line-height: 1.2; color: #ffffff; background: var(--mtp-primary); border: 1px solid var(--mtp-primary); border-radius: var(--mt-radius, 10px); box-shadow: var(--mtp-shadow-sm); cursor: pointer; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease; } .apaba-phyto-help-btn:hover, .apaba-phyto-help-btn:focus { background: var(--mt-brand-strong, #14655f); border-color: var(--mt-brand-strong, #14655f); box-shadow: var(--mtp-shadow-md); } .apaba-phyto-help-btn:focus-visible { outline: 2px solid var(--mtp-primary); outline-offset: 2px; } /* ----- Help modal contenu ----- */ .apaba-phyto-help-body { display: flex; flex-direction: column; gap: 16px; } .apaba-phyto-help-section h3 { font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-text); margin: 0 0 6px; } .apaba-phyto-help-section p, .apaba-phyto-help-section ul { font-size: var(--mt-fs-body, 16px); color: var(--mtp-text); margin: 4px 0; line-height: 1.5; } .apaba-phyto-help-section ul { padding-left: 20px; } .apaba-phyto-help-section li { margin-bottom: 4px; } /* ----- Alerte dose > maximum homologué ----------------------------------- * Composant alerte du design system : filet gauche 4 px sémantique + teinte. * L'ancien orange #fff7ed/#fed7aa/#c2410c venait d'une autre palette. */ .apaba-phyto-spray-warning { margin-top: 14px; padding: 12px 14px; font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-text); background: var(--mt-warn-tint, #fbf3e2); border-left: 4px solid var(--mt-warn, #b8801e); border-radius: var(--mt-radius, 10px); } .apaba-phyto-spray-warning[hidden] { display: none; } .apaba-phyto-spray-warning span { font-weight: 400; } /* ----- Téléphone : empiler les molettes dès que le dialogue est étroit ---- * Le dialogue plafonne à 640 px : sous cette largeur, label 11 rem + paliers * côte à côte débordent. Même seuil que le formulaire Ferti empilé. */ @media (max-width: 640px) { .apaba-phyto-spray-dial { grid-template-columns: minmax(0, 1fr); } .apaba-phyto-spray-dial__ctrl { align-items: flex-end; } /* Paliers sur leur propre ligne, pleine largeur, pouce — pas collés au champ ni en escalier. `nowrap` : trois tiers égaux plutôt qu'un wrap 2+1 qui laissait un bouton orphelin. */ .apaba-phyto-spray-dial__ctrl .apaba-phyto-segmented { display: flex; flex-wrap: nowrap; width: 100%; } .apaba-phyto-spray-dial__ctrl .apaba-phyto-segmented button { flex: 1 1 0; min-height: 44px; padding-left: 8px; padding-right: 8px; } } @media (max-width: 620px) { .apaba-phyto-modal__dialog { padding: 18px; } .apaba-phyto-spray-save { align-items: stretch; } .apaba-phyto-spray-save__msg { text-align: center; } .apaba-phyto-spray-recipe { padding: 16px; } .apaba-phyto-spray-recipe__pair { gap: 14px; } } /* Sous 380 px, eau et produit s'empilent plutôt que de couper leurs nombres. */ @media (max-width: 380px) { .apaba-phyto-spray-recipe__pair { grid-template-columns: 1fr; } } /* ----- Item liste plate (style V1) ----------------------------------- */ .apaba-phyto-item { padding: 14px 0 12px; border-bottom: 1px solid #ccc; color: var(--mtp-text); } .apaba-phyto-item:last-child { border-bottom: none; } .apaba-phyto-item__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; } .apaba-phyto-item__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; } .apaba-phyto-item__title strong { font-size: var(--mt-fs-title, 18px); font-weight: 700; } .apaba-phyto-item__actions { display: flex; gap: 8px; } .apaba-phyto-btn-result { display: inline-block; padding: 6px 12px; background: #f1f5f9; color: var(--mtp-text); border: 1px solid var(--mtp-border); border-radius: 4px; font-size: var(--mt-fs-micro, 12px); font-weight: 600; text-decoration: none; line-height: 1.2; transition: background 0.15s, color 0.15s; } .apaba-phyto-btn-result:hover { background: var(--mtp-primary); color: #ffffff; border-color: var(--mtp-primary); text-decoration: none; } .apaba-phyto-item p { margin: 4px 0; font-size: var(--mt-fs-body, 16px); line-height: 1.55; color: var(--mtp-text-light); } .apaba-phyto-item p strong { font-weight: 700; color: var(--mtp-text); margin-right: 2px; } /* ----- Portée du produit + choix de la culture ------------------------- * La carte est un PRODUIT : elle annonce ses plages (« 23 cultures · dose 7,5 * à 20 L/ha »), et rien de plus précis tant qu'aucune culture n'est choisie. * Le sélecteur ci-dessous est ce qui débloque les chiffres d'un usage. */ .apaba-phyto-item .apaba-phyto-item__scope { margin: 8px 0 10px; font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); font-variant-numeric: tabular-nums; } .apaba-phyto-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; background: var(--mtp-bg-soft); border-radius: var(--mt-radius, 10px); } .apaba-phyto-pick__label { font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-primary); } .apaba-phyto-pick .apaba-phyto-pick__select { flex: 1 1 200px; min-width: 0; max-width: 320px; margin: 0; } .apaba-phyto-pick__hint { flex: 1 1 100%; font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); } /* ----- Usages d'une culture ------------------------------------------- */ .apaba-phyto-usages:empty { display: none; } .apaba-phyto-usages__loading, .apaba-phyto-usages__empty { margin: 10px 0 0; font-size: var(--mt-fs-annex, 13.5px); color: var(--mtp-text-light); } /* Deux colonnes : la prose de l'usage à gauche, l'action à droite. Le texte accepte de se resserrer — c'est le calcul qui fait venir l'utilisateur sur cette carte, pas la relecture des conditions. */ .apaba-phyto-usage { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 10px; padding: 12px 14px; background: var(--mtp-bg-card); border: 1px solid var(--mtp-border); border-left: 4px solid var(--mtp-primary); border-radius: var(--mt-radius, 10px); } .apaba-phyto-usage__main { min-width: 0; } .apaba-phyto-usage__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin-bottom: 4px; } .apaba-phyto-usage__target { font-size: var(--mt-fs-body, 16px); font-weight: 700; color: var(--mtp-text); } /* Plein champ / sous abri change la dose ET le nombre d'applications : la mention n'est pas décorative, elle porte une contrainte. */ .apaba-phyto-usage__env, .apaba-phyto-usage__mode { padding: 2px 8px; font-size: var(--mt-fs-micro, 12px); font-weight: 700; color: var(--mtp-primary); background: var(--mtp-primary-bg); border-radius: var(--mt-radius-pill, 999px); } .apaba-phyto-usage__mode { color: var(--mtp-text-light); background: var(--mtp-bg-soft); } .apaba-phyto-item .apaba-phyto-usage__stats { font-variant-numeric: tabular-nums; } .apaba-phyto-item .apaba-phyto-usage__cond { font-size: var(--mt-fs-annex, 13.5px); } /* Tuile pleine : un pictogramme et deux lignes, à la taille d'une cible tactile confortable. L'ancienne pastille de 12 px se lisait comme une note de bas de page alors qu'elle porte l'action principale de la carte. */ .apaba-phyto-usage .apaba-phyto-spray-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 128px; min-height: 104px; padding: 14px 10px; background: var(--mtp-primary); color: #ffffff; border: 1px solid var(--mtp-primary); border-radius: var(--mt-radius, 10px); box-shadow: var(--mtp-shadow-sm); font-family: inherit; font-size: var(--mt-fs-body, 16px); font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; } .apaba-phyto-usage .apaba-phyto-spray-btn:hover { background: var(--mt-brand-strong, #14655f); border-color: var(--mt-brand-strong, #14655f); box-shadow: var(--mtp-shadow-md); } .apaba-phyto-usage .apaba-phyto-spray-btn:focus-visible { outline: 2px solid var(--mtp-primary); outline-offset: 2px; } .apaba-phyto-spray-btn__icon { flex: none; width: 34px; height: 34px; } .apaba-phyto-spray-btn__label { display: flex; flex-direction: column; } @media (max-width: 640px) { .apaba-phyto-pick .apaba-phyto-pick__select { max-width: none; } /* Sur une colonne, la tuile devient une barre : le libellé se remet sur une ligne, sinon deux mots empilés au milieu d'un bouton large font un trou. */ .apaba-phyto-usage { grid-template-columns: minmax(0, 1fr); } .apaba-phyto-usage .apaba-phyto-spray-btn { flex-direction: row; gap: 10px; width: 100%; min-height: 56px; padding: 12px; } .apaba-phyto-spray-btn__icon { width: 26px; height: 26px; } .apaba-phyto-spray-btn__label { flex-direction: row; gap: 5px; } } /* ----- Badges --------------------------------------------------------- */ .apaba-phyto-badge { display: inline-block; font-size: var(--mt-fs-micro, 12px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 4px; margin-left: 4px; vertical-align: middle; } .apaba-phyto-badge--bio { background: var(--mtp-primary-bg); color: var(--mtp-primary); } .apaba-phyto-badge--biocontrol { background: #f3e8ff; color: #7c3aed; } .apaba-phyto-badge--low-risk { background: #fef3c7; color: #b45309; } .apaba-phyto-badge--derogation { background: #ffedd5; color: #c2410c; } /* ----- Toggle Bio sticky bas-droite ----------------------------------- */ /* Fraîcheur du catalogue. Sur des données réglementaires, la date du dernier import est une information de premier ordre : elle dit si ce qu'on lit vaut encore. Elle vit dans le formulaire, pas en pastille flottante. */ .apaba-phyto-freshness { flex: 1 1 auto; min-width: 0; margin: 0; font-size: var(--mt-fs-micro, 12px); line-height: 1.35; color: var(--mtp-text-light); } .apaba-phyto-bio-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; background: #ffffff; border: 1px solid var(--mtp-border); border-radius: 999px; padding: 4px; box-shadow: var(--mtp-shadow-sm); } .apaba-phyto-bio-toggle__btn { appearance: none; background: transparent; border: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; font-family: inherit; font-size: var(--mt-fs-body, 16px); font-weight: 600; color: var(--mtp-text-light); transition: background 0.15s, color 0.15s; display: inline-flex; align-items: center; gap: 6px; } .apaba-phyto-bio-toggle__btn:hover { color: var(--mtp-text); } .apaba-phyto-bio-toggle__btn.is-active { background: var(--mtp-primary); color: #ffffff; } .apaba-phyto-bio-toggle__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ----- État vide / loading -------------------------------------------- */ .apaba-phyto-empty, .apaba-phyto-loading { text-align: center; color: var(--mtp-text-light); padding: 40px 20px; font-size: var(--mt-fs-body, 16px); } /* ============================================================================= RESPONSIVE ============================================================================= */ /* Tablette : 2 colonnes pour les selects, recherche pleine largeur */ @media (max-width: 1023px) { .apaba-phyto-filters__row { grid-template-columns: 1fr 1fr; } .apaba-phyto-filters__field:first-child { grid-column: 1 / -1; } } /* Mobile : tout empilé, toggle Bio en barre pleine largeur en bas */ @media (max-width: 640px) { .apaba-phyto-filters { padding: 14px; } .apaba-phyto-filters__row { grid-template-columns: 1fr; gap: 10px; } .apaba-phyto-item__header { flex-direction: column; align-items: stretch; } .apaba-phyto-item__title strong { font-size: var(--mt-fs-title, 18px); } .apaba-phyto-item__actions { flex-wrap: wrap; } /* Le toggle prend toute la largeur sous le formulaire : il n'est plus flottant, donc plus rien à dégager sous les résultats. */ .apaba-phyto-bio-toggle { flex: 1 1 100%; justify-content: center; } .apaba-phyto-bio-toggle__btn { flex: 1; justify-content: center; min-height: 44px; /* touch target */ } } /* --------------------------------------------------------------------------- Intégration au thème agrikole (ajouts du rapatriement dans maraichagetools). Le thème parent impose une serif sur les titres, un margin-bottom sur tous les champs, et surtout — c'est le vrai piège — un fond vert foncé sur TOUT