/* ═══════════════════════════════════════════════════════════════════════════ d4-texte.v1.css — les clins d'œil du texte sur d4xw.com (29/10/2026). Va avec d4-texte.v1.js (qui remplace d4-cyb3r.v1.*). Trois effets : · — chaque mot CYBER : son E passe à 3 par instants. — chaque D4 : il décroche par rafales, comme le nom de l'onglet. Le texte du DOM ne change JAMAIS : la lettre d'origine est masquée (visibility) et le 3 ou la rafale sont dessinés par-dessus, dans un ::after en position absolue. Rien ne bouge dans la mise en page. Alignement : le ::after part du haut de la boîte du mot, avec une hauteur de ligne ÉGALE à la hauteur de cette boîte (--d4t-h, mesurée par le script au départ de l'effet) : il n'y a plus d'interligne à partager, sa ligne de base tombe pile sur celle du texte. Vérifié au pixel près sur 180 combinaisons police × taille × interligne (la méthode « milieu + interligne nul » ratait d'un pixel en Fira 48 px). Centré à l'horizontale : un 3 un peu plus large qu'un E déborde d'autant des deux côtés. text-indent remis à 0 (un titre en retrait, comme celui de main.php, le transmettrait au ::after). Pendant l'effet, le mot tressaute et se dédouble en bleu/jaune — les deux couleurs du glitch de main.php. `left`/`top` et pas `transform` : le mot reste en `display: inline` (un inline-block ouvrirait une coupure de ligne au milieu de « cybersécurité »), et une position relative s'applique à un inline, un transform non. « Animations réduites » : le 3, les rafales et le dédoublement restent (ils changent SUR PLACE), seul le tressautement saute. · .d4-glitch + data-text — le titre glitché de main.php (dédoublement bleu/jaune toutes les 6 s), pour les titres des sous-sections. Même cadence et mêmes couleurs que main.php, qui ne le coupe pas non plus en « animations réduites ». À ne poser que sur un élément en position statique ou relative (il passe en relative). · .d4-sig — la signature cachée « © 2026 — Créé par D4 — Tous droits réservés », posée par le script sur les pages qui n'ont pas la leur. Transparente, révélée 2,5 s par Ctrl+A, comme celle de main.php. Hors du flux, sans clic (pointer-events: none) : elle ne gêne jamais la page. Thème clair (Learn, messagerie : ) : bleu et jaune plus sombres, ceux de la messagerie (ui.css), et une signature en gris. ⚠️ Nom versionné (Cloudflare) : modifier = v2 + répercuter (grep d4-texte). ═══════════════════════════════════════════════════════════════════════════ */ d4-cy, d4-d4 { position: relative; --d4t-a: rgba(119, 119, 255, .85); --d4t-b: rgba(255, 255, 102, .75); } :root[data-theme="light"] d4-cy, :root[data-theme="light"] d4-d4 { --d4t-a: rgba(47, 61, 214, .7); --d4t-b: rgba(176, 138, 0, .7); } d4-cy.is-s, d4-d4.is-s { animation: d4t-saut .34s steps(1, end) 1; } d4-e { position: relative; } d4-e.is-3, d4-d4.is-g { visibility: hidden; } d4-e.is-3::after, d4-d4.is-g::after { visibility: visible; position: absolute; left: 50%; top: 0; transform: translateX(-50%); line-height: var(--d4t-h, normal); text-indent: 0; white-space: nowrap; pointer-events: none; } /* Après le « / » : ce que lit un lecteur d'écran — la lettre d'origine. Un navigateur qui ne connaît pas cette syntaxe garde la 1re ligne. */ d4-e.is-3::after { content: "3"; content: "3" / attr(data-o); } d4-d4.is-g::after { content: attr(data-g); content: attr(data-g) / attr(data-o); } @keyframes d4t-saut { 0% { left: -.12em; top: .05em; text-shadow: .12em 0 var(--d4t-a), -.12em 0 var(--d4t-b); } 25% { left: .12em; top: -.05em; text-shadow: -.12em 0 var(--d4t-a), .12em 0 var(--d4t-b); } 50% { left: -.06em; top: 0; text-shadow: .06em 0 var(--d4t-a), -.06em 0 var(--d4t-b); } 75% { left: .05em; top: 0; text-shadow: none; } 100% { left: 0; top: 0; } } @keyframes d4t-sur-place { 0% { text-shadow: .12em 0 var(--d4t-a), -.12em 0 var(--d4t-b); } 25% { text-shadow: -.12em 0 var(--d4t-a), .12em 0 var(--d4t-b); } 50% { text-shadow: .06em 0 var(--d4t-a), -.06em 0 var(--d4t-b); } 75% { text-shadow: none; } } @media (prefers-reduced-motion: reduce) { d4-cy.is-s, d4-d4.is-s { animation-name: d4t-sur-place; } } /* ── Titre glitché, recette de main.php ─────────────────────────────────── */ .d4-glitch { position: relative; animation: d4g-idle 6s infinite; } .d4-glitch::before, .d4-glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } .d4-glitch::before { color: #77f8; animation: d4g-a 6s infinite; } .d4-glitch::after { color: #ff68; animation: d4g-b 6s infinite; } :root[data-theme="light"] .d4-glitch::before { color: #2f3dd6aa; } :root[data-theme="light"] .d4-glitch::after { color: #b08a00aa; } @keyframes d4g-idle { 0%, 88%, 100% { left: 0; top: 0; } 89% { left: -2px; top: 1px; } 90% { left: 2px; top: -1px; } 91% { left: 0; top: 0; } } @keyframes d4g-a { 0%, 88%, 100% { opacity: 0; transform: translate(0); } 89% { opacity: .6; transform: translate(-3px, 1px); clip-path: inset(20% 0 50% 0); } 90% { opacity: .4; transform: translate(2px, -2px); clip-path: inset(65% 0 5% 0); } 91% { opacity: 0; } } @keyframes d4g-b { 0%, 89%, 100% { opacity: 0; transform: translate(0); } 90% { opacity: .5; transform: translate(3px, -1px); clip-path: inset(40% 0 30% 0); } 91% { opacity: .3; transform: translate(-2px, 2px); clip-path: inset(10% 0 70% 0); } 92% { opacity: 0; } } /* ── La signature cachée (pages sans la leur) ───────────────────────────── */ .d4-sig { position: fixed; left: 0; right: 0; bottom: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000; margin: 0; padding: 0 12px; text-align: center; font: 400 11px/1.4 "Fira Code", ui-monospace, monospace; letter-spacing: .12em; text-transform: none; color: transparent; -webkit-user-select: none; user-select: none; pointer-events: none; transition: color .4s; } .d4-sig.revealed { color: rgba(255, 255, 255, .2); } :root[data-theme="light"] .d4-sig.revealed { color: rgba(0, 0, 0, .34); } @media print { .d4-sig { display: none; } }