/** * BioTimeline — jetons de conception partagés. * * Chargé par l'admin, le front public et le portail contributeur. Un seul * endroit pour changer une couleur, une graduation ou une ombre. * * Trois principes structurent ce fichier : * * 1. DEUX UNIVERS, UN SYSTÈME. L'admin est un poste de travail (SaaS, dense, * froid, efficace). Le front et le portail sont un mémorial (éditorial, * chaud, aéré, lent). Ce ne sont pas deux designs concurrents mais deux * registres du même système : mêmes graduations, mêmes rayons, mêmes durées, * palettes différentes. Un mémorial en indigo SaaS serait froid ; un admin en * parchemin serait illisible à la huitième heure de saisie. * * 2. PROPRIÉTÉS LOGIQUES PARTOUT. `inline-start` / `inline-end`, jamais * `left` / `right`. L'hébreu est une langue de première classe ici, pas un * correctif : aucune feuille RTL séparée à maintenir. * * 3. LE SOMBRE EST CHOISI, PAS CALCULÉ. Chaque valeur sombre est posée à la * main, pas dérivée par inversion. Une inversion automatique produit des * gris boueux et des accents fluorescents. * * Couleurs de données : la palette catégorielle vient d'une référence validée * (bandes de clarté, plancher de chroma, séparation daltonienne, contraste) * dans les deux modes. Ne pas la retoucher à l'œil — elle a été mesurée. */ :root { color-scheme: light; /* ---------------------------------------------------------- Graduation */ /* Grille de 4 px. Toute marge du produit sort de cette liste. */ --biotl-s-1: 4px; --biotl-s-2: 8px; --biotl-s-3: 12px; --biotl-s-4: 16px; --biotl-s-5: 24px; --biotl-s-6: 32px; --biotl-s-7: 48px; --biotl-s-8: 64px; --biotl-s-9: 96px; /* -------------------------------------------------------------- Rayons */ --biotl-r-sm: 6px; --biotl-r-md: 10px; --biotl-r-lg: 14px; --biotl-r-xl: 20px; --biotl-r-pill: 999px; /* -------------------------------------------------------------- Ombres */ /* Deux couches : une ombre de contact courte et une ombre de portée longue. Une ombre unique à grand flou donne toujours un aspect sale. */ --biotl-sh-1: 0 1px 2px rgba(16, 24, 40, .05); --biotl-sh-2: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04); --biotl-sh-3: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .05); --biotl-sh-4: 0 12px 20px -4px rgba(16, 24, 40, .1), 0 4px 8px -4px rgba(16, 24, 40, .05); --biotl-sh-5: 0 24px 48px -12px rgba(16, 24, 40, .22); /* ---------------------------------------------------------- Mouvement */ /* Court et sans rebond. Un mémorial ne fait pas de ressort élastique. */ --biotl-t-fast: 120ms; --biotl-t-base: 180ms; --biotl-t-slow: 320ms; --biotl-ease: cubic-bezier(.4, 0, .2, 1); --biotl-ease-out: cubic-bezier(0, 0, .2, 1); /* ---------------------------------------------------- Familles de fonte */ --biotl-font-ui: "Inter", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --biotl-font-serif: "Lora", Georgia, "Times New Roman", serif; --biotl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* L'hébreu a besoin de ses propres familles : une pile latine tombe sur un substitut système laid et mal aligné en RTL. */ --biotl-font-ui-he: "Assistant", "Rubik", "Arial Hebrew", var(--biotl-font-ui); --biotl-font-serif-he: "Frank Ruhl Libre", "David", "Frank Ruehl CLM", var(--biotl-font-serif); /* --------------------------------------------------- Échelle de texte */ /* Ratio ~1.2 en bas (dense, lisible), qui s'ouvre en haut (titres). */ --biotl-fs-2xs: 11px; --biotl-fs-xs: 12px; --biotl-fs-sm: 13px; --biotl-fs-base: 14px; --biotl-fs-md: 16px; --biotl-fs-lg: 18px; --biotl-fs-xl: 22px; --biotl-fs-2xl: 28px; --biotl-fs-3xl: 34px; --biotl-fs-4xl: 44px; --biotl-lh-tight: 1.2; --biotl-lh-snug: 1.4; --biotl-lh-base: 1.6; --biotl-lh-relaxed: 1.75; --biotl-ls-tight: -.02em; --biotl-ls-wide: .04em; --biotl-ls-caps: .12em; /* ============================================================ UNIVERS 1 ADMIN — poste de travail. Neutres froids, accent indigo. ========================================================== */ --biotl-a-bg: #f6f8fb; --biotl-a-surface: #ffffff; --biotl-a-surface-2: #f9fafc; --biotl-a-surface-3: #f1f4f9; --biotl-a-line: #e3e8ef; /* --------------------------------------------------- line-strong LE CONTOUR D'UN CHAMP EST LE CHAMP. Ce jeton n'est employé nulle part comme séparation décorative : ses onze usages sont tous des BORDURES DE CONTRÔLE — champs de saisie, listes déroulantes, zones de texte, boutons secondaires, cadres en pointillé d'un dépôt de fichier. Le critère 1.4.11 leur demande 3:1 contre ce qui les entoure, parce que ce contour est la seule chose qui dise « on écrit ici ». Il valait #cdd5e0, soit **1,48:1 sur le blanc**. Tous les champs de l'espace client étaient donc, littéralement, des rectangles qu'on devine. Le défaut ne se signale pas : personne ne se plaint d'un champ invisible, on croit que le formulaire est plus court qu'il n'est. #7e8795 sur surface #ffffff ......... 3,84:1 #7e8795 sur surface-3 #f1f4f9 ....... 3,29:1 (pire des quatre fonds) */ --biotl-a-line-strong: #7e8795; --biotl-a-ink: #101828; --biotl-a-ink-2: #475467; /* `accent-soft` EST UNE CINQUIÈME SURFACE, et elle avait été oubliée. Les quatre fonds neutres étaient bien mesurés ; le fond doux de l'accent, qui porte les lignes d'un tableau de plans et l'aide d'une carte de choix, ne l'était pas. `ink-3` y tenait **4,45:1** — sous le seuil de cinq centièmes, c'est-à-dire invisible à toute relecture et parfaitement réel à l'écran. #616b80 sur accent-soft #eef2ff ...... 4,79:1 (pire des cinq fonds) */ --biotl-a-ink-3: #616b80; /* ------------------------------------------------------------ ink-4 LA QUATRIÈME ENCRE N'EST PLUS UNE ENCRE DE TEXTE. Elle valait #98a2b3 — **2,58:1 sur le blanc**, très en dessous du 4,5:1 exigé — et elle colorait dix-sept VRAIS textes : le sur-titre « ESPACE CLIENT », l'adresse email du menu de compte, la note sous chaque quota (« il reste 1 livre »). Le défaut a survécu parce qu'il ne touchait que des textes tenus pour secondaires : personne ne se plaint de mal lire ce qu'il croit accessoire — on cesse simplement de le regarder, et c'est ainsi qu'une information utile disparaît sans que rien ne le signale. La correction n'est pas de l'assombrir un peu. Une encre de texte doit tenir 4,5:1, et à ce seuil elle rejoint `ink-3` : **il n'y a pas de place pour une quatrième encre de texte sous la troisième.** Les dix-sept textes passent donc à `ink-3`, et ce jeton devient ce qu'il aurait toujours dû être : la couleur d'un TRACÉ — pictogramme éteint, contour d'un champ désactivé, filet d'un séparateur — soumise au 3:1 du critère 1.4.11, jamais au 4,5:1 du texte. La hiérarchie du texte ne vient donc plus de la pâleur, qui finit toujours par sortir du seuil, mais de la TAILLE et de la GRAISSE, qui n'ont aucun minimum légal à tenir. #818a98 sur surface #ffffff ......... 3,66:1 (min 3:1) #818a98 sur surface-3 #f1f4f9 ....... 3,16:1 (min 3:1) */ --biotl-a-ink-4: #818a98; --biotl-a-ink-inv: #ffffff; /* ------------------------------------------------------- ACCENT / ENCRE DEUX JETONS LÀ OÙ IL N'Y EN AVAIT QU'UN, et c'est la leçon apprise par le thème à sa version 2.4. `accent` est une couleur de MARQUE : elle remplit un bouton, souligne un onglet, coche une case. Elle n'a pas à être lisible, elle a à être reconnaissable — un accent jaune reste jaune. `accent-ink` est cette même couleur employée COMME TEXTE : un lien, un intitulé, un chiffre mis en valeur. Elle doit tenir 4,5:1 sur la surface où elle est posée. Tant que les deux valent la même chose — c'est le cas ici, l'indigo #4338ca tient 8,59:1 sur blanc — la distinction ne se voit pas. Elle devient tout, dès qu'un thème impose sa palette : l'accent de marque passe intact, l'encre est ramenée au seuil. */ --biotl-a-accent: #4338ca; --biotl-a-accent-hover: #3730a3; --biotl-a-accent-ink: #4338ca; --biotl-a-accent-ink-hover: #3730a3; --biotl-a-accent-soft: #eef2ff; --biotl-a-accent-line: #c7d2fe; --biotl-a-focus: rgba(67, 56, 202, .18); /* --------------------------------------------------------------- MARQUE Deux jetons, et deux seulement : le carré du monogramme et le tracé posé dessus. Ils ne SONT PAS `accent` / `ink-inv`, même s'ils s'en approchent en clair. L'accent est une couleur d'INTERFACE : il change quand on retouche l'ergonomie (un bouton primaire trop violent, un lien trop pâle). La marque, elle, ne change pas parce qu'un bouton a changé. Les mélanger revient à laisser la prochaine retouche d'accent repeindre le logo. L'indigo de la marque (#312e81) est volontairement plus profond que l'accent (#4338ca) : posé en aplat sur 26 × 26 px, l'accent vibre. Contrastes mesurés en clair : tracé #ffffff sur carré #312e81 ......... 11,42:1 (min 4,5:1) carré #312e81 sur surface #ffffff ....... 11,42:1 (min 3:1) carré #312e81 sur fond page #f6f8fb ..... 10,74:1 (min 3:1) */ --biotl-a-brand: #312e81; --biotl-a-brand-ink: #ffffff; /* ============================================================ UNIVERS 2 MÉMORIAL — front public et portail. Papier, encre, sépia. ========================================================== */ --biotl-m-bg: #f4f1ea; --biotl-m-paper: #fbf9f4; --biotl-m-paper-2: #f3efe6; --biotl-m-line: #ded7c9; --biotl-m-line-strong: #c8bfad; --biotl-m-ink: #211d17; --biotl-m-ink-2: #524a3e; --biotl-m-ink-3: #736959; --biotl-m-ink-4: #9a9081; --biotl-m-accent: #7a5c31; --biotl-m-accent-hover: #634a26; --biotl-m-accent-soft: #f0e9dc; --biotl-m-focus: rgba(122, 92, 49, .2); --biotl-m-gold: #a8823c; /* ------------------------------- Échelle mémorial INVARIANTE DE MODE --- Les `--biotl-m-*` ci-dessus suivent le mode : c'est ce qu'on veut dans 99 % des cas. Mais le front public doit pouvoir forcer un mode SUR SON CONTENEUR (shortcode `theme="dark"`) sans écrire sur l'élément racine de l'hôte — sinon le plugin repeindrait le thème du site autour du mémorial. Ces deux jeux-ci ne basculent jamais. Ils existent pour que ce forçage local puisse se faire par référence au lieu de recopier des valeurs hexadécimales dans une autre feuille : une palette dupliquée finit toujours par diverger de son original, et c'est précisément ce que la couche de jetons existe pour empêcher. -------------------------------------------------------------------- */ --biotl-m-l-bg: #f4f1ea; --biotl-m-l-paper: #fbf9f4; --biotl-m-l-paper-2: #f3efe6; --biotl-m-l-line: #ded7c9; --biotl-m-l-line-strong: #c8bfad; --biotl-m-l-ink: #211d17; --biotl-m-l-ink-2: #524a3e; --biotl-m-l-ink-3: #736959; --biotl-m-l-ink-4: #9a9081; --biotl-m-l-accent: #7a5c31; --biotl-m-l-accent-hover: #634a26; --biotl-m-l-accent-soft: #f0e9dc; --biotl-m-l-focus: rgba(122, 92, 49, .2); --biotl-m-l-gold: #a8823c; --biotl-m-d-bg: #14120f; --biotl-m-d-paper: #1b1814; --biotl-m-d-paper-2: #221e19; --biotl-m-d-line: #332d25; --biotl-m-d-line-strong: #4a4136; --biotl-m-d-ink: #f0ebe1; --biotl-m-d-ink-2: #cdc4b5; --biotl-m-d-ink-3: #a2988a; --biotl-m-d-ink-4: #7d7365; --biotl-m-d-accent: #c9a468; --biotl-m-d-accent-hover: #dcbb85; --biotl-m-d-accent-soft: #262019; --biotl-m-d-focus: rgba(201, 164, 104, .26); --biotl-m-d-gold: #d4b170; /* ------------------------------------ TEINTES DE RELIURE (front public) - Cinq teintes proposées à la famille dans son espace client, posées sur la chronologie par `data-biotl-tint` (voir frontend.css, section 13). La teinte par défaut, « crème », N'A PAS de jeu ici : elle vaut exactement les `--biotl-m-*` ci-dessus, donc un livre qui n'a jamais rien choisi ne change pas d'un pixel — et un bloc de plus n'aurait servi qu'à pouvoir diverger. Une teinte ne touche QUE la famille de l'accent. Elle ne redéfinit ni le papier, ni l'encre du corps de texte : c'est ce qui rend les quinze combinaisons peau × teinte lisibles PAR CONSTRUCTION, sans avoir à en interdire aucune. Les contrastes annoncés en commentaire sont recalculés à chaque exécution de la suite de tests (25-album-apparence.php), qui vérifie AUSSI que ces valeurs sont identiques à celles de `Client\Portal::tints()` — une palette dupliquée sans garde finit toujours par diverger. `gold` est DÉCORATIF (filets, guillemet à 16 % d'opacité, barre de progression) : il ne porte jamais de texte et n'est donc pas soumis au 4,5:1. Vérifié avant d'être écrit ici. -------------------------------------------------------------------- */ /* Bleu nuit — accent #234a7a sur papier clair : 8,56:1. Accent #8fb4dd sur papier sombre : 8,20:1. */ --biotl-tint-nuit-l-accent: #234a7a; --biotl-tint-nuit-l-accent-hover: #1a3a61; --biotl-tint-nuit-l-accent-soft: #e4eaf3; --biotl-tint-nuit-l-gold: #4a76ab; --biotl-tint-nuit-l-focus: rgba(35, 74, 122, .2); --biotl-tint-nuit-d-accent: #8fb4dd; --biotl-tint-nuit-d-accent-hover: #adc9e8; --biotl-tint-nuit-d-accent-soft: #191d24; --biotl-tint-nuit-d-gold: #a8c4e2; --biotl-tint-nuit-d-focus: rgba(143, 180, 221, .26); /* Bordeaux — accent #7d2634 sur papier clair : 9,08:1. Accent #e59aa4 sur papier sombre : 7,99:1. */ --biotl-tint-bordeaux-l-accent: #7d2634; --biotl-tint-bordeaux-l-accent-hover: #641d29; --biotl-tint-bordeaux-l-accent-soft: #f4e3e5; --biotl-tint-bordeaux-l-gold: #a8515e; --biotl-tint-bordeaux-l-focus: rgba(125, 38, 52, .2); --biotl-tint-bordeaux-d-accent: #e59aa4; --biotl-tint-bordeaux-d-accent-hover: #f0b6be; --biotl-tint-bordeaux-d-accent-soft: #241a1c; --biotl-tint-bordeaux-d-gold: #dfa0a8; --biotl-tint-bordeaux-d-focus: rgba(229, 154, 164, .26); /* Vert sombre — accent #1f5541 sur papier clair : 8,20:1. Accent #7fc3a8 sur papier sombre : 8,65:1. */ --biotl-tint-foret-l-accent: #1f5541; --biotl-tint-foret-l-accent-hover: #174233; --biotl-tint-foret-l-accent-soft: #e2eee8; --biotl-tint-foret-l-gold: #4a8a72; --biotl-tint-foret-l-focus: rgba(31, 85, 65, .2); --biotl-tint-foret-d-accent: #7fc3a8; --biotl-tint-foret-d-accent-hover: #9fd5bf; --biotl-tint-foret-d-accent-soft: #171f1b; --biotl-tint-foret-d-gold: #92cbb3; --biotl-tint-foret-d-focus: rgba(127, 195, 168, .26); /* Noir d'encre — accent #33302b sur papier clair : 12,49:1. Accent #c6bfb2 sur papier sombre : 9,68:1. */ --biotl-tint-encre-l-accent: #33302b; --biotl-tint-encre-l-accent-hover: #211f1b; --biotl-tint-encre-l-accent-soft: #eae7e0; --biotl-tint-encre-l-gold: #6f695e; --biotl-tint-encre-l-focus: rgba(51, 48, 43, .2); --biotl-tint-encre-d-accent: #c6bfb2; --biotl-tint-encre-d-accent-hover: #d8d2c7; --biotl-tint-encre-d-accent-soft: #201e1a; --biotl-tint-encre-d-gold: #b0a894; --biotl-tint-encre-d-focus: rgba(198, 191, 178, .26); /* ------------------------------------------------------------- Statuts */ /* Réservés. Ne jamais réutiliser comme couleur de série de données, et toujours accompagnés d'une icône et d'un mot — jamais la couleur seule. */ --biotl-ok: #067647; --biotl-ok-bg: #ecfdf3; --biotl-ok-line: #abefc6; --biotl-warn: #b54708; --biotl-warn-bg: #fffaeb; --biotl-warn-line: #fedf89; --biotl-serious: #b42318; --biotl-serious-bg: #fef3f2; --biotl-serious-line: #fecdca; --biotl-info: #175cd3; --biotl-info-bg: #eff8ff; --biotl-info-line: #b2ddff; /* ----------------------------------------- Séries de données validées */ /* Ordre fixe. Jamais recyclé : une 9e série se replie en « Autre ». */ --biotl-series-1: #2a78d6; --biotl-series-2: #eb6834; --biotl-series-3: #1baf7a; --biotl-series-4: #eda100; --biotl-series-5: #e87ba4; --biotl-series-6: #008300; --biotl-series-7: #4a3aa7; --biotl-series-8: #e34948; /* Rampe séquentielle une seule teinte, clair vers foncé. */ --biotl-seq-100: #cde2fb; --biotl-seq-250: #86b6ef; --biotl-seq-400: #3987e5; --biotl-seq-550: #1c5cab; --biotl-seq-700: #0d366b; /* Grille et axes récessifs : ils situent, ils ne concurrencent pas. */ --biotl-grid: #eaecf0; --biotl-axis: #d0d5dd; /* ------------------------------------------------------------ Divers */ --biotl-header-h: 64px; --biotl-sidebar-w: 248px; --biotl-content-max: 1320px; --biotl-reading-max: 68ch; } /* ========================================================================== MODE SOMBRE Chaque valeur est posée, aucune n'est inversée. Déclaré sous les deux portées : la requête média couvre le réglage système, l'attribut couvre l'interrupteur du produit et doit gagner dans les deux sens. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:where(:not([data-biotl-theme="light"])) { color-scheme: dark; --biotl-a-bg: #0f1117; --biotl-a-surface: #16181d; --biotl-a-surface-2: #1b1e25; --biotl-a-surface-3: #22262e; --biotl-a-line: #2a2f39; --biotl-a-line-strong: #707988; /* 3,45:1 sur la pire des quatre surfaces sombres — 1.4.11 */ --biotl-a-ink: #f2f4f7; --biotl-a-ink-2: #cdd5e0; --biotl-a-ink-3: #98a2b3; --biotl-a-ink-4: #697586; --biotl-a-ink-inv: #101828; --biotl-a-accent: #8b81f0; --biotl-a-accent-hover: #a29bf5; --biotl-a-accent-ink: #8b81f0; --biotl-a-accent-ink-hover: #a29bf5; --biotl-a-accent-soft: #1e1b3d; --biotl-a-accent-line: #362f6b; --biotl-a-focus: rgba(139, 129, 240, .28); /* La marque s'inverse : le carré prend la lavande claire, le tracé l'indigo profond. Pas de blanc pur sur fond sombre — à 16 px, un tracé blanc sur aplat clair bave et le dos de livre se referme. Contrastes mesurés en sombre : tracé #1e1b4b sur carré #a5b4fc ......... 8,02:1 (min 4,5:1) carré #a5b4fc sur surface #16181d ....... 8,91:1 (min 3:1) carré #a5b4fc sur fond page #0f1117 ..... 9,47:1 (min 3:1) */ --biotl-a-brand: #a5b4fc; --biotl-a-brand-ink: #1e1b4b; /* Le mémorial en sombre n'est pas du papier éteint : c'est de l'encre sur une table de nuit. On garde la chaleur, on baisse la lumière. */ --biotl-m-bg: #14120f; --biotl-m-paper: #1b1814; --biotl-m-paper-2: #221e19; --biotl-m-line: #332d25; --biotl-m-line-strong: #4a4136; --biotl-m-ink: #f0ebe1; --biotl-m-ink-2: #cdc4b5; --biotl-m-ink-3: #a2988a; --biotl-m-ink-4: #7d7365; --biotl-m-accent: #c9a468; --biotl-m-accent-hover: #dcbb85; --biotl-m-accent-soft: #262019; --biotl-m-focus: rgba(201, 164, 104, .26); --biotl-m-gold: #d4b170; --biotl-ok: #75e0a7; --biotl-ok-bg: #0a2c1c; --biotl-ok-line: #16512f; --biotl-warn: #fdb022; --biotl-warn-bg: #33220a; --biotl-warn-line: #5c3d0d; --biotl-serious: #fda29b; --biotl-serious-bg: #34100d; --biotl-serious-line: #5e2019; --biotl-info: #84caff; --biotl-info-bg: #0d2440; --biotl-info-line: #17427a; --biotl-series-1: #3987e5; --biotl-series-2: #d95926; --biotl-series-3: #199e70; --biotl-series-4: #c98500; --biotl-series-5: #d55181; --biotl-series-6: #008300; --biotl-series-7: #9085e9; --biotl-series-8: #e66767; --biotl-seq-100: #0d366b; --biotl-seq-250: #184f95; --biotl-seq-400: #2a78d6; --biotl-seq-550: #6da7ec; --biotl-seq-700: #cde2fb; --biotl-grid: #262b34; --biotl-axis: #343a45; --biotl-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --biotl-sh-2: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --biotl-sh-3: 0 4px 8px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .35); --biotl-sh-4: 0 12px 20px -4px rgba(0, 0, 0, .55), 0 4px 8px -4px rgba(0, 0, 0, .4); --biotl-sh-5: 0 24px 48px -12px rgba(0, 0, 0, .7); } } :root[data-biotl-theme="dark"] { color-scheme: dark; --biotl-a-bg: #0f1117; --biotl-a-surface: #16181d; --biotl-a-surface-2: #1b1e25; --biotl-a-surface-3: #22262e; --biotl-a-line: #2a2f39; --biotl-a-line-strong: #707988; /* 3,45:1 sur la pire des quatre surfaces sombres — 1.4.11 */ --biotl-a-ink: #f2f4f7; --biotl-a-ink-2: #cdd5e0; --biotl-a-ink-3: #98a2b3; --biotl-a-ink-4: #697586; --biotl-a-ink-inv: #101828; --biotl-a-accent: #8b81f0; --biotl-a-accent-hover: #a29bf5; --biotl-a-accent-ink: #8b81f0; --biotl-a-accent-ink-hover: #a29bf5; --biotl-a-accent-soft: #1e1b3d; --biotl-a-accent-line: #362f6b; --biotl-a-focus: rgba(139, 129, 240, .28); /* Voir le bloc jumeau sous `prefers-color-scheme: dark` pour les contrastes mesurés. */ --biotl-a-brand: #a5b4fc; --biotl-a-brand-ink: #1e1b4b; --biotl-m-bg: #14120f; --biotl-m-paper: #1b1814; --biotl-m-paper-2: #221e19; --biotl-m-line: #332d25; --biotl-m-line-strong: #4a4136; --biotl-m-ink: #f0ebe1; --biotl-m-ink-2: #cdc4b5; --biotl-m-ink-3: #a2988a; --biotl-m-ink-4: #7d7365; --biotl-m-accent: #c9a468; --biotl-m-accent-hover: #dcbb85; --biotl-m-accent-soft: #262019; --biotl-m-focus: rgba(201, 164, 104, .26); --biotl-m-gold: #d4b170; --biotl-ok: #75e0a7; --biotl-ok-bg: #0a2c1c; --biotl-ok-line: #16512f; --biotl-warn: #fdb022; --biotl-warn-bg: #33220a; --biotl-warn-line: #5c3d0d; --biotl-serious: #fda29b; --biotl-serious-bg: #34100d; --biotl-serious-line: #5e2019; --biotl-info: #84caff; --biotl-info-bg: #0d2440; --biotl-info-line: #17427a; --biotl-series-1: #3987e5; --biotl-series-2: #d95926; --biotl-series-3: #199e70; --biotl-series-4: #c98500; --biotl-series-5: #d55181; --biotl-series-6: #008300; --biotl-series-7: #9085e9; --biotl-series-8: #e66767; --biotl-seq-100: #0d366b; --biotl-seq-250: #184f95; --biotl-seq-400: #2a78d6; --biotl-seq-550: #6da7ec; --biotl-seq-700: #cde2fb; --biotl-grid: #262b34; --biotl-axis: #343a45; --biotl-sh-1: 0 1px 2px rgba(0, 0, 0, .4); --biotl-sh-2: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3); --biotl-sh-3: 0 4px 8px -2px rgba(0, 0, 0, .5), 0 2px 4px -2px rgba(0, 0, 0, .35); --biotl-sh-4: 0 12px 20px -4px rgba(0, 0, 0, .55), 0 4px 8px -4px rgba(0, 0, 0, .4); --biotl-sh-5: 0 24px 48px -12px rgba(0, 0, 0, .7); } /* ========================================================================== PRIMITIVES TRANSVERSES ========================================================================== */ /* ============================================================== UNIVERS 3 VITRINE — la page de vente. Nuit méditerranéenne, os, safran. Pourquoi un TROISIÈME univers, et pas la palette mémorial déjà là : La palette mémorial (papier crème, encre sépia, or) est celle du LIVRE. Elle est juste pour un livre, et elle le restera : un livre imprimé est en papier. Mais une page de VENTE en fond crème avec un serif à fort contraste et un accent terre cuite, c'est aujourd'hui le réglage par défaut de tout site « chaleureux et haut de gamme ». Le client l'a dit avant moi : « cela ressemble trop à d'autres sites ». Il avait raison, et la raison est mesurable — c'est un trio qu'on retrouve partout. Cette palette-ci vient du sujet, pas du catalogue : l'indigo profond est celui de l'encre des lettres et de la Méditerranée la nuit ; l'os est le papier des albums ; le safran est la seule couleur d'action, celle du ruban qui marque une page. Le livre garde son papier. La vitrine a sa nuit. ========================================================================== */ :root { --biotl-v-night: #10203a; --biotl-v-night-2: #16294a; --biotl-v-night-3: #1d3358; --biotl-v-bone: #f2ece0; --biotl-v-bone-2: #e8dfcd; --biotl-v-ink: #14120d; --biotl-v-ink-2: #4a4438; --biotl-v-ink-3: #6b6353; --biotl-v-ink-4: #8d846f; --biotl-v-saffron: #d99b2b; --biotl-v-saffron-deep: #b87d18; /* L'olive ne porte JAMAIS de texte courant : 3,95:1 sur l'os, sous le seuil de 4,5. Elle sert aux filets, aux marques et aux grands caractères, où le seuil tombe à 3. */ --biotl-v-olive: #6a7a52; --biotl-v-line: #d8cdb6; --biotl-v-line-night: #2b4067; --biotl-v-focus: rgba(217, 155, 43, .35); } /* ========================================================================== ALIAS SÉMANTIQUES — le même nom, deux univers Les jetons `--biotl-a-*` (admin, neutres froids) et `--biotl-m-*` (mémorial, papier et encre) resteront toujours distincts : ce sont deux intentions, pas deux nuances d'une même chose. Mais les COMPOSANTS, eux, sont les mêmes des deux côtés : un panneau est un panneau, une pastille est une pastille. Sans ces alias, il faudrait écrire chaque composant deux fois — une version froide, une version chaude — et les deux divergeraient au premier correctif appliqué d'un seul côté. D'où cette couche : `--biotl-c-*` (c pour « contexte »). Sa valeur dépend de l'ancêtre. Écrire une fois `background: var(--biotl-c-surface)` donne du blanc dans l'administration et du papier dans le mémorial, sans une seule condition, sans une seule duplication. C'est ce qui permet à une unique feuille d'utilitaires de servir les deux univers. ========================================================================== */ .biotl-a { --biotl-c-bg: var(--biotl-a-bg); --biotl-c-surface: var(--biotl-a-surface); --biotl-c-surface-2: var(--biotl-a-surface-2); --biotl-c-surface-3: var(--biotl-a-surface-3); --biotl-c-line: var(--biotl-a-line); --biotl-c-line-strong: var(--biotl-a-line-strong); --biotl-c-ink: var(--biotl-a-ink); --biotl-c-ink-2: var(--biotl-a-ink-2); --biotl-c-ink-3: var(--biotl-a-ink-3); --biotl-c-ink-4: var(--biotl-a-ink-4); --biotl-c-ink-inv: var(--biotl-a-ink-inv); --biotl-c-accent: var(--biotl-a-accent); --biotl-c-accent-hover: var(--biotl-a-accent-hover); --biotl-c-accent-soft: var(--biotl-a-accent-soft); --biotl-c-accent-line: var(--biotl-a-accent-line); --biotl-c-focus: var(--biotl-a-focus); /* La marque passe par la couche de contexte comme le reste : c'est ce qui permet à `Brand::mark()` d'écrire UNE fois `fill: var(--biotl-c-brand)` et d'obtenir l'indigo en clair, la lavande en sombre, sans une ligne de JavaScript ni un second fichier SVG à charger. Volontairement absent de `.biotl-m` : le mémorial est le lot suivant, et la marque n'y a pas encore de place arrêtée. Mieux vaut une variable non définie — donc une valeur de repli explicite dans le SVG — qu'une couleur posée au jugé dans un univers qu'on n'a pas dessiné. */ --biotl-c-brand: var(--biotl-a-brand); --biotl-c-brand-ink: var(--biotl-a-brand-ink); /* L'administration n'a pas d'or. Plutôt que de laisser la variable vide — ce qui produirait une déclaration invalide et donc une couleur héritée au hasard — elle retombe sur l'accent. */ --biotl-c-gold: var(--biotl-a-accent); } .biotl-m { --biotl-c-bg: var(--biotl-m-bg); --biotl-c-surface: var(--biotl-m-paper); --biotl-c-surface-2: var(--biotl-m-paper-2); --biotl-c-surface-3: var(--biotl-m-paper-2); --biotl-c-line: var(--biotl-m-line); --biotl-c-line-strong: var(--biotl-m-line-strong); --biotl-c-ink: var(--biotl-m-ink); --biotl-c-ink-2: var(--biotl-m-ink-2); --biotl-c-ink-3: var(--biotl-m-ink-3); --biotl-c-ink-4: var(--biotl-m-ink-4); --biotl-c-ink-inv: var(--biotl-m-paper); --biotl-c-accent: var(--biotl-m-accent); --biotl-c-accent-hover: var(--biotl-m-accent-hover); --biotl-c-accent-soft: var(--biotl-m-accent-soft); --biotl-c-accent-line: var(--biotl-m-line-strong); --biotl-c-focus: var(--biotl-m-focus); --biotl-c-gold: var(--biotl-m-gold); } /* La VITRINE surcharge la couche de contexte : les mêmes composants — panneau, bouton, pastille — s'habillent en nuit et safran ici, en papier et sépia dans le livre, sans une ligne dupliquée. */ .biotl-ld { /* La vitrine a SA typographie, et elle vient du sujet. Frank Ruhl Libre est le caractère du livre hébreu depuis 1908, avec un compagnon latin dessiné pour lui. Assistant est une grotesque dessinée POUR l'hébreu, au latin de même main. Une famille par rôle, servant les trois langues : la thèse du produit appliquée à sa propre typographie. Les deux familles sont livrées avec l'extension (assets/shared/fonts/) : la vitrine doit être juste sur n'importe quel thème, pas seulement sur le nôtre. Les replis Georgia et system-ui tiennent si la feuille de fontes n'est pas chargée. */ --biotl-font-serif: "Frank Ruhl Libre", "Frank Ruehl CLM", Georgia, "Times New Roman", serif; --biotl-font-ui: "Assistant", "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; --biotl-c-bg: var(--biotl-v-bone); --biotl-c-surface: #fff; --biotl-c-surface-2: var(--biotl-v-bone-2); --biotl-c-surface-3: var(--biotl-v-bone-2); --biotl-c-line: var(--biotl-v-line); --biotl-c-line-strong: var(--biotl-v-ink-4); --biotl-c-ink: var(--biotl-v-ink); --biotl-c-ink-2: var(--biotl-v-ink-2); --biotl-c-ink-3: var(--biotl-v-ink-3); --biotl-c-ink-4: var(--biotl-v-ink-4); --biotl-c-ink-inv: var(--biotl-v-bone); --biotl-c-accent: var(--biotl-v-saffron-deep); --biotl-c-accent-hover: var(--biotl-v-night); --biotl-c-accent-soft: rgba(217, 155, 43, .14); --biotl-c-accent-line: var(--biotl-v-saffron); --biotl-c-focus: var(--biotl-v-focus); --biotl-c-gold: var(--biotl-v-saffron); } /* Les bandes de nuit inversent la lecture : os sur indigo, 13,84:1. */ .biotl-ld-night { --biotl-c-bg: var(--biotl-v-night); --biotl-c-surface: var(--biotl-v-night-2); --biotl-c-surface-2: var(--biotl-v-night-3); --biotl-c-surface-3: var(--biotl-v-night-3); --biotl-c-line: var(--biotl-v-line-night); --biotl-c-line-strong: var(--biotl-v-ink-4); --biotl-c-ink: var(--biotl-v-bone); --biotl-c-ink-2: var(--biotl-v-bone-2); --biotl-c-ink-3: #b9ae97; --biotl-c-ink-4: #8d846f; --biotl-c-ink-inv: var(--biotl-v-night); --biotl-c-accent: var(--biotl-v-saffron); --biotl-c-accent-hover: var(--biotl-v-bone); --biotl-c-gold: var(--biotl-v-saffron); } /* Une seule règle de focus pour tout le produit. Jamais `outline: none` sans remplacement : c'est la première chose qui casse la navigation au clavier. */ .biotl-a :focus-visible, .biotl-m :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: var(--biotl-r-sm); } .biotl-a :focus-visible { outline-color: var(--biotl-a-accent); } .biotl-m :focus-visible { outline-color: var(--biotl-m-accent); } /* Respecte le réglage système de réduction du mouvement. Certaines personnes ont des vertiges avec les transitions ; d'autres consultent ce site le jour d'un enterrement. Dans les deux cas, on se tait. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* Mode contrastes forcés (Windows) : on rend les bordures explicites, sinon les cartes disparaissent complètement. */ @media (forced-colors: active) { .biotl-a [class*="card"], .biotl-a [class*="panel"], .biotl-m [class*="card"] { border: 1px solid CanvasText; } } /* Utilitaire d'accessibilité : visible seulement au lecteur d'écran. */ .biotl-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Lien d'évitement, visible dès qu'il prend le focus. */ .biotl-skip { position: absolute; inset-inline-start: var(--biotl-s-4); inset-block-start: -100%; z-index: 1000; padding: var(--biotl-s-2) var(--biotl-s-4); background: var(--biotl-a-surface); color: var(--biotl-a-ink); border-radius: var(--biotl-r-sm); box-shadow: var(--biotl-sh-4); transition: inset-block-start var(--biotl-t-base) var(--biotl-ease); min-block-size: 44px; /* WCAG 2.5.5 — il mesurait 42 px. */ display: inline-flex; align-items: center; } .biotl-skip:focus { inset-block-start: var(--biotl-s-4); } /* Squelettes de chargement. Une carte vide qui pulse vaut mieux qu'un saut de mise en page quand les données arrivent. */ .biotl-skeleton { background: linear-gradient( 90deg, var(--biotl-a-surface-3) 25%, var(--biotl-a-surface-2) 37%, var(--biotl-a-surface-3) 63% ); background-size: 400% 100%; animation: biotl-shimmer 1.4s ease infinite; border-radius: var(--biotl-r-sm); } @keyframes biotl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @keyframes biotl-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ========================================================================== BIDIRECTIONNEL — CE QUI NE SE RETOURNE JAMAIS ========================================================================== Une fourchette d'années, une adresse web, un code de mémorial, un numéro : ces suites s'écrivent de gauche à droite dans TOUTES les langues, y compris dans une page hébraïque. Sans indication, l'algorithme bidi d'Unicode réordonne les deux nombres qui encadrent un tiret, et « 1938–2019 » devient « 2019–1938 » : le lecteur hébréophone lit une naissance postérieure au décès. Ce n'est pas une coquette question de goût, c'est une donnée fausse. `dir="ltr"` sur l'élément suffit dans les navigateurs modernes (la feuille d'agent utilisateur du standard HTML isole déjà tout élément portant `dir`). `unicode-bidi: isolate` est posé ici EN PLUS, explicitement, pour deux raisons : il garantit que l'élément n'influence pas non plus l'ordre de ses VOISINS, et il rend l'intention lisible pour qui relira ce code. Poser les DEUX : l'attribut porte le sens dans le HTML, la classe porte la garantie dans le CSS. Un élément qui n'aurait que la classe resterait faux pour un lecteur d'écran, qui lit l'attribut, pas la feuille de style. ========================================================================== */ .biotl-ltr { direction: ltr; unicode-bidi: isolate; }