/** Accueil + listes de fiches nommées / favoris. */

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

.mt-save-group + .mt-save-group { margin-top: var(--mt-space-5, 24px); }

.mt-save-group > h4 {
    padding-bottom: 6px;
    margin-bottom: var(--mt-space-3, 12px);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
    color: var(--mt-muted, #6c7266);
}

.mt-save {
    padding: var(--mt-space-4, 16px);
    margin-bottom: var(--mt-space-3, 12px);
    background: var(--mt-surface-warm, #f4efe7);
    border: 1px solid var(--mt-line, #e5dfd4);
    border-radius: var(--mt-radius, 10px);
}

.mt-save__head {
    display: flex;
    align-items: baseline;
    gap: var(--mt-space-2, 8px);
    flex-wrap: wrap;
}

.mt-save__name { margin: 0; }

.mt-save__tag {
    padding: 3px 10px;
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 600;
    color: var(--mt-brand-strong, #14655f);
    background: var(--mt-brand-tint, #e6f2f0);
    border-radius: var(--mt-radius-pill, 999px);
}

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

.mt-save .mt-ferti__needs-title {
    margin: 0 0 var(--mt-space-4, 16px);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-ink, #2b3128);
}

.mt-save .mt-ferti__apport-box {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: var(--mt-space-4, 16px);
    margin-left: 0;
    border: 1px solid var(--mt-ink, #2b3128);
    border-radius: var(--mt-radius, 10px);
}

.mt-save .mt-ferti__apport-kicker {
    margin: 0 0 var(--mt-space-3, 12px);
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-brand-strong, #14655f);
}

.mt-save .mt-ferti__apport-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-4, 16px) var(--mt-space-5, 24px);
    margin: 0;
}

.mt-save .mt-ferti__apport-hero {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mt-save .mt-ferti__apport-kg {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mt-brand, #1a8781);
    font-variant-numeric: tabular-nums;
}

.mt-save .mt-ferti__apport-nom {
    font-size: var(--mt-fs-body, 16px);
    font-weight: 700;
    color: var(--mt-brand-strong, #14655f);
}

.mt-save__lines {
    margin: var(--mt-space-2, 8px) 0 0;
    padding-left: 18px;
    font-size: var(--mt-fs-annex, 13.5px);
    color: var(--mt-ink-soft, #404a3d);
}

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

.mt-save__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-2, 8px);
    margin-top: var(--mt-space-3, 12px);
}

/* ----- Fiche « Calcul dosage » ------------------------------------------
 * Téléphone : deux nombres, note puis répartition derrière des chevrons
 * fermés. Bureau (≥ 800 px, même seuil que la console ferti) : colonne
 * gauche (nombres + Note ouvrable) | table ouverte à droite — plus de
 * clic sur la répartition. Le JS pose `open` sur `.mt-dosage__detail`
 * seulement ; le CSS cache SON chevron. La Note reste un details.
 */

.mt-dosage__heroes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mt-space-3, 12px) 40px;
    margin-bottom: var(--mt-space-3, 12px);
}

.mt-dosage__hero {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mt-dosage__qty {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mt-brand, #1a8781);
    font-variant-numeric: tabular-nums;
}

.mt-dosage__what {
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    color: var(--mt-brand-strong, #14655f);
    overflow-wrap: anywhere;
}

.mt-save__notes-text {
    margin: 0;
    font-size: var(--mt-fs-body, 16px);
    line-height: 1.45;
    color: var(--mt-ink, #2b3128);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mt-dosage__detail > summary,
.mt-dosage__note > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: var(--mt-fs-annex, 13.5px);
    font-weight: 700;
    color: var(--mt-brand-strong, #14655f);
    cursor: pointer;
    list-style: none;
}

.mt-dosage__detail > summary::-webkit-details-marker,
.mt-dosage__note > summary::-webkit-details-marker { display: none; }

/* Le chevron dit l'état sans dépendre du marqueur natif, que les navigateurs
   dessinent chacun à leur façon (et que Safari refuse de styler). */
.mt-dosage__detail > summary::before,
.mt-dosage__note > summary::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}

.mt-dosage__detail[open] > summary::before,
.mt-dosage__note[open] > summary::before { transform: rotate(45deg); }

@media (min-width: 800px) {
    .mt-dosage {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
        gap: var(--mt-space-4, 16px) var(--mt-space-6, 32px);
        align-items: stretch;
    }

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

    .mt-dosage__heroes {
        margin-bottom: 0;
        justify-content: center;
        align-items: center;
        gap: var(--mt-space-4, 16px) var(--mt-space-6, 32px);
    }

    .mt-dosage__hero {
        align-items: center;
        text-align: center;
    }

    .mt-dosage__detail {
        min-width: 0;
        padding-left: var(--mt-space-5, 24px);
        border-left: 1px solid var(--mt-line, #e5dfd4);
    }

    .mt-dosage__detail > summary {
        padding: 0 0 8px;
        font-size: var(--mt-fs-body, 16px);
        cursor: default;
        pointer-events: none;
    }

    .mt-dosage__detail > summary::before { display: none; }

    .mt-dosage__note > summary {
        font-size: var(--mt-fs-body, 16px);
    }
}

/* `display: block` sur un <table> le faisait coller à son contenu — d'où un
   tableau étroit collé à gauche. Table vraie + 100 % : les colonnes
   prennent la largeur de la fiche. Le débordement, s'il arrive, se gère
   sur le <details>, pas en cassant le modèle de tableau. */
.mt-dosage__detail { overflow-x: auto; }

.mt-dosage__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mt-fs-annex, 13.5px);
    font-variant-numeric: tabular-nums;
}

.mt-dosage__table th,
.mt-dosage__table td {
    padding: 7px 10px;
    text-align: right;
    white-space: nowrap;
}

.mt-dosage__table th:first-child,
.mt-dosage__table td:first-child {
    text-align: left;
    white-space: normal;
}

.mt-dosage__table thead th {
    font-weight: 700;
    color: var(--mt-muted, #6c7266);
    border-bottom: 1px solid var(--mt-line, #e5dfd4);
}

.mt-dosage__table tbody th { font-weight: 400; color: var(--mt-ink-soft, #404a3d); }
.mt-dosage__table tbody td { font-weight: 700; color: var(--mt-ink, #2b3128); }

.mt-dosage__table tfoot th,
.mt-dosage__table tfoot td {
    font-weight: 700;
    color: var(--mt-brand-strong, #14655f);
    border-top: 1px solid var(--mt-line, #e5dfd4);
}

/* Téléphone / tiroir : les deux dosages se partagent la largeur, centrés.
   Le tableau passe au cran corps — annex 13,5 px disparaissait dans la fiche. */
@media (max-width: 799px) {
    .mt-dosage__heroes {
        justify-content: space-evenly;
        gap: var(--mt-space-3, 12px) var(--mt-space-4, 16px);
    }

    .mt-dosage__hero {
        flex: 1 1 0;
        align-items: center;
        text-align: center;
    }

    .mt-dosage__table {
        font-size: var(--mt-fs-body, 16px);
    }

    .mt-dosage__table th,
    .mt-dosage__table td {
        padding: 9px 8px;
    }
}