/* ========================= AMPOULE ========================== */

.tip-button{
position:fixed;
right:40px;
top:100px;
width:38px;
height:48px;
padding:0;
border:0;
background:transparent;
cursor:pointer;
z-index:30;
}

.tip-icon{
width:30px;
overflow:visible;
fill:none;
stroke:#737a77;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
transition:.2s ease;
}

.bulb-rays{
opacity:0;
transition:.2s ease;
}

/* ========================= SURVOL ========================== */

.tip-button:hover .tip-icon{
stroke:#FFD84A;
filter:
drop-shadow(0 0 4px rgba(255,216,74,.7))
drop-shadow(0 0 9px rgba(255,216,74,.3));
}

.tip-button:hover .bulb-rays{opacity:1;}

/* ========================= ACTIF ========================== */

.tip-button.active .tip-icon{
stroke:var(--green2);
filter:
drop-shadow(0 0 5px rgba(40,214,160,.8))
drop-shadow(0 0 12px rgba(40,214,160,.4));
}

.tip-button.active .bulb-rays{opacity:1;}

/* ========================= INFO ========================== */

.tip-label{
position:absolute;
right:90px;
top:8px;
width:190px;
padding:8px 10px;
border:1px solid rgba(40,214,160,.65);
background:rgba(5,8,7,.94);
color:#c8cecb;
font-size:11px;
font-weight:600;
letter-spacing:.04em;
box-shadow:0 0 14px rgba(40,214,160,.12),inset 0 0 10px rgba(40,214,160,.04);
opacity:0;
visibility:hidden;
transform:translateX(6px);
transition:.18s ease;
pointer-events:none;
}

.tip-label::before{
content:"";
position:absolute;
right:-32px;
top:50%;
width:8px;
height:8px;
border-radius:50%;
background:var(--green2);
box-shadow:0 0 6px var(--green2),0 0 12px rgba(137,255,213,.65);
transform:translate(50%,-50%);
}

.tip-label::after{
content:"";
position:absolute;
right:-28px;
top:50%;
width:28px;
height:1px;
background:rgba(40,214,160,.65);
}

.tip-button:hover .tip-label{
opacity:1;
visibility:visible;
transform:translateX(0);
}

/* ========================= TUTO ========================== */

.tip-overlay{
position:fixed;
inset:0;
background:rgba(0,0,0,.70);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
transition:.22s ease;
z-index:50;

-webkit-mask:
linear-gradient(#fff 0 0),
linear-gradient(#fff 0 0),
linear-gradient(#fff 0 0),
linear-gradient(#fff 0 0);

-webkit-mask-size:
100% 100%,
235px 48px,
54px 54px,
220px 42px;

-webkit-mask-position:
0 0,
calc(100% - 40px) 27px,
calc(100% - 379px) calc(100% - 188px),
calc(100% - 300px) calc(100% - 130px);

-webkit-mask-repeat:no-repeat;
-webkit-mask-composite:xor;
}

.tip-overlay.active{
opacity:1;
visibility:visible;
}

/* ========================= CADRES ========================== */

.tip-highlight{
position:fixed;
border:1px solid rgba(40,214,160,.75);
box-shadow:
0 0 10px rgba(40,214,160,.18),
inset 0 0 8px rgba(40,214,160,.06);
opacity:0;
visibility:hidden;
pointer-events:none;
z-index:60;
}

.tip-overlay.active ~ .tip-highlight{
opacity:1;
visibility:visible;
}

/* ========================= CADRE MENU ========================== */

.tip-highlight-menu{
width:235px;
height:48px;
right:40px;
top:27px;
}

/* ========================= CADRE AMPOULE ========================== */

.tip-highlight-bulb{
width:54px;
height:54px;
right:379px;
bottom:188px;
}

/* ========================= CADRE INFORMATION ========================== */

.tip-highlight-more{
width:220px;
height:42px;
right:300px;
bottom:130px;
}

/* ========================= BULLES ========================== */

.tip-callouts{
position:fixed;
z-index:60;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:flex;
flex-direction:column;
gap:16px;
opacity:0;
visibility:hidden;
pointer-events:none;
}

.tip-overlay.active ~ .tip-callouts{
opacity:1;
visibility:visible;
}

.tip-callout{
width:480px;
min-height:120px;
padding:18px 22px;
box-sizing:border-box;
border:1px solid rgba(40,214,160,.65);
background:rgba(5,8,7,.94);
box-shadow:
0 0 14px rgba(40,214,160,.12),
inset 0 0 10px rgba(40,214,160,.04);
}

.tip-callout-title{
display:block;
margin-bottom:6px;
color:var(--green2);
font-size:20px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}

.tip-callout-text{
display:block;
color:#c8cecb;
font-size:16px;
line-height:1.45;
}

/* ========================= POINTS ========================== */

.tip-point{
position:fixed;
z-index:61;
width:8px;
height:8px;
border-radius:50%;
background:var(--green2);
box-shadow:0 0 6px var(--green2),0 0 12px rgba(137,255,213,.65);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate(-50%,-50%);
}

.tip-point-menu-start{
left:calc(50% + 240px);
top:calc(50% - 202px);
}

.tip-point-menu-end{
left:calc(50% + 678px);
top:calc(50% - 367px);
}

.tip-point-slide-start{
left:calc(50% - 240px);
top:calc(50% - 67px);
}

.tip-point-slide-end{
left:calc(50% - 495px);
top:calc(50% + 82px);
}

.tip-point-light-start{
left:calc(50% + 240px);
top:calc(50% + 66px);
}

.tip-point-light-end{
left:50%;
top:50%;
}

.tip-overlay.active ~ .tip-point{
opacity:1;
visibility:visible;
}

/* ========================= LIGNES ========================== */

.tip-line{
position:fixed;
z-index:59;
opacity:0;
visibility:hidden;
pointer-events:none;
border-color:rgba(40,214,160,.85);
border-style:solid;
filter:drop-shadow(0 0 4px rgba(40,214,160,.35));
}

.tip-overlay.active ~ .tip-line{
opacity:1;
visibility:visible;
}

/* ========================= LIGNE MENU ========================== */

.tip-line-menu{
width:390px;
height:205px;
left:calc(50% + 240px);
top:27px;
border-width:0 1px 1px 0;
}

/* ========================= LIGNE SLIDE ========================== */

.tip-line-slide{
width:260px;
height:80px;
right:calc(50% + 240px);
top:285px;
border-width:1px 0 0 1px;
}

/* ========================= LIGNE LIGHT ========================== */

.tip-line-bulb{
width:250px;
height:80px;
left:calc(50% + 240px);
top:445px;
border-width:1px 1px 0 0;
}

/* ========================= LIGNE PLUS ========================== */

.tip-line-more{
width:240px;
height:80px;
left:calc(50% + 240px);
top:580px;
border-width:1px 1px 0 0;
}