/**
 * Coquille de la boîte à outils : onglets, cartes, champs, boutons, alertes.
 * Ces classes sont partagées par TOUS les modules — un module ne redéfinit
 * jamais .mt-btn, .mt-field ou .mt-card, il les utilise.
 *
 * CE QUE LE THÈME IMPOSE (relevé dans agrikole/style.css et
 * agrikole-child/assets/css/site-custom.css, aucun !important nulle part) :
 *
 *  - `html { font-size: 62.5% }` : 1rem ≈ 10px. TOUT est en px ici.
 *  - h1..h6 en serif (Amatic SC côté parent, Bookman Old Style côté enfant)
 *    → `font-family: inherit` obligatoire sur nos titres.
 *  - La règle groupée « Input normal » du parent (style.css l. 771) pose sur
 *    tous les champs, `input[type="search"]` compris :
 *    `background-color: #f5f0e9; color: #878986; padding: 22px 30px;
 *     margin-bottom: 20px`. Le thème enfant la recalibre (l. 336-358) mais
 *    garde `margin-bottom: var(--apaba-space-3)`.
 *  - ⚠️ `button, input[type=submit] { padding: 30px 50px; font-size: 20px;
 *     background-color: #eddd5e }` (style.css l. 833) et surtout
 *    `button:hover, button:focus { background-color: #404a3d; color: #fff }`
 *    (l. 852). CE HOVER EST LE PIÈGE : nos boutons et nos onglets sont des
 *    <button>, et une règle qui ne redéclare pas `background` au survol laisse
 *    le vert foncé du thème passer. Chaque état :hover/:focus ci-dessous pose
 *    donc `background` ET `color` explicitement — jamais seulement un filtre.
 *  - Le focus des champs, côté enfant (l. 374) :
 *    `outline: none; border-color: var(--apaba-brand);
 *     box-shadow: 0 0 0 3px rgba(26,135,129,.20)`. On le REPREND tel quel
 *    plutôt que de poser un `outline`, sinon les deux se cumulent en double
 *    anneau (notre outline ne remplace pas son box-shadow).
 *
 * Spécificité : `.mt-app input[type="number"]` = (0,1,1,1) et `.mt-app select`
 * = (0,1,0,1) battent tout ce que le thème déclare (au mieux (0,0,1,1)).
 * Aucun !important n'est nécessaire, et il n'y en a aucun ici.
 */

.mt-app {
    box-sizing: border-box;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--mt-text, #3c4139);
    font-family: var(--mt-font-body, "Barlow", system-ui, sans-serif);
    font-size: var(--mt-fs-body, 16px);
    line-height: 1.55;
}

.mt-app--shell {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--mt-space-5, 24px);
    max-width: 1200px;
}

.mt-app__main {
    flex: 1 1 0;
    min-width: 0;
}

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

.mt-app h2,
.mt-app h3,
.mt-app h4 {
    font-family: inherit;
    color: var(--mt-ink, #2b3128);
    margin: 0 0 var(--mt-space-3, 12px);
    line-height: 1.25;
}

.mt-app h2 { font-size: var(--mt-fs-title-lg, 22px); }
.mt-app h3 { font-size: var(--mt-fs-title, 18px); }

/* Cran « Label ». Les capitales + tracking .08em du cran d'origine ont été
   écartés : trop « dashboard générique » pour un outil qu'on lit au soleil.
   L'intitulé est désormais du CORPS en teal — même taille que ce qu'il
   annonce, la couleur suffit à le distinguer. Vaut aussi pour thead. */
.mt-app h4 {
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-brand, #1a8781);
}

/* ----- Onglets --------------------------------------------------------- */

.mt-app__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-bottom: var(--mt-space-4, 16px);
    padding-bottom: var(--mt-space-3, 12px);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    margin: 0;
    padding: 9px 16px;
    font-family: inherit;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 600;
    color: var(--mt-ink-soft, #404a3d);
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-pill, 999px);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* `background` et `color` sont OBLIGATOIRES dans chaque état : sans eux, le
   `button:hover { background-color:#404a3d; color:#fff }` du thème parent
   reprend la main et l'onglet vire au vert foncé au survol. */
.mt-tab:hover,
.mt-tab:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-color: var(--mt-brand, #1a8781);
}

.mt-tab.is-active,
.mt-tab.is-active:hover,
.mt-tab.is-active:focus {
    color: #fff;
    background: var(--mt-brand, #1a8781);
    border-color: var(--mt-brand, #1a8781);
}

.mt-tab:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

.mt-tab__icon { display: inline-flex; }
.mt-tab__icon svg { width: 18px; height: 18px; }

/* ----- Menu gauche ----------------------------------------------------- */

.mt-chrome {
    display: none;
}

.mt-chrome__title {
    margin: 0;
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mt-brand, #1a8781);
    text-align: center;
}

.mt-nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px;
    width: 44px;
    height: 44px;
    font-family: inherit;
    color: var(--mt-brand, #1a8781);
    background: transparent;
    border: none;
    border-radius: var(--mt-radius, 10px);
    cursor: pointer;
}

.mt-nav-toggle:hover,
.mt-nav-toggle:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
}

.mt-nav-toggle:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

/* Accueil dans le chrome téléphone — mêmes mesures que le hamburger. */
.mt-chrome-home {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px;
    width: 44px;
    height: 44px;
    font-family: inherit;
    color: var(--mt-brand, #1a8781);
    background: transparent;
    border: none;
    border-radius: var(--mt-radius, 10px);
    cursor: pointer;
}

.mt-chrome-home:hover,
.mt-chrome-home:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
}

.mt-chrome-home:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

.mt-chrome-home__icon { display: inline-flex; }
.mt-chrome-home__icon svg { width: 22px; height: 22px; }

.mt-nav-toggle[aria-expanded="true"],
.mt-nav-toggle[aria-expanded="true"]:hover,
.mt-nav-toggle[aria-expanded="true"]:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
}

.mt-nav-toggle__icon { display: inline-flex; }
.mt-nav-toggle__icon svg { width: 22px; height: 22px; }

.mt-nav-overlay {
    display: none;
}

.mt-nav-overlay[hidden] { display: none; }

.mt-nav {
    flex: 0 0 240px;
    width: 240px;
}

.mt-nav__list {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-1, 4px);
}

/* Un groupe s'annonce par un FILET, jamais par une casse (The No Small Caps
   Rule) : l'intitulé reste du corps 700 teal — même taille, même couleur que
   les lignes qu'il annonce — et c'est le filet qui le détache. Sans lui,
   « Ma ferme » se lit comme un item cliquable de plus. */
.mt-nav__heading {
    margin: var(--mt-space-4, 16px) 0 var(--mt-space-1, 4px);
    padding: var(--mt-space-4, 16px) 12px 0;
    border-top: 1px solid var(--mt-line, #e5dfd4);
}

.mt-nav__item {
    display: flex;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    width: 100%;
    margin: 0;
    padding: 11px 12px;
    min-height: 44px;
    font-family: inherit;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 600;
    text-align: left;
    color: var(--mt-ink-soft, #404a3d);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--mt-radius, 10px);
    cursor: pointer;
    transition: background-color .16s ease, color .16s ease;
}

.mt-nav__item:hover,
.mt-nav__item:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-color: transparent;
}

/* Actif = fond teal lavé + RAIL teal à gauche, jamais un cadre : un contour
   complet fait de la page courante une boîte posée sur le menu, plus lourde
   que les huit lignes autour d'elle. Le rail est une ombre INTERNE, donc sans
   reflow — et la graisse ne bouge pas non plus : à 240 px, « Mon matériel
   d'irrigation » gagnerait une ligne en passant de 600 à 700. */
.mt-nav__item.is-active,
.mt-nav__item.is-active:hover,
.mt-nav__item.is-active:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-color: transparent;
    box-shadow: inset 3px 0 0 var(--mt-brand, #1a8781);
}

.mt-nav__item:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

/* Le pictogramme accompagne, il ne réclame pas : muet au repos, il reprend
   l'encre de sa ligne dès qu'elle est survolée ou active. */
.mt-nav__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--mt-muted, #6c7266);
}

.mt-nav__item:hover .mt-nav__icon,
.mt-nav__item:focus .mt-nav__icon,
.mt-nav__item.is-active .mt-nav__icon { color: inherit; }

.mt-nav__icon svg { width: 18px; height: 18px; }

/* ----- Item enfant -------------------------------------------------------
 * « Mon armoire phyto » et « Ma fertilisation » gardent ce que l'outil du
 * dessus produit. Le rendu N'ÉMET PAS leur pictogramme (il répéterait celui
 * du parent) et leur texte démarre exactement à l'aplomb de celui du parent :
 * 12 px de padding + 18 px d'icône + 8 px de gouttière = 38 px.
 * Le filet de liaison se pose au CENTRE de la colonne d'icônes (12 + 9 =
 * 21 px, mesuré depuis le bord de la boîte de padding, comme l'icône) et
 * déborde de 2 px en haut et en bas pour enjamber la gouttière de 4 px : deux
 * enfants consécutifs portent un trait continu, un enfant seul un trait qui
 * remonte vers son parent.
 */

.mt-nav__item--child {
    position: relative;
    padding-left: 38px;
}

.mt-nav__item--child::before {
    content: "";
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: 21px;
    width: 1px;
    background: var(--mt-line, #e5dfd4);
}

/* L'enfant actif n'a pas le rail de bord : c'est son propre filet de liaison
   qui s'épaissit en teal, à SON niveau de retrait. Deux verticales teal sur
   la même ligne diraient deux choses différentes. */
.mt-nav__item--child.is-active,
.mt-nav__item--child.is-active:hover,
.mt-nav__item--child.is-active:focus { box-shadow: none; }

.mt-nav__item--child.is-active::before {
    left: 20px;
    width: 3px;
    background: var(--mt-brand, #1a8781);
}

/* ----- Rubriques repliables --------------------------------------------- */

/* POST_MORTEM #3, encore : le `display: flex` de `.mt-nav__item` bat le
   `[hidden]{display:none}` du user-agent par ORIGINE de cascade, pas par
   spécificité. Sans cette ligne, replier une rubrique ne cacherait rien. */
.mt-nav__item[hidden] { display: none; }

/* Le chevron dit que le clic fait DEUX choses : ouvrir la page de la rubrique,
   et découvrir les outils qu'elle contient. Tracé au trait — le menu est rendu
   côté PHP, où l'on n'a pas la fabrique d'icônes du JS. */
.mt-nav__item--rubrique::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: auto;
    margin-right: 5px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .5;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .16s ease;
}

.mt-nav__item--rubrique[aria-expanded="true"]::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.mt-nav__item--rubrique:hover::after,
.mt-nav__item--rubrique.is-active::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .mt-nav__item--rubrique::after { transition: none; }
}

@media (max-width: 799px) {
    .mt-app--shell {
        display: block;
        max-width: 1000px;
    }

    .mt-chrome {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;
        min-height: 44px;
        margin: 0 0 var(--mt-space-4, 16px);
    }

    .mt-nav-toggle {
        display: inline-flex;
        position: relative;
        z-index: 1;
    }

    .mt-chrome__title {
        position: absolute;
        left: 0;
        right: 0;
        pointer-events: none;
    }

    .mt-nav-overlay:not([hidden]) {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(43, 49, 40, .55);
    }

    .mt-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 41;
        width: 280px;
        max-width: 86vw;
        padding: var(--mt-space-5, 24px) var(--mt-space-4, 16px);
        overflow-y: auto;
        background: var(--mt-surface, #fff);
        box-shadow: var(--mt-shadow-lg, 0 12px 32px rgba(43, 49, 40, .12));
        transform: translateX(-105%);
        transition: transform .2s ease;
    }

    .mt-nav.is-open { transform: none; }
}

/* ----- Panneaux ---------------------------------------------------------
 * Le thème agrikole pose `section { display: block }` (reset HTML5-shiv) en
 * déclaration AUTEUR, qui bat toujours la déclaration user-agent
 * `[hidden]{display:none}` par ORIGINE de cascade — indépendamment de la
 * spécificité comparée entre les deux. Sans cette règle, tous les panneaux
 * d'onglets restent visuellement empilés même quand mt-shell.js bascule
 * correctement l'attribut `hidden`. Cf POST_MORTEM.md #3.
 */

.mt-app--shell .mt-panel[hidden] { display: none; }

.mt-app--shell:has(.mt-nav) .mt-app__tabs { display: none; }

/* ----- Sous-onglets & segmenté -------------------------------------------
 * Même objet visuel, deux usages : `.mt-subtabs` navigue entre deux panneaux,
 * `.mt-segmented` choisit une valeur. `background` ET `color` dans chaque état
 * — cf. le piège du thème en tête de fichier.
 */

.mt-subtabs,
.mt-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--mt-space-1, 4px);
    padding: 4px;
    background: var(--mt-surface-warm, #f4efe7);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-pill, 999px);
}

.mt-subtabs {
    display: flex;
    width: 100%;
    margin-bottom: var(--mt-space-4, 16px);
}

.mt-subtab,
.mt-segmented__btn {
    margin: 0;
    padding: 9px 18px;
    font-family: inherit;
    font-size: var(--mt-fs-body, 16px);
    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;
}

.mt-subtab { flex: 1 1 0; }

.mt-subtab:hover,
.mt-subtab:focus,
.mt-segmented__btn:hover,
.mt-segmented__btn:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
}

.mt-subtab.is-active,
.mt-subtab.is-active:hover,
.mt-subtab.is-active:focus,
.mt-segmented__btn.is-active,
.mt-segmented__btn.is-active:hover,
.mt-segmented__btn.is-active:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-surface, #fff);
    box-shadow: var(--mt-shadow-sm, 0 1px 2px rgba(43, 49, 40, .06));
}

.mt-subtab:focus-visible,
.mt-segmented__btn:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

/* Même piège que .mt-panel (POST_MORTEM #3) : on ne compte pas sur la
   déclaration user-agent de [hidden] face aux resets du thème. */
.mt-subpanel[hidden] { display: none; }

/* ----- Carte / section ------------------------------------------------- */

.mt-card {
    padding: var(--mt-space-5, 24px);
    margin-bottom: var(--mt-space-4, 16px);
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-lg, 16px);
    box-shadow: var(--mt-shadow, 0 3px 12px rgba(43, 49, 40, .08));
}

.mt-card--soft {
    background: var(--mt-surface-warm, #f4efe7);
    box-shadow: none;
}

.mt-card__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
}

/* ----- Grille de champs ------------------------------------------------ */

.mt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--mt-space-3, 12px);
}

.mt-grid--2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.mt-grid--num {
    grid-template-columns: repeat(auto-fill, minmax(120px, 160px));
}

/* POST_MORTEM #27 : un <select> impose son min-content à la piste qui
   l'accueille et force un scroll horizontal sur téléphone. Les modales ont
   cette garde depuis toujours (.mt-modal__body .mt-field) ; les grilles de
   PAGE ne l'avaient pas, faute de select. Le champ Département de Ma ferme
   est le premier — et « 04 — Alpes-de-Haute-Provence » est le libellé le plus
   long des 101. */
.mt-grid > .mt-field,
.mt-grid > .mt-field select,
.mt-grid > .mt-field input {
    min-width: 0;
    max-width: 100%;
}

/* Champs qui ne s'étirent pas (ETP + pluie, paires courtes). */
.mt-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4, 16px) var(--mt-space-6, 32px);
    align-items: flex-start;
}

.mt-cluster > .mt-field { flex: 0 1 auto; }

.mt-field { display: flex; flex-direction: column; gap: 6px; }

/* Même piège que .mt-panel (POST_MORTEM #3) : ce `display: flex` auteur bat
   le `[hidden]{display:none}` user-agent par ORIGINE de cascade, pas par
   spécificité. Les modales culture/installation basculent `.mt-field.hidden`
   en JS (Kc, nom personnalisé, pluviométrie) : sans cette règle, les champs
   masqués restent visuellement affichés. */
.mt-field[hidden] { display: none; }

.mt-field__label {
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-ink, #2b3128);
}

.mt-field__hint {
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 400;
    color: var(--mt-muted, #6c7266);
}

/* `margin: 0` annule le `margin-bottom` que le thème pose sur tous les champs
   (20px côté parent, 12px côté enfant) : la grille gère les écarts.
   `background` annule le beige #f5f0e9 du parent, `color` son gris #878986. */
.mt-app input[type="text"],
.mt-modal input[type="text"],
.mt-app input[type="search"],
.mt-app select {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    font-family: inherit;
    font-size: var(--mt-fs-field, 16px);
    font-weight: 400;
    color: var(--mt-ink, #2b3128);
    background: var(--mt-field-bg, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
    box-shadow: none;
}

.mt-app input[type="number"] {
    width: 12ch;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    font-family: inherit;
    font-size: var(--mt-fs-field, 16px);
    font-weight: 400;
    color: var(--mt-ink, #2b3128);
    background: var(--mt-field-bg, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
    box-shadow: none;
}

.mt-app input:read-only {
    color: var(--mt-ink, #2b3128);
    background: var(--mt-surface-warm, #f4efe7);
    cursor: default;
}

.mt-app select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    /* Le parent pose sa propre flèche via le raccourci `background`. Cette
       règle vient après la précédente, qui a déjà remis background-image à
       none : notre chevron s'applique sur le fond blanc. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c7266' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
}

/* Le thème ne cible pas `select:hover`, mais le fond du champ doit rester
   blanc si un parent ou une règle plus large passe. `background-color` seul
   pour ne pas écraser le chevron (`background-image` ci-dessus). */
.mt-app select:hover {
    color: var(--mt-ink, #2b3128);
    background-color: var(--mt-field-bg, #fff);
}

.mt-app option {
    color: var(--mt-ink, #2b3128);
    background-color: var(--mt-surface, #fff);
}

.mt-app option:checked,
.mt-app option:hover {
    color: var(--mt-ink, #2b3128);
    background-color: var(--mt-brand-tint, #e6f2f0);
}

/* Focus des champs : celui du thème enfant, repris à l'identique. Poser un
   `outline` à la place ne supprimerait PAS son box-shadow — les deux anneaux
   s'afficheraient l'un sur l'autre. La couleur est écrite en dur parce que
   c'est le teal de marque en rgba, tel que le thème le déclare. */
.mt-app input:focus,
.mt-app select:focus,
.mt-app input:focus-visible,
.mt-app select:focus-visible,
.mt-app textarea:focus,
.mt-app textarea:focus-visible,
.mt-modal input:focus,
.mt-modal input:focus-visible,
.mt-modal textarea:focus,
.mt-modal textarea:focus-visible {
    outline: none;
    border-color: var(--mt-brand, #1a8781);
    box-shadow: 0 0 0 3px rgba(26, 135, 129, .20);
}

.mt-app textarea,
.mt-modal textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    margin: 0;
    padding: 10px 13px;
    font-family: inherit;
    font-size: var(--mt-fs-field, 16px);
    font-weight: 400;
    line-height: 1.45;
    color: var(--mt-ink, #2b3128);
    background: var(--mt-field-bg, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
    box-shadow: none;
    resize: vertical;
}

.mt-app textarea:hover,
.mt-modal textarea:hover {
    color: var(--mt-ink, #2b3128);
    background-color: var(--mt-field-bg, #fff);
}

/* ----- Boutons --------------------------------------------------------- */

.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mt-space-2, 8px);
    margin: 0;
    padding: 11px 22px;
    font-family: inherit;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: #fff;
    background: var(--mt-brand, #1a8781);
    border: 1px solid var(--mt-brand, #1a8781);
    border-radius: var(--mt-radius, 10px);
    cursor: pointer;
    /* Porté aussi par des <a> (lien sortant déguisé en bouton) : sans ça, le
       thème parent souligne le libellé, et son `line-height` de texte courant
       fait dépasser le lien de 9 px par rapport au <button> voisin. Fixer les
       deux ici, plutôt que sur `a.mt-btn`, décroche la hauteur du bouton des
       réglages du thème. */
    line-height: 1;
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* Même piège que pour les onglets : sans `background` ET `color` ici, le
   `button:hover { background-color:#404a3d; color:#fff }` du thème parent
   passe et le bouton vire au vert foncé. Un `filter: brightness()` seul ne
   protège de rien : il s'applique PAR-DESSUS la couleur du thème. */
.mt-btn:hover,
.mt-btn:focus {
    color: #fff;
    text-decoration: none;
    background: var(--mt-brand-strong, #14655f);
    border-color: var(--mt-brand-strong, #14655f);
}

.mt-btn:disabled,
.mt-btn:disabled:hover {
    opacity: .6;
    cursor: default;
    color: #fff;
    background: var(--mt-brand, #1a8781);
    border-color: var(--mt-brand, #1a8781);
}

.mt-btn:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: 2px;
}

.mt-btn--ghost {
    color: var(--mt-ink-soft, #404a3d);
    background: var(--mt-surface, #fff);
    border-color: var(--mt-line, #e5dfd4);
}

.mt-btn--ghost:hover,
.mt-btn--ghost:focus {
    color: var(--mt-brand-strong, #14655f);
    text-decoration: none;
    background: var(--mt-brand-tint, #e6f2f0);
    border-color: var(--mt-brand, #1a8781);
}

.mt-btn--sm { padding: 7px 14px; font-size: var(--mt-fs-annex, 13.5px); }

.mt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-4, 16px);
}

/* ----- Résultats ------------------------------------------------------- */

.mt-result {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
    padding: 10px 0;
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-result:last-child { border-bottom: 0; }

.mt-result__label { color: var(--mt-ink-soft, #404a3d); }

.mt-result__value {
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    color: var(--mt-ink, #2b3128);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mt-result--hero .mt-result__value {
    font-size: 28px;
    color: var(--mt-brand, #1a8781);
}

.mt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mt-fs-body, 16px);
    font-variant-numeric: tabular-nums;
}
.mt-table th,
.mt-table td {
    padding: 12px 16px 12px 0;
    text-align: right;
    border: 0;
    vertical-align: top;
}
.mt-table th:first-child,
.mt-table td:first-child { text-align: left; }
.mt-table thead th {
    padding-bottom: 8px;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-brand, #1a8781);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-table__wrap { overflow-x: auto; }

/* ----- Listes d'éléments (cultures, installations…) --------------------- */

.mt-list { display: flex; flex-direction: column; gap: var(--mt-space-2, 8px); }

.mt-item {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    padding: 12px 14px;
    background: var(--mt-surface-warm, #f4efe7);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
}

/* Même piège que .mt-field (POST_MORTEM #12) : display:flex explicite ici,
   donc [hidden] seul ne suffit pas dès qu'un .mt-item devient masquable
   (résumé « Mon sol » de la carte Ma ferme). */
.mt-item[hidden] { display: none; }

.mt-item__body { flex: 1 1 auto; min-width: 0; }
.mt-item__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px var(--mt-space-3, 12px);
}
.mt-item__name { font-weight: 700; color: var(--mt-ink, #2b3128); }
.mt-item__npk {
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--mt-ink-soft, #404a3d);
}
.mt-item__meta { font-size: var(--mt-fs-annex, 13.5px); color: var(--mt-muted, #6c7266); }
.mt-item__actions { display: flex; flex: 0 0 auto; gap: var(--mt-space-1, 4px); }

.mt-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    line-height: 1;
    color: var(--mt-ink-soft, #404a3d);
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-sm, 6px);
    cursor: pointer;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.mt-icon-btn:hover,
.mt-icon-btn:focus {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-color: var(--mt-brand, #1a8781);
}

.mt-icon-btn--danger:hover,
.mt-icon-btn--danger:focus {
    color: var(--mt-danger, #b8402d);
    background: var(--mt-danger-tint, #fdeeee);
    border-color: var(--mt-danger, #b8402d);
}

.mt-icon-btn:focus-visible { outline: 2px solid var(--mt-brand, #1a8781); outline-offset: 2px; }

/* ----- Modale ------------------------------------------------------------
 * ⚠️ AUCUN sélecteur de chrome ci-dessous ne passe par un ancêtre. La
 * modale phyto (Calcul dosage) est portée vers <body> au boot, et c'est
 * ce qui a tué ses règles préfixées (POST_MORTEM #4/#5). Les modales
 * ferti restent dans .mt-app. La sauvegarde du dosage phyto, elle, va
 * aussi sur <body> pour s'empiler au-dessus : ses champs sont donc
 * ciblés via `.mt-modal`, pas via `.mt-app`.
 */

.mt-modal[hidden] { display: none; }

.mt-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--mt-space-3, 12px);
}

/* Au-dessus de Calcul dosage (3000) et de son Aide (3001). */
.mt-modal--over { z-index: 2147483002; }

.mt-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.mt-modal__dialog {
    position: relative;
    box-sizing: border-box;
    width: min(560px, 100%);
    max-width: 100%;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    padding: var(--mt-space-5, 24px);
    color: var(--mt-text, #3c4139);
    font-family: var(--mt-font-body, "Barlow", system-ui, sans-serif);
    font-size: var(--mt-fs-body, 16px);
    background: var(--mt-surface, #fff);
    border-radius: var(--mt-radius-lg, 16px);
    box-shadow: var(--mt-shadow-lg, 0 12px 32px rgba(43, 49, 40, .12));
}

.mt-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--mt-space-3, 12px);
    min-width: 0;
}

.mt-modal__body .mt-field,
.mt-modal__body input,
.mt-modal__body textarea {
    min-width: 0;
    max-width: 100%;
}

.mt-modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    color: var(--mt-muted, #6c7266);
    background: transparent;
    border: 0;
    border-radius: var(--mt-radius-sm, 6px);
    cursor: pointer;
}

.mt-modal__close:hover,
.mt-modal__close:focus {
    color: var(--mt-ink, #2b3128);
    background: var(--mt-surface-warm, #f4efe7);
}

.mt-modal__title {
    margin: 0 40px var(--mt-space-4, 16px) 0;
    font-family: inherit;
    font-size: var(--mt-fs-title, 18px);
    color: var(--mt-ink, #2b3128);
}

.mt-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-4, 16px);
}

/* ----- Notes & alertes ------------------------------------------------- */

.mt-note {
    margin: var(--mt-space-3, 12px) 0 0;
    font-size: var(--mt-fs-annex, 13.5px);
    color: var(--mt-muted, #6c7266);
}

.mt-alert:empty { display: none; }

.mt-alert {
    margin-top: var(--mt-space-3, 12px);
    padding: 12px 14px;
    font-size: var(--mt-fs-body, 16px);
    border-left: 4px solid var(--mt-muted, #6c7266);
    border-radius: var(--mt-radius, 10px);
    background: var(--mt-surface-warm, #f4efe7);
}

.mt-alert.is-ok     { border-left-color: var(--mt-ok, #4c8a3f);     background: var(--mt-ok-tint, #eef6ee); }
.mt-alert.is-warn   { border-left-color: var(--mt-warn, #b8801e);   background: var(--mt-warn-tint, #fbf3e2); }
.mt-alert.is-danger { border-left-color: var(--mt-danger, #b8402d); background: var(--mt-danger-tint, #fdeeee); }

.mt-empty {
    padding: var(--mt-space-5, 24px) 0 0;
    text-align: left;
    color: var(--mt-text, #3c4139);
}

.mt-empty .mt-actions {
    margin-top: var(--mt-space-4, 16px);
}

/* ----- Mobile ---------------------------------------------------------- */

@media (max-width: 640px) {
    .mt-card { padding: var(--mt-space-4, 16px); }
    .mt-app__tabs { gap: 6px; }
    .mt-tab { padding: 8px 13px; font-size: var(--mt-fs-annex, 13.5px); }
    .mt-actions .mt-btn { flex: 1 1 100%; }
    .mt-subtab { padding: 8px 12px; }
    .mt-modal__dialog { padding: var(--mt-space-4, 16px); }
    .mt-modal__actions .mt-btn { flex: 1 1 100%; }
}