/** * assets/reglages.css — Ce que la page « Réglages » commande. * * =========================================================================== * LE PRINCIPE * =========================================================================== * Rien ici ne s'applique tout seul. Chaque règle attend un attribut posé sur * la balise par assets/reglages.js, lequel lit le choix du lecteur dans * la mémoire de son navigateur, AVANT que la page ne paraisse : * * * * Un lecteur qui n'a rien réglé ne porte aucun attribut, et le site est * exactement celui d'avant : aucune de ces règles ne s'applique. C'est la * règle d'or de ce fichier, et elle vaut d'être dite, car elle garantit qu'un * navigateur sans JavaScript, ou une mémoire vidée, ne dégradent rien. * * LE NUIT N'EST PAS ICI. Il vit dans assets/nuit.css, qui est un tout autre * ouvrage : deux cent vingt couleurs, et son propre mode d'emploi en tête. * * =========================================================================== * POURQUOI LA MÉMOIRE DU NAVIGATEUR, ET NON UN COMPTE OU UN COOKIE * =========================================================================== * Trois raisons, dans cet ordre. Un réglage d'affichage appartient à l'oeil et * à l'écran, non à la personne : le même Frère veut un grand corps sur son * téléphone et un petit sur son écran de bureau. Ensuite, la doctrine du site * est de n'ajouter aucun cookie, arrêtée le 2 août 2026. Enfin, rien n'est * envoyé au serveur, donc rien n'est à protéger, à consigner ni à justifier. */ /* ═══════════════════════════════════════════════════════════════════════════ 1. LA TAILLE DES CARACTÈRES ═══════════════════════════════════════════════════════════════════════════ Le site n'écrit AUCUNE taille en pixels : tout est en rem, c'est-à-dire en multiples de la taille de base. Une seule ligne suffit donc à agrandir la page entière, marges et gouttières comprises, sans qu'aucune mise en page ne se disloque. C'est le bénéfice d'un choix fait bien avant qu'on ait songé à ce réglage, et il faut veiller à ne jamais l'entamer. assets/style.css pose 112,5 % (soit 18 pixels). Les cinq crans vont de 100 % à 160 %, ce dernier menant à près de 26 pixels : de quoi lire sans lunettes. */ html[data-taille="1"] { font-size: 100%; } html[data-taille="2"] { font-size: 112.5%; } /* le réglage d'origine */ html[data-taille="3"] { font-size: 125%; } html[data-taille="4"] { font-size: 140%; } html[data-taille="5"] { font-size: 160%; } /* ═══════════════════════════════════════════════════════════════════════════ 2. LA COMPACITÉ ═══════════════════════════════════════════════════════════════════════════ Les cent dix-sept interlignes des feuilles de lecture ont été récrits en calc( * var(--compacite, 1)). Le facteur vaut un par défaut : sans réglage, l'interligne est au point près celui d'avant. Un facteur, et non une valeur fixe : un titre serré à 1,1 et un paragraphe aéré à 1,7 ne doivent pas se retrouver au même interligne, ce qui serait le cas si l'on imposait un nombre. Chacun garde sa proportion, et c'est l'ensemble qui respire ou se resserre. */ html[data-compacite="serre"] { --compacite: .88; } html[data-compacite="aere"] { --compacite: 1.16; } /* Le mode serré resserre aussi l'espace entre les paragraphes : l'interligne seul ne suffit pas à faire tenir davantage de texte sur un écran de téléphone, qui est le cas d'usage de ce cran. */ html[data-compacite="serre"] main :is(p, li) { margin-block: .45em; } html[data-compacite="aere"] main :is(p, li) { margin-block: 1.05em; } /* ═══════════════════════════════════════════════════════════════════════════ 3. LA LARGEUR DE LA COLONNE ═══════════════════════════════════════════════════════════════════════════ La typographie classique tient qu'une ligne se lit mal au-delà de quatre- vingts caractères : l'oeil, arrivé au bout, ne retrouve plus le début de la suivante. Sur un grand écran, resserrer la colonne est le réglage qui change le plus le confort, et personne n'y pense. --largeur-max est la variable qui règle déjà les conteneurs du site : il a suffi de la redéfinir. */ html[data-largeur="etroite"] { --largeur-max: 54rem; } html[data-largeur="large"] { --largeur-max: 84rem; } /* ═══════════════════════════════════════════════════════════════════════════ 4. LA POLICE DE LECTURE ═══════════════════════════════════════════════════════════════════════════ L'EB Garamond est la police du site, et elle lui va. Mais les empattements fatiguent certains lecteurs, et gênent franchement les lecteurs dyslexiques. Le cran « sans empattements » bascule sur la police du système : celle que le lecteur lit toute la journée, déjà installée, et qui ne coûte donc aucun téléchargement. Seule la variable change : tout le site l'emploie, et rien n'est à réécrire ailleurs. La police hébraïque de secours demeure en second, faute de quoi les quelques mots en hébreu du Thuileur paraîtraient en carrés vides. */ html[data-police="baton"] { --police-principale: system-ui, 'Frank Ruhl Libre', -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } /* ═══════════════════════════════════════════════════════════════════════════ 5. LE CONTRASTE RENFORCÉ ═══════════════════════════════════════════════════════════════════════════ Pour l'écran de téléphone en plein soleil, et pour les vues qui baissent. L'encre va au noir franc, l'encre douce cesse d'être douce, les filets se marquent, et les ombres portées disparaissent : une ombre est un contraste flou, c'est-à-dire le contraire de ce qu'on demande ici. De nuit, le même réglage tire au blanc plutôt qu'au noir. Le sélecteur est donc écrit deux fois, et l'ordre compte : la variante nocturne vient après, sans quoi elle serait effacée par la variante diurne, à spécificité égale. */ html[data-contraste="fort"] { --couleur-texte : #000000; --couleur-texte-doux: #303030; --couleur-bordure : #8d8878; --ombre : none; } html[data-theme="nuit"][data-contraste="fort"] { --couleur-texte : #ffffff; --couleur-texte-doux: #d6d3cc; --couleur-bordure : #6f7686; --ombre : none; } /* Les liens du corps de texte se soulignent : la couleur seule ne suffit pas à les distinguer, et c'est précisément ce que demande le critère 1.4.1 des règles du W3C. Les onglets, les boutons et les capsules en sont exclus : ce sont des commandes, non des liens de lecture, et les souligner ferait un tapis de traits. */ html[data-contraste="fort"] main :is(p, li, td, dd) a { text-decoration : underline; text-underline-offset: .15em; } /* ═══════════════════════════════════════════════════════════════════════════ 6. MOINS D'ANIMATIONS ═══════════════════════════════════════════════════════════════════════════ Fondus, glissements et bascules sont ramenés à une durée imperceptible plutôt que supprimés : une animation de durée nulle peut empêcher le navigateur d'émettre l'événement de fin, dont dépendent parfois des scripts. Un millième de milliseconde passe inaperçu et laisse la mécanique intacte. !important est ici légitime, et c'est l'un des rares endroits où il l'est : il s'agit d'annuler des durées écrites dans une centaine de règles dont on ne connaît pas la spécificité. */ html[data-animations="non"] *, html[data-animations="non"] *::before, html[data-animations="non"] *::after { animation-duration : .001ms !important; animation-iteration-count: 1 !important; transition-duration : .001ms !important; scroll-behavior : auto !important; } /* L'EXCEPTION DES INDICATEURS DE CHARGEMENT. Le triangle de « Chargement… » et le disque de la visionneuse des blasons continuent de tourner sous ce réglage : figés, ils diraient « le site est en panne » au lieu de « la page arrive » (raisonnement complet dans assets/style.css, au bloc du delta). La règle ci-dessus les arrêtait malgré tout, faute d'exception écrite ici : un indicateur paraissait, immobile. Ce sélecteur, plus précis que le joker, leur rend leur durée et leur boucle. Les durées sont celles de leurs feuilles (style.css, dashboard.css, histoire.css). */ html[data-animations="non"] .voile-delta-arc, html[data-animations="non"] .voile-feu { animation-duration : .8s !important; animation-iteration-count: infinite !important; } html[data-animations="non"] .disque-chargement { animation-duration : .9s !important; animation-iteration-count: infinite !important; } /* ═══════════════════════════════════════════════════════════════════════════ 7. LA PAGE DES RÉGLAGES ELLE-MÊME ═══════════════════════════════════════════════════════════════════════════ Ces règles ne servent qu'à reglages.php. Elles vivent ici plutôt que dans la page afin que la page demeure lisible : elle n'est déjà qu'une suite de commandes, son intérêt est dans ce qu'elle règle, non dans son propre habillage. */ .reglages-page { max-width: var(--largeur-max, 68.75rem); margin : 2.5rem auto 4rem; padding : 0 1.5rem; } .reglages-page h2 { font-family: var(--police-principale, Garamond, Georgia, serif); font-weight: normal; font-size : 1.85rem; color : var(--couleur-primaire, #2c3e6b); margin : 0 0 .4rem; } .reglages-intro { font-family: var(--police-interface, system-ui, sans-serif); font-size : .92rem; line-height: calc(1.6 * var(--compacite, 1)); color : var(--couleur-texte-doux, #5a5a5a); margin : 0 0 2rem; max-width : 62ch; } .reglage { margin : 0 0 1.3rem; padding : 1.2rem 1.4rem; border : 1px solid var(--couleur-bordure, #d4c9a8); border-radius: var(--rayon, 6px); background : var(--couleur-surface, #fff); box-shadow : var(--ombre, 0 2px 8px rgba(0,0,0,.08)); } .reglage h3 { margin : 0 0 .2rem; font-family: var(--police-principale, Garamond, Georgia, serif); font-weight: normal; font-size : 1.3rem; color : var(--couleur-primaire, #2c3e6b); } .reglage p { margin : 0 0 .9rem; font-family: var(--police-interface, system-ui, sans-serif); font-size : .86rem; line-height: calc(1.55 * var(--compacite, 1)); color : var(--couleur-texte-doux, #5a5a5a); max-width : 62ch; } /* La rangée de choix. Ce sont de vrais boutons radio, cachés sous leur étiquette : le clavier, les lecteurs d'écran et la touche de tabulation fonctionnent alors sans qu'on ait rien à écrire, là où une rangée de
cliquables aurait demandé un script entier pour les imiter mal. */ .choix { display : flex; flex-wrap: wrap; gap : .5rem; } .choix input { position: absolute; opacity : 0; width : 1px; height : 1px; } .choix label { display : inline-flex; align-items : center; gap : .4rem; padding : .45rem .9rem; border : 1px solid var(--couleur-bordure, #d4c9a8); border-radius : 999px; background : var(--couleur-fond, #f5f3ee); font-family : var(--police-interface, system-ui, sans-serif); font-size : .86rem; color : var(--couleur-texte, #1a1a1a); cursor : pointer; transition : border-color .15s, background .15s; } .choix label:hover { border-color: var(--couleur-or, #7d6428); } .choix input:checked + label { border-color: var(--couleur-primaire, #2c3e6b); background : var(--couleur-primaire, #2c3e6b); color : #fff; font-weight : 600; } /* De nuit, le fond des boutons est le bleu clair de l'encre : l'écriture blanche y serait illisible, elle passe donc à l'ardoise. */ html[data-theme="nuit"] .choix input:checked + label { color: #10141b; } .choix input:focus-visible + label { outline : 2px solid var(--couleur-or, #7d6428); outline-offset: 2px; } /* L'échantillon : un texte véritable, qui subit tous les réglages en même temps. Un réglage de lecture qui ne se voit pas sur du texte ne se règle pas, il se devine. */ .echantillon { margin : 2rem 0 1.3rem; padding : 1.4rem 1.5rem; border : 1px dashed var(--couleur-bordure, #d4c9a8); border-radius: var(--rayon, 6px); background : var(--couleur-fond, #f5f3ee); } .echantillon h4 { margin : 0 0 .6rem; font-family: var(--police-principale, Garamond, Georgia, serif); font-weight: normal; font-size : 1.25rem; color : var(--couleur-primaire, #2c3e6b); } .echantillon p { margin : 0 0 .8rem; font-family: var(--police-principale, Garamond, Georgia, serif); font-size : 1rem; line-height: calc(1.7 * var(--compacite, 1)); color : var(--couleur-texte, #1a1a1a); } .echantillon p:last-child { margin-bottom: 0; } .reglages-pied { display : flex; flex-wrap : wrap; gap : .8rem; align-items: center; margin : 2rem 0 0; } .bouton-remise { padding : .55rem 1.1rem; border : 1px solid var(--couleur-bordure, #d4c9a8); border-radius : var(--rayon, 6px); background : var(--couleur-surface, #fff); font-family : var(--police-interface, system-ui, sans-serif); font-size : .88rem; color : var(--couleur-primaire, #2c3e6b); cursor : pointer; } .bouton-remise:hover { border-color: var(--couleur-or, #7d6428); } .reglages-note { font-family: var(--police-interface, system-ui, sans-serif); font-size : .82rem; font-style : italic; color : var(--couleur-texte-doux, #5a5a5a); margin : 0; } /* Le mot qui paraît une seconde quand un réglage vient d'être pris. Il ne remplace pas l'effet, qui se voit ; il confirme que le choix est RETENU, ce qui, lui, ne se voit pas. */ .reglages-avis { font-family: var(--police-interface, system-ui, sans-serif); font-size : .82rem; color : var(--couleur-or, #7d6428); opacity : 0; transition : opacity .25s; } .reglages-avis.parait { opacity: 1; } /* Sans JavaScript, aucun de ces réglages ne peut être ni pris ni retenu : on le dit franchement plutôt que de laisser cliquer sur des boutons inertes. */ .reglages-sans-js { margin : 0 0 1.6rem; padding : .9rem 1.1rem; border : 1px solid var(--couleur-erreur-bordure, #c0392b); border-radius: var(--rayon, 6px); background : var(--couleur-erreur-fond, #fdf0f0); font-family : var(--police-interface, system-ui, sans-serif); font-size : .88rem; color : var(--couleur-erreur-texte, #922b21); } html.js .reglages-sans-js { display: none; }