/**
 * Module « Aide ISN ».
 *
 * Ne redéclare RIEN de ce que `mt-shell.css` porte déjà : champs, boutons,
 * alertes, `.mt-cluster` et les cinq crans typographiques viennent de là. Ce
 * fichier n'ajoute que ce qui lui est propre — la grille des cinq années, les
 * deux moyennes candidates face à face, et le verdict.
 *
 * ⚠️ 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-*`.
 *
 * Le verdict est le seul endroit du plugin où le vert et le rouge portent un
 * DROIT et non une qualité agronomique : « au-dessus du seuil » n'est pas une
 * bonne nouvelle, c'est une récolte perdue. D'où le rouge sur `is-ko` (pas
 * d'aide) et le vert sur `is-ok` (aide possible) — l'inverse de la lecture
 * spontanée « rouge = mauvaise récolte ». Le titre porte donc toujours le sens
 * en toutes lettres, jamais la couleur seule.
 */

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

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

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

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

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

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

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

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

.mt-isn__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-isn__hint {
    max-width: 70ch;
    margin: 0 0 var(--mt-space-4, 16px);
}

/* ----- Étape 1 : le contexte -------------------------------------------- */

/* La filière porte la phrase la plus longue de la page : elle prend la largeur
   qu'il lui faut, les deux autres champs se contentent du reste. */
.mt-isn__f-filiere { flex: 1 1 320px; min-width: 0; }
.mt-isn__f-annee   { flex: 0 1 150px; }
.mt-isn__f-unite   { flex: 0 1 150px; }

.mt-isn__ctx select { width: 100%; }

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

.mt-isn__seuil.is-on {
    margin-top: var(--mt-space-4, 16px);
    padding: 12px 14px;
    background: var(--mt-brand-tint, #e6f2f0);
    border-left: 4px solid var(--mt-brand, #1a8781);
    border-radius: var(--mt-radius, 10px);
}

.mt-isn__seuil.is-warn {
    background: var(--mt-warn-tint, #fbf3e2);
    border-left-color: var(--mt-warn, #b8801e);
}

.mt-isn__seuil-l {
    margin: 0;
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-body, 16px);
}

.mt-isn__seuil-note {
    max-width: 70ch;
    margin: var(--mt-space-2, 8px) 0 0;
    color: var(--mt-text, #3c4139);
    font-size: var(--mt-fs-annex, 13.5px);
}

/* ----- Étape 2 : les cinq années ---------------------------------------- */

/* Une grille de CINQ colonnes, pas un `auto-fit` : la série se relit d'un coup
   d'œil quand les cinq années tiennent sur une ligne — c'est même la seule
   façon de repérer l'année qui sort du lot. Un `auto-fit` en casserait quatre
   plus une dès que la place manque de 20 px. On dégrade donc par paliers
   choisis (5 → 3 → 2), jamais au hasard de la largeur disponible. */
.mt-isn__annees {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--mt-space-3, 12px) var(--mt-space-2, 8px);
}

.mt-isn__num input[type="text"] { text-align: right; }

/* Le rang (« N-1 ») accompagne l'année réelle sans lui disputer la vedette :
   c'est l'année 2025 qu'on cherche dans son carnet, pas « N-1 ». */
.mt-isn__rang {
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-micro, 12px);
    font-weight: 400;
}

/* ----- La référence de rendement ---------------------------------------- */

.mt-isn__ref {
    margin-top: var(--mt-space-4, 16px);
    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-sm, 0 1px 2px rgba(43, 49, 40, .06));
}

/* Les deux candidates : nom à gauche, valeur à droite, aide dessous. La
   retenue est marquée par le fond ET par le badge — jamais par la couleur
   seule. */
.mt-isn__cand {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2px var(--mt-space-3, 12px);
    padding: 10px 12px;
    border-radius: var(--mt-radius, 10px);
}

.mt-isn__cand + .mt-isn__cand { margin-top: 6px; }

.mt-isn__cand.is-retenue { background: var(--mt-surface-warm, #f4efe7); }

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

.mt-isn__cand-v {
    grid-column: 2;
    grid-row: 1;
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    white-space: nowrap;
}

.mt-isn__cand-a {
    grid-column: 1 / -1;
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-isn__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    color: #fff;
    font-size: var(--mt-fs-micro, 12px);
    font-weight: 700;
    background: var(--mt-brand, #1a8781);
    border-radius: var(--mt-radius-pill, 999px);
    vertical-align: 2px;
}

.mt-isn__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-isn__hero-l {
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    line-height: 1.3;
}

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

.mt-isn__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-isn__hero-v small {
    font-size: var(--mt-fs-body, 16px);
    font-weight: 400;
}

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

/* ----- Le verdict -------------------------------------------------------- */

.mt-isn__verdict {
    padding: var(--mt-space-5, 24px) var(--mt-space-4, 16px);
    background: var(--mt-surface-warm, #f4efe7);
    border-left: 4px solid var(--mt-muted, #6c7266);
    border-radius: var(--mt-radius-lg, 16px);
}

.mt-isn__verdict.is-ok {
    background: var(--mt-ok-tint, #eef6ee);
    border-left-color: var(--mt-ok, #4c8a3f);
}

.mt-isn__verdict.is-ko {
    background: var(--mt-danger-tint, #fdeeee);
    border-left-color: var(--mt-danger, #b8402d);
}

/* Récolte au-dessus de la référence : ni vert ni rouge — il n'y a pas de
   dossier à faire, donc pas de verdict à rendre. Le teal la distingue quand
   même du bloc gris « il manque une saisie », qui n'est pas une réponse. */
.mt-isn__verdict.is-neutre { border-left-color: var(--mt-brand, #1a8781); }

/* Le verdict est la première chose lue : le MOT, en display, avec sa pastille.
   Le taux de perte le suit — c'est la preuve, pas la réponse. L'ordre inverse
   (le chiffre d'abord) obligeait à chercher « éligible » dans la phrase
   d'après, ce que le classeur de la DDT ne demandait pas. */
.mt-isn__verdict-v {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-display-md, 38px);
    font-weight: 700;
    line-height: 1.05;
}

.mt-isn__verdict-ico { flex: none; }

.mt-isn__verdict.is-ok .mt-isn__verdict-v { color: var(--mt-ok, #4c8a3f); }
.mt-isn__verdict.is-ko .mt-isn__verdict-v { color: var(--mt-danger, #b8402d); }
.mt-isn__verdict.is-neutre .mt-isn__verdict-v { color: var(--mt-muted, #6c7266); }

.mt-isn__verdict-r {
    margin: var(--mt-space-3, 12px) 0 0;
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 400;
    line-height: 1.35;
}

.mt-isn__verdict-r b { font-weight: 700; }

.mt-isn__verdict-d {
    max-width: 70ch;
    margin: var(--mt-space-2, 8px) 0 0;
    color: var(--mt-text, #3c4139);
    font-size: var(--mt-fs-body, 16px);
}

.mt-isn__verdict-c {
    margin: var(--mt-space-3, 12px) 0 0;
    padding-top: var(--mt-space-3, 12px);
    border-top: 1px solid var(--mt-line, #e5dfd4);
    color: var(--mt-muted, #6c7266);
    font-size: var(--mt-fs-annex, 13.5px);
}

.mt-isn__verdict-n {
    max-width: 70ch;
    margin: var(--mt-space-2, 8px) 0 0;
    color: var(--mt-text, #3c4139);
    font-size: var(--mt-fs-annex, 13.5px);
}

/* ----- Les deux dépliants ------------------------------------------------ */

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

.mt-isn__pane > summary,
.mt-isn__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-isn__pane > summary::-webkit-details-marker,
.mt-isn__method > summary::-webkit-details-marker { display: none; }

/* Chevron tracé au trait plutôt qu'en SVG : le markup est rendu côté PHP, où
   l'on n'a pas la fabrique d'icônes du JS. Même geste que `mt-arrosage.css`. */
.mt-isn__pane > summary::after,
.mt-isn__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-isn__pane[open] > summary::after,
.mt-isn__method[open] > summary::after {
    transform: rotate(-135deg) translate(-2px, -2px);
}

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

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

.mt-isn__pane-in h4 {
    margin: var(--mt-space-4, 16px) 0 var(--mt-space-1, 4px);
    color: var(--mt-brand-strong, #14655f);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
}

.mt-isn__pane-in h4:first-child { margin-top: 0; }

.mt-isn__pane-in p,
.mt-isn__pane-in li { max-width: 70ch; }

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

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

@media (max-width: 760px) {
    .mt-isn__annees { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .mt-isn__f-annee,
    .mt-isn__f-unite { flex: 1 1 132px; }
    .mt-isn__verdict-v { font-size: var(--mt-fs-display, 28px); }
    .mt-isn__verdict-ico { width: 28px; height: 28px; }
    .mt-isn__verdict-r { font-size: var(--mt-fs-body, 16px); }
    .mt-isn__hero-v { font-size: var(--mt-fs-title-lg, 22px); }
}

@media (max-width: 420px) {
    .mt-isn__annees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}