/* D-V874b V8.87 -- extract aller_plus_loin tabs depuis index.html cycle V8.74
 * Pattern .ressources-tabs__* candidat reuse blog_article + dossier_types + landing.
 * UNLAYERED (doctrine CSS design system lesson #249) : NORMAL UNLAYERED bat
 * NORMAL LAYERED, donc surclasse @layer legacy de app.css si conflit.
 * Tokens semantiques uniquement (doctrine var(--xxx) parite light/dark auto).
 */

.ressources-section { padding-block: 2.5rem; }
.ressources-section__title { font-size: 1.5rem; margin-block-end: 0.35rem; color: var(--text-main); }
.ressources-section__lead { color: var(--text-secondary); margin-block-end: 1.5rem; max-inline-size: 50em; }

.ressources-tabs { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 14px; padding: 1.25rem; }
.ressources-tabs__list { display: flex; gap: 0.35rem; flex-wrap: wrap; border-block-end: 1px solid var(--border); margin-block-end: 1.25rem; padding-block-end: 0.65rem; }
.ressources-tabs__btn { background: transparent; border: 1px solid transparent; color: var(--text-secondary); font: inherit; font-weight: 500; padding: 0.55rem 1rem; border-radius: 999px; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.ressources-tabs__btn:hover { background: var(--bg); color: var(--text-main); }
.ressources-tabs__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ressources-tabs__btn[aria-selected="true"] { background: var(--primary); color: var(--text-on-primary); border-color: var(--primary); }

.ressources-tabs__panel-lead { color: var(--text-secondary); margin-block-end: 1rem; font-size: 0.95rem; }
.ressources-tabs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; }
.ressources-tabs__card { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text-main); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.ressources-tabs__card:hover { border-color: var(--primary); transform: translateY(-1px); }
.ressources-tabs__card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ressources-tabs__card-title { font-weight: 600; font-size: 0.95rem; color: var(--text-main); }
.ressources-tabs__card-desc { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.4; }

.ressources-tabs__cta-row { margin-block-start: 1.1rem; }
.ressources-tabs__cta { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.ressources-tabs__cta:hover { text-decoration: underline; }
.ressources-tabs__cta svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
    .ressources-tabs { padding: 1rem 0.85rem; }
    .ressources-tabs__btn { padding: 0.5rem 0.85rem; font-size: 0.9rem; }
}