/* ============================================================
   MADRA — Système motion (2026-10-15)
   Chargé APRÈS le <style> inline des pages d'accueil (fr/en/es/de/pt).
   Principes : transform + opacity uniquement, zéro bibliothèque,
   scroll-driven animations natives quand le navigateur les a,
   repli IntersectionObserver sinon, tout coupé en mouvement réduit.
   ============================================================ */

:root {
  --mo-e: cubic-bezier(.16, 1, .3, 1);
  --mo-d: .9s;
}

/* ---------- Header : état scrollé ---------- */
.m-hdr-bar { transition: box-shadow .3s, background .3s; }
.m-hdr-bar.is-scrolled { box-shadow: 0 1px 0 #1f1f23, 0 14px 40px -18px rgba(0,0,0,.55); }

/* ---------- Reveals au scroll (data-rv) ---------- */
[data-rv] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity var(--mo-d) var(--mo-e), transform var(--mo-d) var(--mo-e), filter var(--mo-d) var(--mo-e); transition-delay: var(--rv-d, 0s); will-change: opacity, transform, filter; }
[data-rv].vis { opacity: 1; transform: none; filter: blur(0); will-change: auto; }
[data-rv-stagger] > * { opacity: 0; transform: translateY(24px); filter: blur(5px); transition: opacity .8s var(--mo-e), transform .8s var(--mo-e), filter .8s var(--mo-e); transition-delay: calc(var(--i, 0) * 90ms + var(--rv-d, 0s)); }
[data-rv-stagger].vis > * { opacity: 1; transform: none; filter: blur(0); }
/* les cartes qui ont déjà un transform au hover : on ne laisse pas la transition de reveal ralentir le hover */
[data-rv-stagger].vis > .step, [data-rv-stagger].vis > .plan, [data-rv-stagger].vis > .test, [data-rv-stagger].vis > .blog-card, [data-rv-stagger].vis > .faq-item { transition-delay: 0s; }

/* ---------- HERO : entrée mot par mot ---------- */
.hero .w { display: inline-block; white-space: pre-wrap; }
body.anim .hero .w { opacity: 0; transform: translateY(22px); filter: blur(10px); transition: opacity .9s var(--mo-e), transform .9s var(--mo-e), filter .9s var(--mo-e); transition-delay: calc(var(--i) * 55ms + .1s); }
body.hero-loaded .hero .w { opacity: 1; transform: none; filter: blur(0); }
body.anim .hero > .hero-badge, body.anim .hero > .hero-sub, body.anim .hero > .hero-price, body.anim .hero > .hero-ctas, body.anim .hero > .hero-trust { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .9s var(--mo-e), transform .9s var(--mo-e), filter .9s var(--mo-e); }
body.anim .hero > .hero-badge { transition-delay: 0s; }
body.anim .hero > .hero-sub { transition-delay: .55s; }
body.anim .hero > .hero-price { transition-delay: .65s; }
body.anim .hero > .hero-ctas { transition-delay: .75s; }
body.anim .hero > .hero-trust { transition-delay: .9s; }
body.hero-loaded .hero > .hero-badge, body.hero-loaded .hero > .hero-sub, body.hero-loaded .hero > .hero-price, body.hero-loaded .hero > .hero-ctas, body.hero-loaded .hero > .hero-trust { opacity: 1; transform: none; filter: blur(0); }

/* Fond vivant : deux halos qui dérivent lentement (petits, flou modéré) */
.hero .hero-blob { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; }
.hero .hero-blob.b1 { width: 520px; height: 420px; left: 6%; top: 2%; background: radial-gradient(circle, rgba(255,106,26,.22), transparent 62%); animation: mo-blob-a 18s ease-in-out infinite alternate; }
.hero .hero-blob.b2 { width: 460px; height: 380px; right: 4%; top: 18%; background: radial-gradient(circle, rgba(251,74,0,.14), transparent 62%); animation: mo-blob-b 22s ease-in-out infinite alternate; }
@keyframes mo-blob-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(70px, 40px, 0) scale(1.12); } }
@keyframes mo-blob-b { from { transform: translate3d(0,0,0) scale(1.05); } to { transform: translate3d(-60px, 50px, 0) scale(.95); } }
.hero-deco { display: none !important; }

/* ---------- HERO v3 : deux colonnes, la preuve plutôt que la promesse ---------- */
/* Le markup reste plat (badge, h1, sub, price, ctas, trust) : la grille range le texte à gauche
   et la scène de preuve à droite, sans toucher aux attributs i18n. */
@media (min-width: 981px) {
  /* pleine largeur : le fond (halos, trame) couvre tout l'écran, seul le contenu est borné à 1200 px (vu croppé à 1650 px par Yanis le 16/10) */
  .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); column-gap: 56px; align-items: center; text-align: left; padding: 88px max(24px, calc((100% - 1200px) / 2)) 96px; max-width: none; margin: 0; }
  .hero > .hero-badge, .hero > h1, .hero > .hero-sub, .hero > .hero-price, .hero > .hero-ctas, .hero > .hero-trust { grid-column: 1; justify-self: start; }
  .hero > h1 { margin-left: 0; margin-right: 0; max-width: 620px; font-size: clamp(44px, 5.2vw, 72px); }
  .hero > .hero-sub { margin-left: 0; max-width: 520px; }
  .hero > .hero-ctas, .hero > .hero-trust { justify-content: flex-start; }
  .hero > .hero-ai { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
}
.hero::after { display: none; }
/* la pilule devient un surtitre : plus de capsule, plus de point vert */
.hero .hero-badge { background: transparent; border: 0; border-radius: 0; padding: 0 0 0 30px; position: relative; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t); margin-bottom: 22px; }
.hero .hero-badge::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 1.5px; background: var(--o); }
.hero .hero-badge .dot { display: none; }
.hero .hero-price { font-family: var(--fh); font-style: italic; font-size: 15px; color: var(--t); font-weight: 400; }
.hero .hero-trust { font-size: 12.5px; letter-spacing: .02em; }

/* --- la scène : la console du moteur, en verre clair (liquid glass). Le client tape son activité, l'IA répond (les 4 étapes réelles de /creer), le site sort vérifié --- */
.hero-ai { position: relative; z-index: 1; width: 100%; max-width: 640px; margin: 56px auto 0; aspect-ratio: 10 / 8.6; color: #111114; border-radius: 24px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; font-family: var(--fb, inherit); text-align: left; isolation: isolate;
  background: linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.58) 55%, rgba(255,255,255,.7));
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.5), inset 1px 0 0 rgba(255,255,255,.6), 0 1px 2px rgba(20,16,12,.06), 0 40px 90px -36px rgba(20,16,12,.35), 0 0 0 1px rgba(20,16,12,.05); }
@media (min-width: 981px) { .hero-ai { margin: 0; } }
body.anim .hero-ai { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--mo-e) .6s, transform 1.1s var(--mo-e) .6s; }
body.hero-loaded .hero-ai { opacity: 1; transform: none; }
/* reflets : un éclat qui glisse lentement sur le verre, et un liseré lumineux en haut à gauche */
.hero-ai::before { content: ''; position: absolute; inset: -60% -40%; background: radial-gradient(ellipse 30% 40% at 30% 30%, rgba(255,255,255,.75), transparent 70%), radial-gradient(ellipse 25% 30% at 75% 70%, rgba(255,106,26,.12), transparent 70%); pointer-events: none; z-index: 0; animation: mo-glass 14s ease-in-out infinite alternate; }
.hero-ai::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; background: linear-gradient(120deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.25) 100%); mix-blend-mode: screen; }
@keyframes mo-glass { from { transform: translate3d(-4%, -2%, 0) rotate(-2deg); } to { transform: translate3d(5%, 4%, 0) rotate(2deg); } }
.ai-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(20,16,12,.07); font-size: 11.5px; letter-spacing: .04em; color: #6b6b70; position: relative; z-index: 1; }
.ai-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #1a1a1d; }
.ai-brand i { width: 9px; height: 9px; border-radius: 2.5px; background: var(--o); box-shadow: 0 0 12px rgba(255,106,26,.55); }
.ai-status { display: inline-flex; align-items: center; gap: 7px; }
.ai-status b { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.45); animation: mo-ping 1.8s ease-out infinite; }
.ai-chat { padding: 18px 18px 12px; display: grid; gap: 12px; align-content: start; position: relative; z-index: 1; }
.hero .hero-ai .ai-q { font-family: var(--fh); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.01em; color: #111114; }
.hero .hero-ai .ai-q em { font-style: normal; color: var(--o); }
/* le champ : une pastille de verre plus dense, texte noir (bat la règle [data-theme=light] .hero p) */
.ai-input { display: flex; align-items: flex-end; gap: 10px; background: rgba(255,255,255,.82); border: 1px solid rgba(20,16,12,.1); border-radius: 14px; padding: 11px 11px 11px 14px; min-height: 64px; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 6px 18px -12px rgba(20,16,12,.25); transition: border-color .3s, box-shadow .3s; }
.hero-ai[data-state="typing"] .ai-input { border-color: rgba(255,106,26,.5); box-shadow: inset 0 1px 0 #fff, 0 0 0 4px rgba(255,106,26,.12); }
.hero .hero-ai .ai-prompt { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; color: #111114; min-height: 2.9em; max-height: 4.4em; overflow: hidden; }
.ai-prompt::after { content: ''; display: inline-block; width: 2px; height: .95em; background: var(--o); margin-left: 2px; vertical-align: -2px; animation: mo-caret .9s steps(1) infinite; }
.hero-ai:not([data-state="typing"]):not([data-state="idle"]) .ai-prompt::after { display: none; }
@keyframes mo-caret { 50% { opacity: 0; } }
.ai-send { flex: none; width: 30px; height: 30px; border-radius: 9px; background: rgba(20,16,12,.08); display: grid; place-items: center; transition: background .3s var(--mo-e), transform .4s var(--mo-e), box-shadow .3s; }
.ai-send svg { width: 15px; height: 15px; fill: none; stroke: #111114; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.hero-ai[data-state="sent"] .ai-send, .hero-ai[data-state="think"] .ai-send, .hero-ai[data-state="site"] .ai-send { background: var(--o); transform: scale(1.08); box-shadow: 0 8px 18px -8px rgba(255,106,26,.7); }
.hero-ai[data-state="sent"] .ai-send svg, .hero-ai[data-state="think"] .ai-send svg, .hero-ai[data-state="site"] .ai-send svg { stroke: #fff; }
/* la réponse : une bulle de verre, texte noir */
.ai-reply { display: grid; gap: 10px; padding: 12px 14px 12px; border-radius: 14px; background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.9); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 10px 24px -16px rgba(20,16,12,.2); transition: opacity .4s var(--mo-e); }
.hero-ai[data-state="site"] .ai-reply { opacity: 0; }
.hero .hero-ai .ai-ack { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; color: #111114; min-height: 20px; opacity: 0; transform: translateY(6px); transition: opacity .45s var(--mo-e), transform .5s var(--mo-e); }
.hero-ai[data-state="think"] .ai-ack, .hero-ai[data-state="site"] .ai-ack { opacity: 1; transform: none; }
.ai-spark { width: 18px; height: 18px; border-radius: 6px; background: rgba(255,106,26,.14); display: grid; place-items: center; flex: none; }
.ai-spark svg { width: 11px; height: 11px; fill: var(--o); }
.ai-steps { list-style: none; margin: 0; padding: 0 0 0 27px; display: grid; gap: 7px; }
/* les 4 étapes du moteur sont lisibles en filigrane dès le départ, puis s'allument une à une */
.hero .hero-ai .ai-steps li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #8a8a90; opacity: .7; transition: opacity .4s var(--mo-e), color .3s; }
.hero .hero-ai .ai-steps li.on { opacity: 1; color: #111114; }
.hero .hero-ai .ai-steps li.ok { color: #3a3a40; }
.ai-steps li i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(20,16,12,.22); flex: none; position: relative; background: rgba(255,255,255,.7); }
.ai-steps li.on i { border-color: var(--o); border-top-color: transparent; background: transparent; animation: mo-spin .8s linear infinite; }
.ai-steps li.ok i { background: var(--o); border-color: var(--o); animation: none; }
.ai-steps li.ok i::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
@keyframes mo-spin { to { transform: rotate(360deg); } }
.ai-swatches { display: flex; gap: 6px; padding-left: 27px; opacity: 0; transform: translateY(4px); transition: opacity .5s var(--mo-e), transform .5s var(--mo-e); }
.ai-swatches.vis { opacity: 1; transform: none; }
.ai-swatches b { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(20,16,12,.1) inset, 0 2px 6px -2px rgba(20,16,12,.3); }
/* le résultat monte du bas et recouvre le processus : le site remplace la liste */
.ai-site { position: absolute; left: 14px; right: 14px; bottom: 14px; top: var(--st, 40%); background: #fff; border-radius: 14px; overflow: hidden; z-index: 2; border: 1px solid rgba(20,16,12,.08); box-shadow: 0 30px 60px -24px rgba(20,16,12,.45), inset 0 1px 0 #fff; opacity: 0; transform: translateY(40px) scale(.98); transition: opacity .6s var(--mo-e), transform .9s var(--mo-e); }
.hero-ai[data-state="site"] .ai-site { opacity: 1; transform: none; }
.ai-url { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #f6f6f7; border-bottom: 1px solid #ebebee; }
.ai-url i { width: 8px; height: 8px; border-radius: 50%; background: #e4e4e7; }
.ai-url i:nth-child(1) { background: #fe5f57; } .ai-url i:nth-child(2) { background: #febc2e; } .ai-url i:nth-child(3) { background: #28c840; }
.hero .hero-ai .ai-url-t { margin-left: 10px; flex: 1; max-width: 240px; height: 18px; line-height: 18px; border-radius: 5px; background: #fff; border: 1px solid #ebebee; font-size: 10.5px; color: #555; padding: 0 9px; font-family: var(--fb, inherit); }
/* l'aperçu : capture haute (hero + sections) qui défile lentement pendant que le site est affiché */
.ai-img { display: block; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: 50% 0%; transition: none; }
.hero-ai[data-state="site"] .ai-img { object-position: 50% 100%; transition: object-position 6.5s cubic-bezier(.45, 0, .2, 1) 1.2s; }
.ai-scan { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--o); box-shadow: 0 0 18px 2px rgba(255,106,26,.7); opacity: 0; }
.hero-ai[data-state="site"] .ai-scan { animation: mo-scan 1.3s cubic-bezier(.3,.7,.2,1) .25s both; }
@keyframes mo-scan { 0% { top: 30px; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.hero .hero-ai .ai-live { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; background: #0a0a0b; color: #fff; font-size: 11.5px; font-weight: 600; padding: 7px 11px; border-radius: 100px; box-shadow: 0 12px 24px -10px rgba(0,0,0,.5); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--mo-e) 1.1s, transform .6s var(--mo-e) 1.1s; }
.ai-live .dot { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: mo-ping 1.8s ease-out infinite; }
.hero-ai[data-state="site"] .ai-live { opacity: 1; transform: none; }
@keyframes mo-ping { to { box-shadow: 0 0 0 8px rgba(22,163,74,0); } }
.hero-ai[data-state="out"] .ai-chat, .hero-ai[data-state="out"] .ai-site { opacity: 0; transition: opacity .45s ease; }
.hero-ai[data-state="out"] .ai-site { transform: translateY(12px) scale(.985); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hero-ai { background: rgba(255,255,255,.92); } }
@media (max-width: 980px) {
  .hero-ai { aspect-ratio: 10 / 12; max-width: 100%; }
  .hero .hero-ai .ai-q { font-size: 17px; } .hero .hero-ai .ai-prompt { font-size: 13.5px; max-height: none; } .hero .hero-ai .ai-steps li { font-size: 12px; }
  .ai-site { top: var(--st, 52%); left: 10px; right: 10px; bottom: 10px; }
}

/* ---------- Fin de la grammaire « template » : surtitres, étapes, confiance ---------- */
.trust-band { background: transparent; border-bottom: 1px solid var(--border); padding: 18px 24px; }
.trust-badge-icon { display: none; }
.trust-badge { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }
.trust-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--o); }
.sec-tag { color: var(--t); position: relative; padding-left: 30px; }
.sec-tag::before { content: ''; position: absolute; left: 0; top: 50%; width: 20px; height: 1.5px; background: var(--o); }
.sec-head-center .sec-tag { padding-left: 0; }
.sec-head-center .sec-tag::before { display: none; }
/* étapes : fin des boîtes, grands numéros en Domine et un filet */
.steps { gap: 0; border-top: 1px solid var(--border); }
.step { background: transparent; border: 0; border-radius: 0; border-right: 1px solid var(--border); padding: 36px 28px 32px; }
.step:last-child { border-right: 0; }
.step:hover { transform: none; box-shadow: none; background: var(--bg2); }
.step::before { display: none; }
.step-num { background: transparent; color: var(--o); width: auto; height: auto; font-size: 40px; font-weight: 400; margin-bottom: 18px; letter-spacing: -.02em; }
@media (max-width: 1024px) { .step { border-right: 0; border-bottom: 1px solid var(--border); } }
/* stats : un registre plutôt qu'une barre */
.stats-bar { border-top: 0; gap: 0; padding: 40px 0; }
.stat-item { border-left: 1px solid var(--border); padding: 4px 24px; text-align: left; }
.stat-item:first-child { border-left: 0; padding-left: 0; }
.stat-num { font-weight: 400; }
.stat-label { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; }
@media (max-width: 640px) { .stat-item { padding: 8px 16px; } .stat-item:nth-child(odd) { border-left: 0; padding-left: 0; } }
/* le « POPULAIRE » devient un simple filet orange en tête de carte */
.plan.pop::before { display: none; }
.plan.pop { border-top: 3px solid var(--o); box-shadow: none; transform: none; }
.plan.pop:hover { transform: translateY(-4px); }

/* ---------- Scroll-driven (natif) : scène qui s'aplatit, halos en parallaxe, grande citation ---------- */
@supports (animation-timeline: view()) {
  @media (min-width: 761px) {
  }
  .hero .hero-blob.b1 { animation: mo-blob-a 18s ease-in-out infinite alternate, mo-para-a linear both; animation-timeline: auto, scroll(); animation-range: normal, 0 100vh; }
  .hero .hero-blob.b2 { animation: mo-blob-b 22s ease-in-out infinite alternate, mo-para-b linear both; animation-timeline: auto, scroll(); animation-range: normal, 0 100vh; }
  @keyframes mo-para-a { to { translate: 0 160px; } }
  @keyframes mo-para-b { to { translate: 0 90px; } }
  .big-quote .w { animation: mo-word-in linear both; animation-timeline: view(); animation-range-start: entry calc(22% + var(--i) * 2.2%); animation-range-end: entry calc(70% + var(--i) * 2.2%); }
  @keyframes mo-word-in { from { opacity: .16; filter: blur(2px); } to { opacity: 1; filter: blur(0); } }
  .big-quote[data-rv] { opacity: 1; transform: none; filter: none; }
}

/* ---------- Cartes : projecteur suivant la souris + inclinaison douce ---------- */
.step, .plan, .test, .blog-card { position: relative; }
.step::before, .plan::before, .test::before, .blog-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .4s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,106,26,.16), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
}
.step:hover::before, .plan:hover::before, .test:hover::before, .blog-card:hover::before { opacity: 1; }
.step > *, .plan > *, .test > *, .blog-card > * { position: relative; z-index: 1; }
.step, .plan, .test, .blog-card { transition: transform .5s var(--mo-e), box-shadow .5s var(--mo-e), border-color .3s; }
.plan.pop { transform: translateY(-6px); }
.plan.pop:hover { transform: translateY(-10px); }

/* ---------- Carrousel portfolio : fondu des bords + profondeur au survol ---------- */
.car-w { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cc { transition: transform .55s var(--mo-e), box-shadow .55s var(--mo-e), border-color .3s; }
.cc:hover { transform: translateY(-8px) scale(1.025); box-shadow: 0 30px 60px -24px rgba(20,16,12,.35); }
.cc img { transition: transform 1.2s var(--mo-e); }
.cc:hover img { transform: scale(1.04); }

/* ---------- Comparatif : lignes qui s'allument au survol ---------- */
.cmp-row:not(.head) { transition: background .25s; }
.cmp-row:not(.head):hover { background: var(--bg2); }
.cmp-row:not(.head):hover .cmp-cell:last-child { background: var(--o15); color: var(--o2); }

/* ---------- Stats : chiffres qui glissent ---------- */
.stat-num { display: inline-block; }

/* ---------- Mouvement réduit : tout est statique, rien n'est caché ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  [data-rv], [data-rv-stagger] > *, body.anim .hero .w, body.anim .hero > *, body.anim .hero-ai { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero-blob, .ai-prompt::after, .ai-live .dot, .ai-status b, .ai-steps li i, .ai-scan, .hero-ai::before, .car-t { animation: none !important; }
  .hero-ai .ai-site, .hero-ai .ai-live, .hero-ai .ai-reply, .hero-ai .ai-steps li, .hero-ai .ai-swatches { opacity: 1 !important; transform: none !important; }
  .big-quote .w { animation: none !important; opacity: 1 !important; filter: none !important; }
}

/* ---------- SCÈNE ÉPINGLÉE « 3 étapes » : brief → visuels → site imprimé (progression --p posée par homepage.js) ---------- */
.scene-make { padding: 0 24px; min-height: 560vh; position: relative; }
.scene-make .c { max-width: 1200px; min-height: 560vh; } /* le sticky ne bouge qu'à l'intérieur de son parent : c'est lui qui doit être haut */
.mk-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 48px; align-items: center; overflow: hidden; }
/* colonne gauche : le surtitre, puis UNE étape à la fois, en grand */
.mk-left { position: relative; }
.mk-left .sec-tag { margin-bottom: 28px; }
.mk-steps { position: relative; min-height: 260px; }
.mk-step { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .55s var(--mo-e), transform .7s var(--mo-e); pointer-events: none; }
.mk-step.on { opacity: 1; transform: none; }
.mk-step .step-num { font-family: var(--fh); font-size: 15px; letter-spacing: .14em; color: var(--o); margin-bottom: 18px; font-weight: 500; }
.mk-step h3, .mk-step h4 { font-family: var(--fh); font-weight: 400; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.025em; color: var(--w); margin: 0 0 18px; max-width: 480px; }
.mk-step p { font-size: 16.5px; line-height: 1.6; color: var(--t); max-width: 420px; margin: 0; }
.mk-progress { display: flex; gap: 8px; margin-top: 40px; }
.mk-progress i { width: 44px; height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; position: relative; }
.mk-progress i::after { content: ''; position: absolute; inset: 0; background: var(--o); transform-origin: 0 0; transform: scaleX(var(--f, 0)); }
/* colonne droite : la scène */
.mk-stage { position: relative; aspect-ratio: 4 / 3; width: 100%; }
/* temps 1 : le brief, en grand, mot par mot */
.mk-brief { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; font-family: var(--fh); font-style: italic; font-size: clamp(26px, 2.9vw, 44px); line-height: 1.22; letter-spacing: -.01em; color: var(--w); padding: 0 4%; transform-origin: 0 0; transform: translate(calc(var(--t2) * 2%), calc(var(--t2) * -50%)) scale(calc(1 - var(--t2) * .6)); opacity: calc((1 - var(--t2) * .45) * (1 - var(--t3))); }
.mk-brief .w { display: inline-block; opacity: clamp(.1, calc(var(--t1) * var(--n) - var(--i)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--t1) * var(--n) - var(--i)), 1)) * 8px)); }
.mk-brief .cur { display: inline-block; width: 3px; height: .9em; background: var(--o); vertical-align: -.1em; margin-left: 4px; opacity: calc(1 - var(--t2)); }
/* temps 2 : les visuels atterrissent en éventail (progression propre --a/--b/--c), puis se rangent dans le cadre (--t3) */
.mk-ph { position: absolute; width: 38%; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #e9e9ec center / cover no-repeat; box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 30px 60px -22px rgba(20,16,12,.55), 0 10px 20px -12px rgba(20,16,12,.3); will-change: transform, opacity; }
.mk-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 45%); }
.mk-ph.p1 { left: 6%; top: 34%; --x0: -140%; --y0: 20%; --r0: -22deg; --r1: -6deg; }
.mk-ph.p2 { left: 33%; top: 44%; --x0: 20%; --y0: 160%; --r0: 14deg; --r1: 2deg; }
.mk-ph.p3 { left: 57%; top: 28%; --x0: 150%; --y0: -40%; --r0: 24deg; --r1: 8deg; }
.mk-ph { transform: translate(calc(var(--x0) * (1 - var(--k))), calc(var(--y0) * (1 - var(--k)))) rotate(calc(var(--r0) + (var(--r1) - var(--r0)) * var(--k))) scale(calc(.8 + .2 * var(--k))); opacity: var(--k); }
.mk-ph.p1 { --k: var(--a); } .mk-ph.p2 { --k: var(--b); } .mk-ph.p3 { --k: var(--c); }
.mk-stage[data-beat="3"] .mk-ph, .mk-stage.t3 .mk-ph { transform: translate(calc((var(--x0) * (1 - var(--k))) + (var(--cx) * var(--g))), calc((var(--y0) * (1 - var(--k))) + (var(--cy) * var(--g)))) rotate(calc((var(--r0) + (var(--r1) - var(--r0)) * var(--k)) * (1 - var(--g)))) scale(calc((.8 + .2 * var(--k)) * (1 - var(--g) * .75))); opacity: calc(var(--k) * (1 - var(--g))); }
.mk-chip { position: absolute; left: 62%; top: 66%; display: inline-flex; align-items: center; gap: 8px; background: #0a0a0b; color: #fff; font-size: 12.5px; font-weight: 600; padding: 9px 13px; border-radius: 100px; box-shadow: 0 16px 30px -12px rgba(0,0,0,.5); transform: translateY(calc((1 - var(--c)) * 30px)) scale(calc(.9 + .1 * var(--c))); opacity: calc(var(--c) * (1 - var(--g))); }
.mk-chip b { width: 8px; height: 8px; border-radius: 50%; background: var(--o); }
/* temps 3 : le site s'imprime dans son cadre, une ligne orange balaie, puis le tampon */
.mk-frame { position: absolute; inset: 6% 6% 4%; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 60px 110px -40px rgba(20,16,12,.55), 0 20px 40px -24px rgba(20,16,12,.3); overflow: hidden; transform: scale(calc(.9 + .1 * var(--f))) translateY(calc((1 - var(--f)) * 24px)); opacity: var(--f); }
.mk-frame .mk-bar { height: 34px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border); background: #fafafa; }
.mk-frame .mk-url { font-size: 11.5px; color: var(--t); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 12px; }
.mk-site { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; background: #f4f4f5; }
.mk-site img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; clip-path: inset(0 0 calc((1 - var(--w)) * 100%) 0); }
.mk-scan { position: absolute; left: 0; right: 0; top: calc(var(--w) * 100%); height: 2px; background: var(--o); box-shadow: 0 0 18px 2px rgba(255,106,26,.5); opacity: calc(var(--w) * (1 - var(--w)) * 4); }
.mk-stamp { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 9px; background: #0a0a0b; color: #fff; font-size: 13px; font-weight: 600; padding: 10px 15px 10px 10px; border-radius: 100px; box-shadow: 0 16px 34px -12px rgba(0,0,0,.5); opacity: 0; transform: translateY(12px) scale(.9); transition: opacity .45s var(--mo-e), transform .6s var(--mo-e); }
.mk-stamp i { width: 22px; height: 22px; border-radius: 50%; background: #16a34a; display: inline-flex; align-items: center; justify-content: center; }
.mk-stamp i svg { width: 12px; height: 12px; }
.mk-live { position: absolute; left: 18px; bottom: 18px; font-family: var(--fh); font-style: italic; font-size: 14px; color: var(--w); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); opacity: 0; transform: translateY(12px); transition: opacity .45s var(--mo-e) .15s, transform .6s var(--mo-e) .15s; }
.mk-stage.done .mk-stamp, .mk-stage.done .mk-live { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .scene-make { min-height: 480vh; padding: 0 16px; }
  .scene-make .c { min-height: 480vh; }
  .mk-pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; row-gap: 12px; padding-top: 84px; }
  .mk-left .sec-tag { margin-bottom: 14px; }
  .mk-steps { min-height: 150px; }
  .mk-step h3, .mk-step h4 { font-size: 28px; margin-bottom: 8px; }
  .mk-step p { font-size: 14.5px; }
  .mk-progress { margin-top: 16px; }
  .mk-stage { aspect-ratio: 4 / 3.4; align-self: center; }
  .mk-brief { font-size: 22px; }
  .mk-ph { width: 42%; }
  .mk-stamp, .mk-live { font-size: 11.5px; padding: 8px 10px; right: 10px; bottom: 10px; }
  .mk-live { left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-make, .scene-make .c { min-height: 0; }
  .scene-make { padding: 64px 24px; }
  .mk-pin { position: static; height: auto; }
  .mk-step { position: static; opacity: 1; transform: none; margin-bottom: 24px; }
  .mk-stage { --t1: 1; --t2: 1; --t3: 1; --a: 1; --b: 1; --c: 1; --g: 1; --f: 1; --w: 1; }
  .mk-stage .mk-stamp, .mk-stage .mk-live { opacity: 1; transform: none; }
}

/* visuels : une photo, la carte du logo, la carte de la charte (3 objets différents, pas 3 captures) */
.mk-ph.logo { background: #fff; display: flex; align-items: center; justify-content: center; }
.mk-ph.logo::before { content: ''; position: absolute; inset: 14% 10%; background: url('/images/sites/ecopafiesta-logo-noir.png') no-repeat center / contain; }
.mk-ph.charte { background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8%; }
.mk-ph.charte i { display: block; border-radius: 6px; }
.mk-ph.charte i:nth-child(1) { background: #2f6f3c; } .mk-ph.charte i:nth-child(2) { background: #f0c23b; } .mk-ph.charte i:nth-child(3) { background: #a9c23a; } .mk-ph.charte i:nth-child(4) { background: #1b2a26; }
.mk-ph.charte b { grid-column: 1 / -1; align-self: end; font-family: var(--fh); font-style: italic; font-size: 13px; color: var(--w); font-weight: 400; }
.mk-chip { display: none; }

/* --- lisibilité du défilement : indice animé tant qu'on n'a pas bougé, entrée douce de la scène --- */
.mk-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--w); background: #fff; border: 1px solid var(--border); border-radius: 100px; padding: 10px 18px 10px 12px; box-shadow: 0 14px 30px -16px rgba(20,16,12,.35); opacity: clamp(0, calc((.96 - var(--p)) * 20), 1); transition: opacity .3s; pointer-events: none; z-index: 5; }
.mk-cue em { font-style: normal; font-family: var(--fh); color: var(--o); font-size: 15px; letter-spacing: 0; text-transform: none; }
.mk-cue i { width: 22px; height: 34px; border: 1.5px solid var(--w); border-radius: 12px; position: relative; display: block; }
.mk-cue i::after { content: ''; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--o); animation: mo-wheel 1.6s ease-in-out infinite; }
@keyframes mo-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(11px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.mk-pin { --p: 0; }
.mk-frame .mk-site img { object-position: top left; }
@media (max-width: 900px) { .mk-cue { bottom: 14px; font-size: 10.5px; white-space: nowrap; gap: 8px; padding: 8px 12px 8px 9px; } .mk-cue i { width: 18px; height: 28px; } .mk-cue em { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .mk-cue { display: none; } }

/* le logo passe devant (c'est la marque), la charte derrière ; l'indice remonte sous le texte, hors du bandeau cookies */
.mk-ph.p2.logo { left: 55%; top: 30%; --x0: 150%; --y0: -40%; --r0: 24deg; --r1: 7deg; z-index: 3; --k: var(--c); --cx: -60.5%; --cy: 48%; }
.mk-ph.p3.charte { left: 33%; top: 44%; --x0: 20%; --y0: 160%; --r0: 14deg; --r1: 2deg; z-index: 2; --k: var(--b); --cx: 0%; --cy: 8%; }
.mk-ph.logo::before { inset: 30% 7%; }
.mk-cue { left: 0; translate: 0; bottom: 14%; }
@media (max-width: 900px) { .mk-cue { left: 50%; translate: -50% 0; bottom: 96px; } }

/* ---------- Finitions (15/10 soir) : titre de section lisible par Google, résultats clients animés ---------- */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.test { position: relative; overflow: hidden; }
.test .tm-line { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--og); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s var(--mo-e) .25s; z-index: 2; }
[data-rv-stagger].vis .test .tm-line { transform: scaleX(1); }
.test .tm-metric { color: var(--o); font-variant-numeric: tabular-nums; }
.test .tm-metric .tm-n { display: inline-block; min-width: 1ch; }
@media (prefers-reduced-motion: reduce) { .test .tm-line { transform: scaleX(1); transition: none; } }

/* ---------- Fluidité (16/10) : tokens unifiés, entrée/sortie des scènes, parallaxe du hero, élan ---------- */
:root { --mo-d: 1.05s; }
[data-rv] { transform: translateY(34px) scale(.985); filter: blur(8px); }
[data-rv-stagger] > * { transform: translateY(30px) scale(.985); filter: blur(7px); transition-duration: 1s; }
[data-rv].vis, [data-rv-stagger].vis > * { transform: none; filter: blur(0); }

/* la scène épinglée entre en fondu-échelle (--e : 0 en bas de l'écran → 1 une fois épinglée) et sort vers le haut (--x : derniers 7 % de la piste) */
.mk-pin { --e: 1; --x: 0; }
.mk-left { opacity: calc(min(1, var(--e) * 2.2) * (1 - var(--x))); translate: 0 calc((1 - var(--e)) * -20vh - var(--x) * 56px); transition: none; }
.mk-stage { opacity: calc(min(1, var(--e) * 2.2) * (1 - var(--x))); translate: 0 calc((1 - var(--e)) * -26vh - var(--x) * 72px); scale: calc(.93 + .07 * var(--e) - .04 * var(--x)); filter: blur(calc((1 - min(1, var(--e) * 1.6)) * 8px + var(--x) * 6px)); }

/* le hero glisse en parallaxe pendant le premier écran (scroll-driven natif, rien sinon) */
@supports (animation-timeline: scroll()) {
  /* parallaxe du hero : desktop seulement, sur mobile la console est sous le texte et sortirait voilée */
  @media (min-width: 981px) { .hero > .hero-ai { animation: mo-hero-ai linear both; animation-timeline: scroll(root); animation-range: 0 90vh; } }
  .hero > .hero-ai-disabled { animation: mo-hero-ai linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
  .hero > .hero-badge, .hero > h1, .hero > .hero-sub, .hero > .hero-price, .hero > .hero-ctas, .hero > .hero-trust { animation: mo-hero-text linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes mo-hero-ai { to { translate: 0 -110px; scale: .95; opacity: .25; } }
  @keyframes mo-hero-text { to { translate: 0 -48px; opacity: 0; } }
}

/* élan : la galerie se penche légèrement dans le sens du défilement (--vel posé par madra-motion.js) */
.car-w { transform: skewX(calc(var(--vel, 0) * -.32deg)); transition: transform .18s linear; }

@media (prefers-reduced-motion: reduce) {
  .mk-left, .mk-stage { opacity: 1; translate: none; scale: none; filter: none; }
  .hero > * { animation: none !important; }
  .car-w { transform: none; }
}

/* ---------- Finitions (16/10 soir) : comparatif qui défile sur mobile au lieu de s'écraser ---------- */
@media (max-width: 640px) {
  .cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .cmp-row { min-width: 560px; }
  .cmp .cmp-cell { padding: 14px 14px; font-size: 13px; }
}

/* ---------- Console du moteur : finitions « amazing » (16/10 nuit) ---------- */
.hero-ai { perspective: 1100px; }
/* ligne de progression du moteur, sous la barre */
.ai-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--o); transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); transition: transform .7s var(--mo-e); box-shadow: 0 0 10px rgba(255,106,26,.55); }
/* voile de lumière qui balaie le verre quand le site apparaît */
.ai-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%); transform: translateX(-130%); opacity: 0; }
.hero-ai.sheen .ai-sheen { animation: mo-sheen 1.5s cubic-bezier(.3,.6,.2,1) both; }
@keyframes mo-sheen { 0% { transform: translateX(-130%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(130%); opacity: 0; } }
/* le bouton d'envoi « pop » quand le brief est envoyé */
.hero-ai[data-state="sent"] .ai-send { animation: mo-pop .55s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes mo-pop { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1.08); } }
/* le voyant « thinking » : l'étincelle pulse pendant que le moteur travaille */
.hero-ai[data-state="think"] .ai-spark { animation: mo-think 1.1s ease-in-out infinite; }
@keyframes mo-think { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,106,26,.35); } 50% { box-shadow: 0 0 0 6px rgba(255,106,26,0); } }
/* artefacts : chaque étape produit quelque chose à droite (secteur détecté, palette, structure, textes) */
.ai-steps li { position: relative; }
.ai-art { margin-left: auto; flex: none; opacity: 0; transform: translateX(8px); transition: opacity .45s var(--mo-e), transform .55s var(--mo-e); }
.ai-steps li.ok .ai-art { opacity: 1; transform: none; }
.hero .hero-ai .ai-art.chip { font-style: normal; font-size: 10.5px; font-weight: 600; color: #111114; background: rgba(20,16,12,.06); border: 1px solid rgba(20,16,12,.08); border-radius: 100px; padding: 2px 8px; white-space: nowrap; max-width: 56%; overflow: hidden; text-overflow: ellipsis; }
.ai-art.sw { display: flex; gap: 4px; } .ai-art.sw b { width: 12px; height: 12px; border-radius: 4px; box-shadow: 0 0 0 1px rgba(20,16,12,.1) inset; transform: scale(.5); transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.ai-steps li.ok .ai-art.sw b { transform: scale(1); } .ai-art.sw b:nth-child(2) { transition-delay: .08s; } .ai-art.sw b:nth-child(3) { transition-delay: .16s; }
.ai-art.wire { width: 36px; height: 14px; background: linear-gradient(#111114 0 0) 0 0 / 100% 3px no-repeat, linear-gradient(#9a9aa0 0 0) 0 6px / 62% 3px no-repeat, linear-gradient(#c9c9cf 0 0) 0 12px / 84% 2px no-repeat; }
.ai-art.lines { display: grid; gap: 3px; width: 42px; } .ai-art.lines b { height: 2px; border-radius: 2px; background: #9a9aa0; width: 0; transition: width .6s var(--mo-e); }
.ai-steps li.ok .ai-art.lines b:nth-child(1) { width: 100%; } .ai-steps li.ok .ai-art.lines b:nth-child(2) { width: 70%; transition-delay: .12s; } .ai-steps li.ok .ai-art.lines b:nth-child(3) { width: 88%; transition-delay: .24s; }
.ai-swatches { display: none; }
/* la carte du site arrive avec une légère bascule 3D, l'adresse se tape dans la barre */
.ai-site { transform: translateY(44px) scale(.97) rotateX(7deg); transform-origin: 50% 100%; }
.hero-ai[data-state="site"] .ai-site { transform: none; }
.hero .hero-ai .ai-url-t { position: relative; }
.hero-ai[data-state="site"] .ai-url-t::after { content: ''; display: inline-block; width: 1.5px; height: 10px; background: #111114; margin-left: 2px; vertical-align: -1px; animation: mo-caret .9s steps(1) infinite; }
.hero-ai[data-state="site"].url-done .ai-url-t::after { display: none; }
@media (prefers-reduced-motion: reduce) { .ai-sheen, .ai-prog { display: none; } .ai-art { opacity: 1; transform: none; } .ai-art.lines b { width: 100%; } .ai-art.sw b { transform: none; } }

/* ---------- Console du moteur v4 : une vraie conversation, rien n'est affiché avant d'arriver (16/10 nuit) ---------- */
.hero-ai { grid-template-rows: auto 1fr; }
.ai-chat { padding: 0; display: flex; flex-direction: column; gap: 0; min-height: 0; }
.ai-thread { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 10px; }
.ai-thread::-webkit-scrollbar { display: none; }
.ai-input { margin: 8px 14px 14px; }
.msg { max-width: 92%; opacity: 0; transform: translateY(10px) scale(.98); animation: mo-msg .55s var(--mo-e) both; }
@keyframes mo-msg { to { opacity: 1; transform: none; } }
.msg.ai { align-self: flex-start; display: flex; gap: 9px; align-items: flex-start; }
.msg.ai > .ai-spark { margin-top: 2px; }
.msg.me { align-self: flex-end; background: rgba(255,106,26,.12); border: 1px solid rgba(255,106,26,.25); color: #111114; font-size: 13.5px; line-height: 1.45; padding: 9px 13px; border-radius: 14px 14px 4px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
.hero .hero-ai .msg.ai .ai-q { font-family: var(--fh); font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -.01em; color: #111114; padding-top: 1px; }
.hero .hero-ai .msg.ai .ai-q em { font-style: normal; color: var(--o); }
.hero .hero-ai .msg.ai .txt { font-size: 13.5px; font-weight: 500; color: #111114; line-height: 1.45; padding-top: 1px; }
/* « en train d'écrire » : trois points */
.msg.ai.dots .txt { display: inline-flex; gap: 4px; padding: 6px 2px 0; }
.msg.ai.dots .txt b { width: 6px; height: 6px; border-radius: 50%; background: #8a8a90; animation: mo-dots 1.1s ease-in-out infinite; }
.msg.ai.dots .txt b:nth-child(2) { animation-delay: .15s; } .msg.ai.dots .txt b:nth-child(3) { animation-delay: .3s; }
@keyframes mo-dots { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
/* un événement du moteur : spinner puis coche, texte, artefact à droite */
.msg.ai.ev { align-self: stretch; max-width: none; padding-left: 27px; }
.msg.ai.ev .row { display: flex; align-items: center; gap: 9px; width: 100%; font-size: 12.5px; color: #111114; }
.msg.ai.ev .row i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--o); border-top-color: transparent; flex: none; position: relative; animation: mo-spin .8s linear infinite; }
.msg.ai.ev.ok .row i { background: var(--o); border-color: var(--o); animation: none; }
.msg.ai.ev.ok .row i::after { content: ''; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.msg.ai.ev .ai-art { margin-left: auto; }
.msg.ai.ev.ok .ai-art { opacity: 1; transform: none; }
.msg.ai.ev.ok .ai-art.sw b { transform: scale(1); }
.msg.ai.ev.ok .ai-art.lines b:nth-child(1) { width: 100%; } .msg.ai.ev.ok .ai-art.lines b:nth-child(2) { width: 70%; transition-delay: .12s; } .msg.ai.ev.ok .ai-art.lines b:nth-child(3) { width: 88%; transition-delay: .24s; }
/* le site : dernier message du fil, carte pleine largeur */
.msg.ai.site { align-self: stretch; max-width: none; display: block; padding-left: 27px; }
.hero-ai .ai-site { position: relative; left: auto; right: auto; top: auto; bottom: auto; height: 230px; opacity: 1; transform: none; transition: none; animation: mo-site .9s var(--mo-e) both; transform-origin: 50% 100%; }
@keyframes mo-site { from { opacity: 0; transform: translateY(30px) scale(.97) rotateX(7deg); } to { opacity: 1; transform: none; } }
.hero-ai .ai-site .ai-img { object-position: 50% 0%; transition: none; }
.hero-ai .ai-site.pan .ai-img { object-position: 50% 100%; transition: object-position 6.5s cubic-bezier(.45, 0, .2, 1) 1s; }
.hero-ai .ai-site .ai-scan { animation: mo-scan 1.3s cubic-bezier(.3,.7,.2,1) .25s both; }
.hero-ai .ai-site .ai-live { transition-delay: 1.1s; }
.hero-ai .ai-site.pan .ai-live { opacity: 1; transform: none; }
.hero-ai .ai-url-t::after { content: ''; display: inline-block; width: 1.5px; height: 10px; background: #111114; margin-left: 2px; vertical-align: -1px; animation: mo-caret .9s steps(1) infinite; }
.hero-ai .ai-site.url-done .ai-url-t::after { display: none; }
.hero-ai[data-state="out"] .ai-thread { opacity: 0; transition: opacity .45s ease; }
.hero-ai[data-state="out"] .ai-site, .hero-ai[data-state="out"] .ai-chat { opacity: 1; transform: none; }
@media (max-width: 980px) { .hero-ai .ai-site { height: 200px; } .ai-thread { padding: 12px 12px 6px; } }
@media (prefers-reduced-motion: reduce) { .msg { animation: none; opacity: 1; transform: none; } .hero-ai .ai-site { animation: none; } .msg.ai.dots { display: none; } }

/* ---------- La carte du site = la miniature de l'écran entier (16/10), rien n'est coupé ---------- */
.hero-ai .ai-site { height: auto; }
.hero-ai .ai-site .ai-img { height: auto; aspect-ratio: 1000 / 625; object-fit: cover; object-position: 50% 0%; transition: none; animation: mo-breathe 9s ease-in-out .8s both; transform-origin: 50% 30%; }
.hero-ai .ai-site.pan .ai-img { object-position: 50% 0%; transition: none; }
@keyframes mo-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .hero-ai .ai-site .ai-img { animation: none; } }

/* ---------- Miniature 16/10 de l'écran entier, et la page défile dedans (capture haute : écran + sections) ---------- */
.hero-ai .ai-site .ai-img { aspect-ratio: 1000 / 625; height: auto; object-fit: cover; object-position: 50% 0%; animation: none; transform: none; transition: none; }
.hero-ai .ai-site.pan .ai-img { object-position: 50% 100%; transition: object-position 7.5s cubic-bezier(.45, 0, .25, 1) 1.4s; }
@media (prefers-reduced-motion: reduce) { .hero-ai .ai-site.pan .ai-img { transition: none; object-position: 50% 0%; } }