/* =========================================================
   EduConcept — Encarts "Matériel recommandé" (liens affiliés)
   Fichier : /assets/css/reco.css
   Toutes les classes sont préfixées "ec-reco".
   ========================================================= */

.ec-reco {
    --ec-reco-bg: #f5f8ff;
    --ec-reco-border: #3759c7;
    --ec-reco-text: #182230;
    --ec-reco-muted: #667085;
    --ec-reco-card-border: #dfe5ee;
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    background: var(--ec-reco-bg);
    border-left: 4px solid var(--ec-reco-border);
    border-radius: 10px;
    color: var(--ec-reco-text);
    font-size: .97rem;
    line-height: 1.55;
}

.ec-reco * { box-sizing: border-box; }

.ec-reco__label {
    display: inline-block;
    margin-bottom: .4rem;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ec-reco-border);
}

.ec-reco__title {
    margin: 0 0 .5rem;
    font-size: 1.12rem;
    font-weight: 800;
}

.ec-reco__intro { margin: 0 0 1rem; }

.ec-reco__items {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.ec-reco__item {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem;
    background: #fff;
    border: 1px solid var(--ec-reco-card-border);
    border-radius: 8px;
}

.ec-reco__name { margin: 0; font-weight: 800; font-size: 1rem; }
.ec-reco__why  { margin: 0; flex: 1; }

.ec-reco__btn {
    align-self: flex-start;
    margin-top: .4rem;
    padding: .5rem .95rem;
    background: var(--ec-reco-border);
    color: #fff !important;
    border-radius: .6rem;
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none !important;
}

.ec-reco__btn:hover,
.ec-reco__btn:focus-visible { filter: brightness(1.1); }

.ec-reco__more { margin: .9rem 0 0; font-size: .9rem; }

.ec-reco__disclosure {
    margin: .6rem 0 0;
    font-size: .8rem;
    color: var(--ec-reco-muted);
}

/* Variante pour la page révisions DNB (sections pleine largeur) */
.dnb-reco { padding: 1rem 0; }
.dnb-reco .ec-reco { margin: 0 auto; max-width: 980px; }

@media (max-width: 480px) {
    .ec-reco { padding: 1rem; }
}