/* ============================================================ HyMed × briques Zego — la feuille de raccord. À QUOI ELLE SERT. Les sections dynamiques du site (les actualités, et demain les fiches) ne viennent plus du fichier : ce sont des briques Zego, qui portent leurs propres classes `zs-*` et leur propre habillage. Sans cette feuille, elles s'affichent dans le style du moteur au milieu d'un site qui a le sien — deux dessins dans une page. COMMENT ELLE EST ÉCRITE. Elle ne pose aucune couleur, aucune police et aucun rayon en dur : tout vient des variables que `.hy` déclare déjà (--navy, --ink, --line, --serif…). Changer le thème du site change donc aussi ses briques, sans revenir ici. Ses sélecteurs commencent tous par `.hy .zs-site` : d'abord parce qu'elle ne doit repeindre que l'intérieur de CE site, ensuite parce que la feuille du moteur est posée en dernier dans le `` d'une page fabriquée — à spécificité égale, c'est elle qui gagnerait, et le titre des actualités repassait en sans-serif au milieu d'un site en serif. ============================================================ */ /* La section d'une brique reprend le rythme vertical des sections du site (`.hy .sec`), sinon les actualités flottent dans un blanc qui ne ressemble à aucun autre bloc de la page. */ .hy .zs-site .zs-section { border-bottom: 1px solid var(--line); padding: 104px 0; background: var(--bg); } .hy .zs-site .zs-inner { width: min(1180px, 100% - 48px); margin-inline: auto; } /* Surtitre et titre : ceux du site, au mot près (`.eyebrow`, `.h2`). */ .hy .zs-site .zs-eyebrow { color: var(--blue); letter-spacing: .14em; text-transform: uppercase; font-family: var(--mono); font-size: 12px; margin: 0 0 16px; } .hy .zs-site .zs-title { font-family: var(--serif); letter-spacing: -.02em; color: var(--ink); font-size: 42px; font-weight: 600; line-height: 1.08; margin: 0 0 40px; } /* ---- La liste des articles ---- La DISPOSITION reste celle du moteur (vedette en tête pour « magazine », colonnes pour « grille ») : c'est elle qui porte le choix fait dans l'éditeur. Cette feuille ne touche qu'à l'habillage — couleurs, polices, bordures — pour que la brique ait l'air d'appartenir au site. */ .hy .zs-site .zs-blog-posts { gap: 18px; } .hy .zs-site .zs-blog-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; } .hy .zs-site .zs-blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); border-color: var(--blue-pale); } .hy .zs-site .zs-blog-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 18px; display: block; } /* La date : celle du site (`.date`), en mono discrète. */ .hy .zs-site .zs-blog-date { color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; margin-bottom: 10px; display: block; } .hy .zs-site .zs-blog-card h3 { font-family: var(--serif); color: var(--ink); font-size: 22px; font-weight: 600; line-height: 1.25; margin: 0 0 10px; } .hy .zs-site .zs-blog-card p { color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0; } /* L'étiquette d'un article : le `.tag` du site. */ .hy .zs-site .zs-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .hy .zs-site .zs-blog-tag { background: var(--bg-alt); color: var(--navy); border-radius: 999px; padding: 4px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; } /* ---- La page d'un article ---- */ .hy .zs-site .zs-article { width: min(760px, 100% - 48px); margin-inline: auto; padding-block: 88px; } .hy .zs-site .zs-article-title { font-family: var(--serif); color: var(--ink); font-size: 40px; font-weight: 600; line-height: 1.12; letter-spacing: -.01em; margin: 24px 0 28px; } .hy .zs-site .zs-article-back { color: var(--muted); font-size: 15px; text-decoration: none; } .hy .zs-site .zs-article-back:hover { color: var(--blue); } .hy .zs-site .zs-article-cover { width: 100%; border-radius: var(--radius); display: block; } .hy .zs-site .zs-article-body { color: var(--ink); font-size: 18px; line-height: 1.75; } .hy .zs-site .zs-article-body p { margin: 0 0 20px; } .hy .zs-site .zs-article-body h2, .hy .zs-site .zs-article-body h3 { font-family: var(--serif); color: var(--ink); margin: 36px 0 12px; } .hy .zs-site .zs-article-body blockquote { border-left: 3px solid var(--blue-pale); color: var(--muted); margin: 28px 0; padding-left: 20px; font-style: italic; } @media (max-width: 720px) { .hy .zs-site .zs-section { padding: 64px 0; } .hy .zs-site .zs-title { font-size: 30px; } .hy .zs-site .zs-article-title { font-size: 28px; } }