<style id="oui-anim">
/* ══════════════════════════════════════
   COUCHE D'ANIMATION - piste C animée (26/10/2026)
   Retour client : rendu plus vivant, immigration positive.
   Tout est désactivé si l'utilisateur limite les animations (prefers-reduced-motion).
══════════════════════════════════════ */
:root { --ease-out: cubic-bezier(.22,1,.36,1); --ease-back: cubic-bezier(.34,1.56,.64,1); }

/* ── Révélations au scroll ── */
.js-anim .rv { opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay:var(--d,0s); }
.js-anim .rv.rv-left { transform:translateX(-34px); }
.js-anim .rv.rv-right { transform:translateX(34px); }
.js-anim .rv.rv-pop { transform:scale(.9) translateY(14px); transition-timing-function:var(--ease-back), var(--ease-back); }
.js-anim .rv.is-in { opacity:1; transform:none; }

/* ── Hero : entrée en scène ── */
.js-anim .hero-word { animation:ouiWordIn 1.6s var(--ease-out) both, ouiBreath 8s ease-in-out 1.6s infinite; }
@keyframes ouiWordIn { from { opacity:0; letter-spacing:.04em; transform:translateX(-50%) translateY(30px); } to { opacity:1; } }
@keyframes ouiBreath { 0%,100% { color:#FBF8F4; } 50% { color:#F7EEE8; } }
.js-anim .hero-art { animation:ouiArtIn 1.8s var(--ease-out) .1s both; }
@keyframes ouiArtIn { from { opacity:0; filter:blur(6px); } to { opacity:1; filter:none; } }
.js-anim .hero-copy > * { opacity:0; transform:translateY(22px); animation:ouiUp .9s var(--ease-out) forwards; }
.js-anim .hero-copy > :nth-child(1) { animation-delay:.35s; }
.js-anim .hero-copy > :nth-child(2) { animation-delay:.5s; }
.js-anim .hero-copy > :nth-child(3) { animation-delay:.7s; }
.js-anim .hero-copy > :nth-child(4) { animation-delay:.85s; }
.js-anim .hero-copy > :nth-child(5) { animation-delay:1s; }
.js-anim .hero-paths .path-card { opacity:0; transform:translateY(40px) rotate(1.5deg); animation:ouiUp 1s var(--ease-back) forwards; }
.js-anim .hero-paths .path-card:nth-child(1) { animation-delay:1.05s; }
.js-anim .hero-paths .path-card:nth-child(2) { animation-delay:1.25s; }
@keyframes ouiUp { to { opacity:1; transform:none; } }

/* Mot clé tournant */
.hero-rotator { font-size:clamp(20px,1.9vw,27px); font-weight:800; letter-spacing:-.02em; color:var(--dark); margin:-4px 0 14px; display:flex; align-items:baseline; gap:.32em; flex-wrap:wrap; }
.rot-word { position:relative; display:inline-grid; color:#1E8F8C; isolation:isolate; transition:width .5s var(--ease-out); }
.rot-word > span { grid-area:1/1; justify-self:start; white-space:nowrap; opacity:0; transform:translateY(.6em); transition:opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rot-word > span.on { opacity:1; transform:none; }
.rot-word > span.off { opacity:0; transform:translateY(-.6em); }
.rot-word::after { content:''; position:absolute; left:0; right:0; bottom:.02em; height:.32em; background:var(--pink); opacity:.55; z-index:-1; border-radius:4px; transform-origin:left; animation:ouiUnderline 2.8s var(--ease-out) infinite; }
@keyframes ouiUnderline { 0% { transform:scaleX(0); } 18%,82% { transform:scaleX(1); } 100% { transform:scaleX(0); transform-origin:right; } }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Bouton principal : halo doux */
.btn-hero { position:relative; isolation:isolate; }
.btn-hero::before { content:''; position:absolute; inset:0; border-radius:inherit; background:var(--teal); z-index:-1; opacity:.5; animation:ouiHalo 2.8s ease-out 2.2s infinite; }
@keyframes ouiHalo { 0% { transform:scale(1); opacity:.45; } 70%,100% { transform:scale(1.1,1.3); opacity:0; } }

/* Cartes parcours : survol plus chaleureux */
.path-card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:2px; background:linear-gradient(135deg,var(--teal),var(--pink)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
.path-card:hover::before, .path-card:focus-visible::before { opacity:1; }
.path-card:hover .path-btn svg { animation:ouiNudge .6s var(--ease-back); }
@keyframes ouiNudge { 50% { transform:translate(3px,-3px); } }

/* Bulles « bonnes nouvelles » */
.hero-news { position:absolute; z-index:3; left:clamp(24px,38vw,560px); top:clamp(70px,9vw,140px); pointer-events:none; }
.hero-toast { position:absolute; left:0; top:0; display:flex; align-items:center; gap:10px; white-space:nowrap; background:rgba(255,255,255,.94); border-radius:16px; padding:10px 16px 10px 10px; box-shadow:0 14px 34px rgba(60,44,30,.14); opacity:0; transform:translateY(14px) scale(.96); transition:opacity .6s var(--ease-out), transform .6s var(--ease-back); }
.hero-toast.on { opacity:1; transform:none; }
.hero-toast .t-ic { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--teal-lt); color:var(--dark); flex-shrink:0; }
.hero-toast .t-ic svg { width:16px; height:16px; }
.hero-toast.pink .t-ic { background:var(--pink); }
.hero-toast b { display:block; font-size:12.5px; color:var(--dark); }
.hero-toast small { font-size:11px; color:var(--text-lt); font-weight:600; }

/* ── Le pont : trait qui se dessine au scroll ── */
.bridge-band { position:relative; background:var(--sand-lt); padding:30px 60px 10px; overflow:hidden; }
.bridge-inner { max-width:1100px; margin:0 auto; position:relative; }
.bridge-svg { width:100%; height:auto; display:block; overflow:visible; }
.bridge-arc { fill:none; stroke:var(--teal); stroke-width:3; stroke-linecap:round; }
.bridge-ghost { fill:none; stroke:var(--line); stroke-width:3; stroke-dasharray:2 9; stroke-linecap:round; }
.bridge-post { stroke:var(--teal-lt); stroke-width:2; }
.bridge-dot { fill:var(--pink); stroke:#fff; stroke-width:3; }
.bridge-labels { display:flex; justify-content:space-between; margin-top:-6px; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--text-lt); }
.bridge-labels span:last-child { text-align:right; }
.bridge-caption { position:relative; margin:18px 0 -4px; font-size:clamp(17px,1.8vw,24px); font-weight:900; color:var(--dark); letter-spacing:-.02em; text-align:center; }
.bridge-caption em { font-style:normal; color:#1E8F8C; }

/* ── Avantages / icônes ── */
.advantage-icon { transition:transform .5s var(--ease-back); }
.advantage-card:hover .advantage-icon { transform:rotate(-8deg) scale(1.12); }
.advantage-card:hover { border-color:var(--pink); box-shadow:0 16px 34px rgba(240,187,201,.25); }

/* ── Parcours particulier : étapes qui se cochent ── */
.js-anim .journey-row { opacity:.35; transition:opacity .5s; }
.js-anim .journey-row.is-in { opacity:1; }
.js-anim .journey-row .journey-check { transform:scale(.4); transition:transform .5s var(--ease-back); }
.js-anim .journey-row.is-in .journey-check { transform:none; }

/* ── Tableau entreprises : lignes en direct ── */
.dash-badge { position:relative; }
.dash-badge::after { content:''; position:absolute; right:-10px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:#3DD68C; animation:ouiBlink 1.4s ease-in-out infinite; }
@keyframes ouiBlink { 50% { opacity:.2; } }
.status-prog { animation:ouiBlink 1.8s ease-in-out infinite; }
.dash-status.flip { animation:ouiFlip .6s var(--ease-back); }
@keyframes ouiFlip { 0% { transform:rotateX(90deg); } 100% { transform:none; } }

/* ── Témoignages qui défilent ── */
.voices { padding:80px 0 90px; background:#fff; overflow:hidden; }
.voices .section-label, .voices .section-title { padding:0 24px; }
.voices-track-wrap { margin-top:40px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.voices-track { display:flex; gap:20px; width:max-content; animation:ouiMarquee 48s linear infinite; padding:6px 0 16px; }
.voices-track-wrap:hover .voices-track, .voices-track-wrap:focus-within .voices-track, .voices.paused .voices-track { animation-play-state:paused; }
@keyframes ouiMarquee { to { transform:translateX(-50%); } }
.voice { width:330px; flex-shrink:0; background:var(--sand-lt); border:1px solid var(--line); border-radius:22px; padding:24px 24px 20px; display:flex; flex-direction:column; gap:16px; transition:transform .3s var(--ease-out), box-shadow .3s; }
.voice:hover { transform:translateY(-4px) rotate(-.6deg); box-shadow:0 16px 32px rgba(60,44,30,.10); }
.voice q { font-size:14.5px; line-height:1.6; color:var(--text); quotes:'« ' ' »'; }
.voice-who { display:flex; align-items:center; gap:12px; margin-top:auto; }
.voice-av { width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:14px; color:var(--dark); background:var(--teal-lt); }
.voice:nth-child(3n+2) .voice-av { background:var(--pink); }
.voice:nth-child(3n) .voice-av { background:var(--sand); }
.voice-who b { display:block; font-size:13px; color:var(--dark); }
.voice-who small { font-size:11.5px; color:var(--text-lt); font-weight:600; }
.voice-tag { align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#B0607A; background:#FCEEF2; border-radius:20px; padding:3px 9px; }
.voices-ctrl { display:flex; justify-content:center; margin-top:18px; }
.voices-ctrl button { font:inherit; font-size:12.5px; font-weight:700; color:var(--dark); background:none; border:1.5px solid var(--line); border-radius:30px; padding:8px 16px; cursor:pointer; }
.voices-ctrl button:focus-visible { outline:2px solid var(--dark); outline-offset:3px; }

/* ── Actualités ── */
.news-card .thumb-photo { transition:transform .8s var(--ease-out); }
.news-card:hover .thumb-photo { transform:scale(1.06); }

@media (max-width:900px) {
  .hero-news { display:none; }
  .bridge-band { padding:20px 20px 0; }
  .voice { width:280px; }
}

/* ── Accessibilité : animations réduites ── */
@media (prefers-reduced-motion: reduce) {
  .js-anim .rv, .js-anim .hero-copy > *, .js-anim .hero-paths .path-card, .js-anim .journey-row, .js-anim .journey-row .journey-check { opacity:1 !important; transform:none !important; animation:none !important; transition:none !important; }
  .js-anim .hero-word, .js-anim .hero-art, .btn-hero::before, .rot-word::after, .dash-badge::after, .status-prog { animation:none !important; }
  .hero-news { display:none; }
  .voices-track { animation:none; flex-wrap:wrap; width:auto; justify-content:center; padding:6px 24px 16px; }
  .voices-track .voice[aria-hidden="true"] { display:none; }
  .voices-ctrl { display:none; }
}
</style>
