/* layout_as_cmqgrid — grille de rubriques du portail comarquage, adaptée à
   la charte du skin chapelle (palette, typographie). Repris de clonas.fr
   (magenta #ec008d d'origine) → vert forêt de la commune. */

.cmq-rubrique-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin: 1.2rem 0 2.8rem;
}

.cmq-rubrique-card {
    flex: 1 1 220px;
    max-width: 320px;
    box-sizing: border-box;
    background: #F2EFE8;
    border: 1px solid #D8D4CC;
    border-top: 3px solid #1E4D0F;
    border-radius: 8px;
    padding: 1.6rem 1.4rem;
    text-align: center;
    transition: box-shadow .15s ease, transform .15s ease;
}

.cmq-rubrique-card:hover,
.cmq-rubrique-card:focus-within {
    box-shadow: 0 4px 12px rgba(30, 77, 15, .12);
    transform: translateY(-2px);
}

.cmq-rubrique-card-link {
    display: block;
    text-decoration: none;
    color: #1E4D0F;
}

.cmq-rubrique-card-link:hover,
.cmq-rubrique-card-link:focus {
    text-decoration: none;
    color: #123008;
}

.cmq-rubrique-card-link:focus-visible {
    outline: 2px solid #4A87B8;
    outline-offset: 2px;
    border-radius: 4px;
}

.cmq-rubrique-card-icon {
    color: inherit;
    margin-bottom: 0.8rem;
}

/* Le titre est scopé par .cmq-rubrique-card (0,2,1) : suffisant pour battre
   .chapelle-content h2 (0,1,1) sans recourir à un id. ⚠ L'ancienne version
   ciblait #contenu #gauche, deux ids qui n'existent nulle part dans le skin
   chapelle (le conteneur réel est #page-content.chapelle-content) — cette
   règle ne s'appliquait donc jamais : les titres héritaient tels quels de
   .chapelle-content h2 (Bitter 22-32px, bleu $color-info, marge 3.2rem),
   bien trop grands pour une carte compacte. */
.chapelle-content .cmq-rubrique-card h2 {
    font-family: "Bitter", Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 0.6rem;
    padding: 0;
    color: inherit;
    text-align: center;
}

.cmq-rubrique-card p {
    font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.3rem;
    color: #5C5749;
    margin: 0.8rem 0 0;
    line-height: 1.5;
    text-align: left;
}

.cmq-rubrique-card-sub {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0.8rem 0 0;
    border-top: 1px solid #D8D4CC;
    text-align: left;
}

.cmq-rubrique-card-sub li {
    font-family: "Public Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.3rem;
    line-height: 1.6;
}

.cmq-rubrique-card-sub a {
    color: #1F1D17;
    text-decoration: none;
}

.cmq-rubrique-card-sub a:hover,
.cmq-rubrique-card-sub a:focus {
    color: #1E4D0F;
    text-decoration: underline;
}

@media screen and (max-width: 600px) {
    .cmq-rubrique-grid {
        flex-direction: column;
    }
    .cmq-rubrique-card {
        max-width: none;
    }
}