/* ============================================================ Effets visuels Sextant : groupe « fiche-navigation » (16/09/2026) 21 L'élément cliqué devient l'en-tête de la fiche 29 L'onglet tire son contenu 39 Le plan du haut s'éloigne au défilement, la ligne d'onglets flotte (tous les onglets de la fiche) Le vol (21) et le glissement des panneaux (29) sont pilotés par js/fx/fiche-navigation.js (animations Web sans classe posée sur les éléments de l'application) ; ce fichier porte les fantômes du vol (21), le ressort partagé du curseur d'onglets (29) et le recul de l'en-tête au défilement (39, animation liée au défilement, la classe sur étant posée par le JS près du haut de la fiche). Aucune règle au repos. ============================================================ */ /* ---------- 21 : fantômes (carte d'origine, portrait) pendant le vol ---------- */ .fx-fiche-navigation-fantome { position: fixed; margin: 0; padding: 0; border: 0; pointer-events: none; z-index: 999; transform-origin: 0 0; contain: layout style; } /* ---------- 29 : le curseur existant et le panneau partagent le même ressort ---------- */ @media (min-width: 769px) and (prefers-reduced-motion: no-preference) { body .client-tabs .fiche-tab-glider { transition: transform .46s cubic-bezier(.3, 1.15, .35, 1), width .46s cubic-bezier(.3, 1.15, .35, 1), opacity .2s ease; } } /* ---------- 39 : la carte du haut recule, la ligne d'onglets flotte (révisé le 17/09/2026) ---------- Accroche : html.fx-fiche-navigation-onglets (fiche ouverte, bureau) ; ligne détachée : .fx-fiche-navigation-flotte. Recul : animation liée au défilement (le navigateur la calcule hors du fil principal), attachée par html.fx-fiche-navigation-recul seulement quand l'en-tête approche du haut ; l'en-tête et la ligne d'onglets suivent la même progression (timeline-scope). Repli JS sans animation-timeline. Fluidité : ni flou d'arrière-plan, ni pénombre, ni transition d'ombre (rien à recalculer à chaque image). */ @media (min-width: 900px) { html.fx-fiche-navigation-onglets #page-fiche-client.active > .client-tabs { position: sticky; top: 26px; } html.fx-fiche-navigation-onglets #page-fiche-client.active > .client-tabs.fx-fiche-navigation-flotte { z-index: 45; /* un peu plus grosse en hauteur (+10 px) sans toucher à la largeur (logo à gauche, languette à droite) ; la marge du bas baisse d'autant : le contenu en dessous ne bouge pas */ margin-bottom: 8px; border-radius: 18px; background: var(--card); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .06); } html.fx-fiche-navigation-onglets #page-fiche-client.active > .client-tabs.fx-fiche-navigation-flotte .client-tab { padding-top: 17px; padding-bottom: 17px; } html.fx-fiche-navigation-onglets body.light-theme #page-fiche-client.active > .client-tabs.fx-fiche-navigation-flotte .client-tab { padding-top: 15px; padding-bottom: 15px; } html.fx-fiche-navigation-onglets body.light-theme #page-fiche-client.active > .client-tabs.fx-fiche-navigation-flotte { border-radius: 999px; box-shadow: 0 12px 28px -12px rgba(23, 43, 99, .22), 0 0 0 1px rgba(22, 50, 79, .08); } } /* bande floutée en haut de l'écran, derrière la ligne qui flotte (demande du 17/09/2026) : le contenu qui défile au-dessus de la ligne se trouble, la ligne ressort. Bande fixe, fondue vers le bas, flou modéré. */ @media (min-width: 900px) { html.fx-fiche-navigation-voile #page-fiche-client.active::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 44; pointer-events: none; background: color-mix(in srgb, var(--bg) 45%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent); mask-image: linear-gradient(#000 calc(100% - 14px), transparent); } } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) and (timeline-scope: --fx) { html.fx-fiche-navigation-recul #page-fiche-client.active { timeline-scope: --fx-fiche-navigation-entete; } html.fx-fiche-navigation-recul #page-fiche-client.active > .client-page-header { view-timeline: --fx-fiche-navigation-entete block; animation: fx-fiche-navigation-recul linear both; animation-timeline: --fx-fiche-navigation-entete; animation-range: exit 0% exit 100%; transform-origin: 50% 100%; } html.fx-fiche-navigation-recul #page-fiche-client.active > .client-tabs:not(.fx-fiche-navigation-flotte) { animation: fx-fiche-navigation-recul linear both; animation-timeline: --fx-fiche-navigation-entete; animation-range: exit 0% exit 100%; transform-origin: 50% 0; } } } /* échelle 1 - 0,07 p² (même courbe que le repli JS) */ @keyframes fx-fiche-navigation-recul { 0% { transform: scale(1); } 25% { transform: scale(.9956); } 50% { transform: scale(.9825); } 75% { transform: scale(.9606); } 100% { transform: scale(.93); } }