/**
 * Module « Mon arrosage ».
 *
 * Ne redéclare RIEN de ce que `mt-shell.css` porte déjà : champs, boutons,
 * segmenté, alertes, `.mt-result` et les cinq crans typographiques viennent de
 * là. Ce fichier n'ajoute que la carte de réseau et la jauge de couverture.
 *
 * ⚠️ Tout en px : le thème agrikole impose html{font-size:62.5%}, les rem sont
 * un piège. ⚠️ Jamais de `--apaba-*` redéclaré ici : ça masquerait le token du
 * thème sur toute la page. On consomme les `--mt-*`.
 *
 * Les deux mêmes écarts assumés au design system que « Ma réserve d'eau », et
 * pour les mêmes raisons — les cartes sont jumelles :
 *   1. padding interne des blocs à 16 px au lieu de 24 (une carte porte 8
 *      champs plus un panneau de résultat) ;
 *   2. le nom du réseau est un « input déguisé » (filet pointillé), sans label
 *      visible mais avec aria-label.
 *
 * ⚠️ Spécificité : `.mt-app input[type="text"]` (0,2,1) impose width:100%. Tout
 * champ d'ici qui s'en écarte monte à (0,3,1) en répétant `[type="text"]`.
 */

/* ----- En-tête et étapes ------------------------------------------------- */

.mt-arrosage__hd {
    padding-bottom: var(--mt-space-4, 16px);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-arrosage__hd h2 { margin-bottom: var(--mt-space-2, 8px); }

.mt-arrosage__lede {
    max-width: 62ch;
    margin: 0;
    color: var(--mt-text, #3c4139);
    font-size: var(--mt-fs-body, 16px);
}

.mt-arrosage__step { margin-top: var(--mt-space-6, 32px); }

.mt-arrosage__h {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--mt-space-3, 12px);
}

.mt-arrosage__h-act {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-left: auto;
}

.mt-arrosage__n {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #fff;
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 700;
    background: var(--mt-brand, #1a8781);
    border-radius: var(--mt-radius-pill, 999px);
}

.mt-arrosage__hint {
    max-width: 70ch;
    margin: 0 0 var(--mt-space-4, 16px);
}

/* ----- Champs courts -----------------------------------------------------
   `type="text" inputmode="decimal"` et non `number` : la saisie est en virgule
   décimale, qu'un input[type=number] rejette en vidant le champ sans un mot
   (POST_MORTEM #19). */

.mt-arrosage .mt-arrosage__num input[type="text"] {
    width: 12ch;
    max-width: 100%;
}

.mt-arrosage .mt-arrosage__sys select { max-width: 100%; }

/* ----- Plis ---------------------------------------------------------------
   Zone et réseau sont des <details>. Fermés ils ne montrent qu'un résumé —
   c'est la vue de travail quand on a cinq zones ; ouverts, le formulaire.
   ⚠️ Aucun champ dans un <summary> : un clic sur un input y basculerait le pli.
   Les seules exceptions sont les croix de suppression, dont le clic est
   neutralisé côté JS. */

.mt-arrosage__zone > summary,
.mt-arrosage__card > summary {
    display: flex;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    list-style: none;
    cursor: pointer;
}

.mt-arrosage__zone > summary::-webkit-details-marker,
.mt-arrosage__card > summary::-webkit-details-marker { display: none; }

.mt-arrosage__chev {
    display: flex;
    flex: none;
    color: var(--mt-muted, #6c7266);
    transition: transform .15s ease;
}

.mt-arrosage__zone[open] > summary .mt-arrosage__chev,
.mt-arrosage__card[open] > summary .mt-arrosage__chev { transform: rotate(180deg); }

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

/* — le résumé d'une zone — */

.mt-arrosage__zsum {
    padding: var(--mt-space-3, 12px) var(--mt-space-4, 16px);
    background: var(--mt-brand-tint, #e6f2f0);
}

.mt-arrosage__zsum-nom {
    min-width: 0;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-title-lg, 22px);
    font-weight: 700;
    line-height: 1.2;
}

.mt-arrosage__zsum-nom em { font-style: normal; font-weight: 400; opacity: .7; }

/* Pousse tout ce qui suit à droite : le pourcentage et la croix s'alignent
   d'une zone à l'autre quelle que soit la longueur du nom. */
.mt-arrosage__zsum-meta {
    margin-right: auto;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-arrosage__zsum-pct {
    flex: none;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
}

.mt-arrosage__zsum-pct.is-bas { color: var(--mt-warn, #b8801e); }
.mt-arrosage__zsum-pct.is-haut { color: var(--mt-danger, #b8402d); }

/* — le résumé d'un réseau — */

.mt-arrosage__nsum {
    padding: 10px var(--mt-space-4, 16px);
    background: var(--mt-surface-warm, #f4efe7);
}

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

.mt-arrosage__nsum-r {
    margin-left: auto;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
    text-align: right;
}

.mt-arrosage__nsum-r b { color: var(--mt-brand-strong, #14655f); }
.mt-arrosage__nsum-r em { font-style: italic; }

/* ----- La zone : une surface, et les réseaux qui l'arrosent --------------
   La zone porte le BESOIN, ses réseaux portent l'APPORT. La hiérarchie visuelle
   dit ce partage : la zone encadre, les cartes de réseau vivent dedans à plat
   (ni ombre ni rayon propre) — deux niveaux d'ombres empilés se liraient comme
   deux objets de même rang, ce qu'ils ne sont pas. */

.mt-arrosage__zone {
    margin-bottom: var(--mt-space-4, 16px);
    overflow: hidden;
    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-arrosage__zhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    padding: var(--mt-space-3, 12px) var(--mt-space-4, 16px);
    background: var(--mt-surface-warm, #f4efe7);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

/* « Nom [ ] · Surface [2000] m² au total » — étiquette, champ et unité sur UNE
   ligne, même grammaire que le bandeau « parcelles » d'un réseau. Un bloc
   `.mt-field` empilerait les trois et donnerait trois hauteurs différentes
   dans le même bandeau. */
.mt-arrosage__zfield {
    display: flex;
    align-items: center;
    gap: var(--mt-space-2, 8px);
}

.mt-arrosage__zfield label {
    flex: none;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    line-height: 1.25;
}

.mt-arrosage .mt-arrosage__zfield input[type="text"] {
    min-height: 0;
    padding: 7px 8px;
    color: var(--mt-ink, #2b3128);
    font-weight: 700;
}

/* Le nom prend la place qui reste, la surface garde sa largeur de chiffre. */
.mt-arrosage__znom { flex: 1 1 260px; min-width: 0; }
.mt-arrosage .mt-arrosage__znom input[type="text"] { max-width: 320px; }

.mt-arrosage__zsurf { flex: none; }
.mt-arrosage .mt-arrosage__zsurf input[type="text"] {
    flex: none;
    width: 8ch;
    text-align: center;
}

.mt-arrosage__zbody { display: grid; grid-template-columns: minmax(0, 1fr); }

@media (min-width: 720px) {
    .mt-arrosage__zbody { grid-template-columns: minmax(0, 1fr) 300px; }
}

.mt-arrosage__reseaux { padding: var(--mt-space-4, 16px); }

/* Le panneau d'une zone est aussi haut que ses réseaux : centrer son contenu
   le ferait flotter au milieu d'un vide. Il s'aligne en tête, en face du
   premier réseau. */
.mt-arrosage__zout { justify-content: flex-start; }

/* À plat dans sa zone : le relief est porté par le conteneur. */
.mt-arrosage__reseaux .mt-arrosage__card {
    box-shadow: none;
    border-radius: var(--mt-radius, 10px);
}

/* ⚠️ La carte de réseau vit désormais DANS la colonne gauche de la zone, elle
   n'a plus la largeur de la page. Lui laisser sa grille « champs | résultat »
   la comprimerait deux fois : les champs tomberaient en colonne unique et la
   carte s'étirerait sur toute la hauteur de l'écran. Elle passe donc en pleine
   largeur, et son résultat — deux valeurs, pas dix — s'aligne en bandeau. Les
   media queries portent sur la fenêtre, pas sur le conteneur : c'est bien ici
   qu'il faut annuler, pas au point de rupture. */
.mt-arrosage__reseaux .mt-arrosage__body { grid-template-columns: minmax(0, 1fr); }

.mt-arrosage__reseaux .mt-arrosage__nout {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--mt-space-2, 8px) var(--mt-space-5, 24px);
    border-top: 1px solid var(--mt-line, #e5dfd4);
    border-left: 0;
}

.mt-arrosage__reseaux .mt-arrosage__nout .mt-result {
    flex: 0 1 auto;
    flex-direction: row;
    align-items: baseline;
    gap: var(--mt-space-2, 8px);
}

.mt-arrosage__reseaux .mt-arrosage__nout .mt-result + .mt-result {
    padding-top: 0;
    border-top: 0;
}

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

.mt-actions--sm { gap: var(--mt-space-2, 8px); }

/* En mm/h il n'y a pas de parcelles à compter : le bandeau ne porte plus qu'une
   explication, il n'a donc pas à garder la hauteur d'une ligne de saisie. */
.mt-arrosage__sub--note { padding-top: 8px; padding-bottom: 8px; }

/* Ce que le réseau perd en route : une note, jamais un quatrième chiffre — on
   ne la lit qu'une fois, contrairement aux trois volumes au-dessus. */
.mt-arrosage__perte {
    margin: var(--mt-space-2, 8px) 0 0;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-annex, 13.5px);
    line-height: 1.4;
    opacity: .85;
}

.mt-arrosage__bilan .mt-arrosage__perte { color: var(--mt-muted, #6c7266); opacity: 1; }

/* ----- Carte « un réseau d'irrigation » ---------------------------------- */

.mt-arrosage__list { margin-bottom: var(--mt-space-3, 12px); }

.mt-arrosage__card {
    margin-bottom: var(--mt-space-3, 12px);
    overflow: hidden;
    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-arrosage__ntabs,
.mt-arrosage__sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--mt-space-3, 12px);
    background: var(--mt-surface-warm, #f4efe7);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-arrosage__ntabs { padding: 12px var(--mt-space-4, 16px); }
.mt-arrosage__sub  { padding: 10px var(--mt-space-4, 16px); }

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

.mt-arrosage .mt-arrosage__sub input[type="text"] {
    flex: none;
    width: 6ch;
    min-height: 0;
    padding: 7px 8px;
    color: var(--mt-ink, #2b3128);
    font-weight: 700;
    text-align: center;
}

.mt-arrosage__sub-hint {
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
    line-height: 1.4;
}

/* La case « sous abri » file à droite du bandeau plutôt que de comprimer le
   champ « parcelles » à côté d'elle. */
.mt-arrosage__abri {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.mt-arrosage__abri label {
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 700;
}

.mt-arrosage__abri label span {
    display: block;
    color: var(--mt-muted, #6c7266);
    font-weight: 400;
}

/* ----- Corps de carte ---------------------------------------------------- */

.mt-arrosage__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
    .mt-arrosage__body { grid-template-columns: minmax(0, 1fr) 260px; }
}

.mt-arrosage__grp { padding: var(--mt-space-4, 16px); }
.mt-arrosage__grp + .mt-arrosage__grp { border-top: 1px solid var(--mt-line, #e5dfd4); }
.mt-arrosage__grp h4 { margin-bottom: var(--mt-space-3, 12px); }

.mt-arrosage__out {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--mt-space-2, 8px);
    padding: var(--mt-space-4, 16px);
    background: var(--mt-brand-tint, #e6f2f0);
    border-top: 1px solid var(--mt-line, #e5dfd4);
}

@media (min-width: 720px) {
    .mt-arrosage__out {
        border-top: 0;
        border-left: 1px solid var(--mt-line, #e5dfd4);
    }
}

.mt-arrosage__out .mt-result {
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    padding: 0;
    border-bottom: 0;
}

.mt-arrosage__out .mt-result + .mt-result {
    padding-top: var(--mt-space-2, 8px);
    border-top: 1px solid rgba(20, 101, 95, .16);
}

.mt-arrosage__out .mt-result__label {
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-annex, 13.5px);
    line-height: 1.3;
}

.mt-arrosage__out .mt-result__value { color: var(--mt-brand-strong, #14655f); }

.mt-arrosage__out--void { background: var(--mt-surface-warm, #f4efe7); }

.mt-arrosage__out--void p {
    margin: 0;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

/* ----- Assistant de durée -------------------------------------------------
   Le champ attend des minutes PAR SEMAINE ; on arrose « 45 min, trois fois par
   semaine ». Ce petit menu fait la multiplication. Le champ reste saisissable
   à la main : l'assistant l'écrit, il ne le remplace pas. */

.mt-arrosage__duree-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mt-arrosage__duree-btn {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-sm, 6px);
    cursor: pointer;
}

.mt-arrosage__duree-btn:hover { background: var(--mt-brand-tint, #e6f2f0); }

.mt-arrosage__duree-btn[aria-expanded="true"] {
    color: var(--mt-surface, #fff);
    background: var(--mt-brand, #1a8781);
    border-color: var(--mt-brand, #1a8781);
}

/* `fixed` et non `absolute` : la carte ET la zone portent `overflow: hidden`,
   qui clipperait un absolu. Un `fixed` n'est pas clippé par un simple overflow
   (il le serait par un ancêtre à `transform`/`filter` — aucun ici). */
.mt-arrosage__pop {
    position: fixed;
    z-index: 60;
    width: 300px;
    max-width: calc(100vw - 16px);
    padding: var(--mt-space-3, 12px);
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
    box-shadow: var(--mt-shadow-lg, 0 10px 30px rgba(43, 49, 40, .18));
}

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

.mt-arrosage__pop-t {
    margin: 0 0 6px;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-small, 13px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.mt-arrosage__pop-opts + .mt-arrosage__pop-opts { margin-top: 4px; }
.mt-arrosage__pop-opts + .mt-arrosage__pop-t { margin-top: var(--mt-space-3, 12px); }

/* Des cases ÉGALES, pas des boutons qui s'étirent selon la largeur de leur
   libellé : en flex, « 2 h » retombait seul sur une deuxième ligne pendant que
   « 45 min » prenait le double de place. Une grille par rangée règle les deux. */
.mt-arrosage__pop-opts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.mt-arrosage__pop-d { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.mt-arrosage__pop-o {
    padding: 6px 2px;
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-small, 13px);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    background: var(--mt-surface-warm, #f4efe7);
    border: 1px solid transparent;
    border-radius: var(--mt-radius-sm, 6px);
    cursor: pointer;
}

.mt-arrosage__pop-o:hover { border-color: var(--mt-brand, #1a8781); }

.mt-arrosage__pop-o.is-on {
    color: var(--mt-surface, #fff);
    background: var(--mt-brand, #1a8781);
    border-color: var(--mt-brand, #1a8781);
}

/* Les sept passages sur une seule ligne. */
.mt-arrosage__pop-nb { grid-template-columns: repeat(7, minmax(0, 1fr)); }

/* Le total est le seul chiffre du menu : c'est lui qu'on relit avant de valider. */
.mt-arrosage__pop-res {
    margin: var(--mt-space-3, 12px) 0;
    padding-top: var(--mt-space-2, 8px);
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    text-align: center;
    border-top: 1px solid var(--mt-line, #e5dfd4);
}

.mt-arrosage__pop-act {
    display: flex;
    justify-content: flex-end;
    gap: var(--mt-space-2, 8px);
}

/* ----- La jauge ----------------------------------------------------------
   Le repère « besoin » est à 66,7 % de la piste : il reste un tiers pour
   MONTRER un excès plutôt que de le tronquer. La couleur porte le verdict, le
   pourcentage le chiffre — jamais la couleur seule (elle ne se lit pas en
   niveaux de gris ni pour un daltonien). */

.mt-arrosage__jauge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--mt-space-2, 8px);
}

.mt-arrosage__piste {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 16px;
    background: var(--mt-surface, #fff);
    /* Contour indispensable : dans le bilan la piste est blanche SUR blanc, et
       sans lui la part vide se confond avec la carte — on ne voit plus où la
       barre s'arrête, donc plus ce qui reste à couvrir. `border-box` est posé
       par le shell, la hauteur reste celle qu'on lit. */
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-pill, 999px);
    overflow: hidden;
}

/* Les deux segments s'aboutent : la pilule vient du `border-radius` +
   `overflow:hidden` de la piste, jamais d'un rayon sur chaque segment — qui
   creuserait une encoche à leur jonction. */
.mt-arrosage__remplissage,
.mt-arrosage__pluie {
    flex: none;
    height: 100%;
    transition: width .18s ease;
}

.mt-arrosage__remplissage { background: var(--mt-brand, #1a8781); }

/* Hachure EN PLUS de la couleur : le bleu et le teal sont voisins en teinte,
   et le motif reste lisible en niveaux de gris comme en vision daltonienne. */
.mt-arrosage__pluie {
    background: repeating-linear-gradient(
        -45deg,
        var(--mt-rain, #4f8fc0) 0 4px,
        var(--mt-rain-tint, #e8f1f8) 4px 8px
    );
}

/* Le libellé du segment est lu par les technologies d'assistance : la
   légende visible ne sort que dans le bilan, pas sur chaque carte. */
.mt-arrosage__pluie span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .mt-arrosage__remplissage,
    .mt-arrosage__pluie { transition: none; }
}

/* Le repère est ABSOLU dans la piste : `overflow:hidden` sur un parent
   positionné (position:relative) clippe bien ses descendants absolus —
   contrairement au cas du POST_MORTEM #31, où le parent était statique. */
.mt-arrosage__repere {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--mt-ink, #2b3128);
}

.mt-arrosage__repere span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mt-arrosage__pct {
    flex: none;
    min-width: 5ch;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    text-align: right;
}

.mt-arrosage__jauge.is-bas .mt-arrosage__remplissage { background: var(--mt-warn, #b8801e); }
.mt-arrosage__jauge.is-bas .mt-arrosage__pct { color: var(--mt-warn, #b8801e); }
.mt-arrosage__jauge.is-haut .mt-arrosage__remplissage { background: var(--mt-danger, #b8402d); }
.mt-arrosage__jauge.is-haut .mt-arrosage__pct { color: var(--mt-danger, #b8402d); }
.mt-arrosage__jauge.is-void .mt-arrosage__piste { background: var(--mt-line, #e5dfd4); }

/* Le segment de pluie garde SA couleur quel que soit le verdict : il ne dit
   pas si on arrose bien, il dit d'où vient l'eau. */
.mt-arrosage__legende {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--mt-space-2, 8px) 0 0;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-small, 13px);
}

.mt-arrosage__legende em { font-style: normal; }

.mt-arrosage__cle {
    width: 14px;
    height: 10px;
    border-radius: 3px;
}

.mt-arrosage__cle:not(:first-child) { margin-left: var(--mt-space-3, 12px); }
.mt-arrosage__cle--tuyau { background: var(--mt-brand, #1a8781); }
.mt-arrosage__cle--pluie {
    background: repeating-linear-gradient(
        -45deg,
        var(--mt-rain, #4f8fc0) 0 3px,
        var(--mt-rain-tint, #e8f1f8) 3px 6px
    );
}

.mt-result--pluie .mt-result__value,
.mt-arrosage__chiffre.is-pluie b { color: var(--mt-rain, #4f8fc0); }

/* La hauteur d'eau accompagne le volume sans lui disputer la vedette : c'est
   la même grandeur dite autrement, pas un second chiffre à lire. */
.mt-result__mm,
.mt-arrosage__chiffre b .mt-result__mm {
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-small, 13px);
    font-weight: 400;
    white-space: nowrap;
}

/* La pastille du tuyau suit le verdict, comme le segment qu'elle nomme : une
   légende teal en face d'une barre orange se lit comme une autre série. */
.mt-arrosage__jauge.is-bas + .mt-arrosage__legende .mt-arrosage__cle--tuyau {
    background: var(--mt-warn, #b8801e);
}
.mt-arrosage__jauge.is-haut + .mt-arrosage__legende .mt-arrosage__cle--tuyau {
    background: var(--mt-danger, #b8402d);
}

/* ----- Bilan ------------------------------------------------------------- */

.mt-arrosage__bilan {
    padding: var(--mt-space-4, 16px);
    /* Même teinte que le panneau de résultat d'une carte (`.mt-arrosage__out`) :
       c'est le même objet — un résultat — et sur un fond blanc la piste blanche
       de la jauge se confondait avec la carte, la part restant à couvrir devenait
       invisible. */
    background: var(--mt-brand-tint, #e6f2f0);
    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-arrosage__duo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mt-space-3, 12px);
    margin-bottom: var(--mt-space-4, 16px);
}

@media (min-width: 640px) {
    .mt-arrosage__duo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mt-arrosage__chiffre span {
    display: block;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-arrosage__chiffre b {
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-display, 28px);
    font-weight: 700;
    line-height: 1.15;
}

.mt-arrosage__bilan .mt-arrosage__jauge { margin-top: 0; }

.mt-arrosage__verdict { margin-top: var(--mt-space-3, 12px); }

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

.mt-arrosage .mt-alert h4 { margin-bottom: 6px; }

.mt-arrosage .mt-alert ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-arrosage .mt-alert li {
    position: relative;
    margin-bottom: 4px;
    padding-left: 18px;
    font-size: var(--mt-fs-annex, 13.5px);
    line-height: 1.5;
}

.mt-arrosage .mt-alert li:last-child { margin-bottom: 0; }

.mt-arrosage .mt-alert li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--mt-leaf, #5b8c51);
}

.mt-arrosage .mt-alert code {
    padding: 0;
    color: var(--mt-brand-strong, #14655f);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    background: none;
}

/* Le bloc de méthode est un <details> : c'est de la documentation, on la lit une
   fois. Replié il ne coûte qu'une ligne au bas de la page. */
.mt-arrosage__method { margin-top: var(--mt-space-6, 32px); }

.mt-arrosage__method > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
    list-style: none;
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.mt-arrosage__method > summary::-webkit-details-marker { display: none; }

/* Chevron tracé au trait plutôt qu'en SVG : il n'a pas à exister dans le HTML
   rendu côté PHP, où l'on n'a pas la fabrique d'icônes du JS. */
.mt-arrosage__method > summary::after {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
}

.mt-arrosage__method[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .mt-arrosage__method > summary::after { transition: none; }
}

.mt-arrosage__method[open] > ul { margin-top: var(--mt-space-3, 12px); }