/* CLC Surlignage — trait de marqueur sur du texte en ligne. Signature du site : le coup de marqueur jaune qui passe sur le bas des lettres, comme sur la plaquette papier. Technique : un dégradé plein posé en fond de la boîte en ligne. Volontairement PAS un pseudo-élément en position absolue — celui-ci se réduit à un moignon dès que le texte passe à la ligne, et son « z-index: -1 » le fait passer DEVANT le texte lorsqu'un ancêtre porte un fond opaque. Réglages par variable CSS : --clc-surligne-couleur : couleur du trait (défaut : accent du site) --clc-surligne-epaisseur : épaisseur, en em pour suivre la police --clc-surligne-hauteur : distance depuis le haut de la boîte de texte --clc-surligne-decalage-x : décalage horizontal du débord (2.5.0) --clc-surligne-eclaircissement : 0–60%, mélange avec du blanc à teinte égale (2.5.2) --clc-surligne-echo-x : position horizontale de l'écho, en % (2.5.0) --clc-surligne-echo-opacite : visibilité de l'écho, en % — 0 par défaut (2.5.0) */ .clc-surligne { /* Le dégradé fond en transparence à chaque bout plutôt que de s'arrêter net : c'est ce qui fait lire le trait comme un vrai coup de feutre plutôt que comme un bloc vectoriel plat. Ne dépend d'aucune fonction récente (juste un linear-gradient à quatre arrêts, universellement supporté) : ce fondu s'applique pour tout le monde, sans condition. */ background-image: linear-gradient( to right, transparent 0%, var(--clc-surligne-couleur, var(--clc-accent, #f5d000)) 6%, var(--clc-surligne-couleur, var(--clc-accent, #f5d000)) 94%, transparent 100% ); background-repeat: no-repeat; /* Calage en em, donc proportionnel à toutes les tailles de texte. Ces valeurs sont le résultat d'un essai comparatif de quatre géométries sur cinq tailles (17, 20, 26, 40 et 60 px) : c'est la seule qui ne se lise jamais comme un texte barré aux petites tailles tout en gardant le caractère du coup de marqueur aux grandes. Ne pas l'épaissir sans revérifier à 17 et 20 px. */ background-size: 100% var(--clc-surligne-epaisseur, 0.34em); background-position: 0 var(--clc-surligne-hauteur, 0.74em); /* Le trait dépasse légèrement de part et d'autre, comme un vrai marqueur. En em pour rester proportionnel à toutes les tailles de texte. --clc-surligne-decalage-x (2.5.0, Réglages → CLC Blocks) décale ce débord vers la gauche ou la droite plutôt que de le garder symétrique — à 0em (valeur par défaut) c'est rigoureusement identique à l'ancien « padding: 0 0.12em ». Le principe : la marge annule exactement le padding de chaque côté, de sorte que seul le fond se déplace, jamais le texte. Correctif 2.5.15 — le débord de chaque côté est d'abord borné à zéro, puis la marge reprend *cette valeur retenue*. Auparavant padding et marge étaient calculés séparément à partir de la même formule : dès que le décalage dépassait 0.12em, le navigateur ramenait le padding négatif à zéro (les paddings négatifs n'existent pas) mais gardait la marge positive telle quelle. L'annulation ne se faisait plus, et un blanc apparaissait à gauche du mot surligné — visible à partir de 0.13em, donc sur toute la moitié haute du curseur de réglage. Passer par deux variables intermédiaires est ce qui garantit que les deux propriétés lisent rigoureusement la même valeur bornée. */ --clc-surligne-debord-d: max( 0em, 0.12em + var( --clc-surligne-decalage-x, 0em ) ); --clc-surligne-debord-g: max( 0em, 0.12em - var( --clc-surligne-decalage-x, 0em ) ); padding: 0 var( --clc-surligne-debord-d ) 0 var( --clc-surligne-debord-g ); margin: 0 calc( -1 * var( --clc-surligne-debord-d ) ) 0 calc( -1 * var( --clc-surligne-debord-g ) ); /* Sans ceci, le débord et le fond ne sont appliqués qu'à la première ligne quand le surlignage passe à la ligne. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; /* Le surlignage impose l'encre. Sur une section à fond sombre le texte courant est blanc, et blanc sur jaune tombe à 1,51:1 — la règle du jaune du design system l'interdit. */ color: var(--clc-text, #111); /* Neutralise le style natif de (fond jaune système, encre système). */ background-color: transparent; /* Les fonds sont supprimés à l'impression par défaut. */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ---------- Écho (2.5.0) ---------- */ /* Un second trait, plus clair et légèrement décalé, posé PAR-DESSUS le premier — l'équivalent d'une double passe de marqueur à main levée. Remplace l'idée initiale d'incliner le trait : incliner indépendamment du texte exigerait de mesurer les lignes en JavaScript à chaque redimensionnement (voir la note dans admin/settings.php) — bien trop fragile pour un format de texte qui peut apparaître n'importe où, y compris au milieu d'un paragraphe qui se reformate. Un léger décalage de cet écho donne un effet visuel très proche pour un coût nul : ça reste un simple empilement de fonds, cloné ligne par ligne comme le trait principal, sans une ligne de JavaScript. Cette même règle porte aussi la luminosité (--clc-surligne-eclaircissement) : un mélange avec du blanc, à teinte égale — pas une désaturation, qui avait été essayée puis écartée en amont parce qu'elle ternit l'or CLC. --clc-surligne-claire est calculée une fois puis réutilisée pour l'écho, qui reste ainsi une version encore plus claire de la teinte déjà choisie plutôt que de repartir de la couleur brute. --clc-surligne-eclaircissement et --clc-surligne-echo-opacite sont à 0% par défaut : tant que ces réglages ne sont pas touchés, les deux color-mix() résolvent sur la couleur d'origine et sur « transparent » — aucune régression pour les milliers d'occurrences déjà posées sur le site. Conditionné à color-mix() (Chrome/Edge 111+, Firefox 113+, Safari 16.4+, soit la quasi-totalité du trafic en 2026) : sur un navigateur plus ancien, .clc-surligne ci-dessus reste inchangé (fondu compris, qui lui ne dépend pas de color-mix), sans aucune dégradation visible — juste sans l'éclaircissement ni l'écho. */ @supports ( background: color-mix( in srgb, red, blue ) ) { .clc-surligne { --clc-surligne-claire: color-mix( in srgb, var(--clc-surligne-couleur, var(--clc-accent, #f5d000)) calc( 100% - var(--clc-surligne-eclaircissement, 0%) ), white ); background-image: linear-gradient( to right, transparent 0%, color-mix( in srgb, color-mix( in srgb, var(--clc-surligne-claire) 100%, white 35% ) var(--clc-surligne-echo-opacite, 0%), transparent ) 6%, color-mix( in srgb, color-mix( in srgb, var(--clc-surligne-claire) 100%, white 35% ) var(--clc-surligne-echo-opacite, 0%), transparent ) 94%, transparent 100% ), linear-gradient( to right, transparent 0%, var(--clc-surligne-claire) 6%, var(--clc-surligne-claire) 94%, transparent 100% ); background-repeat: no-repeat, no-repeat; /* 90 % de largeur : la marge nécessaire pour que le décalage horizontal de l'écho (--clc-surligne-echo-x) ait un effet visible. Épaisseur à 68 % du trait principal — le rapport qui, dans les essais, se lisait comme une « double passe » plutôt que comme un second trait indépendant. */ background-size: 90% calc( var(--clc-surligne-epaisseur, 0.34em) * 0.68 ), 100% var(--clc-surligne-epaisseur, 0.34em); background-position: var(--clc-surligne-echo-x, 50%) calc( var(--clc-surligne-hauteur, 0.74em) + var(--clc-surligne-epaisseur, 0.34em) * 0.4 ), 0 var(--clc-surligne-hauteur, 0.74em); } } /* ---------- Variantes d'épaisseur ---------- */ /* Trait épais, calage du titre d'origine : le trait mord franchement sur le bas des lettres. Réservé au très grand display, à partir d'environ 40 px — en dessous il se lit comme un texte barré. */ /* Spécificité doublée (.clc-surligne + variante) : les réglages par défaut ajoutés en 2.5.0 (Réglages → CLC Blocks) s'appliquent sur le sélecteur « body », volontairement peu spécifique, précisément pour que ces variantes d'épaisseur gardent toujours la main dessus, quel que soit l'ordre de chargement des feuilles de style. */ .clc-surligne.clc-surligne-marqueur { --clc-surligne-epaisseur: 0.44em; --clc-surligne-hauteur: 0.66em; } /* Trait fin. Pour le texte dense, ou quand le surlignage revient plusieurs fois dans un même paragraphe et que le défaut ferait trop de masse jaune. */ .clc-surligne.clc-surligne-fin { --clc-surligne-epaisseur: 0.28em; --clc-surligne-hauteur: 0.78em; } /* Bloc plein, façon stabilo. À réserver aux mots isolés : sur une phrase entière, la masse de couleur écrase la mise en page. */ .clc-surligne.clc-surligne-plein { --clc-surligne-epaisseur: 1.15em; --clc-surligne-hauteur: 0; padding: 0.02em 0.18em; margin: 0 -0.18em; } /* ---------- Révélation au défilement (facultatif) ---------- */ /* Le trait se trace de gauche à droite. Sur les navigateurs qui gèrent « animation-timeline », il se déclenche à l'entrée dans le champ de vision ; ailleurs il se joue au chargement — la dégradation est propre puisque l'état final est le trait complet. */ /* Note (2.5.0) : si l'écho ci-dessus est actif ET que cette classe est posée sur le même élément, le repli 1-valeur ci-dessous s'applique aux deux calques de fond (l'écho anime alors sa largeur avec le trait principal plutôt que de garder ses 90 % fixes) — effet secondaire mineur, non corrigé volontairement pour ne pas alourdir une combinaison rare. */ .clc-surligne-anime { background-size: 0 var(--clc-surligne-epaisseur, 0.34em); animation: clcSurligne 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes clcSurligne { to { background-size: 100% var(--clc-surligne-epaisseur, 0.34em); } } @supports (animation-timeline: view()) { .clc-surligne-anime { animation-timeline: view(); animation-range: entry 10% cover 32%; } } @media (prefers-reduced-motion: reduce) { .clc-surligne-anime { animation: none; background-size: 100% var(--clc-surligne-epaisseur, 0.34em); } } /* ---------- Mode contrasté de Windows ---------- */ /* Le navigateur y remplace les couleurs : le trait disparaît. On rétablit un soulignement, sinon la mise en valeur est perdue sans compensation. */ @media (forced-colors: active) { .clc-surligne { background: none; text-decoration: underline; text-decoration-thickness: 0.14em; text-underline-offset: 0.12em; } }