/* ═══════════════════════════════════════════════════════════════════════ IL ETAIT UN PIXEL · sommaire épinglé seul · iup-sticky-0.16.css ─────────────────────────────────────────────────────────────────────── Extrait du kit complet : uniquement l'effet 04, sommaire épinglé, avec sa surbrillance et le contour de focus dont il dépend. Rien d'autre : ni fond morphant, ni parallaxe, ni fondu, ni survol, ni découpes, ni défilement horizontal, ni surveillance. Inerte tant que ne porte pas la classe « iup-fx ». Aligné sur iup-effects-0.13 : même comportement, mêmes classes. ═══════════════════════════════════════════════════════════════════════ */ .iup-fx { --iup-ardoise: #3A4A5C; --iup-sticky-top: 96px; --iup-dur-fade: 420ms; --iup-ease: cubic-bezier(.22, .61, .36, 1); } /* Fluid Engine positionne les blocs en absolu, ce qui rend « position: sticky » inopérant. Le script épingle donc le bloc à la main et laisse une cale de la même hauteur. Ces règles ne servent qu'à l'état épinglé. */ .iup-fx .iup-pin-wrap { position: relative; min-width: 0; } .iup-fx .iup-pinned { position: fixed; top: var(--iup-sticky-top); z-index: 3; } .iup-fx .iup-pin-shim { pointer-events: none; visibility: hidden; } /* Élévation de la section qui héberge le sommaire, le temps de l'épinglage : sans elle, la section suivante recouvre le bloc. */ .iup-fx .iup-pin-host { position: relative !important; z-index: 6 !important; } /* Surbrillance du chapitre en cours, posée par le script. Volontairement sans couleur propre : le lien allumé reprend la couleur pleine de son thème, les autres sont atténués. Fonctionne sur fond clair comme noir. */ /* .48 tombait a 3,06:1 sur fond papier, sous le plancher AA de 4,5:1 pour du texte de 13 px. La barre verticale porte deja le signal du chapitre courant : l'attenuation n'a donc pas a etre forte pour se lire. */ .iup-fx .iup-stick a { opacity: .72; text-decoration: none; transition: opacity var(--iup-dur-fade) var(--iup-ease); } .iup-fx .iup-stick a:hover, .iup-fx .iup-stick a:focus-visible { opacity: .88; } .iup-fx .iup-stick a.iup-current { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* Anatomie du sommaire : titre, liste au rail vertical, mention de duree. Aucune couleur propre : tout reprend celle du theme de la section, ce qui fonctionne sur fond clair comme sur fond noir. */ .iup-fx .iup-stick { display: flex; flex-direction: column; gap: 18px; } .iup-fx .iup-stick-title { font-size: 11px; font-weight: 500; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; opacity: .62; } .iup-fx .iup-stick-list { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 16px; } /* Le rail continu, en filet attenue. */ .iup-fx .iup-stick-list::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: currentColor; opacity: .18; } .iup-fx .iup-stick-list a { position: relative; } /* La barre du chapitre en cours, posee par-dessus le rail. */ .iup-fx .iup-stick-list a::before { content: ""; position: absolute; left: -16px; top: -3px; bottom: -3px; width: 1px; background: currentColor; opacity: 0; transition: opacity var(--iup-dur-fade) var(--iup-ease); } .iup-fx .iup-stick-list a.iup-current::before { opacity: 1; } .iup-fx .iup-stick-meta { display: flex; flex-direction: column; gap: 4px; padding-top: 16px; border-top: 1px solid currentColor; font-size: 13px; line-height: 1.5; } .iup-fx .iup-stick-meta > span:first-child { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; opacity: .62; } /* Dans une liste, le soulignement du lien courant ferait doublon avec la barre : la barre suffit. */ .iup-fx .iup-stick-list a.iup-current { text-decoration: none; } /* Le contour de focus natif de Squarespace est trop peu contrasté. */ .iup-fx a:focus-visible, .iup-fx button:focus-visible { outline: 2px solid var(--iup-ardoise); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .iup-fx .iup-stick a { transition: none; } }