#optimus-bouton {
--optimus-marine: #162e54;
position: fixed;
right: 20px;
bottom: 90px;
z-index: 1000;
display: flex;
align-items: center;
gap: 10px;
height: 56px;
min-width: 56px;
margin: 0;
padding: 0 16px;
border: 0;
border-radius: 28px;
background: var(--optimus-marine);
color: #fff;
font: 600 15px/1 Lato, sans-serif;
letter-spacing: 0;
text-transform: none;
box-shadow: 0 4px 14px rgba(22, 46, 84, 0.35);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#optimus-bouton:hover,
#optimus-bouton:focus-visible {
background: var(--optimus-marine);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(22, 46, 84, 0.45);
}
#optimus-bouton:focus-visible {
outline: 2px solid #fff;
outline-offset: -5px;
}
#optimus-bouton svg {
flex: none;
width: 24px;
height: 24px;
}
#optimus-bouton .optimus-icone-chat {
fill: currentColor;
}
#optimus-bouton .optimus-icone-fermer {
display: none;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
} #optimus-bouton[aria-expanded="true"] {
padding: 0;
justify-content: center;
width: 56px;
}
#optimus-bouton[aria-expanded="true"] .optimus-icone-chat,
#optimus-bouton[aria-expanded="true"] .optimus-libelle {
display: none;
}
#optimus-bouton[aria-expanded="true"] .optimus-icone-fermer {
display: block;
}
#optimus-fenetre {
position: fixed;
right: 20px;
bottom: 158px;
z-index: 999;
width: 380px;
height: 560px;
max-height: calc(100vh - 178px);
border-radius: 12px;
overflow: hidden;
background: #fff;
box-shadow: 0 10px 40px rgba(22, 46, 84, 0.25);
display: flex;
flex-direction: column;
font-family: Lato, sans-serif;
}
#optimus-fenetre[hidden],
#optimus-fenetre .optimus-entete[hidden] {
display: none;
}
#optimus-fenetre .optimus-entete {
flex: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 12px 14px 18px;
background: #162e54;
color: #fff;
}
#optimus-fenetre .optimus-entete strong {
display: block;
font-size: 17px;
font-weight: 700;
line-height: 1.2;
}
#optimus-fenetre .optimus-entete span {
display: block;
margin-top: 2px;
font-size: 12.5px;
line-height: 1.3;
opacity: 0.8;
}
#optimus-fenetre .optimus-fermer {
flex: none;
width: 36px;
height: 36px;
margin: 0;
padding: 6px;
border: 0;
border-radius: 50%;
background: transparent;
color: #fff;
cursor: pointer;
}
#optimus-fenetre .optimus-fermer:hover,
#optimus-fenetre .optimus-fermer:focus-visible {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
#optimus-fenetre .optimus-fermer svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
#optimus-fenetre .optimus-corps {
flex: 1;
min-height: 0;
}
#optimus-fenetre iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
#optimus-fenetre .optimus-corps a {
color: #162e54;
} @media (max-width: 768px) {
#optimus-bouton {
right: 16px;
width: 52px;
min-width: 0;
height: 52px;
padding: 0;
justify-content: center;
}
#optimus-bouton[aria-expanded="true"] {
width: 52px;
}
#optimus-bouton .optimus-libelle {
display: none;
}
#optimus-fenetre {
right: 12px;
left: 12px;
bottom: 154px;
width: auto;
height: calc(100vh - 170px);
height: calc(100dvh - 170px);
max-height: none;
}
}