/* ========================================================================= « Clarté » — l'apparence de l'ancien site, sur le balisage d'aujourd'hui. Chargée APRÈS style.css (et instrument.css) quand config.local.php porte 'apparence' => 'clarte' ; sinon jamais émise, et le site garde l'encre et la patine. Elle ne fait que surcharger : aucune règle de style.css n'est retirée, aucun gabarit ne change. Retirer la clé, c'est retrouver l'apparence d'avant au rechargement suivant. Ce qui faisait la clarté de l'ancien site (Bootstrap 3, presque sans retouche) : du blanc, un texte presque noir, une seule police sans empattement, un seul accent — le bleu des liens et des boutons —, une barre sombre en tête, des filets gris fins là où il fallait séparer, et rien de plus. Le texte de loi garde toutefois un corps de lecture (17 px) : les 14 px de l'ancien site fatiguaient sur un article entier. ========================================================================= */ :root { --encre: #222222; --papier: #FFFFFF; --patine: #1F5FA6; /* l'accent unique : liens, version courante */ --trait: #D6D6D6; --sourdine: #666666; --fond-zone: #F5F5F5; --fond-champ: #FFFFFF; /* La coordination de 1994 ne se distingue plus par une seconde couleur, mais par un gris plus soutenu : un seul accent sur toute la page. */ --bronze: #555555; --police-titrage: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --police-lecture: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; --bandeau: #3D4247; /* gris foncé plutôt que noir : présent sans peser */ --bouton: #2B6CB0; --bouton-survol: #1F4F85; --ajout-fond: #DFF0D8; --ajout-trait: #3C763D; --retrait-fond: #F2DEDE; --retrait-texte: #A94442; --avert-fond: #FCF8E3; --avert-trait: #FAEBCC; --avert-texte: #8A6D3B; --surligne: #FCF3B0; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --encre: #E6E6E6; --papier: #1B1B1B; --patine: #8AB8EE; --trait: #3C3C3C; --sourdine: #A0A0A0; --fond-zone: #232323; --fond-champ: #121212; --bronze: #C8C8C8; --bandeau: #2E3236; --bouton: #2F6DB3; --bouton-survol: #3D82CF; --ajout-fond: #1F3A24; --ajout-trait: #7CC487; --retrait-fond: #3F2222; --retrait-texte: #E59A98; --avert-fond: #332C17; --avert-trait: #4A3F1F; --avert-texte: #E2C98C; --surligne: #5A4E12; } } :root[data-theme="dark"] { --encre: #E6E6E6; --papier: #1B1B1B; --patine: #8AB8EE; --trait: #3C3C3C; --sourdine: #A0A0A0; --fond-zone: #232323; --fond-champ: #121212; --bronze: #C8C8C8; --bandeau: #2E3236; --bouton: #2F6DB3; --bouton-survol: #3D82CF; --ajout-fond: #1F3A24; --ajout-trait: #7CC487; --retrait-fond: #3F2222; --retrait-texte: #E59A98; --avert-fond: #332C17; --avert-trait: #4A3F1F; --avert-texte: #E2C98C; --surligne: #5A4E12; } /* ------------------------------------------------------------------------- Base ------------------------------------------------------------------------- */ body { font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: auto; } a { text-decoration: underline; text-underline-offset: 0.12em; } /* Le texte justifié, comme dans un code imprimé. La césure (hyphens, qui suit la langue de ) évite les lézardes entre les mots qu'une justification sans coupure ouvre dans une colonne de 65 caractères. Les lignes de service — date, provenance, mentions — restent au fer à gauche : courtes, elles s'étireraient d'un bord à l'autre. */ main p, .comparaison p { /* Toute la largeur de la zone centrale, comme l'ancien site : la colonne de 65 caractères de style.css laissait un vide à droite du texte. */ max-width: none; } main p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } main p.date, main p.provenance, main p.bilingue-bascule, main p.autre-numero, main p.evenement, main p.instrument-etat, main p.bornes, main p.recherche-invite, main p.recherche-vide { text-align: left; -webkit-hyphens: manual; hyphens: manual; } /* ------------------------------------------------------------------------- L'en-tête : la barre sombre de l'ancien site, sur toute la largeur de la fenêtre. Le balisage ne change pas : l'ombre portée pleine largeur et la découpe (clip-path) prolongent le fond au-delà du conteneur centré. Les jetons sont redéfinis pour la barre seule — tout ce qu'elle contient (titre, liens, étiquettes, bascule) passe en clair sur sombre. ------------------------------------------------------------------------- */ header { --encre: #FFFFFF; --sourdine: #BBBBBB; --patine: #A9CCF5; --trait: #5A5A5A; background: var(--bandeau); border: none; margin-top: 0; padding-top: 1.1rem; padding-bottom: 1.1rem; box-shadow: 0 0 0 100vmax var(--bandeau); clip-path: inset(0 -100vmax); } header > a { font-weight: 700; font-size: 1.45rem; letter-spacing: 0; } header em { color: var(--sourdine); font-size: 0.95rem; } header nav > a.revisions, header nav > a:first-child { font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: #FFFFFF; } form.aller label, .recherche-form label { font-weight: 400; font-size: 0.85rem; text-transform: none; letter-spacing: 0; } form.aller input, .recherche-form input[type="text"] { font-size: 0.9rem; border: 1px solid #CCCCCC; border-radius: 3px; background: #FFFFFF; color: #222222; padding: 0.3rem 0.55rem; } form.aller input::placeholder, .recherche-form input[type="text"]::placeholder { color: #888888; opacity: 1; } /* Les boutons : le bouton primaire de l'ancien site, plein et bleu. */ form.aller button, .recherche-form button { font-weight: 600; font-size: 0.85rem; text-transform: none; letter-spacing: 0; border: 1px solid var(--bouton); border-radius: 3px; background: var(--bouton); color: #FFFFFF; padding: 0.3rem 0.8rem; } form.aller button:hover, .recherche-form button:hover { background: var(--bouton-survol); border-color: var(--bouton-survol); color: #FFFFFF; } .langues a { color: #DDDDDD; font-size: 0.85rem; } .langues a:hover { color: #FFFFFF; } /* La bascule de thème, à plat, dans les tons de la barre. */ .bascule-theme .soleil { color: #F0C24B; } .bascule-theme .lune { color: #888888; } .bascule-theme[aria-checked="true"] .soleil { color: #888888; } .bascule-theme[aria-checked="true"] .lune { color: #FFFFFF; } .bascule-theme .piste { border-color: #777777; background: #111111; border-radius: 999px; } .bascule-theme .piste::before { background: #DDDDDD; border-radius: 999px; } .bascule-theme:hover .piste { border-color: #BBBBBB; } .aller-erreur { color: var(--retrait-texte); background: var(--retrait-fond); border-left: none; padding: 0.6rem 0.9rem; border-radius: 3px; } /* ------------------------------------------------------------------------- Titrage : la même police que le texte, en gras. Pas de didone. ------------------------------------------------------------------------- */ h1 { font-weight: 700; font-size: 1.85rem; line-height: 1.25; margin: 1.8rem 0 1.1rem; } p.date { font-weight: 600; font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--sourdine); } /* ------------------------------------------------------------------------- Le texte : plus de cadre autour de chaque article, un filet fin entre eux, comme les lignes d'un tableau. La colonne de marge se lit comme la colonne de dates de l'ancien site : le repère en gras, à gauche. ------------------------------------------------------------------------- */ .colonne-marge .article { border: none; border-top: 1px solid var(--trait); padding: 0.9rem 0 0.4rem; margin: 0; } .colonne-marge h2 { font-weight: 700; font-size: 0.95rem; text-transform: none; letter-spacing: 0; color: var(--encre); } .colonne-marge h2 a { color: var(--patine); text-decoration-color: currentColor; text-underline-offset: 0.15em; } .colonne-marge h2 a:hover { color: var(--patine); } @media (min-width: 62rem) { .colonne-marge .article { padding-left: calc(var(--marge) + var(--entrefer)); } .colonne-marge h2 { line-height: 1.6; } .colonne-marge p[data-paragraphe]::before, .colonne-marge p[data-alinea]::after { font-weight: 400; font-size: 0.8rem; letter-spacing: 0; } .colonne-marge p[data-alinea]::after { text-transform: none; top: 1.4em; } } p.transitoire strong, .note-traduction { text-transform: none; letter-spacing: 0; } p.abroge { border-left-color: var(--trait); } /* ------------------------------------------------------------------------- La provenance : un lien bleu ordinaire, souligné. ------------------------------------------------------------------------- */ .provenance { font-size: 0.82rem; letter-spacing: 0; } .provenance a { color: var(--patine); text-decoration: underline; border-bottom: none; } .provenance a.comparer::before { opacity: 1; } .provenance-detail { opacity: 1; color: var(--sourdine); } /* ------------------------------------------------------------------------- La frise : des jalons gris ; plus soutenus après la coordination de 1994 ; la version lue en bleu, seule couleur de la frise. ------------------------------------------------------------------------- */ .frise a, .frise li > span { background: #A8A8A8; } .frise .coordonnee a, .frise .coordonnee > span { background: var(--bronze); } .frise .inerte > span { background: var(--trait); } .frise .courante a { background: var(--patine); } .frise a:hover { background: var(--patine); } .frise .nom { background: var(--papier); } :root[data-theme="dark"] .frise a, :root[data-theme="dark"] .frise li > span { background: #6A6A6A; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .frise a, :root:not([data-theme="light"]) .frise li > span { background: #6A6A6A; } } /* Les trois règles qui doivent l'emporter sur le gris de base, en sombre aussi. */ :root .frise .coordonnee a, :root .frise .coordonnee > span { background: var(--bronze); } :root .frise .inerte > span { background: var(--trait); } :root .frise .courante a, :root .frise a:hover { background: var(--patine); } /* ------------------------------------------------------------------------- La citation : le « well » gris clair de l'ancien site. ------------------------------------------------------------------------- */ .citation { background: var(--fond-zone); border: 1px solid var(--trait); border-radius: 3px; } .citation h2 { font-weight: 700; font-size: 0.85rem; text-transform: none; letter-spacing: 0; color: var(--encre); } .citation .reference { font-size: 0.88rem; } /* ------------------------------------------------------------------------- La trajectoire ------------------------------------------------------------------------- */ ol.trajectoire h2, ol.trajectoire h3 { font-weight: 700; letter-spacing: 0; color: var(--encre); } .trajectoire h2 { text-transform: none; font-size: 1rem; } .trajectoire > li::before { background: var(--patine); } .evenement { color: var(--sourdine); font-weight: 600; } h2.lignee { font-weight: 700; font-size: 1.2rem; } /* L'avertissement « plusieurs articles ont porté ce numéro » : l'encadré jaune pâle que l'ancien site employait pour son « Attention ! ». */ .lignees-avertissement { /* Toute la largeur de la zone centrale : la limite de 65 caractères de `main p` vaut pour le texte courant, pas pour un encadré. */ max-width: none; text-align: left; color: var(--avert-texte); background: var(--avert-fond); border: 1px solid var(--avert-trait); border-radius: 3px; padding: 0.7rem 1rem; } /* ------------------------------------------------------------------------- Ajouts et suppressions — la comparaison comme l'instrument. Le fond ne porte jamais seul l'information : l'ajout reste souligné, la suppression barrée, lisibles en noir et blanc. ------------------------------------------------------------------------- */ main ins { text-decoration: none; background: var(--ajout-fond); border-bottom: 2px solid var(--ajout-trait); } main del { text-decoration: line-through; background: var(--retrait-fond); color: var(--retrait-texte); } .comparaison ins { background: var(--ajout-fond); border-bottom-color: var(--ajout-trait); } .comparaison del { color: var(--retrait-texte); } .deux-colonnes .colonne h2, .bilingue-bascule { text-transform: none; letter-spacing: 0; } .deux-colonnes .colonne h2 { font-weight: 700; color: var(--encre); } mark { background: var(--surligne); border-radius: 2px; } .resultats li { border-left-color: var(--trait); } /* ------------------------------------------------------------------------- La barre de l'instrument : blanche, un filet au-dessus, le curseur bleu. ------------------------------------------------------------------------- */ .instrument { background: var(--papier); border-top: 1px solid var(--trait); } .instrument-piste input[type="range"] { accent-color: var(--patine); } .instrument-piste button { color: var(--encre); background: var(--fond-champ); border: 1px solid #CCCCCC; border-radius: 3px; } .instrument-piste button:hover { background: var(--fond-zone); } .instrument-ruban i { background: #BBBBBB; } .instrument-ruban i.change { background: var(--patine); } .instrument-ruban i.change.coordonnee { background: var(--bronze); } .instrument-ruban i.ici { background: var(--encre); }