/* règle de base sur la typographie/lisibilité. Elle ne dépend pas d’une mise en page particulière, ni d’un composant, ni d’un utilitaire. Elle améliore la lisibilité de toutes les listes sur le site, quel que soit le contexte. */ /* ========================================= base.css Fondations + Thème clair / sombre ========================================= */ /* ---------- Thème clair (par défaut) ---------- */ :root { /* Typographie */ --font-body: "Courier New", Courier, monospace; /* Couleurs structure */ --color-bg: #f8f8f8; --color-bg-stripe: #f0f0f0; --color-surface: #ffffff; --color-surface-alt: #e0e0e0; --color-surface-alt-hover: #d0d0d0; /* Bordures */ --color-border: #d2d2d2; --color-border-soft: #ccc; --color-border-strong: #b5b5b5; /* Texte */ --color-text: #222; --color-text-soft: #444; --color-text-faint: #666; --color-link: #333; --color-link-hover: #000; --color-accent: #222; /* que tu pourrais utiliser comme couleur spéciale */ --color-link-container: #1A85E2; --color-link-container-hover: #2B4162; /* Accent (si besoin boutons) */ --color-accent: #222; --color-accent-contrast: #fff; /* Spécifiques (galerie / tags) */ --color-gallery-text: #555; --checkbox-cross-color: #444; /* Ombres */ --shadow-soft: 0 3px 10px rgba(0,0,0,0.08); --shadow-pop: 0 4px 16px rgba(0,0,0,0.18); /* Layout / dimensions */ --container-max: 1200px; /* Échelle typo */ --fs-base: 1rem; --fs-small: 0.85rem; /* Transitions */ --transition-theme: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease; /* Focus */ --focus-outline: 2px solid #000; /* Indiquer au navigateur le mode de rendu par défaut */ color-scheme: light; --chip-bg: #ececec; /* plus foncé que #e0e0e0 très léger */ --chip-bg-hover: #e2e2e2; } /* ---------- Thème sombre (activé avec .dark sur ) ---------- */ :root.dark { --color-bg: #181a1b; --color-bg-stripe: #202324; --color-surface: #232627; --color-surface-alt: #303436; --color-surface-alt-hover: #3b4042; --color-border: #383d3f; --color-border-soft: #404648; --color-border-strong: #50575a; --color-text: #e6e6e6; --color-text-soft: #c8c8c8; --color-text-faint: #9a9f9f; --color-link: #e4e4e4; --color-link-hover: #ffffff; --color-accent: #e6e6e6; --color-accent-contrast: #181a1b; --color-gallery-text: #bbb; --checkbox-cross-color: #e6e6e6; --shadow-soft: 0 3px 10px rgba(0,0,0,0.55); --shadow-pop: 0 6px 20px rgba(0,0,0,0.6); --focus-outline: 2px solid #fff; color-scheme: dark; --chip-bg: #2f3233; --chip-bg-hover: #3a3e40; } /* ---------- Préférence OS (uniquement si pas de choix utilisateur enregistré) ---------- */ @media (prefers-color-scheme: dark) { :root:not(.light):not(.dark) { color-scheme: dark; } } @media (prefers-color-scheme: light) { :root:not(.light):not(.dark) { color-scheme: light; } } /* Polices d'accessibilité */ /* Polices OpenDyslexic (auto-hébergées) */ @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Bold.otf') format('opentype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-Italic.otf') format('opentype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'OpenDyslexic'; src: url('/assets/fonts/OpenDyslexic-BoldItalic.otf') format('opentype'); font-weight: bold; font-style: italic; } /* Polices Lexend (via Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=Lexend&display=swap'); /* Classes pour changement de police */ #article-content.font-default { font-family: Courier, monospace; } #article-content.font-opendyslexic { font-family: 'OpenDyslexic', Arial, sans-serif; } #article-content.font-lexend { font-family: 'Lexend', Arial, sans-serif; } /* Variable taille du texte */ :root { --font-size: 16px; } body { font-size: var(--font-size); line-height: 1.6; } /* Style Bionic Reading */ strong { font-weight: bold; } /* Ligne horizontale pour Bionic Reading */ .bionic-reading-label { display: flex; align-items: center; gap: 8px; /* espace entre la case et le texte */ flex-wrap: nowrap; /* empêche la casse */ overflow: hidden; text-overflow: ellipsis; /* coupe avec "..." si trop long */ } /* ========================================= Reset léger & bases ========================================= */ * { box-sizing: border-box; } html, body { margin:0; padding:0; height:100%; min-height: 100vh; } body { font: var(--fs-base)/1.55 var(--font-body); color: var(--color-text); -webkit-font-smoothing: antialiased; margin: 0; /* Fond rayé (clair ↔ sombre via variables) */ background: repeating-linear-gradient( 45deg, var(--color-bg-stripe), var(--color-bg-stripe) 10px, var(--color-bg) 10px, var(--color-bg) 20px ); background-color: var(--color-bg); transition: var(--transition-theme); } /* Liens */ a { color: var(--color-link); text-decoration: none; transition: color .25s; } a:hover, a:focus-visible { color: var(--color-link-hover); text-decoration: underline; } a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; } /* Titres & paragraphes */ h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 700; line-height: 1.2; margin: 0 0 .6em; color: var(--color-text); transition: var(--transition-theme); } p { margin: 0 0 1em; } /* Images */ img { max-width: 100%; height: auto; display: block; } /* ========================================= Composants globaux (fond, bordures, transitions) ========================================= */ /* Sections de contenu */ .content, .sidebar, .center-box, .article-card, .gallery-item, .card { box-shadow: none; border: none; } /* Navbar */ .navbar { background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border); transition: var(--transition-theme); } .navbar a { color: var(--color-link); transition: color .25s, background-color .25s; text-decoration: none; } /* Lien normal au survol */ .navbar a:hover, .navbar a:focus-visible { background: var(--color-surface-alt-hover); color: var(--color-link-hover); } /* Lien actif (tout en bas pour questions de priorité)*/ /* Boutons / éléments interactifs (génériques) */ button, .btn { font: inherit; background: var(--color-surface-alt); color: var(--color-text); border: 1px solid var(--color-border); padding: .45rem .85rem; cursor: pointer; border-radius: 4px; transition: var(--transition-theme), transform .15s; } button:hover, .btn:hover { background: var(--color-surface-alt-hover); color: var(--color-link-hover); } button:active, .btn:active { transform: translateY(1px); } button:focus-visible, .btn:focus-visible { outline: var(--focus-outline); outline-offset: 2px; } /* Footer */ footer, .site-footer { background: rgba(255,255,255,0.55); color: var(--color-text-soft); border-top: 1px solid var(--color-border); transition: var(--transition-theme); } :root.dark footer, :root.dark .site-footer { background: rgba(35,38,39,0.55); } /* Pastilles / variantes (optionnel) */ .tag, .badge { display: inline-block; padding: .25rem .5rem; font-size: var(--fs-small); background: var(--color-surface-alt); border: 1px solid var(--color-border-soft); border-radius: 3px; color: var(--color-text); transition: var(--transition-theme); } /* ========================================= Accessibilité / utilitaires ========================================= */ .sr-only, .visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Désactiver animations si réduction préférée */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* ========================================= Focus général (fallback) ========================================= */ :focus-visible { outline: var(--focus-outline); outline-offset: 2px; } /* ========================================= Transitions appliquées à des blocs clés (si certains doublons persistent) ========================================= */ body, .navbar, .site-footer, .content, .sidebar, .center-box, .card, .gallery-item, .button-group a { transition: var(--transition-theme); } /* Force un espace après chaque élément de liste */ /* Remarque : Un espace de 0.5 correspond à peu près à 6-8 px pour des polices normales */ li { margin-bottom: 0.5em; } /* Apparence des liens dans le container */ .container a{ color: var(--color-link-container); font-weight: normal; text-decoration: none; transition: color 0.2s ease, text-decoration 0.2s ease; } .container a:hover, .container a:focus-visible { color: var(--color-link-container-hover); text-decoration: underline; } .container a.active, .container a[aria-current="page"] { font-weight: bold; color: var(--color-link-hover); } /* Lien actif */ .navbar li a.active, .navbar li a[aria-current="page"] { font-weight: bold; background: none; color: var(--color-link-hover); } /* Lien actif au survol */ .navbar li a.active:hover, .navbar li a[aria-current="page"]:hover { background: none; color: var(--color-link-hover); } .site-header { background-image: var(--header-image); background-size: cover; height: 250px; background-position: center; flex-shrink: 0; } .museum { --header-image: url("/assets/images/shared/adriaen-brouwer-1630-1640-merry-peasants-inn.webp"); } .search { --header-image: url("https://i.pinimg.com/736x/4f/b5/4b/4fb54be2c217960d80d4f762daf18b10.jpg"); } /* Affiche le **bas** de l’image pour le musée */ body.museum .site-header { background-position: 50% 90%; } .curator { --header-image: url("/assets/images/shared/susan-wilkinson-pink-green-fluid-wallpaper.webp"); } /* Affiche le **haut** de l’image pour curator */ body.curator .site-header { background-position: 50% 80%; } /* exceptions : pages sans bannière */ body.index { --header-image: none; } .rounded { border-radius: 0; } .coming-soon { pointer-events: none; opacity: 0.5; text-decoration: none; } /* Style personnalisé pour la case à cocher */ /* Case à cocher */ .accessibility-settings input[type="checkbox"] { -webkit-appearance: none; appearance: none; margin: 2px; background-color: var(--color-surface); border: 2px solid var(--color-border-soft); width: 18px; height: 18px; border-radius: 4px; cursor: pointer; display: flex; /* Permet de centrer le contenu */ align-items: center; justify-content: center; position: relative; } /* État cochée - fond inchangé */ .accessibility-settings input[type="checkbox"]:checked { background-color: var(--color-surface); } /* Croix centrée avec flex */ .accessibility-settings input[type="checkbox"]:checked::after { content: ""; display: block; width: 10px; /* longueur du trait */ height: 10px; /* hauteur globale */ background: none; position: relative; } .accessibility-settings input[type="checkbox"]:checked::after { background: none; /* pas de fond */ } /* Deux traits formant la croix */ .accessibility-settings input[type="checkbox"]:checked::before, .accessibility-settings input[type="checkbox"]:checked::after { content: ""; position: absolute; width: 10px; height: 2px; background-color: var(--checkbox-cross-color); } .accessibility-settings input[type="checkbox"]:checked::before { transform: rotate(45deg); } .accessibility-settings input[type="checkbox"]:checked::after { transform: rotate(-45deg); } /* Focus sans effet intrusif */ .accessibility-settings input[type="checkbox"]:focus { outline: none; box-shadow: none; } .accessibility-settings input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } a.tag { color: var(--color-text); /* même couleur que les tags */ text-decoration: none; /* pas de souligné */ } a.tag:hover { background: var(--chip-bg-hover); /* survol comme les tags */ color: var(--color-text); /* ne redevient pas bleu */ }