/* Blocs avant / après (28/10/2026) : le défilement s'arrête, l'étoile passe derrière le problème, revient devant,
   le balaie et révèle le résultat, puis reprend son fil. Un bloc = une section .ba de 300vh avec une scène collée. */
.ba{position:relative;height:220vh}
.ba .ba-scene{position:sticky;top:0;height:100vh;overflow:visible;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);align-items:center;gap:clamp(24px,4vw,64px);box-sizing:border-box;width:100vw;margin-left:calc(50% - 50vw);padding:0 max(40px,calc((100vw - 1320px)/2))}
.ba.inv .ba-scene{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr)}
.ba.inv .ba-scene .ba-texte{order:2}
.ba-texte{position:relative;z-index:3;min-width:0;display:grid;align-items:center;container-type:inline-size}
.ba-texte .ba-couche{grid-area:1/1;position:relative}
.ba-texte .jr{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin-bottom:10px}
.ba-texte .jr b{color:var(--ink)}
.ba-texte .jr .forme{--t:30px;flex:none}
.ba-mot{font-size:clamp(34px,min(5.6vw,15cqi),92px);font-weight:700;letter-spacing:-.05em;line-height:.95;margin:0;text-wrap:balance}
.ba-sous{font-size:clamp(18px,1.7vw,25px);line-height:1.35;margin:16px 0 0;max-width:28ch;letter-spacing:-.01em;color:var(--ink)}
.ba-sous span{color:var(--muted)}
.ba-apres{-webkit-mask-image:linear-gradient(#000 0,transparent 0);mask-image:linear-gradient(#000 0,transparent 0)}
.ba-logos{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap}
.ba-logos img{width:26px;height:26px;opacity:.85}
:root[data-theme="dark"] .ba-logos img{filter:invert(1)}
.ba-cadre{position:relative;z-index:2;aspect-ratio:3/2;width:100%;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.14);isolation:isolate;background:var(--soft)}
.ba-cadre .ba-couche{position:absolute;inset:0}
.ba-cadre img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-img-apres{-webkit-mask-image:linear-gradient(#000 0,transparent 0);mask-image:linear-gradient(#000 0,transparent 0)}
.ba-flou{position:absolute;left:0;right:0;top:0;height:180px;margin-top:-90px;z-index:3;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.ba-etoile{position:absolute;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px;z-index:5;pointer-events:none;opacity:0;filter:drop-shadow(0 0 28px rgba(247,120,74,.55))}
.ba-etoile .forme{--t:120px}
.ba-etoile.devant{z-index:4}
.ba-trace{position:absolute;inset:0;z-index:0;pointer-events:none}
.ba-trace i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;opacity:0}
.ba-trace i .forme{--t:10px}
.ba-trace i .forme::before,.ba-trace i .forme::after{display:none}
html.ba-actif #fil .guide{opacity:0!important;transition:none!important}
@media (max-width:900px){
  .ba{height:190vh}
  .ba .ba-scene,.ba.inv .ba-scene{grid-template-columns:1fr;align-content:center;gap:18px;padding:0 16px;width:100vw}
  .ba.inv .ba-scene .ba-texte{order:0}
  .ba-mot{font-size:clamp(32px,min(12vw,14cqi),64px)}
  .ba-sous{font-size:17px}
  .ba-etoile{width:84px;height:84px;margin:-42px 0 0 -42px}.ba-etoile .forme{--t:84px}
}
@media (prefers-reduced-motion:reduce){
  .ba{height:auto}.ba .ba-scene{position:relative;height:auto;padding-block:48px}
  .ba-avant{display:none}.ba-apres{-webkit-mask-image:none;mask-image:none}.ba-img-avant{display:none}.ba-img-apres{-webkit-mask-image:none;mask-image:none}.ba-flou{display:none}.ba-etoile,.ba-trace{display:none}
}
/* Pendant un bloc : le trait du fil et la barre collante s'effacent, l'étoile du bloc prend le relais */
html.ba-actif #fil svg{opacity:0;transition:opacity .3s}
#fil svg{transition:opacity .3s}
html.ba-actif .collant{opacity:0;pointer-events:none;transition:opacity .25s,transform .5s}

/* Le mois est l'offre premium : une pastille encre, discrète, partout où il est nommé à côté du 24 h */
.premium{display:inline-flex;align-items:center;gap:6px;background:#0D0D0D;color:#FFFFFF;font-size:.78em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px 3px 9px;border-radius:999px;margin-right:8px;vertical-align:.08em}
.premium::before{content:"";width:6px;height:6px;border-radius:50%;background:#FF6B5C}
:root[data-theme="dark"] .premium{background:#F5F5F5;color:#0D0D0D}