*{box-sizing:border-box}body{margin:0;background:#050505;color:#fff;font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}main{height:100svh;min-height:560px;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 55%,#171215 0%,#080708 27%,#030303 65%)}.wall{position:absolute;inset:-12% auto -12% 0;width:37%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;perspective:1100px;mask-image:linear-gradient(transparent,#000 13%,#000 85%,transparent);opacity:.83}.wall.right{left:auto;right:0}.column{min-width:0;height:100%;overflow:hidden;transform:scale(1.1)}.right .column{transform:scale(1.1)}.track{animation:rise var(--duration) linear infinite;will-change:transform}.column:nth-child(even) .track{animation-name:fall}.group{display:flex;flex-direction:column;gap:12px;padding-bottom:12px}.card{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:contain;filter:brightness(.83);user-select:none;-webkit-user-drag:none}.wall .column:first-child{opacity:.7}.right .column:first-child{opacity:1}.right .column:last-child{opacity:.7}@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-50%)}}@keyframes fall{from{transform:translateY(-50%)}to{transform:translateY(0)}}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 24%,#050505aa 35%,#050505 42%,#050505 58%,#050505aa 65%,transparent 76%);z-index:1}.brand{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:2;text-align:center;width:35%;pointer-events:none}.logo{width:clamp(115px,14vw,218px);aspect-ratio:1;margin:auto;display:grid;place-items:center;border-radius:27%;position:relative;background:linear-gradient(145deg,#292628 0%,#0a090a 45%,#030303 75%,#231217);border:1px solid #907078;box-shadow:inset 1px 2px 3px #ffffff70,inset -1px -2px 4px #aa304b50,0 0 0 4px #111,0 24px 65px #000,0 0 65px #92213b14}.logo span{font-size:clamp(84px,10vw,155px);font-weight:800;line-height:1;letter-spacing:-.06em;margin-left:-.05em;color:#f6f5f5;text-shadow:0 2px 1px #aaa}.brand h1{font-size:clamp(10px,1.2vw,19px);font-weight:400;letter-spacing:.44em;margin:33px -1em 0 0;white-space:nowrap}.controls{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:16px;border:1px solid #ffffff24;background:#141214de;backdrop-filter:blur(14px);border-radius:40px;padding:9px 18px;white-space:nowrap;color:#bdb9bd;font-size:12px;box-shadow:0 12px 30px #0008}.controls button{border:0;background:none;color:#f6f2f4;padding:7px;cursor:pointer;min-width:75px}.controls button:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:4px}.controls label{display:flex;align-items:center;gap:9px}.controls input{width:74px;accent-color:#b9b1b5}.paused .track{animation-play-state:paused}.hint{position:absolute;bottom:88px;left:50%;transform:translateX(-50%);z-index:4;color:#777;font-size:10px;letter-spacing:.13em;white-space:nowrap}.controls button:hover{color:white;background:#ffffff0b;border-radius:20px}@media(max-width:700px){.wall{width:46%;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}.shade{background:linear-gradient(90deg,transparent 14%,#050505a0 29%,#050505 43%,#050505 57%,#050505a0 71%,transparent 86%)}.brand{width:42%}.brand h1{letter-spacing:.25em;font-size:10px;margin-top:25px}.card{filter:brightness(.75)}.controls{bottom:18px;gap:8px}.hint{bottom:77px;font-size:8px}.group{gap:9px;padding-bottom:9px}}@media(prefers-reduced-motion:reduce){.track{animation:none!important;transform:translateY(-18%)}.column:nth-child(even) .track{transform:translateY(-38%)}.controls{display:none}.hint{bottom:26px}}

.feature{position:absolute;left:0;top:46%;width:37%;z-index:3;display:flex;align-items:center;pointer-events:none;transform:translateY(-50%);gap:0;padding:0 3px}.feature.on-right{left:auto;right:0}.feature figure{margin:0;width:50%;min-width:0;opacity:0;transform:translateY(22px) scale(.86);transition:opacity .65s ease,transform .85s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 15px 22px #000)}.feature figure.visible{opacity:1;transform:translateY(0) scale(1)}.feature img{display:block;width:100%;height:auto}.feature figcaption{text-align:center;font-size:11px;letter-spacing:.05em;color:#e3dade;margin:6px 2px 0;background:#131113ed;border:1px solid #ffffff23;border-radius:20px;padding:8px 5px}.feature .product figcaption{border-color:#a2536655}.pair-active .wall{opacity:.4;transition:opacity .8s}.wall{transition:opacity .8s}.pair-active .feature img{filter:drop-shadow(0 0 7px #ffffff16)}.pair-status{position:absolute;top:calc(48% + 180px);left:50%;transform:translateX(-50%);z-index:4;text-align:center;font-size:12px;line-height:1.8;color:#b3aab0;max-width:25%;width:280px}.pair-status strong{color:#eee;font-weight:500}.step-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}.step-dots span{height:4px;width:14px;border-radius:9px;background:#363034}.step-dots span.active{background:#d8c4cc}.hint{display:none}@media(max-width:700px){.feature,.feature.on-right{top:62%;left:50%;right:auto;transform:translate(-50%,-50%);width:min(85%,400px)}.brand{top:23%}.logo{width:90px}.logo span{font-size:66px}.brand h1{margin-top:16px}.pair-status{top:32%;max-width:90%;font-size:11px}.step-dots{margin-top:5px}.feature figcaption{font-size:10px;padding:6px 3px}}@media(prefers-reduced-motion:reduce){.feature figure{transition:none}.pair-status{display:block}}

/* Les deux cartes encadrent le logo central. */
.feature,.feature.on-right{inset:0;width:100%;height:100%;padding:0;transform:none;display:block;pointer-events:none}
.feature figure{position:absolute;top:46%;width:clamp(160px,20vw,310px);margin:0;transform:translate(-50%,calc(-50% + 22px)) scale(.86)}
.feature .agent{left:24%}.feature .product{left:76%}
.feature.on-right .agent{left:76%}.feature.on-right .product{left:24%}
.feature figure.visible{transform:translate(-50%,-50%) scale(1)}
@media(max-width:700px){.feature,.feature.on-right{inset:0;width:100%;height:100%;transform:none}.feature figure{top:49%;width:32vw}.feature .agent{left:18%}.feature .product{left:82%}.feature.on-right .agent{left:82%}.feature.on-right .product{left:18%}.brand{top:49%;width:28%}.logo{width:clamp(66px,18vw,100px)}.logo span{font-size:clamp(48px,13vw,74px)}.brand h1{font-size:8px;letter-spacing:.13em;margin-top:17px}.pair-status{top:74%;width:90%;max-width:90%}.feature figcaption{font-size:9px;padding:6px 2px}}

.feature figcaption{display:none}

.connections{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}.connection-line{fill:none;stroke:#a5979d;stroke-width:1.4;stroke-dasharray:4 7;opacity:.18}.connection-beam{fill:none;stroke:#f7a4b7;stroke-width:2.3;opacity:0;filter:drop-shadow(0 0 5px #ed688c)}.connection-dot{fill:#fff;filter:drop-shadow(0 0 7px #ff6c92);opacity:0}.logo{transition:transform .7s ease,box-shadow .7s ease,border-color .7s ease}.hub-working .logo{transform:scale(1.12);border-color:#f7a7bd;box-shadow:inset 1px 2px 4px #ffffff90,0 0 35px #e5457055,0 0 95px #a52b482d,0 20px 55px #000}.hub-working .logo:before,.hub-working .logo:after{content:'';position:absolute;inset:-12px;border:1px solid #ff93b266;border-radius:29%;animation:hub-ring 1.8s ease-out infinite}.hub-working .logo:after{animation-delay:.9s}.hub-matched .logo{border-color:#f0c0ce;box-shadow:inset 1px 2px 4px #ffffff80,0 0 50px #f58faf35,0 20px 55px #000}.hub-status{font-size:11px;letter-spacing:.05em;color:#d2c5cb;margin-top:8px;min-height:20px}@keyframes hub-ring{from{opacity:.8;transform:scale(.97)}to{opacity:0;transform:scale(1.32)}}@media(prefers-reduced-motion:reduce){.hub-working .logo:before,.hub-working .logo:after{animation:none}.logo{transition:none}.connections{display:none}}

.explore-line{fill:none;stroke:#b8a7af;stroke-width:1;opacity:.13;stroke-dasharray:3 9}.explore-dot{fill:#decbd3;opacity:.32}@media(prefers-reduced-motion:reduce){.explore-line,.explore-dot{display:none}}
.felipe-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-felipe>img{visibility:hidden}.agent.is-felipe .felipe-motion{display:block}
.background-felipe{position:relative;aspect-ratio:4/5;flex-shrink:0}.background-felipe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:transparent}
.muse-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-muse>img{visibility:hidden}.agent.is-muse .muse-motion{display:block}.background-muse{position:relative;aspect-ratio:4/5;flex-shrink:0}.background-muse iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;background:transparent}.todd-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-todd>img{visibility:hidden}.agent.is-todd .todd-motion{display:block}.alfred-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-alfred>img{visibility:hidden}.agent.is-alfred .alfred-motion{display:block}.iggy-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-iggy>img{visibility:hidden}.agent.is-iggy .iggy-motion{display:block}.jojo-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-jojo>img{visibility:hidden}.agent.is-jojo .jojo-motion{display:block}.grok-motion{display:none;position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;pointer-events:none}.agent.is-grok>img{visibility:hidden}.agent.is-grok .grok-motion{display:block}.match-heart{position:absolute;left:78.6%;top:82.4%;width:8.6%;aspect-ratio:1;opacity:0;pointer-events:none;transform:scale(1);transition:opacity .15s}.match-heart svg{display:block;width:100%;height:100%;fill:#ff2d46;stroke:#ff2d46;stroke-width:1.5}.perfect-match .match-heart{opacity:1;animation:matched-heart-pop .45s ease-out}@keyframes matched-heart-pop{0%{transform:scale(.85)}45%{transform:scale(1.22)}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.perfect-match .match-heart{animation:none}}
.feature .heart-cleanup{position:absolute;left:77%;top:80%;width:13%;height:13%;background:radial-gradient(ellipse at 90% 80%,#242426 0%,#19191b 70%,#161618 100%);border-radius:25%;pointer-events:none}
.feature .match-heart{z-index:4;left:78.6%;top:82.4%;width:8.6%;opacity:1;transform:none;transition:none;animation:none}
.feature .match-heart svg{fill:transparent;stroke:#D9D9DE;stroke-width:1.5;overflow:visible}
.perfect-match .feature .match-heart{animation:shared-match-heart .48s cubic-bezier(.2,.9,.3,1.3) both}
.perfect-match .feature .match-heart svg{fill:#FF2D46;stroke:#FF2D46}
@keyframes shared-match-heart{0%{transform:scale(1)}40%{transform:scale(1.25)}75%{transform:scale(.97)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.perfect-match .feature .match-heart{animation:none}}

/* Integration: existing heading, calls to action and header remain in the parent page. */
main{height:100vh;min-height:0}.brand{top:52%}.brand h1,.pair-label,.step-dots,#pair-label,.hint{display:none}.logo{width:clamp(112px,10.5vw,170px);aspect-ratio:166/153}.logo img{width:100%;height:100%;border-radius:25%;object-fit:cover}.feature figure{top:52%}.pair-status{top:calc(52% + 100px);max-width:27%}.hub-status{font-size:10px;margin:0}.controls{left:auto;right:16px;top:108px;bottom:auto;transform:none;padding:2px 7px;background:#111b;font-size:10px}.controls label,#full{display:none}.controls button{min-width:55px;padding:6px}.paused .logo:before,.paused .logo:after{animation-play-state:paused!important}@media(max-width:700px){.brand{top:52%;width:28%}.logo{width:clamp(66px,18vw,100px)}.feature figure{top:52%;width:32vw}.pair-status{top:calc(52% + 65px);max-width:38%;width:38%}.hub-status{font-size:8px}.controls{top:90px;right:6px}}

/* Embedded background: no additional text or controls over the landing page. */
.controls, .pair-status { display: none; }
.column, .right .column { transform: none; }
/* Every column alternates with its neighbour, including across the centre. */
.right .column:nth-child(odd) .track { animation-name: fall; }
.right .column:nth-child(even) .track { animation-name: rise; }
/* Keep the background clear of the fixed header and the existing copy. */
.wall { mask-image: linear-gradient(transparent 8%, #000 23%, #000 77%, transparent 97%); }
/* ECART 5 — LA PAUSE HORS CHAMP (2026-10-06) : hors champ, TOUTES les animations de ce document s'arretent (pas seulement
 les murs, .paused .track ci-dessus). Classe posee par appliquerVisibilite(), animation.js. */
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
/* ECART 3 (index.html) — LE CORPS SE MONTRE QUAND CETTE FEUILLE EST APPLIQUEE (lot CLS-CADRE, 2026-10-06) : la regle en ligne
 de index.html le masque avant elle ; jamais de mise en page sans feuille, donc aucun saut compte. */
body{visibility:visible}