/* 2026-09-23/24 : Dany's changes + Joseph's notes. Loaded last, layered on the approved scene design. */
:root{--ec-navy:#0b2a4a;--ec-blue:#009fe0;--ec-deep:#0879c8;--ec-ice:#eef9fe;--ec-line:#d6ecf7}
body[data-variant="4"] .services-intro h2 br{display:block}

/* Bubble buttons, like the logo: glossy pill + soap bubbles on the edge */
.button{position:relative;isolation:isolate;overflow:visible;background:linear-gradient(180deg,#ffffff38 0,#ffffff00 52%),linear-gradient(110deg,#04acd9,#0088ed);box-shadow:0 8px 25px #05a7d726,inset 0 1px 0 #ffffff80,inset 0 -3px 8px #0068b433}
.button.white{background:linear-gradient(180deg,#fff 0,#f1faff 100%);box-shadow:0 8px 25px #0a3d6a22,inset 0 -3px 8px #0a88d414}
.button:before,.button:after{content:'';position:absolute;border-radius:50%;pointer-events:none;border:1px solid #8fdcf8d9;background:radial-gradient(circle at 30% 27%,#fffffff2 0 11%,#ffffff66 21%,#b7ecff33 48%,#3fb8ee45 76%,#ffffffd9 100%);box-shadow:inset -2px -3px 5px #0a8fd42e,0 3px 8px #0a5aa01f;animation:ec-bob 4.2s ease-in-out infinite}
.button:before{width:24px;height:24px;right:-7px;top:-11px}
.button:after{width:13px;height:13px;left:14px;bottom:-7px;animation-delay:-1.6s;animation-duration:3.4s}
.button:hover:before{animation-duration:1.6s}
@keyframes ec-bob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.06)}}

/* Bubble cloud AROUND Dany (hero). Positions are % of the hero, tuned per layout. */
.hero-bubbles{position:absolute;inset:0;pointer-events:none;z-index:1}
.hero-bubbles i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;border:1px solid #9fe2fbcc;background:radial-gradient(circle at 30% 27%,#fffffff5 0 10%,#ffffff70 20%,#c6f0ff38 46%,#4dbff04d 76%,#ffffffe6 100%);box-shadow:inset -3px -4px 8px #0a8fd433,0 4px 10px #06406e1c;animation:ec-float 6s var(--d) ease-in-out infinite,ec-in .9s calc(var(--d) * .25) both}
@keyframes ec-float{0%,100%{transform:translate(0,0)}33%{transform:translate(4px,-10px)}66%{transform:translate(-3px,-5px)}}
@keyframes ec-in{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
.hero-bubbles .b0{left:47%;top:40%}.hero-bubbles .b1{left:52%;top:31%}.hero-bubbles .b2{left:44%;top:30%}
.hero-bubbles .b3{left:55%;top:45%}.hero-bubbles .b4{left:49%;top:52%}
.hero-bubbles .b5{left:80%;top:46%}.hero-bubbles .b6{left:84%;top:38%}.hero-bubbles .b7{left:88%;top:50%}.hero-bubbles .b8{left:77%;top:36%}

/* Section 02 : before / after, one screen */
.realisations{display:flex;flex-direction:column;gap:22px;padding:48px 32px;background:linear-gradient(180deg,#f3fbff,#fff);border:1px solid var(--ec-line);border-radius:26px}
.real-head h2{margin:14px 0 8px}
.real-head p{margin:0;font-size:17px}
.real-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.real-track figure{position:relative;margin:0;border-radius:20px;overflow:hidden;background:#dfeef6;box-shadow:0 14px 34px #0f3d6014;aspect-ratio:1}
.real-track figcaption{position:absolute;left:12px;bottom:12px;z-index:3;background:#ffffffeb;color:var(--ec-navy);font-weight:600;font-size:13px;padding:7px 12px;border-radius:20px}
@property --pos{syntax:'<percentage>';inherits:true;initial-value:50%}
.ba-slider{user-select:none;animation:ec-sweep 6s ease-in-out infinite alternate}
.ba-slider:nth-child(2){animation-delay:-3s}
.ba-slider.manual{animation:none}
@keyframes ec-sweep{0%,12%{--pos:84%}88%,100%{--pos:16%}}
.ba-slider img,.ba-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-after{clip-path:inset(0 0 0 var(--pos))}
.ba-after img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;z-index:2;box-shadow:0 0 12px #0003;pointer-events:none}
.ba-handle i{position:absolute;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 18%,#e8f8ff 45%,#bfe9fb 100%);border:2px solid #fff;box-shadow:0 6px 18px #0a3d6a40}
.ba-handle i:before{content:'‹ ›';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:15px;color:var(--ec-deep);letter-spacing:2px}
.ba-slider input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.ba-tag{position:absolute;top:12px;z-index:3;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 10px;border-radius:20px;pointer-events:none}
.ba-tag.before{left:12px;background:#0b2a4ae0;color:#fff}
.ba-tag.after{right:12px;background:#fff;color:var(--ec-deep)}
.real-split img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.real-pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:#fff!important}
.real-pair>div{position:relative;overflow:hidden}
.real-pair img{width:100%;height:100%;object-fit:cover}
.review-link{display:inline-flex;align-items:center;gap:12px;align-self:flex-start;padding:12px 18px;border-radius:30px;background:#fff;border:1px solid var(--ec-line);color:var(--ec-navy);font-size:15px}
.review-link svg{width:22px;height:22px;color:var(--ec-blue)}
.ba-chip{display:inline-flex;margin:-22px 0 28px;padding:6px 11px;border-radius:20px;background:#ffffffe6;color:#0b5a8f;font-size:12px;font-weight:600}
a.service-card{display:block;color:#fff}

/* Section 05 : professionals, one screen */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center;padding:54px;border-radius:26px;background:radial-gradient(circle at 85% 10%,#0f5d97 0,#0b2a4a 60%);color:#fff}
.pros .section-label{color:#bfe6f8}
.pros h2{color:#fff;margin:18px 0}
.pros h2 em{color:#5fd0ff}
.pros-copy p{color:#d9ecf8;font-size:18px}
.pros-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}
.pros-call{display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.pros-call svg{width:22px;height:22px}
.pros-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pros-list li{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:18px;background:#ffffff12;border:1px solid #ffffff1f}
.pros-list svg{width:28px;height:28px;flex-shrink:0;color:#5fd0ff}
.pros-list h3{margin:0 0 4px;font-size:18px;color:#fff}
.pros-list p{margin:0;font-size:14px;color:#cfe4f2}

/* 2026-09-24: no scroll inside a scene (it trapped swipes going up); scenes.js drives the hidden part instead */
body.scene-playing[data-variant="4"] .scene-shell>section{overflow-y:hidden!important;touch-action:auto!important}
/* Scene mode (full-screen sections): everything must fit one screen */
.scene-playing .realisations,.scene-playing .pros{border-radius:0;border:0;justify-content:center}
.scene-playing .realisations{padding:90px 5vw 70px}
.scene-playing .real-head h2{font-size:clamp(36px,3.8vw,64px)}
.scene-playing .real-track{width:min(100%,calc((100svh - 390px) * 4 + 48px))}
.scene-playing .pros{padding:80px 6vw}

@media(max-width:999px){
 /* phone: the photo sits in the lower part; Dany stands around 48-68% across, so bubbles stay left and right of him */
 .hero-bubbles .b0{left:9%;top:72%}.hero-bubbles .b1{left:21%;top:67%}.hero-bubbles .b2{left:33%;top:70%}.hero-bubbles .b3{left:4%;top:80%}.hero-bubbles .b4{left:28%;top:76%}
 .hero-bubbles .b5{left:78%;top:71%}.hero-bubbles .b6{left:88%;top:66%}.hero-bubbles .b7{left:84%;top:77%}.hero-bubbles .b8{left:72%;top:65%}
 .realisations{padding:32px 18px;border-radius:20px}
 .real-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -18px;padding:0 18px 6px;scrollbar-width:none}
 .real-track::-webkit-scrollbar{display:none}
 .real-track figure{flex:0 0 78%;scroll-snap-align:center}
 .ba-slider input{pointer-events:none}
 .pros{grid-template-columns:1fr;gap:22px;padding:34px 20px;border-radius:20px}
 .pros-list{gap:10px}
 .pros-list li{padding:14px;gap:8px}
 .pros-list p{display:none}
 .pros-list h3{font-size:15px}
 .scene-playing .realisations{padding:78px 18px 24px;gap:16px;justify-content:flex-start}
 .scene-playing .pros{padding:78px 18px 24px}
 .scene-playing .real-track{width:auto}
}
@media(prefers-reduced-motion:reduce){.button:before,.button:after,.hero-bubbles i,.ba-slider{animation:none}}