/* ============================================================ CUMDECI UI — Typographie, Components, Accessibilité, Récits VERSION FINALE — UTILISE UNIQUEMENT LES TOKENS --cd-* ============================================================ */ /* ------------------------------------------------------------ POLICE (pilotée par data-font sur ) ------------------------------------------------------------ */ html[data-font="system"] { font-family: system-ui, sans-serif; } html[data-font="inter"] { font-family: "Inter", sans-serif; } html[data-font="roboto"] { font-family: "Roboto", sans-serif; } html[data-font="open-sans"] { font-family: "Open Sans", sans-serif; } html[data-font="merriweather"]{ font-family: "Merriweather", serif; } html[data-font="source-serif-4"] { font-family: "Source Serif 4", serif; } html[data-font="fira-code"] { font-family: "Fira Code", monospace; } /* ------------------------------------------------------------ TAILLE DU TEXTE ------------------------------------------------------------ */ html { font-size: var(--fs, 100%); } /* ------------------------------------------------------------ INTERLIGNAGE ------------------------------------------------------------ */ html { line-height: var(--line-height-factor, 1.4); } /* ------------------------------------------------------------ ACCESSIBILITÉ (UI VISUELLE) ------------------------------------------------------------ */ /* Dyslexie : léger espacement lettres / mots */ body[data-dyslexia="1"] { letter-spacing: .04em; word-spacing: .08em; } /* Boutons agrandis */ body[data-bigbuttons="1"] button { padding: 14px 20px !important; font-size: 1.1rem !important; } /* Daltonisme : désaturation + contraste */ body[data-daltonism="1"] #ZC { filter: saturate(0) contrast(1.15) brightness(1.03); } body[data-daltonism="1"] a { text-decoration: underline; text-underline-offset: 2px; } /* Curseur agrandi */ body[data-cursor="1"], body[data-cursor="1"] * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M6 6 L22 42 L30 34 L42 60 L50 56 L38 30 L46 26 Z' fill='rgba(0,0,0,0.25)'/%3E%3Cpath d='M4 4 L20 40 L28 32 L40 58 L48 54 L36 28 L44 24 Z' fill='%23ffffff' stroke='%23111' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 0 0, auto !important; } h1, h2, h3 { text-align: start; /* ne pas avoir des titres justifiés */ text-justify: auto; } /* ------------------------------------------------------------ COMPOSANTS UI ------------------------------------------------------------ */ #ZH .header-title { font-size: 28px; font-weight: bold; white-space: nowrap; } /* Empêche un lien autour du logo de modifier son apparence */ #ZH .header-title a, a.header-title { text-decoration: none; color: inherit; cursor: pointer; } /* Style par défaut (fallback si aucun thème) */ a.cd-link { text-decoration: none; cursor: pointer; transition: color .20s, border-color .20s, background .20s; } /* Lettrine d’introduction des récits */ .cd-recit-intro { font-size: 1.15em; line-height: 1.65; text-align: justify; } .cd-recit-intro::first-letter { float: left; font-size: 3.2em; font-weight: 600; line-height: 0.9; padding-right: 0.15em; padding-top: 0.05em; color: var(--cd-text); /* remplacé ! */ } /* Icônes (ex : settings) */ .cd-settings-icon { cursor: pointer; } /* ============================================================ Récit (titre, sous-titre, auteur) ============================================================ */ .recit-entete { margin-bottom: 0px; padding-bottom: 15px; border-bottom: 2px solid var(--border-color); } .recit-entete .publication-info { font-size: 0.9rem; opacity: .7; margin-bottom: 5px; } .recit-entete .title { font-size: 2.6rem; margin: 5px 0 10px 0; font-weight: 700; } .recit-entete .subtitle { font-size: 1.4rem; margin: 0 0 10px 0; opacity: .85; } .recit-entete .author { font-style: normal; font-size: 1rem; opacity: .8; margin-top: 5px; } .secondary-image { margin: 30px 0; column-span: all; /* pour les layouts en colonnes */ } .secondary-image img { width: 100%; height: auto; display: block; } .secondary-caption { font-family: "Montserrat", Arial, sans-serif; font-size: 0.8rem; color: #666; padding: 10px 0; } /* ============================================================ BOUTONS — adaptation automatique au thème (clair/sombre/auto) ============================================================ */ .font-btn { background: var(--cd-btn-bg); color: var(--cd-btn-fg); border: 1px solid var(--cd-btn-border); padding: 8px 14px; border-radius: 6px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .font-btn:hover { background: var(--cd-btn-bg-hover); border-color: var(--cd-btn-border); } .font-btn.btn--ghost { background: transparent; color: var(--cd-link); border: 1px solid var(--cd-border); } .font-btn.btn--danger { background: #c0392b; color: white; border: 1px solid #922b21; } /* ============================================================ ZS — Uniformisation ABSOLUE des boutons (