/** * plugins/generic/szhReader/styles/reader.css * * Lecteur HTML enrichi SZH/CSPS. Look repris du thème (rouge #d31932, bleu #002060). * * Le contenu de l'article est injecté INLINE (pas d'iframe) dans .szh-reader__article, * SANS la classe .csps_html_article : le CSS de l'article du thème (csps_article, scopé * sous .csps_html_article) ne s'applique donc pas → cette feuille est seule maître de la * typographie de lecture. Réglages de lecture (taille/police/contraste) via variables CSS. */ .szh-reader-body { --szh-red: #d31932; --szh-blue: #002060; --szh-surface: #ffffff; --szh-page-bg: #f1f3f5; --szh-text: #1a1a1a; --szh-text-muted: #5c6672; --szh-border: #e2e6ea; --szh-link: #002060; --szh-abstract-bg: #f0f2f5; --szh-topbar-h: 56px; --szh-sidebar-w: 320px; margin: 0; background: var(--szh-page-bg); color: var(--szh-text); } /* Thèmes de lecture (bascule via data-szh-theme sur ) */ .szh-reader-body[data-szh-theme="sepia"] { --szh-surface: #f6efdd; --szh-page-bg: #ece1c6; --szh-text: #43361f; --szh-text-muted: #6b5a3e; --szh-border: #dccBA6; --szh-link: #7a4a12; --szh-abstract-bg: #efe6cc; } .szh-reader-body[data-szh-theme="dark"] { --szh-surface: #1f2023; --szh-page-bg: #141517; --szh-text: #e7e7e7; --szh-text-muted: #a6adb5; --szh-border: #3a3d42; --szh-link: #78b6ff; --szh-abstract-bg: rgba(255,255,255,.05); } .szh-reader-body[data-szh-theme="contrast"] { --szh-surface: #000000; --szh-page-bg: #000000; --szh-text: #ffffff; --szh-text-muted: #ffffff; --szh-border: #ffffff; --szh-link: #ffff00; --szh-abstract-bg: #111111; } /* Lien d'évitement (accessibilité) */ .szh-reader__skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--szh-blue); color: #fff; padding: .6rem 1rem; } .szh-reader__skip:focus { left: 0; } /* ===== Barre supérieure ===== */ .szh-reader__topbar { height: var(--szh-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem; background: var(--szh-blue); color: #fff; position: sticky; top: 0; z-index: 30; } /* Boutons de la barre (retour ET détails) : même pastille blanche, rouge SZH au survol. Forme et couleurs identiques -> le bouton "Détails" reprend le style du bouton retour. */ .szh-reader__back { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem 1.15rem; border-radius: 22px; border: 0; cursor: pointer; background: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transition: background .15s, color .15s, box-shadow .15s, transform .1s; } .szh-reader__toggle-ico { flex: 0 0 auto; display: block; } .szh-reader__back, .szh-reader__back:link, .szh-reader__back:visited { color: var(--szh-blue); } .szh-reader__back:hover, .szh-reader__back:focus { background: var(--szh-red); color: #fff; text-decoration: none; box-shadow: 0 3px 10px rgba(0, 0, 0, .35); transform: translateY(-1px); } .szh-reader__journal { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .92; font-size: .95rem; text-align: right; } .szh-reader__ctrl { background: transparent; border: 1px solid rgba(255, 255, 255, .5); color: #fff; border-radius: 4px; padding: .35rem .7rem; cursor: pointer; font-size: .9rem; white-space: nowrap; } .szh-reader__ctrl:hover { background: rgba(255, 255, 255, .12); } .szh-reader__toggle { display: none; } /* ===== Barre de réglages de lecture (sticky, en haut de l'article) ===== */ .szh-reader__toolbar { position: sticky; top: var(--szh-topbar-h); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; padding: .65rem 1.5rem; background: var(--szh-page-bg); border-bottom: 1px solid var(--szh-border); box-shadow: 0 5px 12px -5px rgba(0, 0, 0, .22); } .szh-reader__toolbar-group { display: flex; align-items: center; gap: .5rem; } .szh-reader__toolbar-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--szh-text-muted); } .szh-reader__btns { display: inline-flex; gap: .3rem; } .szh-reader__btns button { min-width: 2.2rem; padding: .32rem .58rem; cursor: pointer; border: 1px solid var(--szh-border); background: var(--szh-surface); border-radius: 5px; font-size: .85rem; color: var(--szh-text); } .szh-reader__btns button:hover { border-color: var(--szh-red); } .szh-reader__btns button[aria-pressed="true"] { background: var(--szh-blue); color: #fff; border-color: var(--szh-blue); } .szh-reader__toolbar select { padding: .32rem .4rem; border: 1px solid var(--szh-border); border-radius: 5px; font-size: .85rem; background: var(--szh-surface); color: var(--szh-text); } /* ===== Zone principale : sidebar à GAUCHE, contenu à droite ===== */ .szh-reader { display: flex; flex-direction: row-reverse; align-items: flex-start; max-width: 1500px; margin: 0 auto; } .szh-reader__content { flex: 1 1 auto; min-width: 0; background: var(--szh-surface); position: relative; z-index: 1; box-shadow: -6px 0 16px -10px rgba(0, 0, 0, .35); } .szh-reader__content:focus { outline: none; } .szh-reader__notice { background: #fff8e1; border-bottom: 1px solid #f0d98a; padding: .75rem 1.5rem; font-size: .9rem; color: #5a4a00; } /* Sidebar sticky, à gauche — fond distinct (grisé) pour la détacher du contenu blanc */ .szh-reader__sidebar { flex: 0 0 var(--szh-sidebar-w); width: var(--szh-sidebar-w); position: sticky; top: var(--szh-topbar-h); align-self: flex-start; max-height: calc(100vh - var(--szh-topbar-h)); overflow-y: auto; background: var(--szh-page-bg); border-right: 1px solid var(--szh-border); padding: 1.5rem 1.4rem 3rem; } .szh-reader__sidebar-title { font-size: 1.05rem; margin: 0 0 1.25rem; padding-bottom: .4rem; color: var(--szh-text); border-bottom: 2px solid var(--szh-red); } .szh-reader__block { margin-top: 1.5rem; } .szh-reader__block h3 { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--szh-text-muted); margin: 0 0 .6rem; } .szh-reader__authors ul, .szh-reader__downloads ul { list-style: none; margin: 0; padding: 0; } .szh-reader__authors li { margin-bottom: .5rem; } .szh-reader__authors .name { display: block; font-weight: 600; } .szh-reader__authors .affiliation { display: block; font-size: .85rem; color: var(--szh-text-muted); } /* Téléchargements */ .szh-reader__downloads li { margin-bottom: .5rem; } .szh-reader__dl { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border: 1px solid var(--szh-border); border-radius: 6px; text-decoration: none; color: var(--szh-link); font-weight: 600; transition: border-color .15s, background .15s; } .szh-reader__dl:hover, .szh-reader__dl.is-current { border-color: var(--szh-red); background: rgba(211, 25, 50, .06); } .szh-reader__dl::before { content: "\2193"; font-weight: 700; color: var(--szh-red); } /* Métadonnées */ .szh-reader__meta dl { margin: 0; } .szh-reader__meta dt { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--szh-text-muted); margin-top: .8rem; } .szh-reader__meta dd { margin: .15rem 0 0; font-size: .9rem; word-break: break-word; } .szh-reader__sidebar a { color: var(--szh-link); } .szh-reader__cite-text { font-size: .85rem; line-height: 1.5; color: var(--szh-text); background: var(--szh-abstract-bg); padding: .8rem; border-radius: 6px; } /* Sommaire (généré depuis les titres de l'article) */ .szh-reader__toc ul { list-style: none; margin: 0; padding: 0; } .szh-reader__toc li { margin: 0; } .szh-reader__toc a { display: block; padding: .28rem .6rem; margin-left: -.6rem; font-size: .85rem; line-height: 1.35; color: var(--szh-text-muted); text-decoration: none; border-left: 2px solid transparent; } .szh-reader__toc a:hover { color: var(--szh-link); } .szh-reader__toc a.is-active { color: var(--szh-text); border-left-color: var(--szh-red); font-weight: 600; } .szh-reader__toc a.lvl-2 { padding-left: 1.4rem; } .szh-reader__toc a.lvl-3 { padding-left: 2.2rem; } /* ========================================================================= Typographie de lecture — SCOPÉE sur .szh-reader__article uniquement. Taille et police pilotées par variables (barre de réglages). ========================================================================= */ .szh-reader__article { --szh-read-scale: 1; --szh-read-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; max-width: 70rem; margin: 0 auto; padding: 2.5rem 2.5rem 5rem 2.75rem; border-left: 4px solid var(--szh-red); font-family: var(--szh-read-font); font-size: calc(1.06rem * var(--szh-read-scale)); line-height: 1.75; color: var(--szh-text); overflow-wrap: break-word; /* Lecture alignée à gauche : bonne pratique web (le justifié crée des "rivières" et nuit à la lisibilité sans césure). */ text-align: left; } .szh-reader__article .wrapper { max-width: none; margin: 0; padding: 0; border: 0; } .szh-reader__article p { margin: 0 0 1.1em; } .szh-reader__article h1, .szh-reader__article h2, .szh-reader__article h3, .szh-reader__article h4 { color: var(--szh-text); line-height: 1.25; margin: 1.8em 0 .5em; font-weight: 700; scroll-margin-top: calc(var(--szh-topbar-h) + 64px); /* compense topbar + barre réglages sticky */ } .szh-reader__article h1 { font-size: 1.55em; } .szh-reader__article h2 { font-size: 1.3em; } .szh-reader__article h3 { font-size: 1.12em; } .szh-reader__article .article-title { font-size: 1.9em; line-height: 1.2; margin: 0 0 .2em; color: var(--szh-text); } .szh-reader__article .subtitle { font-size: 1.25em; color: var(--szh-text-muted); font-weight: 400; line-height: 1.4; margin: .2em 0 1em; } .szh-reader__article .author { font-weight: 600; color: var(--szh-text); margin-bottom: 2em; } /* Résumé : encadré sobre (la bordure rouge est portée par l'article, pas de double liseré) */ .szh-reader__article [role="doc-abstract"] { background: var(--szh-abstract-bg); padding: 1.25rem 1.5rem; border-radius: 6px; margin: 0 0 2.5em; } .szh-reader__article [role="doc-abstract"] .abstract { margin: 0 0 1em; } .szh-reader__article [role="doc-abstract"] .abstract:last-child { margin-bottom: 0; } .szh-reader__article a { color: var(--szh-link); text-decoration: underline; text-underline-offset: 2px; } .szh-reader__article img { max-width: 100%; height: auto; display: block; margin: 1.5em auto; cursor: zoom-in; } /* Badge Creative Commons : petit + aligné à gauche */ .szh-reader__article img[alt*="Creative Common" i], .szh-reader__article img[alt*="Creative Commons License" i] { max-width: 96px; margin: 1.5em 0; cursor: default; } .szh-reader__article figure { margin: 1.5em 0; } .szh-reader__article figcaption { font-size: .85em; color: var(--szh-text-muted); text-align: center; margin-top: .5em; } /* Tables : conteneur scrollable (horizontal + vertical) */ .szh-reader__table-wrap { overflow: auto; max-height: 75vh; margin: 1.5em 0; border: 1px solid var(--szh-border); border-radius: 6px; -webkit-overflow-scrolling: touch; } .szh-reader__article table { border-collapse: collapse; width: 100%; font-size: .95em; } .szh-reader__table-wrap table { margin: 0; } .szh-reader__article th, .szh-reader__article td { border: 1px solid var(--szh-border); padding: .5em .7em; text-align: left; vertical-align: top; } .szh-reader__article th { background: var(--szh-abstract-bg); position: sticky; top: 0; } .szh-reader__article ul, .szh-reader__article ol { margin: 0 0 1.1em; padding-left: 1.4em; } .szh-reader__article li { margin-bottom: .35em; } .szh-reader__article blockquote { margin: 1.5em 0; padding-left: 1.2em; border-left: 3px solid var(--szh-border); color: var(--szh-text-muted); } .szh-reader__article hr { border: 0; border-top: 1px solid var(--szh-border); margin: 2em 0; } /* ===== Lightbox images ===== */ .szh-reader__lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .9); padding: 2rem; cursor: zoom-out; } .szh-reader__lightbox[hidden] { display: none; } .szh-reader__lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 30px rgba(0,0,0,.5); } .szh-reader__lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: transparent; border: 0; color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; padding: .25rem .5rem; } .szh-reader__lightbox-close:hover { color: var(--szh-red); } /* Repli iframe (si l'extraction inline échoue) */ #szh-reader-frame { width: 100%; height: calc(100vh - var(--szh-topbar-h)); border: 0; display: block; } /* ===== Responsive : sidebar en tiroir (depuis la gauche) ===== */ @media (max-width: 860px) { .szh-reader { flex-direction: column; } .szh-reader__ctrl-label { display: none; } .szh-reader__toggle { display: inline-flex; } /* Sur mobile, on masque le nom de revue au centre pour laisser la place aux deux pastilles (retour + détails) sans chevauchement. */ .szh-reader__journal { display: none; } .szh-reader__sidebar { position: fixed; top: var(--szh-topbar-h); left: 0; bottom: 0; max-height: none; width: 320px; max-width: 88vw; z-index: 25; border-right: 1px solid var(--szh-border); border-left: 0; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 4px 0 16px rgba(0, 0, 0, .15); } .szh-reader__sidebar.is-open { transform: translateX(0); } .szh-reader__backdrop { display: none; position: fixed; inset: var(--szh-topbar-h) 0 0 0; background: rgba(0, 0, 0, .35); z-index: 24; } .szh-reader__backdrop.is-open { display: block; } .szh-reader__article { padding: 1.5rem 1.25rem 4rem; } }