/* Picvert — ce que l'écran du stand a apporté au site (21/10/2026). Titres validés par Adrien le 21/10 à 8 h 39 ; tout le site validé le 21/10 à 10 h 29.
   La même grammaire que l'écran, partout :
   1. le trait lavande sous les lignes qui portent le propos (titres de tête, phrase clé du chapô, lignes de liste, verbes d'étape,
      titres de service, rangées de la loi) : il se trace de gauche à droite quand la ligne arrive ;
   2. la pastille d'un mot éclot puis s'étire, gonfle un peu, puis un reflet la traverse de temps en temps ;
   3. le « ? » d'un titre s'anime une fois ; au chargement, des « ? » jaillissent d'un mot du titre de tête, puis de petits soleils
      entourent la pastille (le script ecran-2026-10-21.js) ;
   4. les mots du titre de tête montent un à un ; ceux du chapô, des cartes de la mémoire et de la promesse finale s'allument un à un ;
   5. les coches sont lavande : elles se tracent d'un geste, rebondissent, un halo s'ouvre, quatre éclats partent ; les filets se tracent ;
   6. le nom des offres s'écrit lettre à lettre ; le logo de l'en-tête s'écrit comme à la plume ; le rideau a les bords fondus.
   Moins de mouvement : tout est posé d'emblée. Sans script : tout est visible. Impression : ni trait ni animation. */

/* 1. le trait lavande (un fond, et non un ::after : il suit le texte quand la ligne passe à la ligne) */
.trait, .trait-l { background: linear-gradient(rgba(136, 149, 197, .5), rgba(136, 149, 197, .5)) 0 calc(100% - .09em) / 100% .13em no-repeat; }
.js .hero .trait { background-size: 0% .13em; animation: trait .8s var(--ease) forwards; animation-delay: calc(1.05s + var(--t, 0) * .16s); }
@keyframes trait { to { background-size: 100% .13em; } }
.js .trait-l { background-size: 0% .13em; transition: background-size .75s var(--ease) var(--td, .5s); }
.js .in .trait-l { background-size: 100% .13em; }
.gains li .trait-l { --td: calc(.62s + var(--i, 0) * 110ms); }
.services li .trait-l { --td: calc(.4s + var(--i, 0) * 110ms); }
.steps li .trait-l { --td: calc(.5s + var(--i, 0) * 120ms); }
.loi-box .trait-l { --td: .45s; background-image: linear-gradient(rgba(252, 252, 250, .45), rgba(252, 252, 250, .45)); }
.loi-box .loi-it + .loi-it .trait-l { --td: .8s; }

/* 2. la pastille d'un mot : le rond éclot au début du mot, s'étire jusqu'au bout, gonfle un peu ; puis un reflet la traverse */
.hl-w.first.last { --pd: .2s; }
.hero .hl-w.first.last { --pd: .45s; }
.js .hl-w.first.last::before {
  transform: scale(0); transform-origin: .5em 50%; clip-path: inset(0 calc(100% - 1em) 0 0 round 999px);
  transition: transform .26s cubic-bezier(.3, .7, .4, 1) var(--pd), clip-path .7s cubic-bezier(.22, .8, .24, 1) calc(var(--pd) + .2s);
}
.js .hl.in .hl-w.first.last::before { transform: none; clip-path: inset(0 0 0 0 round 999px); }
.js .hl-w.first.last .hl-t { transition: background-position .7s var(--ease) calc(var(--pd) + .3s); }
.hl-w.first.last::before { background-image: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .4) 50%, transparent 62%); background-size: 260% 100%; background-position: 135% 0; background-repeat: no-repeat; }
.js .hl.in .hl-w.first.last { animation: pt-gelee .8s var(--ease-soft) calc(var(--pd) + 1.05s) both; }
.js .hl.in .hl-w.first.last::before { animation: brille 4.6s ease-in-out calc(var(--pd) + 2.4s) infinite; }
@keyframes pt-gelee { 0% { transform: none; } 30% { transform: scale(1.045, .93); } 60% { transform: scale(.985, 1.03); } 100% { transform: none; } }
@keyframes brille { 0% { background-position: 135% 0; } 24%, 100% { background-position: -35% 0; } }

/* 3. le « ? » d'un titre ; les « ? » qui jaillissent et les petits soleils (placés par le script) */
.qm { display: inline-block; transform-origin: 50% 88%; }
.js .hero .qm { animation: qm-vie 1.25s cubic-bezier(.3, .7, .4, 1) .85s both; }
.js .hl.in .qm { animation: qm-vie 1.25s cubic-bezier(.3, .7, .4, 1) .95s both; }
@keyframes qm-vie {
  0% { transform: none; color: inherit; }
  16% { transform: translateY(-.14em) scale(1.38) rotate(-17deg); color: var(--call); }
  34% { transform: translateY(-.07em) scale(1.24) rotate(13deg); color: var(--call); }
  52% { transform: translateY(-.02em) scale(1.12) rotate(-8deg); color: var(--call); }
  70% { transform: scale(1.04) rotate(4deg); }
  86% { transform: rotate(-1.5deg); }
  100% { transform: none; color: inherit; }
}
.hero h1.mots { position: relative; overflow: visible; }
.ec-eclats { position: absolute; z-index: 3; pointer-events: none; }
.ec-eclats i { position: absolute; left: var(--x); top: var(--y); width: var(--sz); line-height: 0; opacity: 0; }
.ec-eclats i svg { display: block; width: 100%; height: auto; overflow: visible; }
.ec-eclats .q { color: var(--call); animation: q-jaillit 1.15s cubic-bezier(.2, .8, .25, 1) both; animation-delay: var(--t); }
.ec-eclats .sol { animation: sol-jaillit 1.8s cubic-bezier(.2, .8, .25, 1) both; animation-delay: var(--t); }
@keyframes q-jaillit {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0) rotate(var(--r0)); }
  35% { opacity: 1; transform: translate(calc(-50% + var(--dx) * .55), calc(-50% + var(--dy) * .55)) scale(var(--k)) rotate(var(--r1)); }
  75% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(calc(var(--k) * .85)) rotate(calc(var(--r1) * 1.4)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.1), calc(-50% + var(--dy) * 1.1)) scale(0) rotate(calc(var(--r1) * 1.6)); }
}
@keyframes sol-jaillit {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0) rotate(-40deg); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--k) * 1.15)) rotate(8deg); }
  32% { opacity: 1; transform: translate(-50%, -50%) scale(var(--k)) rotate(0deg); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(var(--k)) rotate(18deg); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - var(--sz) * .7)) scale(0) rotate(40deg); }
}

/* 4. les mots : ceux du titre de tête montent un à un ; ceux du chapô, des cartes de la mémoire, de la promesse finale s'allument */
.hero h1.mots .w { display: inline-block; }
.js .hero h1.mots .line > span { animation: none; transform: none; }
.js .hero h1.mots .w { animation: mot-monte .8s var(--ease) both; animation-delay: calc(var(--i, 1) * 55ms + 40ms + var(--k, 0) * 60ms); }
@keyframes mot-monte { from { transform: translateY(112%) rotate(7deg); opacity: 0; } 55% { opacity: 1; } to { transform: none; opacity: 1; } }
.js .hero .lead .mot { animation: mot-on .55s var(--ease-soft) both; animation-delay: calc(.9s + var(--w, 0) * 70ms); }
.js .memo-it:not(.in) p .mot, .js .conclusion-delay:not(.in) .mot { opacity: .16; }
.js .memo-it.in p .mot { animation: mot-on .55s var(--ease-soft) both; animation-delay: calc(.45s + var(--w, 0) * 45ms); }
.js .conclusion-delay.in .mot { animation: mot-on .55s var(--ease-soft) both; animation-delay: calc(.3s + var(--w, 0) * 70ms); }
@keyframes mot-on { from { opacity: .16; } to { opacity: 1; } }

/* 5. les coches lavande et les filets qui se tracent */
.gains .tick .ck-v { fill: none; stroke: var(--call); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transform-box: fill-box; transform-origin: 35% 80%; }
.gains .tick .ck-halo { fill: var(--call); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.gains .tick .ck-burst circle { fill: var(--call); opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; }
.js .gains li:not(.in) .ck-v { stroke-dashoffset: 1; }
.js .gains li.in .ck-v { animation: ck-trace .46s cubic-bezier(.6, 0, .3, 1) both, ck-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.3s + var(--i, 0) * 110ms), calc(.7s + var(--i, 0) * 110ms); }
.js .gains li.in .ck-halo { animation: ck-halo .9s var(--ease) both; animation-delay: calc(.66s + var(--i, 0) * 110ms); }
.js .gains li.in .ck-burst circle { animation: ck-burst .7s var(--ease) both; animation-delay: calc(.72s + var(--i, 0) * 110ms); }
@keyframes ck-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ck-pop { 0% { transform: none; } 38% { transform: scale(1.3) rotate(-9deg); } 100% { transform: none; } }
@keyframes ck-halo { 0% { opacity: 0; transform: scale(.2); } 28% { opacity: .3; } 100% { opacity: 0; transform: scale(2.1); } }
@keyframes ck-burst { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); } }
.gains li { position: relative; }
.js .gains li, .js .services li { border-bottom-color: transparent; }
.js .gains li::after, .js .services li::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) calc(.15s + var(--i, 0) * 110ms); }
.js .services li::after { background: var(--line-strong); }
.js .gains li.in::after, .js .services li.in::after { transform: none; }

/* 6. le nom des offres : la pastille éclot et s'étire, puis les lettres arrivent une à une, puis un reflet de temps en temps ;
      leur type mot à mot ; le logo qui s'écrit ; le rideau aux bords fondus */
.offer-name .l, .door-kind .mot { display: inline-block; }
.door .offer-name { position: relative; isolation: isolate; }
.door .offer-name::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 999px; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 135% 0; }
.js .door .offer-name { background: none; }
.js .door .offer-name::before { content: ''; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; border-radius: 999px; background: var(--call);
  transform-origin: .975em 50%; transform: scale(0); clip-path: inset(0 calc(100% - 1.95em) 0 0 round 999px); }
.js .door.in .offer-name::before { animation: eclot .24s cubic-bezier(.3, .7, .4, 1) calc(.25s + var(--i, 0) * 120ms) both, etire .7s cubic-bezier(.22, .8, .24, 1) calc(.45s + var(--i, 0) * 120ms) both; }
.js .door.in .offer-name::after { animation: brille 5.2s ease-in-out calc(2.8s + var(--i, 0) * .45s) infinite; }
@keyframes eclot { from { transform: scale(0); } to { transform: none; } }
@keyframes etire { from { clip-path: inset(0 calc(100% - 1.95em) 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
.js .door:not(.in) .offer-name .l, .js .door:not(.in) .door-kind .mot { opacity: 0; }
.js .door.in .offer-name .l { animation: lettre .5s var(--ease) both; animation-delay: calc(.62s + var(--i, 0) * 120ms + var(--c, 0) * 22ms); }
.js .door.in .door-kind .mot { animation: mot-leve .6s var(--ease) both; animation-delay: calc(.6s + var(--i, 0) * 120ms + var(--w, 0) * 55ms); }
@keyframes lettre { from { opacity: 0; transform: translateY(.62em) rotate(10deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mot-leve { from { opacity: 0; transform: translateY(.7em) rotate(4deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
.js .brand .brand-mark {
  -webkit-mask: url('/assets/wordmark.png') center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 230% 100% no-repeat; -webkit-mask-composite: source-in;
  mask: url('/assets/wordmark.png') center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 0 0 / 230% 100% no-repeat; mask-composite: intersect;
}
.js .brand .brand-mark, .js .brand:hover .brand-mark { animation: logo-ecrit 1.05s cubic-bezier(.45, .05, .25, 1) .3s both, logo-pose .9s var(--ease) .3s both; }
@keyframes logo-ecrit { from { -webkit-mask-position: center, 100% 0; mask-position: center, 100% 0; } to { -webkit-mask-position: center, 0 0; mask-position: center, 0 0; } }
@keyframes logo-pose { from { transform: translateY(6px) rotate(-1.6deg); } to { transform: none; } }
.curtain { inset: -120px 0;
  -webkit-mask: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.06) 18px, rgba(0,0,0,.22) 36px, rgba(0,0,0,.5) 60px, rgba(0,0,0,.78) 84px, rgba(0,0,0,.94) 102px, #000 120px, #000 calc(100% - 120px), rgba(0,0,0,.94) calc(100% - 102px), rgba(0,0,0,.78) calc(100% - 84px), rgba(0,0,0,.5) calc(100% - 60px), rgba(0,0,0,.22) calc(100% - 36px), rgba(0,0,0,.06) calc(100% - 18px), transparent 100%);
  mask: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.06) 18px, rgba(0,0,0,.22) 36px, rgba(0,0,0,.5) 60px, rgba(0,0,0,.78) 84px, rgba(0,0,0,.94) 102px, #000 120px, #000 calc(100% - 120px), rgba(0,0,0,.94) calc(100% - 102px), rgba(0,0,0,.78) calc(100% - 84px), rgba(0,0,0,.5) calc(100% - 60px), rgba(0,0,0,.22) calc(100% - 36px), rgba(0,0,0,.06) calc(100% - 18px), transparent 100%); }
.curtain-lock { filter: blur(8px); transition: opacity .5s, transform .8s var(--ease), filter .5s; }
html.curtain-down .curtain-lock, html.curtain-cover .curtain-lock { filter: none; }
html.curtain-lift .curtain-lock { filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .js .hero .trait { animation: none; background-size: 100% .13em; }
  .js .trait-l { transition: none; background-size: 100% .13em; }
  .js .hl-w.first.last::before { transform: none; clip-path: none; transition: none; animation: none; }
  .js .hl-w.first.last .hl-t { transition: none; }
  .js .hl.in .hl-w.first.last { animation: none; }
  .js .hero .qm, .js .hl.in .qm { animation: none; }
  .ec-eclats { display: none; }
  .js .hero h1.mots .w, .js .hero .lead .mot, .js .memo-it p .mot, .js .conclusion-delay .mot,
  .js .door .offer-name .l, .js .door .door-kind .mot { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js .door .offer-name::before { animation: none !important; transform: none !important; clip-path: none !important; }
  .js .door .offer-name::after { animation: none; }
  .js .gains .ck-v { animation: none; stroke-dashoffset: 0; }
  .js .gains .ck-halo, .js .gains .ck-burst circle { animation: none; opacity: 0; }
  .js .gains li::after, .js .services li::after { transition: none; transform: none; }
  .js .brand .brand-mark { animation: none; -webkit-mask-position: center, 0 0; mask-position: center, 0 0; }
}
@media print {
  .trait, .trait-l { background: none; }
  .qm, .hl-w { animation: none !important; }
  .ec-eclats { display: none; }
}