/* ════════════════════════════════════════════════════════════════
   HOME — couche motion design (FR / EN / ES)
   Chargée APRÈS le <style> de la page : elle ne fait que surcharger.
   Mécaniques : nav en île, entrées « ressort », titre mot à mot,
   soulignement qui se trace, reflet sur les CTA, icônes qui se dessinent,
   éléments d'interface qui « poppent », onglets de fonctionnalités à
   défilement automatique (construits par /scripts/home-motion.js).
   La charte (crème / olive / or) n'est pas modifiée.
   ════════════════════════════════════════════════════════════════ */
:root{
  --spring:cubic-bezier(.2,1.18,.47,1);
  --spring-pop:cubic-bezier(.2,1.45,.4,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}

/* ════════════ NAV EN ÎLE FLOTTANTE ════════════ */
.nav{
  top:12px;margin-top:12px;padding:0 16px;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:0;
}
.nav .wrap{
  height:66px;padding:0 14px 0 22px;border-radius:22px;
  background:var(--nav-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(45,40,33,.04),0 10px 30px rgba(45,40,33,.06);
  transition:height .45s var(--ease-out),max-width .55s var(--ease-out),
             background-color .3s,box-shadow .3s,border-color .3s;
}
.nav.scrolled{background:transparent;border-bottom-color:transparent;box-shadow:none}
.nav.scrolled .wrap{
  height:56px;max-width:960px;background:var(--nav-bg-solid);border-color:var(--line-strong);
  box-shadow:0 2px 4px rgba(45,40,33,.05),0 16px 40px rgba(45,40,33,.12);
}
/* lien de nav : soulignement qui glisse */
.nav-links a{position:relative}
.nav-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.nav-links a:hover::after{transform:scaleX(1)}
@media (max-width:640px){
  .nav{top:8px;margin-top:8px;padding:0 10px}
  .nav .wrap{height:58px;padding:0 10px 0 16px;border-radius:18px}
  .nav.scrolled .wrap{height:52px}
}

/* ════════════ HERO ════════════ */
/* trame de points, estompée vers le bas */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,color-mix(in srgb,var(--ink) 16%,transparent) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(90% 75% at 50% 0%,#000 0%,transparent 72%);
  mask-image:radial-gradient(90% 75% at 50% 0%,#000 0%,transparent 72%);
}
.hero .wrap{z-index:1}

/* entrées « ressort » */
.hi,.enter-badge,.enter-ui{animation-timing-function:var(--spring)}

/* titre mot à mot (les .w sont posés par home-motion.js) */
.hero h1.split{animation:none;opacity:1}
.hero h1 .w{
  display:inline-block;
  animation:word-in .95s var(--spring) both;
  animation-delay:calc(.1s + var(--i) * .065s);
}
@keyframes word-in{from{opacity:0;transform:translateY(70%) rotate(2.5deg)}to{opacity:1;transform:none}}

/* le soulignement or se trace */
.hero h1 em svg path{
  stroke-dasharray:210;stroke-dashoffset:210;
  animation:draw 1s var(--ease-out) 1.05s forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}

/* halo qui respire sous les CTA */
.hero .cta-row{position:relative;isolation:isolate}
.hero .cta-row::before{
  content:"";position:absolute;z-index:-1;left:2%;top:34px;width:min(430px,92%);height:44px;
  border-radius:99px;background:var(--brand);filter:blur(36px);opacity:.26;pointer-events:none;
  animation:halo 4.2s ease-in-out infinite;
}
@keyframes halo{0%,100%{opacity:.18;transform:scale(.94)}50%{opacity:.36;transform:scale(1.04)}}

/* reflet qui traverse les CTA */
.btn-web,.webapp-btn{position:relative;overflow:hidden}
.btn-web::after,.webapp-btn::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%) skewX(-18deg);
  animation:shimmer 3.4s ease-in-out 1.6s infinite;
}
.webapp-btn::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent)}
@keyframes shimmer{0%{transform:translateX(-120%) skewX(-18deg)}55%,100%{transform:translateX(340%) skewX(-18deg)}}

/* pastilles : le point pulse en décalé */
.hero .pill::before{animation:dot 2.4s ease-in-out infinite}
.hero .pill:nth-child(2)::before{animation-delay:.3s}
.hero .pill:nth-child(3)::before{animation-delay:.6s}
.hero .pill:nth-child(4)::before{animation-delay:.9s}
@keyframes dot{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 45%,transparent)}50%{box-shadow:0 0 0 5px transparent}}

/* téléphones : inclinaison au pointeur (variables posées par le JS) */
.hero .iphone{
  transform:perspective(1100px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg));
  transition:transform .5s var(--ease-out);will-change:transform;
}

/* ════════════ REVEALS ════════════ */
.sec-head h2,.cta-band h2{line-height:1.12}
.reveal{
  transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.3,0,.2,1) var(--d,0s),transform 1.05s var(--spring) var(--d,0s);
}

/* ════════════ BÉNÉFICES ════════════ */
/* une carte sombre parmi les claires, pour rythmer la rangée */
.benefit:nth-child(3){background:var(--band-bg);border-color:var(--band-bg);color:var(--band-fg)}
.benefit:nth-child(3) p{color:color-mix(in srgb,var(--band-fg) 80%,transparent)}
.benefit:nth-child(3) .ico{background:color-mix(in srgb,var(--gold) 26%,transparent)}
.benefit:nth-child(3) .ico svg{stroke:#EBCB84}
.benefit:nth-child(3):hover{border-color:var(--band-bg)}
/* les icônes se dessinent à l'apparition */
.benefit .ico svg *{stroke-dasharray:130;stroke-dashoffset:130}
.benefit.in .ico svg *{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease-out) calc(var(--d,0s) + .3s);
}

/* ════════════ SCÈNES : l'interface « poppe » ════════════ */
@supports (scale:1) and (translate:0px){
  .media:not(.in) .ui-el{scale:0;opacity:0}
  .media .ui-el{transition:scale .7s var(--spring-pop) .55s,opacity .3s linear .55s}
  .media .ui-el + .ui-el{transition-delay:.75s}
  .media:not(.in) .a-quiz{translate:-38% 0;opacity:0}
  .media .a-quiz{transition:translate 1s var(--spring) .3s,opacity .5s linear .3s}
  .media:not(.in) .a-jalon{translate:0 -34px;opacity:0}
  .media .a-jalon{transition:translate 1s var(--spring) .35s,opacity .5s linear .35s}
}
.scene{transition:box-shadow .4s,border-color .4s}
.scene:hover{border-color:var(--line-strong);box-shadow:0 20px 50px rgba(45,40,33,.08)}

/* ════════════ FONCTIONNALITÉS EN ONGLETS AUTO (construits par le JS) ════════════ */
.features.fx{grid-template-columns:.92fr 1.08fr;gap:72px;align-items:center}
.fx-list{display:grid;gap:6px}
.fx-item{
  position:relative;padding:22px 26px 22px 36px;border-radius:22px;cursor:pointer;
  transition:background-color .35s,opacity .9s cubic-bezier(.3,0,.2,1) var(--d,0s),transform 1.05s var(--spring) var(--d,0s);
}
.fx-item:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.fx-item.is-on{background:var(--card);box-shadow:var(--shadow-card);cursor:default}
.fx-item:focus-visible{outline:2.5px solid var(--ring);outline-offset:3px}
/* rail + jauge de progression */
.fx-item::before,.fx-item::after{
  content:"";position:absolute;left:16px;top:22px;bottom:22px;width:4px;border-radius:4px;
}
.fx-item::before{background:var(--line)}
.fx-item::after{background:var(--brand);transform:scaleY(0);transform-origin:top}
.fx-item.is-on::after{animation:fx-fill 7s linear forwards;animation-play-state:paused}
.features.fx.fx-run .fx-item.is-on::after{animation-play-state:running}
.features.fx.fx-run:hover .fx-item.is-on::after,
.features.fx.fx-run:focus-within .fx-item.is-on::after{animation-play-state:paused}
@keyframes fx-fill{to{transform:scaleY(1)}}
.fx-item .eyebrow{transition:opacity .35s}
.fx-item h3{
  font-size:clamp(1.35rem,2.3vw,1.75rem);font-weight:800;letter-spacing:-.02em;
  margin:12px 0 0;transition:color .35s,opacity .35s;
}
.fx-item p{color:var(--ink-2);max-width:30em}
.fx-item .mini{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.fx-item:not(.is-on) h3{opacity:.5}
.fx-item:not(.is-on) .eyebrow{opacity:.55}
.fx-item:not(.is-on):hover h3{opacity:.8}
.fx-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-out)}
.fx-item.is-on .fx-body{grid-template-rows:1fr}
.fx-body>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .35s}
.fx-item.is-on .fx-body>div{opacity:1;transition:opacity .5s .2s}
.fx-body p{padding-top:12px}
.fx-body .mini{padding-bottom:2px}
.fx-stage{display:grid;align-items:center;justify-items:center;padding:24px 10px}
.fx-stage>.media{
  grid-area:1/1;width:100%;opacity:0;visibility:hidden;transform:translateY(22px) scale(.97);
  transition:opacity .45s,transform .8s var(--spring),visibility 0s linear .45s;
}
.fx-stage>.media.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s .1s,transform .9s var(--spring) .1s,visibility 0s}
@media (max-width:980px){
  .features.fx{grid-template-columns:1fr;gap:34px}
  .fx-stage{order:-1}
}

/* ════════════ AVIS / MÉTHODE / CTA ════════════ */
.big-note{font-variant-numeric:tabular-nums;display:inline-block}
.review-card{transition:transform .35s var(--ease-out),box-shadow .35s}
.review-card:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:var(--shadow-card-hover)}
.step::before{transform:translateY(55%);opacity:0;transition:transform 1.1s var(--spring) calc(var(--d,0s) + .25s),opacity .6s linear calc(var(--d,0s) + .25s)}
.step.in::before{transform:none;opacity:1}
.cta-band::before{inset:-12%;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-3%,2%)}to{transform:translate(4%,-3%)}}
.qr-big{animation:floaty 7s ease-in-out infinite}

/* ════════════ REDUCED MOTION ════════════ */
@media (prefers-reduced-motion:reduce){
  .hero h1 .w{animation:none}
  .hero h1 em svg path{animation:none;stroke-dashoffset:0}
  .hero .cta-row::before,.btn-web::after,.webapp-btn::after{animation:none}
  .btn-web::after,.webapp-btn::after{display:none}
  .hero .pill::before,.cta-band::before,.qr-big{animation:none}
  .hero .iphone{transform:none}
  .benefit .ico svg *{stroke-dashoffset:0}
  .fx-item.is-on::after{animation:none;transform:scaleY(1)}
  .step::before{transform:none;opacity:1}
}