/* ========================================================================== Feuille de style de Vocalise. Trois principes tiennent tout le fichier : 1. Les préférences de l'utilisateur (thème, taille, interlignage, police) sont posées par le serveur sur et pilotent des variables CSS. La page arrive donc déjà lisible, sans attendre JavaScript. 2. Tous les couples texte/fond visent au moins le niveau AAA (7:1) pour le texte courant, et le thème « contraste » va bien au-delà. 3. Rien n'est signalé par la seule couleur, et rien ne dépend du survol. ========================================================================== */ /* --- Thèmes ------------------------------------------------------------- */ :root { --fond: #ffffff; --fond-doux: #f2f5f9; --fond-carte: #ffffff; --texte: #14161a; --texte-doux: #414852; --bordure: #9aa4b2; --bordure-forte: #4a5260; --accent: #0a4d8c; --accent-texte: #ffffff; --accent-doux: #e3eefb; --danger: #9b1c1c; --danger-doux: #fdecec; --succes: #0f5132; --succes-doux: #e4f3ea; --surlignage: #ffe89a; --surlignage-texte: #14161a; --focus: #b4300a; --ombre: 0 1px 2px rgba(20, 22, 26, .12), 0 4px 12px rgba(20, 22, 26, .06); } [data-theme="sombre"] { --fond: #0e1116; --fond-doux: #161b22; --fond-carte: #161b22; --texte: #eef2f7; --texte-doux: #b8c2ce; --bordure: #4b5563; --bordure-forte: #8b95a3; --accent: #8fc2ff; --accent-texte: #06101d; --accent-doux: #17273c; --danger: #ff9a9a; --danger-doux: #2a1416; --succes: #7ee0a8; --succes-doux: #10251a; --surlignage: #4a3c00; --surlignage-texte: #fff6d0; --focus: #ffb238; --ombre: none; } [data-theme="contraste"] { --fond: #000000; --fond-doux: #000000; --fond-carte: #000000; --texte: #ffffff; --texte-doux: #ffffff; --bordure: #ffffff; --bordure-forte: #ffffff; --accent: #ffff00; --accent-texte: #000000; --accent-doux: #000000; --danger: #ff6b6b; --danger-doux: #000000; --succes: #4dff88; --succes-doux: #000000; --surlignage: #ffff00; --surlignage-texte: #000000; --focus: #00ffff; --ombre: none; } [data-theme="sepia"] { --fond: #f7f0e2; --fond-doux: #efe6d3; --fond-carte: #fbf6ec; --texte: #241d12; --texte-doux: #4d4130; --bordure: #b0a189; --bordure-forte: #6b5c45; --accent: #7a3d0c; --accent-texte: #fbf6ec; --accent-doux: #eadfc8; --danger: #8a1c1c; --danger-doux: #f5e2e2; --succes: #2f5227; --succes-doux: #e6efe0; --surlignage: #f4d58b; --surlignage-texte: #241d12; --focus: #0b4f9e; --ombre: 0 1px 2px rgba(36, 29, 18, .15); } /* --- Taille de texte et espacement -------------------------------------- */ :root { --base: 1.0625rem; --interligne: 1.65; --lettres: 0; --mots: 0; } [data-taille="1"] { --base: 0.9375rem; } [data-taille="2"] { --base: 1.0625rem; } [data-taille="3"] { --base: 1.1875rem; } [data-taille="4"] { --base: 1.375rem; } [data-taille="5"] { --base: 1.625rem; } [data-taille="6"] { --base: 2rem; } /* Valeurs alignées sur le critère WCAG 1.4.12 (espacement du texte). */ [data-espace="large"] { --interligne: 1.85; --lettres: .045em; --mots: .09em; } [data-espace="tres-large"] { --interligne: 2.1; --lettres: .12em; --mots: .18em; } [data-police="serif"] { --pile: Georgia, "Iowan Old Style", "Times New Roman", serif; } [data-police="lisible"] { --pile: "Atkinson Hyperlegible", Verdana, Tahoma, system-ui, sans-serif; } :root { --pile: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- Base --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--pile); font-size: var(--base); line-height: var(--interligne); letter-spacing: var(--lettres); word-spacing: var(--mots); } /* Un contour de focus épais, contrasté et jamais supprimé. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; border-radius: 4px; } :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; } a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: .09em; } a:hover { text-decoration-thickness: .18em; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: 1.9em; } h2 { font-size: 1.45em; margin-top: 1.6em; } h3 { font-size: 1.2em; margin-top: 1.4em; } p { margin: 0 0 1em; } img, svg { max-width: 100%; height: auto; } /* --- Utilitaires -------------------------------------------------------- */ .wrap { width: min(72ch, 100% - 2.5rem); margin-inline: auto; } .wrap-large { width: min(100ch, 100% - 2.5rem); margin-inline: auto; } /* Contenu réservé aux lecteurs d'écran (jamais display:none : il doit rester dans l'arbre d'accessibilité). */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .saut-contenu { position: absolute; left: .5rem; top: -100vh; z-index: 100; background: var(--accent); color: var(--accent-texte); padding: .9rem 1.4rem; font-weight: 700; border-radius: 0 0 8px 8px; } .saut-contenu:focus { top: 0; } .pile > * + * { margin-top: var(--pile-espace, 1rem); } .espace-s { margin-top: 1rem; } .espace-m { margin-top: 1.5rem; } .espace-l { margin-top: 2rem; } .espace-xl { margin-top: 2.5rem; } .muet { color: var(--texte-doux); } .petit { font-size: .9em; } /* --- En-tête et pied ---------------------------------------------------- */ .entete { border-bottom: 2px solid var(--bordure); background: var(--fond-doux); padding: .75rem 0; } .entete .wrap-large { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .marque { font-weight: 800; font-size: 1.25em; letter-spacing: -.01em; color: var(--texte); text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; } .marque:focus-visible { outline-offset: 6px; } .nav-principale { margin-left: auto; } .nav-principale ul { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .nav-principale a { display: inline-block; padding: .65rem .85rem; border-radius: 8px; color: var(--texte); text-decoration: none; font-weight: 600; border: 2px solid transparent; } .nav-principale a:hover { background: var(--accent-doux); text-decoration: underline; } .nav-principale a[aria-current="page"] { border-color: var(--accent); background: var(--accent-doux); color: var(--texte); } .pied { margin-top: 4rem; border-top: 2px solid var(--bordure); background: var(--fond-doux); padding: 2rem 0; font-size: .95em; } .pied ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; } /* --- Boutons et formulaires --------------------------------------------- */ /* Hauteur minimale de 48 px : cible confortable à la souris comme au doigt, et repère visuel stable pour les utilisateurs en forte loupe. */ .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .7rem 1.25rem; font: inherit; font-weight: 700; line-height: 1.2; border-radius: 10px; border: 2px solid var(--accent); background: var(--accent); color: var(--accent-texte); text-decoration: none; cursor: pointer; } .bouton:hover { filter: brightness(1.08); text-decoration: none; } .bouton[disabled], .bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; } .bouton-secondaire { background: var(--fond-carte); color: var(--texte); border-color: var(--bordure-forte); } .bouton-secondaire:hover { background: var(--accent-doux); } .bouton-danger { background: var(--fond-carte); color: var(--danger); border-color: var(--danger); } .bouton-grand { font-size: 1.1em; min-height: 56px; padding: .9rem 1.7rem; } .bouton-lien { background: none; border: none; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; padding: .5rem; min-height: 44px; } label, .etiquette { display: block; font-weight: 700; margin-bottom: .35rem; } .aide-champ { color: var(--texte-doux); font-size: .95em; margin: 0 0 .5rem; } input[type="text"], input[type="url"], input[type="email"], input[type="search"], textarea, select { width: 100%; min-height: 48px; padding: .7rem .8rem; font: inherit; color: var(--texte); background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: 8px; } textarea { min-height: 12rem; resize: vertical; line-height: 1.6; } input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); border-width: 3px; } fieldset { border: 2px solid var(--bordure); border-radius: 10px; padding: 1rem 1.2rem 1.2rem; margin: 0 0 1.5rem; } legend { font-weight: 800; padding: 0 .4rem; } .champ-radio, .champ-case { display: flex; align-items: flex-start; gap: .6rem; min-height: 44px; } .champ-radio label, .champ-case label { font-weight: 500; margin: 0; } input[type="radio"], input[type="checkbox"] { width: 1.4rem; height: 1.4rem; margin-top: .2rem; accent-color: var(--accent); flex: none; } /* --- Messages ----------------------------------------------------------- */ .message { border: 2px solid; border-radius: 10px; padding: 1rem 1.2rem; margin: 0 0 1.5rem; } .message h2, .message p:last-child { margin-bottom: 0; } .message-erreur { border-color: var(--danger); background: var(--danger-doux); color: var(--texte); } .message-succes { border-color: var(--succes); background: var(--succes-doux); color: var(--texte); } .message-info { border-color: var(--bordure-forte); background: var(--fond-doux); } .message-erreur::before { content: "Erreur : "; font-weight: 800; } .carte { background: var(--fond-carte); border: 2px solid var(--bordure); border-radius: 14px; padding: 1.5rem; box-shadow: var(--ombre); } /* --- Page d'accueil ------------------------------------------------------ */ .accroche { padding: 2.5rem 0 1rem; } .accroche h1 { font-size: clamp(2rem, 5vw, 2.9rem); } .accroche .sous-titre { font-size: 1.2em; color: var(--texte-doux); max-width: 60ch; } .onglets { display: flex; gap: .5rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .onglets .bouton-secondaire[aria-pressed="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); } .arguments { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); } .arguments h3 { margin-top: 0; } /* --- Page de lecture ----------------------------------------------------- */ .lecture-entete { padding: 1.5rem 0 .5rem; } .lecture-meta { color: var(--texte-doux); font-size: .95em; } .lecture-meta > * + *::before { content: " · "; } .texte-lecture { font-size: 1.08em; margin-top: 1.5rem; } .texte-lecture h2 { margin-top: 2em; } .texte-lecture blockquote { margin: 1.5em 0; padding: .5em 0 .5em 1.2em; border-left: 5px solid var(--bordure-forte); font-style: italic; } .texte-lecture ul { padding-left: 1.4em; } .texte-lecture li { margin-bottom: .5em; } /* Le surlignage sert la basse vision et la dyslexie ; il n'est pas annoncé aux lecteurs d'écran, pour qui l'audio est déjà la lecture. */ .phrase { border-radius: 4px; padding: .05em 0; } [data-surlignage="phrase"] .phrase[data-active="1"], [data-surlignage="mot"] .phrase[data-active="1"] { background: var(--surlignage); color: var(--surlignage-texte); box-shadow: 0 0 0 .18em var(--surlignage); } [data-surlignage="aucun"] .phrase[data-active="1"] { background: none; text-decoration: underline; text-decoration-thickness: .12em; } .phrase:hover { text-decoration: underline dotted; cursor: pointer; } /* --- Lecteur audio ------------------------------------------------------- */ .lecteur { position: sticky; bottom: 0; z-index: 20; background: var(--fond-carte); border: 2px solid var(--bordure-forte); border-radius: 14px 14px 0 0; box-shadow: var(--ombre); padding: 1rem 1.25rem 1.25rem; margin-top: 2rem; } .lecteur-titre { font-weight: 800; margin: 0 0 .5rem; font-size: 1em; } .lecteur-commandes { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .lecteur-commandes .bouton { min-width: 48px; padding: .7rem .9rem; } .bouton-principal { min-width: 9rem !important; } .barre-temps { display: flex; align-items: center; gap: .75rem; margin: .85rem 0 .5rem; } .barre-temps output { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 5.5ch; } input[type="range"] { flex: 1; height: 48px; accent-color: var(--accent); background: none; border: none; padding: 0; } .reglages-rapides { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; } .reglages-rapides label { display: inline; font-weight: 600; margin: 0; } .reglages-rapides select { width: auto; min-width: 8rem; } /* --- Progression de la synthèse ------------------------------------------ */ .progression { margin: 1.5rem 0; } .progression-barre { height: 1.5rem; border: 2px solid var(--bordure-forte); border-radius: 999px; background: var(--fond-doux); overflow: hidden; } /* La largeur passe par un attribut de données : la politique de sécurité de contenu interdit les attributs style, et la barre doit se remplir sans JS. */ .progression-valeur { height: 100%; background: var(--accent); width: 0; transition: width .4s ease; } .progression-valeur[data-remplissage="0"] { width: 0%; } .progression-valeur[data-remplissage="5"] { width: 5%; } .progression-valeur[data-remplissage="10"] { width: 10%; } .progression-valeur[data-remplissage="15"] { width: 15%; } .progression-valeur[data-remplissage="20"] { width: 20%; } .progression-valeur[data-remplissage="25"] { width: 25%; } .progression-valeur[data-remplissage="30"] { width: 30%; } .progression-valeur[data-remplissage="35"] { width: 35%; } .progression-valeur[data-remplissage="40"] { width: 40%; } .progression-valeur[data-remplissage="45"] { width: 45%; } .progression-valeur[data-remplissage="50"] { width: 50%; } .progression-valeur[data-remplissage="55"] { width: 55%; } .progression-valeur[data-remplissage="60"] { width: 60%; } .progression-valeur[data-remplissage="65"] { width: 65%; } .progression-valeur[data-remplissage="70"] { width: 70%; } .progression-valeur[data-remplissage="75"] { width: 75%; } .progression-valeur[data-remplissage="80"] { width: 80%; } .progression-valeur[data-remplissage="85"] { width: 85%; } .progression-valeur[data-remplissage="90"] { width: 90%; } .progression-valeur[data-remplissage="95"] { width: 95%; } .progression-valeur[data-remplissage="100"] { width: 100%; } .progression p { margin: .6rem 0 0; font-weight: 600; } /* --- Listes de documents -------------------------------------------------- */ .liste-documents { list-style: none; padding: 0; display: grid; gap: 1rem; } .liste-documents li { border: 2px solid var(--bordure); border-radius: 12px; padding: 1rem 1.25rem; background: var(--fond-carte); } .liste-documents h2 { font-size: 1.15em; margin: 0 0 .25rem; } /* --- Tableau des tarifs --------------------------------------------------- */ .tarifs { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); align-items: start; } .tarifs .carte h2 { margin-top: 0; } .prix { font-size: 2em; font-weight: 800; } .tarifs ul { padding-left: 1.3em; } .tarifs li { margin-bottom: .5em; } /* --- Raccourcis clavier --------------------------------------------------- */ kbd { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; border: 2px solid var(--bordure-forte); border-bottom-width: 3px; border-radius: 6px; padding: .1em .45em; background: var(--fond-doux); } .table-raccourcis { width: 100%; border-collapse: collapse; } .table-raccourcis th, .table-raccourcis td { text-align: left; padding: .7rem .5rem; border-bottom: 2px solid var(--bordure); } /* --- Page d'erreur autonome ---------------------------------------------- */ .page-error { display: flex; align-items: center; min-height: 100vh; } .error-code { font-weight: 800; color: var(--texte-doux); margin: 0; } /* --- Impression ----------------------------------------------------------- */ @media print { .entete, .pied, .lecteur, .saut-contenu { display: none; } body { background: #fff; color: #000; } } /* --- Contenu éditorial --------------------------------------------------- */ /* Les guides sont de la prose longue : mesure de ligne resserrée et respiration plus généreuse que dans le reste de l'interface. */ .prose { max-width: 68ch; } .prose h2 { margin-top: 2.2em; } .prose h3 { margin-top: 1.8em; } .prose ul, .prose ol { padding-left: 1.4em; } .prose li { margin-bottom: .5em; } .prose li > p { margin-bottom: .4em; } .prose blockquote { margin: 1.5em 0; padding: .4em 0 .4em 1.2em; border-left: 5px solid var(--bordure-forte); font-style: italic; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .prose th, .prose td { text-align: left; padding: .7rem .6rem; border-bottom: 2px solid var(--bordure); } .prose th { font-weight: 800; } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--fond-doux); border: 1px solid var(--bordure); border-radius: 5px; padding: .1em .35em; } .prose hr { border: none; border-top: 2px solid var(--bordure); margin: 2.5em 0; } .fil-ariane { margin: 1.25rem 0 .5rem; font-size: .95em; } .fil-ariane ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; } .fil-ariane li + li::before { content: "› "; color: var(--texte-doux); } .fil-ariane [aria-current="page"] { color: var(--texte-doux); } .attribution { margin: 0; } .attribution dt { font-weight: 800; margin-top: .8rem; } .attribution dd { margin: 0 0 .2rem; }