/* =========================================================
   wassla.ma — pages simples, bibliothèque de ressources, accueil
   ========================================================= */

/* En-tête clair (pages simples, liste des ressources) */
.phero {
    padding: 48px 0 40px;
    background: linear-gradient(180deg, #f4f8fc 0%, #eaf1f9 100%);
    border-bottom: 1px solid var(--product-border);
}
.phero__title {
    margin: 0 0 12px;
    color: #0b2c4a;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.phero__text { max-width: 760px; margin: 0; color: #44546a; font-size: 17px; line-height: 1.65; }

.rich-html--page { max-width: 860px; border: 0; padding: 0; }

/* En-tête d'article */
.ahero { padding: 44px 0 36px; background: #f4f8fc; border-bottom: 1px solid var(--product-border); }
.ahero__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 40px; align-items: center; }
.ahero__title { margin: 0 0 14px; color: #0b2c4a; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; font-weight: 800; text-wrap: balance; }
.ahero__excerpt { margin: 0 0 16px; max-width: 720px; color: #44546a; font-size: 18px; line-height: 1.6; }
.ahero__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; color: var(--product-muted); font-size: 14px; font-weight: 700; }
.ahero__img { width: 100%; border-radius: 16px; box-shadow: 0 16px 36px rgba(11,44,74,.14); }

/* Corps d'article : colonne de lecture */
.article { display: grid; gap: 28px; max-width: 820px; }
.article__body { padding: 0; border: 0; font-size: 17px; line-height: 1.75; }
.article__body h2 { margin-top: 34px; }
.article__body p > strong:first-child { color: #0b2c4a; }
.article__body code { padding: 2px 6px; border-radius: 6px; background: #eef3f8; font-size: .92em; }
.article__sources { padding: 20px 22px; border-radius: 14px; background: #f6f9fc; border: 1px solid var(--product-border); }
.article__sources h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #3b4a5f; }
.article__sources ul { margin: 0; padding-left: 18px; }
.article__sources li { margin-bottom: 6px; }
.article__sources span { color: var(--product-muted); font-size: 14px; }

/* Liste des ressources */
.reslist__cats { margin-bottom: 26px; }
.reslist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.reslist__item {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--product-border);
    border-radius: 14px;
    background: #fff;
    transition: transform .2s, box-shadow .2s;
}
.reslist__item:hover, .reslist__item:focus-within { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20,42,70,.10); }
.reslist__item img { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.reslist__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.reslist__title { margin: 0 0 8px; font-size: 19px; line-height: 1.35; font-weight: 800; }
.reslist__title a { color: #23303f; text-decoration: none; }
.reslist__title a::after { content: ""; position: absolute; inset: 0; }
.reslist__body p { flex: 1; margin: 0 0 12px; color: #475569; font-size: 15px; line-height: 1.6; }

/* Accueil : couleur de la marque sur sa carte */
.nav-card[style*="--card-color"] { border-top: 4px solid var(--card-color); }
.nav-card[style*="--card-color"] .nav-card__more { color: var(--card-color); }

@media (max-width: 1000px) {
    .reslist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ahero__inner { grid-template-columns: 1fr; }
    .ahero__img { max-width: 520px; }
}
@media (max-width: 620px) {
    .reslist { grid-template-columns: 1fr; }
    .article__body { font-size: 16px; }
}

/* Gabarit « Marque » : image de fond choisie dans l'admin (voile clair pour garder le texte lisible) */
.bhero--cover {
    background:
        linear-gradient(90deg, rgba(244,248,252,.96) 0%, rgba(234,241,249,.88) 55%, rgba(234,241,249,.55) 100%),
        var(--t-cover-img) var(--hero-pos, center center) / var(--hero-size, cover) no-repeat;
}