/* ===== Services : nuages de verre flottants (rappel du Cloud) =====
   La forme du nuage = 3 cercles + une base arrondie. Le flou d'arrière-plan est découpé à cette forme par un masque. */
.bubbles{aspect-ratio:1140/700}
.bub{aspect-ratio:160/116;border-radius:0;animation:cloudFloat 9s ease-in-out infinite;animation-delay:calc(var(--d)*-1s)}
@keyframes cloudFloat{0%,100%{transform:translate(0,0)}35%{transform:translate(6px,-12px)}70%{transform:translate(-5px,-5px)}}
.bub::after{content:"";position:absolute;left:14%;right:14%;bottom:-9%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);z-index:-1;animation:cloudShadow 9s ease-in-out infinite;animation-delay:inherit}
@keyframes cloudShadow{35%{transform:scale(.88);opacity:.6}}
.glass{border-radius:0;border:0;background:none;box-shadow:none;padding:24% 14% 10%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2724%204%20160%20116%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Ccircle%20cx%3D%2762%27%20cy%3D%2772%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2752%27%20r%3D%2744%27%2F%3E%3Ccircle%20cx%3D%27145%27%20cy%3D%2770%27%20r%3D%2734%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%2770%27%20width%3D%27152%27%20height%3D%2746%27%20rx%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%2724%204%20160%20116%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27%23000%27%3E%3Ccircle%20cx%3D%2762%27%20cy%3D%2772%27%20r%3D%2734%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%2752%27%20r%3D%2744%27%2F%3E%3Ccircle%20cx%3D%27145%27%20cy%3D%2770%27%20r%3D%2734%27%2F%3E%3Crect%20x%3D%2728%27%20y%3D%2770%27%20width%3D%27152%27%20height%3D%2746%27%20rx%3D%2723%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center/100% 100% no-repeat}
.glass::before,.glass::after{display:none}
.glass > *:not(.cloud){position:relative;z-index:1}
.glass svg.cloud{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible}
.cl-rim{fill:#fff;opacity:.32}
.cl-fill{fill:#1a1027;opacity:.55}
.cl-shine{display:none}
.bub:hover .glass,.bub:focus-visible .glass{transform:scale(1.06);box-shadow:none}
.bub:hover .cl-rim{opacity:.6}
.bub:hover .cl-fill{opacity:.45}
.bub:focus-visible .glass{outline:0}
.bub:focus-visible .cl-rim{fill:var(--pink);opacity:1}
.glass h3{text-shadow:0 2px 14px rgba(20,8,40,.55)}
.glass p{color:var(--fg-80);text-shadow:0 2px 10px rgba(20,8,40,.5)}
@media (max-width:860px){
  .bubbles{aspect-ratio:auto}
  .glass{padding:24% 12% 9%}
  .bub::after{display:none}
}
@media (max-width:600px){.glass p{display:none!important}.glass{gap:4px}}
@media (prefers-reduced-motion:reduce){.bub,.bub::after{animation:none}}