/* ═══════════ L'OUVERTURE ET LE CURSEUR ═══════════ */

/* pendant l'ouverture, rien ne défile */
html.entering, html.entering body{ overflow:hidden !important }

.enter{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:linear-gradient(168deg,#FFFFFF,#F4F5FD 46%,#E9EAF7);
  will-change:transform;
}
.enter__in{ display:grid; place-items:center; padding:0 var(--gut) }
.enter__mark{ position:relative; display:inline-block; font-family:var(--dis); font-weight:600;
  font-size:clamp(30px,5vw,58px); letter-spacing:-.035em; line-height:1;
  white-space:nowrap }
.enter__ghost{ color:rgba(25,23,52,.22) }
.enter__fill{ position:absolute; inset:0;
  clip-path:inset(100% 0 0 0);
  background:linear-gradient(140deg,var(--violet),var(--magenta-ink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  transition:clip-path .18s linear;
}

/* le hero n'entre qu'une fois le rideau retiré */
html.entering .hero__in > *{ opacity:0 }

/* ── LE CURSEUR ── */
.cur,.cur__trail{ display:none }
@media (hover:hover) and (pointer:fine){
  html.has-cur{ cursor:none }
  html.has-cur a,html.has-cur button{ cursor:none }
  .cur{ display:block; position:fixed; inset:0; z-index:9998; pointer-events:none;
    opacity:0; transition:opacity .25s var(--e-out) }
  html.has-cur .cur{ opacity:1 }
  .cur__trail{ display:block; position:fixed; inset:0; z-index:9997;
    pointer-events:none }

  .cur__ring{ position:fixed; top:0; left:0; width:34px; height:34px;
    border-radius:var(--k5); border:1.5px solid rgba(25,23,52,.34);
    transition:width .28s var(--e-out),height .28s var(--e-out),
               border-radius .28s var(--e-out),border-color .28s var(--e-out),
               background .28s var(--e-out) }
  .cur__dot{ position:fixed; top:0; left:0; width:5px; height:5px;
    border-radius:var(--k5); background:var(--ink);
    transition:width .2s var(--e-out),height .2s var(--e-out),opacity .2s }
  .cur__lab{ position:fixed; top:0; left:0; padding:5px 11px; border-radius:var(--k5);
    background:var(--ink); color:#fff; font-size:var(--f1); font-weight:600;
    letter-spacing:.06em; white-space:nowrap; opacity:0; transform-origin:top center;
    transition:opacity .22s var(--e-out) }

  /* LENTILLE sur une capture client : l'anneau s'ouvre, le libellé apparaît */
  .cur[data-mode="lens"] .cur__ring{ width:82px; height:82px;
    border-color:rgba(108,60,245,.5); background:rgba(108,60,245,.05) }
  .cur[data-mode="lens"] .cur__dot{ width:3px; height:3px }
  .cur[data-mode="lens"] .cur__lab{ opacity:1 }

  /* AIMANT sur un bouton : l'anneau épouse l'élément */
  .cur[data-mode="magnet"] .cur__ring{ border-color:rgba(108,60,245,.55);
    background:rgba(108,60,245,.06) }
  .cur[data-mode="magnet"] .cur__dot{ opacity:0 }

  /* RÉTICULE sur un chiffre */
  .cur[data-mode="aim"] .cur__ring{ width:52px; height:52px; border-radius:var(--k1);
    border-color:rgba(196,16,107,.5) }

  /* ENVOI sur un lien SMS */
  .cur[data-mode="send"] .cur__ring{ width:60px; height:60px;
    border-color:rgba(196,16,107,.6); background:rgba(196,16,107,.06) }
  .cur[data-mode="send"] .cur__lab{ opacity:1; background:var(--magenta-ink) }

  html.cur-down .cur__ring{ transform-origin:center; filter:brightness(.9) }
}

/* L'aimant se voyait carré sur la FAQ : on donne un rayon aux cibles qui
   n'en avaient pas, et on souligne la zone survolée côté page aussi. */
.faq__q{ border-radius:var(--k2); padding-inline:14px; margin-inline:-14px;
  transition:background var(--d2) var(--e-soft) }
.faq__q:hover{ background:rgba(139,107,255,.05) }
.rows li,.serp__res,.msg,.tl__step,.why__card,.says__q figure{
  transition:background var(--d2) var(--e-soft),transform var(--d2) var(--e-out) }
.rows li:hover{ background:rgba(139,107,255,.05) }
.serp__res:hover,.msg:hover{ background:rgba(255,255,255,.07) }
.tl__step:hover,.why__card:hover{ transform:translateY(-3px) }
@media (hover:hover) and (pointer:fine){
  /* l'anneau garde toujours un rayon : plus jamais d'angle vif */
  .cur[data-mode="magnet"] .cur__ring{ border-width:1.5px }
}

/* ═══════════ LES CTA INTERMÉDIAIRES ═══════════
   Le seul canal est le SMS : on l'offre à la fin de chaque démonstration,
   pas seulement en bas de page. Chacun porte un message pré-rempli différent,
   donc le fil SMS dit d'où vient le lead. */
.midcta{
  margin-top:clamp(30px,3.4vw,52px);
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,2vw,26px);
  flex-wrap:wrap; text-align:center;
}
.midcta p{ font-family:var(--dis); font-weight:500; font-size:var(--f6);
  letter-spacing:-.018em; line-height:1.2; color:var(--ink); max-width:22ch; margin:0 }
.midcta .btn{ padding:16px 28px }
@media (max-width:700px){
  .midcta{ flex-direction:column; gap:16px }
  .midcta .btn{ width:100% }
}

/* ═══════════ L'INCLINAISON 3D ═══════════ */
.work__item,.why__card,.tl__step,.says__q figure,.phone{
  transform-style:preserve-3d; will-change:transform;
}
/* la règle de survol CSS entrait en conflit avec la boucle : c'est le JS
   qui pilote maintenant, la transition doit disparaître */
@media (hover:hover) and (pointer:fine){
  .work__item:hover,.tl__step:hover,.why__card:hover{ transform:none }
  .work__item,.why__card,.tl__step,.says__q figure,.phone{ transition:box-shadow var(--d3) var(--e-out) }
}
.tilt__glare{
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  opacity:0; z-index:5; mix-blend-mode:screen;
}
.work__item{ position:relative; overflow:hidden; border-radius:var(--k4) }
.phone{ position:relative }

/* ═══════════ L'ENTRÉE DES PANNEAUX ═══════════
   Les panneaux ne montent plus à plat : ils se redressent, avec une vraie
   perspective. C'est ce qui les fait exister comme des OBJETS. */
html.js .obj{ transform-origin:50% 100% }
html.js .obj.rv:not(.in){
  opacity:0; transform:perspective(1400px) rotateX(7deg) translate3d(0,42px,0) scale(.97);
}
html.js .obj.rv.in{
  opacity:1; transform:perspective(1400px) rotateX(0) translate3d(0,0,0) scale(1);
  transition:opacity .9s var(--e-out), transform 1.05s var(--e-out);
}

/* ═══════════ LA NAPPE DE CAUSTIQUES ═══════════
   La lumière d'eau que tu aimais, remise sous la grappe 3D. Rendue à
   résolution réduite puis étirée : les caustiques sont floues par nature,
   donc c'est invisible à l'œil et quatre fois moins cher en GPU. */
.hero__caustics{
  position:absolute; right:-6%; top:50%; transform:translateY(-50%);
  width:min(64vw,900px); height:min(84vh,780px); z-index:0; pointer-events:none;
  opacity:.62; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(58% 54% at 52% 50%,#000 0%,rgba(0,0,0,.5) 58%,transparent 82%);
          mask-image:radial-gradient(58% 54% at 52% 50%,#000 0%,rgba(0,0,0,.5) 58%,transparent 82%);
}
.hero__canvas{ z-index:1 }
@media (max-width:1023px){
  .hero__caustics{ position:absolute; right:auto; left:0; width:100%;
    height:min(46vh,340px); top:0; transform:none; opacity:.5 }
}
@media (prefers-reduced-motion:reduce){ .hero__caustics{ display:none } }

/* Des caustiques CLAIRES sur un fond CLAIR ne se voient pas — c'est de la
   lumière posée sur de la lumière. Il leur faut une nappe teintée à éclairer :
   on pose un bassin lavande derrière, et la lumière d'eau y creuse enfin
   ses nervures. */
.hero{ isolation:isolate }
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  right:-6%; top:50%; transform:translateY(-50%);
  width:min(64vw,900px); height:min(84vh,780px);
  background:
    radial-gradient(52% 48% at 52% 48%,rgba(139,107,255,.13),transparent 72%),
    radial-gradient(40% 38% at 74% 68%,rgba(255,109,190,.11),transparent 72%);
}
/* en voile plein elles délavaient le 67 : elles redeviennent une TEXTURE,
   cantonnée derrière la grappe par un masque qui creuse son centre */
.hero__caustics{ mix-blend-mode:normal; opacity:.46;
  -webkit-mask-image:radial-gradient(46% 42% at 52% 50%,transparent 0%,rgba(0,0,0,.55) 46%,#000 70%,transparent 96%);
          mask-image:radial-gradient(46% 42% at 52% 50%,transparent 0%,rgba(0,0,0,.55) 46%,#000 70%,transparent 96%) }
@media (max-width:1023px){
  .hero::before{ right:auto; left:0; width:100%; height:min(46vh,340px);
    top:0; transform:none }
}

/* RETOUR EN ARRIÈRE. J'avais « renforcé » l'aimant — bordure 2 px, fond
   opacifié, halo de 6 px — et ça l'a alourdi : ce qui le rendait beau,
   c'était sa FINESSE. On revient au trait fin et au voile discret.
   Seul ajout conservé : la variante claire sur panneau sombre, sans quoi
   l'anneau violet disparaissait sur l'anthracite. */
@media (hover:hover) and (pointer:fine){
  .cur[data-mode="magnet"] .cur__ring{
    border-width:1.5px;
    border-color:rgba(108,60,245,.55);
    background:rgba(108,60,245,.06);
    box-shadow:none;
  }
  .cur[data-mode="magnet"].on-dark .cur__ring{
    border-color:rgba(255,255,255,.62);
    background:rgba(255,255,255,.07);
    box-shadow:none;
  }
}