/**
 * Rubriques (« Aide », « Irrigation »).
 *
 * Une page de rubrique n'a qu'un contenu : la liste de ses outils. Elle
 * n'invente donc aucun objet visuel — l'en-tête reprend celui des modules, et
 * la carte est une variante de `.mt-card` rendue cliquable.
 *
 * ⚠️ 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-*`.
 */

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

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

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

.mt-rubrique__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--mt-space-3, 12px);
    margin-top: var(--mt-space-5, 24px);
}

/* La carte EST le lien : toute sa surface est cliquable, pas seulement un
   « Ouvrir » en bas à droite. C'est un <button>, donc il faut annuler l'apparence
   que le thème donne aux boutons avant de reconstruire la nôtre. */
.mt-rubrique__card {
    display: flex;
    align-items: flex-start;
    gap: var(--mt-space-3, 12px);
    width: 100%;
    margin: 0;
    padding: var(--mt-space-4, 16px);
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    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));
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* Même piège que `.mt-field` (POST_MORTEM #3) : ce `display: flex` auteur bat
   le `[hidden]{display:none}` du user-agent par ORIGINE de cascade, pas par
   spécificité. `mt-rubrique.js` masque une carte dont l'onglet n'existe pas —
   sans cette ligne, elle resterait affichée et muette. */
.mt-rubrique__card[hidden] { display: none; }

.mt-rubrique__card:hover {
    border-color: var(--mt-brand, #1a8781);
    box-shadow: var(--mt-shadow, 0 3px 12px rgba(43, 49, 40, .08));
}

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

.mt-rubrique__card:active { transform: translateY(1px); }

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

.mt-rubrique__ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--mt-brand, #1a8781);
    background: var(--mt-brand-tint, #e6f2f0);
    border-radius: var(--mt-radius, 10px);
}

.mt-rubrique__ico svg { width: 22px; height: 22px; }

.mt-rubrique__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mt-rubrique__t {
    color: var(--mt-ink, #2b3128);
    font-size: var(--mt-fs-title, 18px);
    font-weight: 700;
    line-height: 1.3;
}

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

/* Le chevron se cale en haut, à hauteur du titre : centré verticalement, il
   flotterait au milieu d'une description de trois lignes. */
.mt-rubrique__go {
    flex: none;
    margin-top: 3px;
    color: var(--mt-muted, #6c7266);
    transition: transform .15s ease, color .15s ease;
}

.mt-rubrique__card:hover .mt-rubrique__go {
    color: var(--mt-brand, #1a8781);
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .mt-rubrique__go,
    .mt-rubrique__card:hover .mt-rubrique__go { transition: none; transform: none; }
}

@media (max-width: 640px) {
    .mt-rubrique__grid { grid-template-columns: 1fr; }
}