/* Héro « bulle vivante » : une grande bulle de verre liquide respire derrière le titre,
   s'étire vers la souris et prend la forme et la couleur de la marque survolée (assets/hero-bulle.js). */
.hb-blob{position:absolute;left:50%;top:50%;width:min(110vmin,1100px);translate:-50% -50%;z-index:1;pointer-events:none;overflow:visible;
  filter:drop-shadow(0 40px 90px rgba(107,78,230,.32))}
.hb-blob .hb-body{fill-opacity:.36;transition:fill-opacity .6s}
.hb-blob .hb-rim{stroke-opacity:.9}
[data-theme="light"] .hb-blob{filter:drop-shadow(0 40px 80px rgba(91,67,214,.22))}
[data-theme="light"] .hb-blob .hb-body{fill-opacity:.5}
[data-theme="light"] .hb-blob .hb-rim{stroke:rgba(255,255,255,.95)}
.hero-sticky .hero-grid{position:relative;z-index:2}

/* Les trois marques : pastilles de verre qui pilotent la bulle (un clic ouvre la marque) */
.hb-brands{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(28px,4vh,44px)}
.hb-brands button{display:inline-flex;align-items:center;gap:9px;padding:13px 18px 13px 20px;border:0;border-radius:999px;cursor:pointer;
  font:600 15px/1 var(--f,"Geist",system-ui,sans-serif);color:var(--ink,#EDEEF3);
  background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.04));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(0,0,0,.7);
  transition:background .35s,box-shadow .35s,translate .45s cubic-bezier(.16,1,.3,1)}
.hb-brands button em{font-style:normal;color:var(--c)}
.hb-brands button i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
/* Flèche : on comprend que la pastille mène quelque part */
.hb-brands button::after{content:"→";margin-left:2px;color:var(--c);transition:translate .35s cubic-bezier(.16,1,.3,1)}
.hb-brands button:hover::after,.hb-brands button:focus-visible::after{translate:3px 0}
.hb-brands button:hover,.hb-brands button:focus-visible,.hb-brands button.on{translate:0 -2px;background:color-mix(in srgb,var(--c) 26%,transparent);
  box-shadow:inset 0 0 0 1px var(--c),0 0 34px -6px var(--c)}
.hb-brands button:active{translate:0 0}
[data-theme="light"] .hb-brands button{color:#0E1016;background:color-mix(in srgb,var(--c) 18%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,#000 8%),0 8px 20px -10px rgba(40,36,90,.35)}
[data-theme="light"] .hb-brands button em,[data-theme="light"] .hb-brands button::after{color:color-mix(in srgb,var(--c) 55%,#000)}
[data-theme="light"] .hb-brands button:hover,[data-theme="light"] .hb-brands button.on{background:#fff;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 70%,#000 10%),0 14px 34px -14px var(--c)}

/* Carte « bientôt disponible » (Solutions izy, izy Studio) : pop de verre, point qui pulse, titre qui miroite, barre qui charge */
.hb-soon{position:fixed;z-index:1000;width:min(360px,calc(100vw - 32px));padding:18px 20px 16px;border-radius:22px;text-align:center;
  color:var(--ink,#EDEEF3);background:color-mix(in srgb,var(--c) 12%,rgba(14,16,22,.72));backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 50%,transparent),0 24px 60px -24px var(--c),0 18px 40px -20px rgba(0,0,0,.8);
  opacity:0;translate:-50% -10px;scale:.92;transform-origin:var(--ax,50%) 0;transition:opacity .3s,translate .5s cubic-bezier(.16,1.4,.3,1),scale .5s cubic-bezier(.16,1.4,.3,1)}
.hb-soon.in{opacity:1;translate:-50% 0;scale:1}
.hb-soon::before{content:"";position:absolute;left:var(--ax,50%);top:-6px;width:12px;height:12px;translate:-50% 0;rotate:45deg;border-radius:3px 0 0 0;
  background:inherit;box-shadow:inset 1px 1px 0 color-mix(in srgb,var(--c) 50%,transparent)}
.hb-soon-tag{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font:600 11px/1 var(--f,"Geist",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.hb-soon-tag i{width:6px;height:6px;border-radius:50%;background:var(--c);animation:hbPulse 1.6s ease-out infinite}
.hb-soon strong{display:block;margin:12px 0 6px;font:600 19px/1.2 var(--f,"Geist",system-ui,sans-serif);
  background:linear-gradient(100deg,currentColor 35%,var(--c) 50%,currentColor 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:hbShine 2.8s linear infinite}
.hb-soon strong em{font-style:normal}
.hb-soon p{margin:0;font-size:14px;line-height:1.45;opacity:.75}
.hb-soon-bar{display:block;height:3px;margin:14px auto 12px;width:70%;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--c) 18%,transparent);position:relative}
.hb-soon-bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:inherit;background:var(--c);box-shadow:0 0 12px var(--c);animation:hbLoad 1.8s cubic-bezier(.65,0,.35,1) infinite}
.hb-soon.up{translate:-50% 10px;transform-origin:var(--ax,50%) 100%}.hb-soon.up.in{translate:-50% 0}
.hb-soon.up::before{top:auto;bottom:-6px;rotate:225deg}
.hb-soon-cta{display:block;width:100%;margin:2px 0 8px;padding:11px 16px;border:0;border-radius:999px;cursor:pointer;
  font:600 14px/1 var(--f,"Geist",system-ui,sans-serif);color:#0E1016;background:var(--c);
  box-shadow:0 10px 26px -10px var(--c),inset 0 1px 0 rgba(255,255,255,.5);transition:translate .3s cubic-bezier(.16,1,.3,1),box-shadow .3s}
.hb-soon-cta:hover,.hb-soon-cta:focus-visible{translate:0 -1px;box-shadow:0 14px 32px -10px var(--c),inset 0 1px 0 rgba(255,255,255,.6)}
/* Étiquette « Bientôt » sur les pastilles du héro, à la place de la flèche */
.hb-brands button.is-later::after{content:none}
.hb-later{margin-left:2px;padding:4px 8px;border-radius:999px;font:600 10.5px/1 var(--f,"Geist",system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent)}
[data-theme="light"] .hb-later{color:color-mix(in srgb,var(--c) 50%,#000)}
.hb-soon-go{border:0;background:none;padding:4px 2px;cursor:pointer;font:500 13.5px/1 var(--f,"Geist",system-ui,sans-serif);color:inherit;opacity:.85}
.hb-soon-go em{font-style:normal;color:#A58BFF}
.hb-soon-go span{display:inline-block;transition:translate .3s}
.hb-soon-go:hover{opacity:1}.hb-soon-go:hover span{translate:3px 0}
@keyframes hbPulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--c) 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@keyframes hbShine{to{background-position:-250% 0}}
@keyframes hbLoad{0%{translate:-100% 0}100%{translate:250% 0}}
[data-theme="light"] .hb-soon{color:#0E1016;background:color-mix(in srgb,var(--c) 14%,rgba(255,255,255,.88));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 60%,#000 8%),0 24px 50px -24px rgba(40,36,90,.45)}
[data-theme="light"] .hb-soon-tag{color:color-mix(in srgb,var(--c) 50%,#000)}
[data-theme="light"] .hb-soon-go em{color:#5B3FD9}
@media (prefers-reduced-motion:reduce){.hb-soon,.hb-soon-tag i,.hb-soon strong,.hb-soon-bar::after{animation:none;transition:opacity .2s}}

@media (max-width:760px){.hb-blob{width:min(130vw,620px)}.hb-brands button{padding:10px 14px;font-size:13.5px}}

/* Minimaliste : la bulle est seule dans le héro (plus de bulles de fond derrière), et plus présente */
.hero-sticky:has(.hb-blob) canvas.stars,.hero-sticky:has(.hb-blob) canvas.bg2{visibility:hidden!important}
.hb-blob .hb-body{fill-opacity:.62}
[data-theme="light"] .hb-blob .hb-body{fill-opacity:.7}
.hero-sticky:has(.hb-blob) h1{text-shadow:0 2px 30px rgba(7,8,11,.35)}
[data-theme="light"] .hero-sticky:has(.hb-blob) h1{text-shadow:0 2px 30px rgba(255,255,255,.6)}

/* ===== Texture « verre sombre » (comme les bulles de la charte) : centre sombre presque transparent,
   bord qui s'éclaire (effet Fresnel), liseré fin et flouté, léger halo de la teinte de la marque ===== */
.hb-blob{--hc:#B9D8CC;width:min(88vmin,860px)!important;filter:none!important;transition:--hc .6s}
.hb-blob .hb-body{fill-opacity:1!important}
.hb-c0{stop-color:#0E1016;stop-opacity:.18}
.hb-c1{stop-color:color-mix(in srgb,var(--hc) 18%,#1A1D26);stop-opacity:.42}
.hb-c2{stop-color:color-mix(in srgb,var(--hc) 55%,#fff);stop-opacity:.5}
.hb-blob .hb-rim{stroke:color-mix(in srgb,var(--hc) 45%,#fff);stroke-opacity:.85}
.hb-blob .hb-glow{stroke:var(--hc);stroke-opacity:.28}
[data-theme="light"] .hb-c0{stop-color:#fff;stop-opacity:.25}
[data-theme="light"] .hb-c1{stop-color:color-mix(in srgb,var(--hc) 22%,#fff);stop-opacity:.45}
[data-theme="light"] .hb-c2{stop-color:color-mix(in srgb,var(--hc) 60%,#5B6070);stop-opacity:.4}
[data-theme="light"] .hb-blob .hb-rim{stroke:#fff;stroke-opacity:1}
[data-theme="light"] .hb-blob .hb-glow{stroke-opacity:.35}
@media (max-width:760px){.hb-blob{width:min(125vw,600px)!important}}

/* ===== Bulle du héro façon écran de chargement : verre liquide sombre, biseau intérieur lumineux,
   reflet venant d'en haut à gauche, liseré fin (teinte de marque très discrète) ===== */
.hb-c0{stop-color:#0A0B10;stop-opacity:.05}
.hb-c1{stop-color:color-mix(in srgb,var(--hc) 10%,#16181f);stop-opacity:.28}
.hb-c2{stop-color:color-mix(in srgb,var(--hc) 30%,#cfd3dc);stop-opacity:.35}
.hb-blob .hb-bevel{stroke:color-mix(in srgb,var(--hc) 28%,#dfe3ea);stroke-opacity:.2}
.hb-blob .hb-key{stroke-opacity:.55}
.hb-blob .hb-rim{stroke-opacity:.85}
.hb-blob{filter:drop-shadow(0 40px 90px rgba(0,0,0,.55))!important}
[data-theme="light"] .hb-c0{stop-color:#fff;stop-opacity:.15}
[data-theme="light"] .hb-c1{stop-color:color-mix(in srgb,var(--hc) 18%,#fff);stop-opacity:.4}
[data-theme="light"] .hb-c2{stop-color:color-mix(in srgb,var(--hc) 40%,#8a90a0);stop-opacity:.35}
[data-theme="light"] .hb-blob .hb-bevel{stroke:#fff;stroke-opacity:.6}
[data-theme="light"] .hb-blob{filter:drop-shadow(0 30px 70px rgba(40,36,90,.22))!important}

/* ===== Opacité alignée sur la bulle de l'écran de chargement : intérieur quasi invisible,
   léger voile gris sur le pourtour, liseré fin et discret, sans ombre portée ===== */
:root:not([data-theme="light"]) .hb-c0{stop-color:#0A0B10;stop-opacity:0}
:root:not([data-theme="light"]) .hb-c1{stop-color:color-mix(in srgb,var(--hc) 6%,#14161c);stop-opacity:.12}
:root:not([data-theme="light"]) .hb-c2{stop-color:color-mix(in srgb,var(--hc) 70%,#b8bcc4);stop-opacity:.2}
:root:not([data-theme="light"]) .hb-blob .hb-bevel{stroke:color-mix(in srgb,var(--hc) 70%,#c9ccd2);stroke-opacity:.14}
:root:not([data-theme="light"]) .hb-blob .hb-key{stroke-opacity:.18}
:root:not([data-theme="light"]) .hb-blob .hb-rim{stroke:color-mix(in srgb,var(--hc) 85%,#fff);stroke-opacity:.7}
:root:not([data-theme="light"]) .hb-blob{filter:none!important}
/* transition douce de la teinte au survol des marques */
@property --hc{syntax:"<color>";inherits:true;initial-value:#c9cdd4}

/* ===== Placement retenu (proposition B) : bulle plus petite, en appui à droite, elle accroche la fin du titre ===== */
html .hero-pin .hb-blob{left:74%!important;top:52%!important;width:min(72vmin,700px)!important}
@media (max-width:760px){html .hero-pin .hb-blob{left:50%!important;top:50%!important;width:min(125vw,600px)!important}}

/* ===== Couleur plus présente : le verre se teinte franchement de la couleur du moment ===== */
:root:not([data-theme="light"]) .hb-c1{stop-color:color-mix(in srgb,var(--hc) 35%,#14161c);stop-opacity:.22}
:root:not([data-theme="light"]) .hb-c2{stop-color:var(--hc);stop-opacity:.38}
:root:not([data-theme="light"]) .hb-blob .hb-bevel{stroke:var(--hc);stroke-opacity:.28}
:root:not([data-theme="light"]) .hb-blob .hb-rim{stroke:color-mix(in srgb,var(--hc) 90%,#fff);stroke-opacity:.9}
:root:not([data-theme="light"]) .hb-blob{filter:drop-shadow(0 0 40px color-mix(in srgb,var(--hc) 30%,transparent))!important}