/**
 * Module « Ma réserve d'eau ».
 *
 * Ne redéclare RIEN de ce que `mt-shell.css` porte déjà : champs, boutons,
 * segmenté, alertes, `.mt-table`, `.mt-result` et les cinq crans typographiques
 * viennent de là. Ce fichier n'ajoute que ce qui n'existe nulle part ailleurs —
 * la carte de réseau (bandeau chaud + panneau de volume), le badge d'étape, le
 * croquis du bassin et les états de rangée du tableau des semaines.
 *
 * ⚠️ 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-*`.
 *
 * ── Un écart assumé au design system ──────────────────────────────────────
 *   Padding interne des blocs à 16 px au lieu de 24 — la valeur que le DS
 *   réserve à « sous 640 px », appliquée partout, pour que le dépliant du
 *   bassin tienne sur un écran de téléphone avant d'afficher le moindre
 *   chiffre.
 *
 *   Le second écart (« input déguisé » pour le nom d'un réseau) a suivi les
 *   cartes de réseau dans `mt-arrosage.css` le 2026-08-25 : plus aucun champ
 *   de ce module ne le porte.
 *
 * ⚠️ Spécificité : `.mt-app input[type="text"]` (0,2,1) impose width:100% et le
 * focus du thème. Chaque champ d'ici qui s'en écarte doit donc monter à (0,3,1)
 * au moins — d'où les sélecteurs qui répètent `[type="text"]`.
 */

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

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

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

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

/* ----- Étapes ----------------------------------------------------------- */

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

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

/* Les actions de l'étape sont groupées à droite du titre, jamais dans le flux
   des champs : « Voir un exemple » n'est pas une donnée à saisir. */
.mt-reserve__h-act {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-left: auto;
}

.mt-reserve__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-note` a un margin-top ; sous un titre d'étape c'est le bas qui compte. */
.mt-reserve__hint {
    max-width: 70ch;
    margin: 0 0 var(--mt-space-4, 16px);
}

.mt-reserve__caption {
    max-width: none;
    margin: var(--mt-space-2, 8px) 0 0;
    text-align: center;
}

/* ----- Champs courts ----------------------------------------------------
   The Short Number Rule : un nombre est court par invariant. Les champs sont
   en `type="text" inputmode="decimal"` (et non `number`) parce que la saisie
   est en virgule décimale — `0,30`, `1,6` — qu'un `input[type=number]` rejette
   en rendant `value` vide. Le DS donne les 12ch au `number` seul, d'où ceci. */

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

.mt-reserve__pcts { margin-bottom: var(--mt-space-5, 24px); }

/* ----- Surfaces et système ---------------------------------------------- */

.mt-reserve__surfaces { margin-bottom: var(--mt-space-5, 24px); }

/* ----- Réglages repliés (volume mort, marge) -----------------------------
   Ce sont des réglages, pas une saisie : on les ouvre pour les changer, pas
   pour les lire. Fermé, le résumé suffit. */

.mt-reserve__reglages {
    margin-bottom: var(--mt-space-4, 16px);
    background: var(--mt-surface-warm, #f4efe7);
    border-radius: var(--mt-radius, 10px);
}

.mt-reserve__reglages-sum {
    display: flex;
    align-items: center;
    gap: var(--mt-space-2, 8px);
    padding: 10px var(--mt-space-4, 16px);
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 700;
    list-style: none;
    cursor: pointer;
}

.mt-reserve__reglages-sum::-webkit-details-marker { display: none; }

.mt-reserve__reglages-sum:focus-visible {
    outline: 2px solid var(--mt-brand, #1a8781);
    outline-offset: -2px;
    border-radius: var(--mt-radius, 10px);
}

.mt-reserve__chev {
    flex: none;
    margin-left: auto;
    color: var(--mt-brand, #1a8781);
    transition: transform .18s ease;
}

.mt-reserve__reglages[open] .mt-reserve__chev { transform: rotate(180deg); }

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

.mt-reserve__reglages .mt-reserve__pcts {
    margin: 0;
    padding: 0 var(--mt-space-4, 16px) var(--mt-space-4, 16px);
}

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

.mt-reserve__bilan {
    padding: 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-reserve__ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
    padding: 8px 0;
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-reserve__ligne span {
    color: var(--mt-text, #3c4139);
    font-size: var(--mt-fs-body, 16px);
}

.mt-reserve__ligne b {
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    white-space: nowrap;
}

/* Le chiffre héro : c'est LA réponse de la page. Il doit gagner contre
   `.mt-app` du thème, d'où taille et graisse reposées ici (POST_MORTEM #16). */
.mt-reserve__hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--mt-space-3, 12px);
    margin-top: var(--mt-space-4, 16px);
    padding: var(--mt-space-4, 16px);
    background: var(--mt-brand-tint, #e6f2f0);
    border-radius: var(--mt-radius, 10px);
}

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

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

.mt-reserve__hero-v {
    color: var(--mt-brand, #1a8781);
    font-size: var(--mt-fs-display, 28px);
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}

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

/* ----- Étape 3, dépliant ------------------------------------------------- */

.mt-reserve__pane {
    margin-top: var(--mt-space-6, 32px);
    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-reserve__sum {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px var(--mt-space-4, 16px);
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    background: var(--mt-surface-warm, #f4efe7);
    list-style: none;
    cursor: pointer;
}

.mt-reserve__sum::-webkit-details-marker { display: none; }
.mt-reserve__sum:focus-visible { outline: 2px solid var(--mt-brand, #1a8781); outline-offset: -2px; }

.mt-reserve__chev {
    flex: none;
    margin-left: auto;
    color: var(--mt-brand, #1a8781);
    transition: transform .18s ease;
}

.mt-reserve__pane[open] .mt-reserve__chev { transform: rotate(180deg); }

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

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

.mt-reserve__draw {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    margin: 0 auto;
}

.mt-reserve__draw text {
    fill: var(--mt-muted, #6c7266);
    font-family: var(--mt-font-body, "Barlow", system-ui, sans-serif);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-reserve__draw .mt-reserve__dv {
    fill: var(--mt-ink, #2b3128);
    font-weight: 700;
}

/* ----- Dimensions du bassin ---------------------------------------------- */

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

.mt-reserve__dim > .mt-field__label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mt-reserve__dim[data-state="fixed"] input[type="text"] { border-color: var(--mt-brand, #1a8781); }

/* Badge = cran micro : une légende, jamais un intitulé — donc pas de capitales
   (The No Small Caps Rule). */
.mt-reserve__tag {
    padding: 2px 8px;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-micro, 12px);
    font-weight: 700;
    background: var(--mt-surface, #fff);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius-pill, 999px);
}

.mt-reserve__dim[data-state="fixed"] .mt-reserve__tag {
    color: #fff;
    background: var(--mt-brand, #1a8781);
    border-color: var(--mt-brand, #1a8781);
}

/* ----- Alertes ----------------------------------------------------------
   Le DS donne `.is-ok / .is-warn / .is-danger`. Le verdict du bassin n'est ni
   une validation ni un danger : c'est un résultat, il prend le teal de marque.
   D'où `.is-brand`, scopée au module. */

.mt-reserve .mt-alert.is-brand {
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-left-color: var(--mt-brand, #1a8781);
}

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

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

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

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

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

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

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

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

/* ----- Téléphone --------------------------------------------------------- */

@media (max-width: 640px) {
    .mt-reserve__hero-v { font-size: var(--mt-fs-title-lg, 22px); }
}