/* la présence de MITARYS AI hors de sa page Deux comportements, un seul déclencheur : data-defile sur . 1. Le header devient une vitre. Le contenu passe dessous au lieu de disparaître derrière un mur blanc. 2. La tête flottante apparaît en bas à gauche, en cours de page seulement : ni en haut, ni sur le footer. Le lien MITARYS AI dans la nav est un lien de texte ordinaire. Il ne réagit pas au défilement : la marque vit sur sa propre page et dans la pastille flottante, pas dans la barre de navigation. */ .header { transition: background-color 350ms ease, border-color 350ms ease, box-shadow 350ms ease, backdrop-filter 350ms ease; } [data-defile] .header { background: rgb(255 255 255 / 72%); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-bottom-color: rgb(0 0 0 / 6%); box-shadow: 0 1px 20px rgb(0 0 0 / 5%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-defile] .header { background: rgb(255 255 255 / 96%); } } /* Fond noir, comme le logo d'origine. Le rendu 3D est blanc sur noir. Sur une pastille blanche il fallait un tracé vectoriel de remplacement ; sur noir, l'image d'origine se pose telle quelle et il n'y a plus qu'un logo à maintenir. `color: #fff` n'est pas décoratif : ai_logo.css calcule ses halos en `color-mix` sur currentColor. Sans cette ligne, la pastille héritait de la couleur de lien du site et le survol posait un halo violet sous un logo blanc. */ .ai-flottant { position: fixed; left: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 0; height: 52px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 13%); border-radius: 26px; background: rgb(10 10 10 / 92%); color: #fff; backdrop-filter: blur(12px) saturate(170%); -webkit-backdrop-filter: blur(12px) saturate(170%); box-shadow: 0 6px 26px rgb(0 0 0 / 22%); text-decoration: none; opacity: 0; transform: translateY(14px) scale(0.92); pointer-events: none; transition: opacity 300ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms ease, box-shadow 200ms ease; } /* Visible seulement en cours de page : ni en haut, ni sur le footer. data-pied est posé par l'IntersectionObserver quand le pied de page entre dans le cadre. */ [data-defile]:not([data-pied]) .ai-flottant { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* La sortie descend au lieu de remonter : elle suit le sens du scroll, comme si la pastille glissait sous le footer. */ [data-pied] .ai-flottant { transform: translateY(20px) scale(0.94); } /* Pas `border-color: currentColor` : currentColor vaut maintenant blanc pur, et un cerne blanc franc autour d'un fond noir fait bavure. On éclaircit le filet sans jamais l'amener au blanc. */ .ai-flottant:hover { border-color: rgb(255 255 255 / 32%); box-shadow: 0 10px 32px rgb(0 0 0 / 34%); } .ai-flottant .mai { width: 24px; flex-shrink: 0; } .ai-flottant__texte { display: inline-block; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: #fff; transition: max-width 320ms cubic-bezier(0.16, 1, 0.3, 1), opacity 220ms ease 60ms, margin-left 320ms cubic-bezier(0.16, 1, 0.3, 1); } .ai-flottant:hover .ai-flottant__texte, .ai-flottant:focus-visible .ai-flottant__texte { max-width: 13em; opacity: 1; margin-left: 11px; } @media (max-width: 640px) { .ai-flottant { left: 16px; bottom: 16px; height: 46px; padding: 0 13px; } .ai-flottant__texte { display: none; } } @media (prefers-reduced-motion: reduce) { .header, .ai-flottant, .ai-flottant__texte { transition: none; } }