/* Panier flottant — attaché au , hors de .lpsel. Le thème Phlox Pro applique ses propres styles aux boutons : chaque propriété qui détermine la forme est donc reposée explicitement. */ .lps-flot,.lps-flot *,.lps-flot *::before,.lps-flot *::after{box-sizing:border-box!important} .lps-flot{ position:fixed!important; top:130px; right:20px; z-index:99990; /* top est recalculé par le script d'après la hauteur réelle de l'en-tête */ font:400 15px/1.5 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif!important; --fs:#FFFFFF; --fk:#10191C; --fk2:#3B4E54; --fmu:#6C7F85; --fln:#E4ECEE; --fac:#0A7C91; --fac2:#00B5D1; margin:0; padding:0; width:auto; text-align:left; direction:ltr; } .lps-flot .lps-flotbtn{ all:unset; box-sizing:border-box!important; position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:56px!important; height:56px!important; min-width:0!important; max-width:none!important; min-height:0!important; padding:0!important; margin:0!important; border:0!important; border-radius:50%!important; background:var(--fac)!important; color:#fff!important; box-shadow:0 6px 20px -5px rgba(10,124,145,.5),0 0 0 1px rgba(255,255,255,.9)!important; cursor:pointer!important; overflow:visible!important; transition:background .16s ease, transform .14s ease!important; font:inherit!important; text-transform:none!important; letter-spacing:normal!important; line-height:1!important; text-decoration:none!important; -webkit-appearance:none!important; } .lps-flot .lps-flotbtn:hover{background:var(--fac2)!important; transform:translateY(-2px)!important} .lps-flot .lps-flotbtn:focus-visible{outline:2px solid var(--fac)!important; outline-offset:3px!important} .lps-flot .lps-flotbtn svg{ width:24px!important; height:24px!important; display:block!important; flex:0 0 auto!important; fill:none!important; stroke:currentColor!important; } .lps-flot .lps-flotn{ position:absolute!important; top:-4px!important; right:-4px!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:22px!important; height:22px!important; padding:0 6px!important; margin:0!important; border-radius:11px!important; background:#E8552F!important; color:#fff!important; border:2px solid #fff!important; font:700 11px/1 "IBM Plex Sans",sans-serif!important; letter-spacing:0!important; box-sizing:border-box!important; pointer-events:none; } .lps-flot.lps-vide .lps-flotn{background:#A8B8BC!important} .lps-flot.lps-vide .lps-flotbtn{background:#4E7C88!important; box-shadow:0 5px 16px -6px rgba(16,25,28,.4),0 0 0 1px rgba(255,255,255,.9)!important} .lps-flot.lps-vide .lps-flotbtn:hover{background:var(--fac)!important} .lps-flot .lps-flotpan{ position:absolute!important; top:66px!important; right:0!important; width:min(346px,calc(100vw - 40px))!important; margin:0!important; padding:18px 18px 18px 20px!important; background:var(--fs)!important; color:var(--fk)!important; border:1px solid var(--fln)!important; border-radius:14px!important; box-shadow:0 14px 44px -14px rgba(16,25,28,.35)!important; text-align:left!important; } .lps-flot .lps-flottitre{ font:600 11px/1 "IBM Plex Mono",ui-monospace,monospace!important; letter-spacing:.13em!important; text-transform:uppercase!important; color:var(--fmu)!important; margin:0 0 13px!important; } .lps-flot .lps-flotliste{ list-style:none!important; margin:0!important; padding:0!important; max-height:300px!important; overflow-y:auto!important; overflow-x:hidden!important; } .lps-flot .lps-flotliste li{ display:grid!important; grid-template-columns:minmax(0,1fr) auto auto!important; gap:2px 10px!important; padding:11px 0!important; margin:0!important; border-bottom:1px solid var(--fln)!important; font-size:13.5px!important; list-style:none!important; } .lps-flot .lps-flotliste li:last-child{border-bottom:0!important} .lps-flot .lps-flotliste li::before{content:none!important} .lps-flot .lps-flotliste a{ color:var(--fk)!important; text-decoration:none!important; font-weight:600!important; line-height:1.35!important; grid-column:1!important; min-width:0!important; overflow-wrap:anywhere!important; } .lps-flot .lps-flotliste a:hover{color:var(--fac)!important} .lps-flot .lps-flotliste em{grid-column:1!important; font-style:normal!important; color:var(--fmu)!important; font-size:12.5px!important} .lps-flot .lps-flotdel{ all:unset; box-sizing:border-box!important; grid-row:1!important; grid-column:3!important; display:flex!important; align-items:center!important; justify-content:center!important; width:32px!important; height:32px!important; margin:-4px 0 0 0!important; padding:0!important; border-radius:8px!important; cursor:pointer!important; color:#8A9BA0!important; background:transparent!important; border:1px solid transparent!important; transition:background .14s ease, color .14s ease!important; } .lps-flot .lps-flotdel:hover{background:#FDECE6!important; color:#D9451F!important; border-color:#F6D3C6!important} .lps-flot .lps-flotdel:focus-visible{outline:2px solid #D9451F!important; outline-offset:1px!important} .lps-flot .lps-flotdel:disabled{opacity:.4!important; cursor:progress!important} .lps-flot .lps-flotdel svg{width:17px!important; height:17px!important; display:block!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important} .lps-flot .lps-flotliste b{ grid-row:1!important; grid-column:2!important; font:500 13.5px/1.4 "IBM Plex Mono",ui-monospace,monospace!important; font-variant-numeric:tabular-nums; white-space:nowrap!important; color:var(--fk)!important; align-self:start!important; } .lps-flot .lps-flottotal{ display:flex!important; justify-content:space-between!important; align-items:baseline!important; margin:13px 0 0!important; padding:13px 0 0!important; border-top:2px solid var(--fln)!important; font-weight:600!important; font-size:14.5px!important; color:var(--fk)!important; } .lps-flot .lps-flottotal b{ font:700 19px/1 "IBM Plex Mono",ui-monospace,monospace!important; font-variant-numeric:tabular-nums; color:var(--fac)!important; } .lps-flot .lps-flotcta{display:flex!important; gap:8px!important; margin:15px 0 0!important} .lps-flot .lps-flotcta a{ flex:1 1 0!important; text-align:center!important; padding:11px 8px!important; font:600 13px/1.3 "IBM Plex Sans",sans-serif!important; border-radius:9px!important; border:1.5px solid var(--fac)!important; background:var(--fac)!important; color:#fff!important; text-decoration:none!important; box-sizing:border-box!important; } .lps-flot .lps-flotcta a:hover{background:var(--fac2)!important; border-color:var(--fac2)!important} .lps-flot .lps-flotcta a.lps-ghost{background:transparent!important; color:var(--fk2)!important; border-color:var(--fln)!important} .lps-flot .lps-flotcta a.lps-ghost:hover{background:#F4F8F9!important; color:var(--fk)!important} .lps-flot .lps-flotempty{margin:0!important; color:var(--fmu)!important; font-size:13.5px!important} @media (max-width:782px){ .lps-flot{right:12px!important} .lps-flot .lps-flotbtn{width:48px!important; height:48px!important} .lps-flot .lps-flotbtn svg{width:21px!important; height:21px!important} .lps-flot .lps-flotn{min-width:20px!important; height:20px!important; font-size:10.5px!important} .lps-flot .lps-flotpan{top:58px!important; width:min(320px,calc(100vw - 24px))!important; padding:16px!important} .lps-flot .lps-flotliste{max-height:46vh!important} } @media (prefers-reduced-motion:reduce){ .lps-flot *{transition:none!important} } @media (prefers-color-scheme:dark){ .lps-flot{--fs:#111A1D; --fk:#E9F0F1; --fk2:#B3C3C7; --fmu:#7D9297; --fln:#243033; --fac:#35C4DC; --fac2:#7BDCEC} .lps-flot .lps-flotbtn{color:#04222A!important; box-shadow:0 6px 20px -5px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)!important} .lps-flot .lps-flotn{border-color:#111A1D!important} .lps-flot .lps-flotdel{color:#7D9297!important} .lps-flot .lps-flotdel:hover{background:#3A1F18!important; color:#F0A487!important} .lps-flot .lps-flotcta a{color:#04222A!important} .lps-flot .lps-flotcta a.lps-ghost:hover{background:#1A2427!important} } /* Mise en évidence du bouton de commande. On agit sur outline et box-shadow : contrairement au fond, aucune règle ne les déclare en !important, une animation peut donc les modifier. */ .lps-flot .lps-flotcta a.lps-attention{ outline:3px solid #E8552F!important; outline-offset:3px!important; box-shadow:0 0 0 6px rgba(232,85,47,.16)!important; animation:lps-attention 1.15s ease-in-out infinite!important; } @keyframes lps-attention{ 0%,100%{outline-color:#E8552F; box-shadow:0 0 0 6px rgba(232,85,47,.16)} 50%{outline-color:#F5865F; box-shadow:0 0 0 10px rgba(232,85,47,.05)} } .lps-flot .lps-flotcta a{transition:outline-color .3s ease, box-shadow .3s ease} @media (prefers-reduced-motion:reduce){ .lps-flot .lps-flotcta a.lps-attention{animation:none!important} }