/* ══════════════════════════════════════════════════════════════ PROPBOOK · landing Direction : Assemblage (sombre) + Tableau (clair) · Syne Thème : suit le système, bouton de bascule dans la nav. Tout est piloté par les tokens ci-dessous. ══════════════════════════════════════════════════════════════ */ /* ── SOMBRE · Assemblage (par défaut) ────────────────────────── */ :root{ color-scheme:dark;box-sizing:border-box; --bg:var(--pb-black); --deep:var(--pb-deep); --band:var(--pb-blue-band); --acc:var(--pb-blue); --acc2:var(--pb-blue-2); --ink:var(--pb-ink); --mute:var(--pb-mute); --on-acc-bg:#FFFFFF; --on-acc:var(--pb-black); --line:color-mix(in srgb,var(--acc2) 24%,transparent); --line-2:color-mix(in srgb,var(--acc2) 46%,transparent); --surf:color-mix(in srgb,var(--deep) 70%,transparent); --hover:color-mix(in srgb,var(--acc2) 10%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,var(--acc) 30%,var(--deep)),color-mix(in srgb,var(--deep) 94%,var(--bg))); --dead:color-mix(in srgb,var(--ink) 20%,var(--bg)); --dead-ink:color-mix(in srgb,var(--ink) 58%,transparent); --shadow:0 30px 60px -30px rgba(0,0,0,.8); --page:linear-gradient(180deg,var(--bg) 0%,var(--bg) 5%,var(--deep) 17%,var(--band) 34%,var(--band) 44%,var(--deep) 58%,var(--bg) 70%,var(--bg) 100%); --display:var(--pb-font-display); --body:var(--pb-font-body); --mono:var(--pb-font-mono); } /* ── VIOLET · à l'essai ───────────────────────────────────────── Même direction, même contraste : seules les 6 couleurs de base changent. Poser data-tint="violet" sur , ou ouvrir la page avec ?tint=violet (?tint=blue revient au bleu). Le choix est mémorisé. */ :root[data-tint="violet"]{ --deep:#16093A; --band:#5B12D8; --acc:#7A1BFF; --acc2:#B98CFF; --ink:#F2EBFF; --mute:#C3B0EE; } :root[data-tint="violet"] .tg{--tgblue:#B98CFF} /* ── ROUGE · à l'essai ────────────────────────────────────────── ?tint=rouge pour voir. Le rouge sert déjà d'alerte dans l'app : les bulles de brèche gardent donc leur propre rouge, plus sombre. */ :root[data-tint="rouge"]{ --deep:#2A0713; --band:#C21033; --acc:#E11D48; --acc2:#FF8FA6; --ink:#FFEDF1; --mute:#EBB3C0; } :root[data-tint="rouge"] .tg{--tgblue:#FF8FA6} @media (prefers-color-scheme:light){ :root[data-tint="rouge"]:not([data-theme="dark"]){ --deep:#FFFFFF; --band:#F7D9E0; --acc:#9F1239; --acc2:#BE123C; --ink:#17090D; --mute:#635055; } } :root[data-tint="rouge"][data-theme="light"]{ --deep:#FFFFFF; --band:#F7D9E0; --acc:#9F1239; --acc2:#BE123C; --ink:#17090D; --mute:#635055; } @media (prefers-color-scheme:light){ :root[data-tint="violet"]:not([data-theme="dark"]){ --deep:#FFFFFF; --band:#E3D8FA; --acc:#5B21B6; --acc2:#7C3AED; --ink:#120C18; --mute:#574E63; } } :root[data-tint="violet"][data-theme="light"]{ --deep:#FFFFFF; --band:#E3D8FA; --acc:#5B21B6; --acc2:#7C3AED; --ink:#120C18; --mute:#574E63; } /* ── CLAIR · Tableau ─────────────────────────────────────────── */ @media (prefers-color-scheme:light){ :root:not([data-theme="dark"]){ color-scheme:light; --bg:#F3F4F7; --deep:#FFFFFF; --band:#D8E0F6; --acc:#1B3FA0; --acc2:#2F55C8; --ink:#0C1014; --mute:#4E5665; --on-acc-bg:#132E77; --on-acc:#FFFFFF; --line:color-mix(in srgb,var(--ink) 13%,transparent); --line-2:color-mix(in srgb,var(--ink) 26%,transparent); --surf:color-mix(in srgb,var(--deep) 92%,transparent); --hover:color-mix(in srgb,var(--acc2) 7%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,var(--deep)),var(--deep)); --dead:color-mix(in srgb,var(--ink) 9%,var(--bg)); --dead-ink:color-mix(in srgb,var(--ink) 45%,transparent); --shadow:0 22px 48px -28px rgba(12,16,20,.35); --page:linear-gradient(180deg,var(--bg) 0%,var(--bg) 5%,#EAEEF7 17%,var(--band) 34%,var(--band) 44%,#EAEEF7 58%,var(--bg) 70%,var(--bg) 100%); } } :root[data-theme="light"]{ color-scheme:light; --bg:#F3F4F7; --deep:#FFFFFF; --band:#D8E0F6; --acc:#1B3FA0; --acc2:#2F55C8; --ink:#0C1014; --mute:#4E5665; --on-acc-bg:#132E77; --on-acc:#FFFFFF; --line:color-mix(in srgb,var(--ink) 13%,transparent); --line-2:color-mix(in srgb,var(--ink) 26%,transparent); --surf:color-mix(in srgb,var(--deep) 92%,transparent); --hover:color-mix(in srgb,var(--acc2) 7%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,var(--acc) 12%,var(--deep)),var(--deep)); --dead:color-mix(in srgb,var(--ink) 9%,var(--bg)); --dead-ink:color-mix(in srgb,var(--ink) 45%,transparent); --shadow:0 22px 48px -28px rgba(12,16,20,.35); --page:linear-gradient(180deg,var(--bg) 0%,var(--bg) 5%,#EAEEF7 17%,var(--band) 34%,var(--band) 44%,#EAEEF7 58%,var(--bg) 70%,var(--bg) 100%); } html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)} *,*::before,*::after{box-sizing:inherit;margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} :focus-visible{outline:2px solid var(--acc2);outline-offset:3px;border-radius:6px} img{max-width:100%} .page{position:relative;background:var(--page)} .wrap{width:100%;max-width:1280px;margin:0 auto;padding:0 clamp(20px,5vw,64px)} h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;text-wrap:balance} .mono{font:500 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--acc2)} .kick{font:500 12.5px/1 var(--mono);letter-spacing:.09em;color:var(--acc2);text-transform:uppercase;margin-bottom:18px} .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border:1px solid var(--line-2); border-radius:999px;background:color-mix(in srgb,var(--acc) 16%,transparent);font-size:14px;font-weight:600} .eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--acc2);animation:beacon 1.8s infinite} @keyframes beacon{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc2) 70%,transparent)}70%,100%{box-shadow:0 0 0 10px transparent}} .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 28px;border-radius:999px;font-weight:700;font-size:16.5px;transition:transform .25s,box-shadow .25s,background .25s} .btn.pri{background:var(--on-acc-bg);color:var(--on-acc)} .btn.pri::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%; background:linear-gradient(100deg,transparent,color-mix(in srgb,var(--acc2) 45%,transparent),transparent); transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite} @keyframes shine{0%,55%{left:-60%}100%{left:130%}} .btn.pri:hover{transform:translateY(-3px);box-shadow:0 16px 40px -10px color-mix(in srgb,var(--acc) 60%,transparent)} .btn.sec{border:1.5px solid var(--line-2)} .btn.sec:hover{background:var(--hover);transform:translateY(-3px)} .rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)} .rv.in{opacity:1;transform:none} .glow{position:fixed;inset:0;z-index:1;pointer-events:none; background:radial-gradient(460px circle at var(--mx,70%) var(--my,25%),color-mix(in srgb,var(--acc2) 14%,transparent),transparent 60%)} /* ── nav ─────────────────────────────────────────────────────── */ .nav{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);z-index:60;border-bottom:1px solid transparent;transition:background .3s,backdrop-filter .3s,border-color .3s} .nav.solid{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);border-color:var(--line)} .nav .wrap{display:flex;align-items:center;gap:18px;height:70px} .logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.03em} .logo i{width:23px;height:28px;flex:none;background:url("/logo-mark.svg?v=44a815ae") center/contain no-repeat} @media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .logo i{background-image:url("/logo-mark-dark.svg?v=0b2461b2")}} :root[data-theme="light"] .logo i{background-image:url("/logo-mark-dark.svg?v=0b2461b2")} :root[data-theme="dark"] .logo i{background-image:url("/logo-mark.svg?v=44a815ae")} .nav ul{display:flex;gap:22px;list-style:none;font-size:15px;font-weight:500;color:var(--mute);margin-left:auto} .nav-in{font-size:15px;font-weight:600;color:var(--ink);padding:6px 2px;white-space:nowrap} .nav-in:hover{color:var(--acc2)} /* ── décompte de lancement, dans le hero ────────────────────── Quatre cases, sous la pastille PropSync et au-dessus du titre. La cible est une date fixe et publique (10 octobre 2026) ; il n'y a pas de compteur « X restants » tant qu'il n'est pas branché sur les vrais abonnements — un chiffre inventé ne vaut rien. */ .launch{margin:0 auto 30px;max-width:31rem;text-align:center} .lp-lead{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--mute)} .lp-lead b{color:var(--ink);font-weight:700} .lp-lead a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px} .lp-cd{display:flex;gap:7px;justify-content:center} .lp-u{min-width:66px;text-align:center;border:1px solid color-mix(in srgb,var(--acc2) 34%,transparent); border-radius:10px;padding:7px 8px 6px;background:color-mix(in srgb,var(--acc) 12%,transparent); box-shadow:inset 0 0 18px -10px color-mix(in srgb,var(--acc2) 70%,transparent)} .lp-n{display:block;font:700 21px/1 var(--mono);letter-spacing:-.02em;color:var(--ink); font-variant-numeric:tabular-nums;text-shadow:0 0 14px color-mix(in srgb,var(--acc2) 40%,transparent)} .lp-k{display:block;margin-top:5px;font:600 7.5px/1 var(--mono);letter-spacing:.14em; text-transform:uppercase;color:var(--mute)} @media(max-width:560px){ .launch{max-width:none;margin-bottom:14px} .lp-cd{gap:6px} .lp-u{min-width:0;flex:1} .lp-n{font-size:19px} .lp-k{font-size:7px;letter-spacing:.1em} .lp-lead{font-size:12.5px} /* le mot-symbole laisse la place aux actions : la marque reste portée par le logo */ .nav .logo{font-size:0;gap:0} .nav .logo i{width:24px;height:29px} .nav .wrap{gap:12px;height:58px} .nav-in{font-size:14px} .nav .btn{padding:9px 15px;font-size:13.5px} } .nav ul a{position:relative;padding:6px 0} /* les quatre cartes du héros : le titre se règle sur la largeur de SA carte (le plus long, « Protection », fait ~8,1 fois la taille de police) — il débordait à 1024 px comme à 375 px */ .hero .t{container-type:inline-size} .hero .t h3{font-size:min(1.216rem,calc(100cqw / 8.3))} /* menu : jamais sur deux lignes (« Pip / AI », « Start / free » à 1024 px) */ .nav ul a,.nav .btn,.nav-in{white-space:nowrap} @media(max-width:1180px){.nav ul{gap:15px;font-size:14px}} @media(max-width:1000px){.nav ul li:last-child{display:none}} .nav-free{margin-left:5px;padding:2px 6px;border-radius:999px;font:600 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;vertical-align:2px;color:var(--acc2);background:color-mix(in srgb,var(--acc2) 14%,transparent);border:1px solid color-mix(in srgb,var(--acc2) 35%,transparent)} .nav ul a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--acc2);transform:scaleX(0);transform-origin:left;transition:transform .3s} .nav ul a:hover::after{transform:scaleX(1)} .nav .btn{padding:11px 20px;font-size:14.5px} .tt{width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;flex:none;transition:background .25s} .tt:hover{background:var(--hover)} .tt svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.9;stroke-linecap:round} .tt .moon{display:none} :root[data-theme="light"] .tt .moon,:root:not([data-theme="dark"]) .tt .moon{display:block} :root[data-theme="light"] .tt .sun,:root:not([data-theme="dark"]) .tt .sun{display:none} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt .moon{display:none}:root:not([data-theme="light"]) .tt .sun{display:block}} :root[data-theme="dark"] .tt .moon{display:none} :root[data-theme="dark"] .tt .sun{display:block} /* ── rail ────────────────────────────────────────────────────── */ .rail{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:40;height:240px;width:18px} .rail .ln{position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)} .rail .fl{position:absolute;left:8px;top:0;width:2px;height:0;background:linear-gradient(var(--acc2),var(--ink))} .rail a{position:absolute;left:2px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2px solid var(--line-2);transition:.3s} .rail a span{position:absolute;right:26px;top:-3px;white-space:nowrap;font:500 11.5px/1 var(--mono);opacity:0;transform:translateX(8px);transition:.3s} .rail a.on{background:var(--ink);border-color:var(--ink)} .rail a.on span,.rail a:hover span{opacity:1;transform:none} /* ── hero ────────────────────────────────────────────────────── */ .hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 96px;overflow:hidden} .hero::before{content:"";position:absolute;inset:auto -10% -30% -10%;height:80%; background:radial-gradient(50% 60% at 60% 100%,color-mix(in srgb,var(--acc) 70%,transparent),transparent 70%); animation:breathe 7s ease-in-out infinite alternate} @keyframes breathe{to{transform:scale(1.12);opacity:.75}} .streak{position:absolute;top:-20%;bottom:-20%;width:2px;opacity:.55;transform:rotate(18deg); background:linear-gradient(transparent,color-mix(in srgb,var(--acc2) 70%,transparent),transparent);animation:drift 9s linear infinite} @keyframes drift{from{transform:translateX(-30vw) rotate(18deg)}to{transform:translateX(130vw) rotate(18deg)}} .hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr 1fr;gap:clamp(24px,4vw,60px);align-items:center} .hero h1{font-size:clamp(44px,6vw,96px);margin:24px 0 22px} .hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em} .hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:rise 1s cubic-bezier(.2,.9,.1,1) forwards;animation-delay:calc(var(--i)*.12s + .2s)} @keyframes rise{to{transform:none}} .hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--acc2) 20%,var(--ink) 45%,var(--acc2) 70%); background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 5s 1.4s linear infinite} @keyframes shimmer{to{background-position:-220% 0}} .hero .lead{font-size:clamp(16.5px,1.4vw,20px);color:var(--mute);max-width:46ch;margin-bottom:30px} .hero .lead.hero-tools{font-size:clamp(19px,1.75vw,26px);line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--ink);opacity:.86} .hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px} .hero .micro{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--mute);font-weight:500} .hero .micro span::before{content:"✓";color:var(--acc2);margin-right:7px;font-weight:700} /* assemblage */ .g4{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px;border-radius:30px;transition:box-shadow .8s,background .8s} .g4.sealed{box-shadow:0 0 0 1px var(--line-2),0 0 130px -20px color-mix(in srgb,var(--acc) 70%,transparent);background:color-mix(in srgb,var(--acc) 9%,transparent)} .t{position:relative;background:var(--tile);border:1px solid var(--line-2);border-radius:20px;padding:17px 19px; min-height:clamp(174px,24vh,238px);display:flex;flex-direction:column;justify-content:space-between;opacity:0;overflow:hidden; box-shadow:var(--shadow);translate:calc(var(--px,0)*var(--pk,10)*1px) calc(var(--py,0)*var(--pk,10)*1px)} .g4.play .t{animation:fly 1.2s cubic-bezier(.2,1.3,.3,1) forwards;animation-delay:calc(var(--i)*.2s + .5s)} @keyframes fly{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.5)}to{opacity:1;transform:none}} .t h3{font-size:clamp(19px,1.9vw,28px);margin:7px 0 5px} .t p{font-size:13.5px;color:var(--mute);line-height:1.4} .vis{height:64px;display:flex;align-items:flex-end} .vj{display:grid;gap:8px;width:100%} .vj i{display:block;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 80%,transparent);width:var(--w); transform-origin:left;animation:wr 3.6s ease-in-out infinite;animation-delay:calc(var(--k)*.3s)} @keyframes wr{0%{transform:scaleX(0)}30%,80%{transform:scaleX(1)}100%{transform:scaleX(0)}} .va{display:flex;align-items:flex-end;gap:7px;height:64px;width:100%} .va i{flex:1;height:var(--h);border-radius:5px 5px 0 0;background:linear-gradient(var(--acc2),var(--acc)); transform-origin:bottom;animation:gr 3s ease-in-out infinite;animation-delay:calc(var(--k)*.2s)} @keyframes gr{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}} .vc,.vp{width:100%;height:64px} .vc svg,.vp svg{height:100%;width:100%} .vc .lk{stroke:color-mix(in srgb,var(--acc2) 62%,transparent)} .vc .hub{fill:var(--acc);stroke:var(--on-acc)} .vc .nd{fill:color-mix(in srgb,var(--deep) 90%,var(--bg));stroke:var(--acc2)} .vc .pk{fill:var(--acc2)} .vp .rg{fill:none;stroke:var(--acc2);transform-origin:50px 40px;animation:rp 2.4s ease-out infinite} .vp .rg.b{animation-delay:1.2s} @keyframes rp{from{opacity:.9;transform:scale(.4)}to{opacity:0;transform:scale(2.2)}} .vp .sh{fill:var(--acc);stroke:var(--on-acc)} .vp .ck{stroke:var(--on-acc);stroke-dasharray:1;stroke-dashoffset:1;animation:ck 2.4s ease-in-out infinite} @keyframes ck{0%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}} .seal{position:absolute;left:50%;top:50%;width:100px;height:100px;border-radius:50%;background:var(--on-acc-bg);color:var(--on-acc); display:grid;place-items:center;text-align:center;font:800 25px/.95 var(--display);letter-spacing:-.04em;z-index:3; transform:translate(-50%,-50%) scale(var(--s,0)); box-shadow:0 0 0 12px color-mix(in srgb,var(--on-acc-bg) 18%,transparent),0 0 60px -6px color-mix(in srgb,var(--acc) 80%,transparent)} .g4.sealed .seal{--s:1;transition:transform .8s cubic-bezier(.2,1.7,.3,1)} .seal small{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.1em;margin-top:4px} /* ── marquee ─────────────────────────────────────────────────── */ /* bande de logos : les firmes et les plateformes, en petit — pas un mur de typo */ .mq{position:relative;z-index:2;overflow:hidden;padding:22px 0 26px;border-block:1px solid var(--line)} .mq-lbl{font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute); text-align:center;margin:0 0 16px} .mq .row{display:flex;width:max-content} .mq .row+.row{margin-top:10px} .mq .grp{display:flex;gap:10px;padding-right:10px;animation:mqm 58s linear infinite} .mq .r2 .grp{animation-direction:reverse;animation-duration:74s} .lg{display:inline-flex;align-items:center;gap:9px;flex:none;padding:8px 14px;border-radius:99px; border:1px solid var(--line);background:var(--surf);white-space:nowrap;text-decoration:none;color:var(--ink); transition:border-color .16s,background .16s} .lg:hover{border-color:var(--line-2);background:var(--hover)} .lg img{width:22px;height:22px;border-radius:6px;background:#fff;padding:2px;object-fit:contain;flex:none} .lg span{font:600 13px/1 var(--body);letter-spacing:-.01em} /* pour essayer sans les noms : ajouter data-logos="icons" sur */ :root[data-logos="icons"] .lg span{display:none} :root[data-logos="icons"] .lg{padding:8px;border-radius:12px} @keyframes mqm{to{transform:translateX(-100%)}} @media(prefers-reduced-motion:reduce){.mq .grp{animation:none}.mq .row{flex-wrap:wrap;width:auto;justify-content:center}.mq .grp:last-child{display:none}} /* ══ 02 · dix secondes ══ */ .ten{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(24px,4vw,46px);align-items:start} .ten-card{border:1px solid var(--line-2);border-radius:18px;padding:18px 20px;background:var(--surf);position:relative;overflow:hidden} .ten-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .ten-acc{font:600 11px var(--mono);color:var(--acc2)} .ten-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--mute)} .ten-row b{font:700 15px var(--mono);color:var(--ink)} .ten-pnl{font-size:20px!important} .ten-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .ten-tags i{font-style:normal;font:600 11px var(--mono);border:1px solid var(--line-2);border-radius:99px;padding:3px 9px;color:var(--ink); opacity:0;transform:translateY(6px);animation:tin .35s forwards} @keyframes tin{to{opacity:1;transform:none}} .ten-done{margin-top:14px;border-radius:11px;padding:9px 12px;font:600 12.5px var(--body);text-align:center; background:color-mix(in srgb,var(--acc) 26%,transparent);color:var(--ink);opacity:0;transform:translateY(8px);transition:.4s} .ten-card.done .ten-done{opacity:1;transform:none} .ten-steps{list-style:none;padding:0;margin:0 0 20px;counter-reset:t} .ten-steps li{counter-increment:t;padding:13px 0 13px 46px;position:relative;border-bottom:1px solid var(--line);opacity:.4;transition:opacity .3s} .ten-steps li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:14px;font:700 11px var(--mono); color:var(--mute);border:1px solid var(--line);border-radius:99px;padding:5px 8px} .ten-steps li.on{opacity:1} .ten-steps li.on::before{color:var(--on-acc);background:var(--on-acc-bg);border-color:transparent} .ten-steps b{display:block;font-size:15px} .ten-steps span{display:block;color:var(--mute);font-size:13.5px;margin-top:2px} @media(max-width:860px){.ten{grid-template-columns:1fr}} /* ══ 03 + 04 · côte à côte ══ */ .duo{display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(18px,2.4vw,28px);align-items:stretch} .duo>div{border:1px solid var(--line);border-radius:22px;background:var(--surf);padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column} .duo h3{font-family:var(--display);font-weight:800;font-size:clamp(20px,1.9vw,26px);letter-spacing:-.025em;margin:0 0 6px} .duo .lead{color:var(--mute);font-size:14.5px;line-height:1.55;margin:0 0 20px} @media(max-width:940px){.duo{grid-template-columns:1fr}} /* Pip */ .pip-chat{display:flex;flex-direction:column;gap:11px} .pb{display:flex;gap:10px;max-width:96%} .pb.me{align-self:flex-end} .pb.me span{background:var(--on-acc-bg);color:var(--on-acc);border-radius:16px 16px 5px 16px;padding:10px 14px;font-size:14px;font-weight:500} .pb pip-icon{width:26px;height:26px;flex:none;margin-top:3px} .pb.it span{background:var(--dead);border:1px solid var(--line);border-radius:16px 16px 16px 5px;padding:12px 15px; font-size:14px;line-height:1.6;color:var(--mute)} .pb.it b{color:var(--ink);display:block;margin-bottom:5px} .pb.it em{font-style:normal;color:var(--ink);font-weight:600} .pb.it u{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);text-decoration:none;color:var(--acc2);font-weight:600} .pb.it i{font-style:normal;display:block;margin-top:6px} .pip-slot{position:relative} .pb.typ{display:none} .pb.typ span{background:var(--dead);border:1px solid var(--line);border-radius:16px 16px 16px 5px; padding:15px;display:inline-flex;gap:5px;align-items:center} .pb.typ i{width:6px;height:6px;border-radius:50%;background:var(--dead-ink);animation:pipDot 1.15s ease-in-out infinite} .pb.typ i:nth-child(2){animation-delay:.14s} .pb.typ i:nth-child(3){animation-delay:.28s} @keyframes pipDot{0%,62%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}} /* trois lignes discrètes, dans l'esprit de la maquette : ce que Pip sait faire */ .pip-feats{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:15px} .pip-feats li{display:grid;grid-template-columns:auto 1fr;column-gap:11px;row-gap:3px} .pip-feats li::before{content:"";grid-row:1/3;width:7px;height:7px;border-radius:50%; background:var(--acc2);margin-top:6px;opacity:.8} .pip-feats b{font-size:14.5px;font-weight:700;color:var(--ink)} .pip-feats span{font-size:13px;line-height:1.55;color:var(--mute)} /* ── la conversation qui se joue. .anim n'est posée que par le JS : sans lui, ou en prefers-reduced-motion, la question et la réponse sont là, immobiles. ── */ .pip-car{display:inline-block;width:2px;height:1.05em;vertical-align:-.16em;margin-left:2px; background:currentColor;opacity:0} .pip-chat.anim.typing .pip-car{opacity:1;animation:pipCar .95s steps(1,end) infinite} @keyframes pipCar{0%,49%{opacity:1}50%,100%{opacity:0}} .pip-chat.anim .pb.me span{min-height:1.2em} .pip-chat.anim .pb.typ{display:flex;position:absolute;top:0;left:0;opacity:0; pointer-events:none;transition:opacity .22s ease} .pip-chat.anim.think .pb.typ{opacity:1} .pip-chat.anim #pip-a{opacity:0;transform:translateY(9px); transition:opacity .28s ease,transform .28s cubic-bezier(.2,.8,.25,1)} .pip-chat.anim.answered #pip-a{opacity:1;transform:none} .pip-chat.anim #pip-a b,.pip-chat.anim #pip-a i,.pip-chat.anim #pip-a u{opacity:0;transform:translateY(7px); transition:opacity .26s ease var(--pd,0s),transform .26s cubic-bezier(.2,.8,.25,1) var(--pd,0s)} .pip-chat.anim #pip-a i:nth-of-type(1){--pd:.10s} .pip-chat.anim #pip-a i:nth-of-type(2){--pd:.19s} .pip-chat.anim #pip-a u{--pd:.30s} .pip-chat.anim.answered #pip-a b,.pip-chat.anim.answered #pip-a i,.pip-chat.anim.answered #pip-a u{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){.pb.typ,.pip-car{display:none!important}} .pip-hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px} .pip-hd h3{margin:0 0 6px} .pip-hd .lead{margin:0} .pip-av{width:72px;height:72px;flex:none;display:block} @media(max-width:560px){.pip-av{width:58px;height:58px}} .pip-note{margin:auto 0 0;padding-top:16px;font-size:12.5px;line-height:1.55;color:var(--mute)} .pip-note b{color:var(--ink)} /* payout */ .pay-list{list-style:none;padding:0;margin:0 0 20px} .pay-list li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--mute)} .pay-list li b{margin-left:auto;font:700 13.5px var(--mono);color:var(--ink)} .pay-list li i{width:21px;height:21px;flex:none;border-radius:50%;border:1.5px solid var(--line-2);position:relative;transition:.3s} .pay-list li.on i{border-color:transparent;background:var(--acc)} .pay-list li.on i::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px; border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(42deg)} .pay-verdict{margin-top:auto;text-align:center;opacity:0;transform:scale(.94);transition:.5s cubic-bezier(.2,1.3,.3,1)} .pay.go .pay-verdict{opacity:1;transform:none} .pay-stamp{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(19px,2vw,26px); letter-spacing:-.02em;border:2px solid var(--acc2);color:var(--acc2);border-radius:13px;padding:9px 18px;transform:rotate(-3deg)} .pay-verdict p{color:var(--mute);font-size:13px;margin:16px auto 0;max-width:40ch;line-height:1.55} /* ══ 05 · PropSync ══ */ .sync{position:relative;display:grid;gap:0;justify-items:center;padding:6px 0 4px} .sync-lead{position:relative;z-index:2;display:flex;align-items:center;gap:13px;border:1px solid var(--line-2);border-radius:18px; padding:14px 20px;background:var(--surf);box-shadow:var(--shadow)} .sync-lead img{width:34px;height:34px;border-radius:10px;background:#fff;padding:3px;object-fit:contain;flex:none} .sync-lead .sl-t{text-align:left} .sync-lead .sl-t b{display:block;font-size:16px;line-height:1.2} .sync-lead .sl-t em{font-style:normal;font:600 12px var(--mono);color:var(--mute)} .sync-sig{margin-left:10px;font:700 12px var(--mono);border-radius:99px;padding:6px 12px; background:color-mix(in srgb,var(--acc) 26%,transparent);color:var(--ink);white-space:nowrap; opacity:0;transform:scale(.8);transition:.3s cubic-bezier(.2,1.4,.3,1)} .sync.go .sync-sig{opacity:1;transform:none;transition-delay:.15s} .sync-wires{position:relative;width:100%;max-width:620px;height:58px} .sync-wires svg{width:100%;height:100%;overflow:visible} .sync-wires path{fill:none;stroke:var(--line-2);stroke-width:1.5} .sync-wires .pulse{fill:var(--acc2);opacity:0} .sync.go .sync-wires .pulse{animation:flow .85s cubic-bezier(.45,0,.55,1) forwards} .sync.go .sync-wires .p2{animation-delay:.1s} .sync.go .sync-wires .p3{animation-delay:.2s} @keyframes flow{0%{opacity:0;offset-distance:0%}12%{opacity:1}88%{opacity:1}100%{opacity:0;offset-distance:100%}} .sync-f{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:100%} .sf{position:relative;border:1px solid var(--line);border-radius:18px;padding:16px;background:var(--surf);text-align:center; opacity:0;transform:translateY(14px) scale(.97);transition:.5s cubic-bezier(.2,.9,.2,1)} .sync.go .sf{opacity:1;transform:none;transition-delay:calc(.75s + var(--d,0)*.13s)} .sf img{width:30px;height:30px;border-radius:9px;background:#fff;padding:3px;object-fit:contain} .sf b{display:block;font-size:14.5px;margin:9px 0 2px} .sf .plat{display:block;font:600 11px var(--mono);color:var(--mute)} .sf .sf-x{display:inline-block;margin:10px 0 8px;font:700 11px var(--mono);border:1px solid var(--line-2);border-radius:99px;padding:3px 10px;color:var(--mute)} .sf .sf-st{display:block;font-style:normal;font:600 12.5px var(--body);color:var(--acc2); opacity:0;transform:translateY(5px);transition:.35s} .sync.go .sf .sf-st{opacity:1;transform:none;transition-delay:calc(1.1s + var(--d,0)*.13s)} .sf .sf-fill{position:absolute;inset:0;border-radius:18px;border:1.5px solid var(--acc2);opacity:0;pointer-events:none} .sync.go .sf .sf-fill{animation:fillflash .7s ease-out forwards;animation-delay:calc(1.05s + var(--d,0)*.13s)} @keyframes fillflash{0%{opacity:0;transform:scale(1)}30%{opacity:.85}100%{opacity:0;transform:scale(1.03)}} .sf.ko{border-color:color-mix(in srgb,#FF5A72 45%,transparent)} .sf.ko .sf-st{color:#FF8FA6} .sf.ko .sf-fill{display:none} .sync.go .sf.ko{animation:shake .5s ease-out;animation-delay:1.1s} @keyframes shake{0%,100%{transform:none}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}} .sync-foot{margin-top:18px;font-size:13px;color:var(--mute);text-align:center;max-width:62ch} @media(max-width:860px){.sync-f{grid-template-columns:1fr}.sync-wires{display:none}} @media(prefers-reduced-motion:reduce){ .sync .sf,.sync .sf .sf-st,.sync-sig{opacity:1!important;transform:none!important} .sync .pulse,.sync .sf-fill{display:none} } .mono-lbl{font:600 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mute)} /* ── section épinglée ────────────────────────────────────────── */ .pinsec{position:relative} .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden} .pin .wrap{display:grid;grid-template-columns:1fr 1.12fr;gap:clamp(24px,5vw,72px);align-items:center} .sw{position:relative;min-height:330px} .st{position:absolute;left:0;right:0;top:0;transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)} .st.hide{opacity:0;transform:translateY(16px);pointer-events:none} .st h2{font-size:clamp(32px,4.3vw,66px)} .st p{color:var(--mute);font-size:clamp(15.5px,1.3vw,19px);max-width:44ch;margin:18px 0 24px} .arena{position:relative;width:100%;aspect-ratio:1.12;max-height:70vh} .oc{position:absolute;width:47%;height:47%;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow);will-change:transform,left,top} .oc .bo{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 18%,var(--bg)),var(--dead))} .oc .bn{position:absolute;inset:0;background:var(--tile);opacity:0} .oc .lo,.oc .ln{position:absolute;inset:0;padding:clamp(12px,1.6vw,20px);display:flex;flex-direction:column;justify-content:space-between} .oc .lo{color:var(--dead-ink)} .oc .lo .dots{display:flex;gap:6px} .oc .lo .dots i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 30%,transparent)} .oc .lo b{font:500 clamp(12.5px,1.3vw,16px)/1.3 var(--mono)} .oc .lo .fk{display:grid;gap:7px} .oc .lo .fk i{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 26%,transparent);width:var(--w)} .oc .ln{opacity:0} .oc .ln .ic{width:clamp(30px,3.2vw,44px);height:clamp(30px,3.2vw,44px);border-radius:12px;display:grid;place-items:center; background:color-mix(in srgb,var(--acc) 22%,transparent);border:1px solid var(--line-2)} .oc .ln .ic svg{width:58%;height:58%;stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .oc .ln h3{font-size:clamp(17px,2.1vw,30px)} .oc .ln small{display:block;font-size:clamp(11px,1.05vw,13.5px);color:var(--mute);line-height:1.35;margin-top:4px} .sl{position:absolute;left:50%;top:50%;width:clamp(76px,9.5vw,116px);aspect-ratio:1;border-radius:50%;background:var(--on-acc-bg);color:var(--on-acc); display:grid;place-items:center;text-align:center;font:800 clamp(17px,2.1vw,27px)/.95 var(--display);letter-spacing:-.04em;z-index:4; transform:translate(-50%,-50%) scale(var(--s,0)); box-shadow:0 0 0 12px color-mix(in srgb,var(--on-acc-bg) 18%,transparent),0 0 70px -8px color-mix(in srgb,var(--acc) 85%,transparent)} .sl small{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.1em;margin-top:4px} .arena .halo{position:absolute;inset:-6%;border-radius:40px;opacity:var(--h,0);pointer-events:none; background:radial-gradient(60% 60% at 50% 50%,color-mix(in srgb,var(--acc2) 45%,transparent),transparent 70%)} /* ── sections ────────────────────────────────────────────────── */ /* ══════════════════════════════════════════════════════════════ Rythme E — clair et bleu profond, en alternance. Chaque section redéfinit les jetons pour elle-même : tout ce qui est à l'intérieur (titres, texte doux, filets, surfaces, accent) suit sans qu'on ait à toucher une seule règle de composant. L'outremer vif reste réservé aux boutons, aux liens et aux chiffres. ══════════════════════════════════════════════════════════════ */ .sect{background:var(--bg)} .sect.sec-light{--bg:#F3F4F7;--deep:#FFFFFF;--band:#D8E0F6; --acc:#1B3FA0;--acc2:#2F55C8;--ink:#0C1014;--mute:#4E5665; --on-acc-bg:#132E77;--on-acc:#FFFFFF; --line:color-mix(in srgb,#0C1014 13%,transparent); --line-2:color-mix(in srgb,#0C1014 26%,transparent); --surf:#FFFFFF;--hover:color-mix(in srgb,#2F55C8 7%,transparent); --dead:color-mix(in srgb,#0C1014 9%,#F3F4F7); --dead-ink:color-mix(in srgb,#0C1014 45%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,#1B3FA0 12%,#FFFFFF),#FFFFFF); --shadow:0 22px 48px -28px rgba(12,16,20,.35); color:var(--ink)} .sect.sec-deep{--bg:#02103A;--deep:#071A4A;--band:#0A2FD0; --acc:#0B3BFF;--acc2:#5C8DFF;--ink:#EAF0FF;--mute:#A9BBF0; --on-acc-bg:#FFFFFF;--on-acc:#000000; --line:color-mix(in srgb,#5C8DFF 24%,transparent); --line-2:color-mix(in srgb,#5C8DFF 46%,transparent); --surf:color-mix(in srgb,#071A4A 70%,transparent); --hover:color-mix(in srgb,#5C8DFF 10%,transparent); --dead:color-mix(in srgb,#EAF0FF 20%,#02103A); --dead-ink:color-mix(in srgb,#EAF0FF 58%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,#0B3BFF 30%,#071A4A),color-mix(in srgb,#071A4A 94%,#02103A)); --shadow:0 30px 60px -30px rgba(0,0,0,.8); color:var(--ink)} /* en thème sombre, la bande claire devient un noir profond : le rythme tient, l'œil n'est pas brûlé par du blanc plein écran à minuit */ :root[data-theme="dark"] .sect.sec-light{--bg:#05070d;--deep:#0b1020;--surf:color-mix(in srgb,#0b1020 70%,transparent); --acc:#0B3BFF;--acc2:#5C8DFF;--ink:#EAF0FF;--mute:#9FAAC6; --on-acc-bg:#FFFFFF;--on-acc:#000000; --line:color-mix(in srgb,#5C8DFF 16%,transparent); --line-2:color-mix(in srgb,#5C8DFF 32%,transparent); --dead:color-mix(in srgb,#EAF0FF 14%,#05070d); --dead-ink:color-mix(in srgb,#EAF0FF 55%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,#0B3BFF 22%,#0b1020),#0b1020); --shadow:0 30px 60px -30px rgba(0,0,0,.8)} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sect.sec-light{--bg:#05070d;--deep:#0b1020;--surf:color-mix(in srgb,#0b1020 70%,transparent); --acc:#0B3BFF;--acc2:#5C8DFF;--ink:#EAF0FF;--mute:#9FAAC6; --on-acc-bg:#FFFFFF;--on-acc:#000000; --line:color-mix(in srgb,#5C8DFF 16%,transparent); --line-2:color-mix(in srgb,#5C8DFF 32%,transparent); --dead:color-mix(in srgb,#EAF0FF 14%,#05070d); --dead-ink:color-mix(in srgb,#EAF0FF 55%,transparent); --tile:linear-gradient(160deg,color-mix(in srgb,#0B3BFF 22%,#0b1020),#0b1020); --shadow:0 30px 60px -30px rgba(0,0,0,.8)} } .sect{position:relative;z-index:2;padding:clamp(68px,7.5vh,96px) 0} .sect h2{font-size:clamp(32px,4.4vw,70px);max-width:17ch} .sect .sub{font-size:clamp(16.5px,1.4vw,20px);color:var(--mute);max-width:56ch;margin:18px 0 34px} /* les marges des premiers et derniers éléments se cumulaient au rembourrage : une bande finissait avec 24px d'air, la suivante avec 76px. Tout est remis à plat. */ .sub-h{font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute); margin:0 0 20px;padding-top:6px} .sub-h + *{margin-top:0} .sect .sub-h:not(:first-of-type){margin-top:54px} .sect > .wrap > *:first-child{margin-top:0} .sect > .wrap > *:last-child{margin-bottom:0} .card{background:var(--surf);border:1px solid var(--line);border-radius:20px;backdrop-filter:blur(10px)} /* index dense des fonctionnalités */ .idx{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--surf);backdrop-filter:blur(10px)} .idx-in{display:grid;grid-template-columns:repeat(3,1fr)} .ix{padding:22px 24px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .25s} .ix:hover{background:var(--hover)} .ix:nth-child(3n){border-right:0} .ix:nth-last-child(-n+3){border-bottom:0} .ix .hd{display:flex;align-items:center;gap:10px} .ix svg{width:18px;height:18px;flex:none;stroke:var(--acc2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .ix h3{font-size:17px;letter-spacing:-.02em} .ix p{font-size:14px;color:var(--mute);line-height:1.45;margin-top:7px} .idx-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:16px 24px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--acc) 9%,transparent);font-size:14.5px;color:var(--mute)} .idx-foot b{color:var(--ink)} /* bande Telegram */ .band{display:grid;grid-template-columns:1fr .9fr;gap:clamp(24px,4vw,52px);align-items:center} .band h2{font-size:clamp(28px,3.6vw,54px)} .band h2 em{font-style:normal;color:var(--acc2)} .band p{color:var(--mute);margin:18px 0 24px;max-width:46ch} /* fenêtre Telegram : les vraies couleurs de l'app, la vraie barre, les vraies coches */ .tg{--tgbg:#17212B;--tgbar:#202B36;--tgbub:#182533;--tgink:#F1F5F9;--tgmute:#7d8f9f;--tgblue:#5FB2F7; border-radius:22px;overflow:hidden;background:var(--tgbg);color:var(--tgink); box-shadow:0 40px 80px -36px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);} :root[data-theme="light"] .tg{box-shadow:0 30px 60px -32px rgba(12,16,20,.45),0 0 0 1px rgba(12,16,20,.12)} .tg-bar{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--tgbar); border-bottom:1px solid rgba(255,255,255,.05)} .tg-back{color:var(--tgblue);font-size:22px;line-height:1;margin-right:-3px} .tg-av{width:34px;height:34px;flex:none;border-radius:50%; background:#0B1220 url("/logo-mark.svg?v=44a815ae") center/56% no-repeat; box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)} .tg-who{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .tg-who b{font:600 14.5px/1.1 var(--body);color:var(--tgink)} .tg-who em{font:400 12px/1 var(--body);font-style:normal;color:var(--tgmute)} .tg-ico{display:flex;gap:3px;align-items:center} .tg-ico i{width:3px;height:3px;border-radius:50%;background:var(--tgmute);display:block} .tg-chat{padding:14px 14px 16px;display:flex;flex-direction:column;gap:9px; background:var(--tgbg) radial-gradient(circle at 18% 12%,rgba(95,178,247,.07),transparent 42%), radial-gradient(circle at 82% 78%,rgba(95,178,247,.05),transparent 46%)} .tg-day{align-self:center;margin:0 0 2px;padding:3px 11px;border-radius:99px;background:rgba(255,255,255,.07); font:500 11.5px/1 var(--body);color:var(--tgmute)} .bub{position:relative;align-self:flex-start;max-width:93%;background:var(--tgbub); border-radius:14px 14px 14px 5px;padding:9px 12px 7px;border-left:3px solid transparent; opacity:0;transform:translateY(10px) scale(.98); animation:pop .5s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:calc(var(--i)*1.15s + .35s)} .bub b{display:block;font:600 14px/1.35 var(--body);color:var(--tgink)} .bub span{display:block;margin-top:3px;font:400 13.5px/1.45 var(--body);color:#c5d2dd} .bub .tg-t{display:flex;align-items:center;justify-content:flex-end;gap:3px;margin-top:3px; font:400 11px/1 var(--body);font-style:normal;color:var(--tgmute)} .bub .tg-t svg{width:15px;height:10px;fill:none;stroke:var(--tgblue);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .bub.warn{border-left-color:#E8A33D} .bub.stop{border-left-color:#E5484D} .bub.ok{border-left-color:#4DCB8B} .tg-note{align-self:center;margin:4px 0 0;font:400 11px/1 var(--body);color:var(--tgmute)} @keyframes pop{to{opacity:1;transform:none}} /* étapes */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s} .step{padding:24px;position:relative;overflow:hidden} .step::after{content:counter(s,decimal-leading-zero);counter-increment:s;position:absolute;right:18px;bottom:10px; font:800 52px/1 var(--display);color:color-mix(in srgb,var(--acc2) 13%,transparent);letter-spacing:-.05em;pointer-events:none} .step h3{font-size:20px;margin-bottom:9px;padding-right:8px} .step p{padding-right:44px} .step p{font-size:14.5px;color:var(--mute)} /* deux espaces */ .spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .space{padding:22px} .space .k{font:600 11.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--acc2);margin-bottom:11px} .space p{font-size:14.5px;color:var(--mute)} /* comparatif firms */ .vs{position:relative;display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)} .side{padding:clamp(22px,3.2vw,46px);min-height:320px;display:flex;flex-direction:column;justify-content:space-between} .side.a{background:linear-gradient(150deg,var(--acc),color-mix(in srgb,var(--acc) 55%,#000)); padding-right:calc(clamp(22px,3.2vw,46px) + 58px)} .side.b{padding-left:calc(clamp(22px,3.2vw,46px) + 58px)} .side.a,.side.a *{color:#fff} .side.b{background:linear-gradient(150deg,color-mix(in srgb,var(--deep) 92%,var(--bg)),var(--bg))} .side h3{font-size:clamp(42px,6.4vw,104px);letter-spacing:-.05em} .side ul{list-style:none;margin-top:22px} .side li a{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid color-mix(in srgb,currentColor 26%,transparent);font-weight:600;transition:padding .3s} .side li a::after{content:"→";transition:transform .3s} .side li a:hover{padding-left:12px} .side li a:hover::after{transform:translateX(6px)} .med{position:absolute;left:50%;top:50%;width:86px;height:86px;transform:translate(-50%,-50%);border-radius:50%; background:var(--on-acc-bg);color:var(--on-acc);display:grid;place-items:center;font:800 28px/1 var(--display);z-index:2; box-shadow:0 0 0 10px color-mix(in srgb,var(--on-acc-bg) 16%,transparent);animation:medp 2.4s ease-in-out infinite} @keyframes medp{50%{box-shadow:0 0 0 22px transparent}} .after{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px;padding:20px 26px; border-radius:18px;background:var(--surf);backdrop-filter:blur(10px);border:1px solid var(--line-2)} .after p{font-size:17px;font-weight:600;max-width:46ch} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .chip{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1 var(--mono);border:1px solid var(--line); border-radius:999px;padding:10px 15px;color:var(--mute);transition:transform .25s,border-color .25s,color .25s} .chip:hover{transform:translateY(-3px);border-color:var(--line-2);color:var(--ink)} .chip i{width:6px;height:6px;border-radius:50%;background:var(--acc2);flex:none} /* tableau */ .tbl-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:var(--surf);backdrop-filter:blur(10px)} table.cmp{width:100%;border-collapse:collapse;min-width:540px;font-size:15px} table.cmp th,table.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line)} table.cmp thead th{font:600 10.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--mute)} table.cmp thead th:last-child{color:var(--acc2)} table.cmp td:first-child{color:var(--mute)} table.cmp tbody tr:last-child td{border-bottom:0} .neg{color:var(--dead-ink)} .pos{color:var(--acc2);font-weight:600} tr.us td{background:color-mix(in srgb,var(--acc) 12%,transparent);font-weight:700;color:var(--ink)} table.cmp.cmp-wide{min-width:760px} /* colonne Propbook : la seule qui compte, on la sort du lot */ table.cmp thead th:last-child{background:color-mix(in srgb,var(--acc) 16%,transparent);border-radius:14px 14px 0 0} table.cmp tbody td:last-child{background:color-mix(in srgb,var(--acc) 9%,transparent)} table.cmp tbody tr:last-child td:last-child{border-radius:0 0 14px 14px} table.cmp tbody tr:nth-child(even) td:not(:last-child){background:color-mix(in srgb,var(--ink) 3%,transparent)} table.cmp td:first-child{position:sticky;left:0;background:var(--bg);z-index:1} /* ── deuxième comparatif : deux voies, un rail au milieu, aucun cadre ── */ .track{position:relative;margin-top:6px} .track-h{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center; padding:0 0 12px;font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)} .track-h span:first-child{text-align:right} .track-h span:last-child{color:var(--acc2)} .track .tr{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);align-items:center; padding:15px 0;border-top:1px solid var(--line);position:relative} .track .tr .k{position:absolute;left:0;top:-9px;font:600 10px/1 var(--mono);letter-spacing:.1em; text-transform:uppercase;color:var(--mute);background:var(--bg);padding-right:10px} .track .tr .a{text-align:right;font-size:15px;color:var(--mute)} .track .tr .a.no{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--mute) 55%,transparent);opacity:.72} .track .tr .b{font-size:15px;font-weight:600;color:var(--ink)} .track .tr>i{justify-self:center;width:11px;height:11px;border-radius:50%;background:var(--bg); border:2px solid var(--line-2);position:relative;z-index:1} .track .tr>i::after{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--acc2); transform:scale(0);transition:transform .45s cubic-bezier(.2,1.5,.3,1)} .track.seen .tr>i::after{transform:scale(1);transition-delay:calc(var(--i,0)*.09s + .1s)} .track::before{content:"";position:absolute;left:50%;top:26px;bottom:14px;width:2px;margin-left:-1px; background:linear-gradient(var(--line-2),color-mix(in srgb,var(--acc) 45%,transparent))} .track .tr.big{border-top-width:2px;border-top-color:var(--line-2)} .track .tr.big .a,.track .tr.big .b{font-size:18px;font-weight:700} .track .tr.big .b{color:var(--acc2)} @media(max-width:760px){ .track::before{display:none} .track-h{display:none} .track .tr{grid-template-columns:1fr;gap:6px;padding:16px 0 14px} .track .tr>i{display:none} .track .tr .a{text-align:left} .track .tr .a::before{content:"Generic: ";font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase} .track .tr .b::before{content:"Propbook: ";font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc2)} } @media(prefers-reduced-motion:reduce){.track .tr>i::after{transform:scale(1)}} .cmp-lead{font:600 10.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);margin:34px 0 12px} .cmp-note{font-size:13px;line-height:1.6;color:var(--mute);max-width:88ch;margin:14px 0 0} .ai-tag{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.08em;padding:3px 6px;border-radius:5px;background:var(--acc);color:#fff;vertical-align:middle;margin:0 1px} /* tarifs */ .tgl{display:inline-flex;padding:5px;border-radius:99px;background:var(--surf);border:1px solid var(--line-2);margin-bottom:30px} .tgl button{padding:11px 20px;border-radius:99px;font-weight:700;font-size:14.5px;color:var(--mute);transition:background .3s,color .3s} .tgl button[aria-pressed="true"]{background:var(--on-acc-bg);color:var(--on-acc)} .plans{display:grid;grid-template-columns:1fr;gap:18px;max-width:1100px;align-items:stretch} .plan{padding:clamp(20px,2.2vw,30px);border-radius:22px;background:var(--surf);border:1px solid var(--line-2); backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:8px;transition:transform .3s;position:relative} .plan:hover{transform:translateY(-6px)} /* Duel asymetrique : Elite prend la plus grande part, la taille designe le produit principal. */ .plan.elite{z-index:2; background:linear-gradient(165deg,var(--on-acc-bg),color-mix(in srgb,var(--acc) 20%,var(--on-acc-bg))); color:var(--on-acc);border-color:transparent;box-shadow:0 26px 54px -30px rgba(0,0,0,.6)} @media(min-width:901px){ .plans{grid-template-columns:.78fr 1.28fr} .plan.elite ul{grid-template-columns:1fr 1fr;column-gap:22px} } @media(max-width:900px){.plan.elite{order:1}.plan.pro{order:2}} /* Le journal gratuit reste visible : un bandeau au-dessus du duel, pas un simple lien. */ .freebar{display:grid;gap:11px;max-width:1100px;margin:0 0 18px;padding:14px 18px; border:1px solid var(--line-2);border-radius:16px;background:var(--surf);backdrop-filter:blur(10px)} @media(min-width:901px){.freebar{grid-template-columns:auto 1fr auto;align-items:center;gap:24px}} .fb-top{display:flex;align-items:center;gap:9px} .fb-price{font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.04em;line-height:1;color:var(--ink)} .fb-price i{font-style:normal;font-size:.55em;opacity:.7;margin-left:1px} .fb-tag{display:inline-block;font:700 9px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase; background:color-mix(in srgb,var(--acc2) 22%,transparent);color:var(--ink);border-radius:99px;padding:4px 8px} .fb-head b{display:block;margin-top:6px;font:600 12.5px/1.4 var(--body);color:var(--ink);max-width:23ch} .fb-list{list-style:none;margin:0;padding:0;display:grid;gap:5px 22px;font-size:12.5px;line-height:1.45;color:var(--mute)} @media(min-width:620px){.fb-list{grid-template-columns:1fr 1fr}} .fb-list li{display:grid;grid-template-columns:14px 1fr;gap:5px;align-items:baseline} .fb-list li::before{content:"\2713";font-weight:800;font-size:11px;color:var(--acc2)} .fb-cta{white-space:nowrap;justify-self:start} .pip-ai{white-space:nowrap} /* dans le bandeau, la pastille ne doit pas faire grandir la ligne */ .fb-list .ai-tag{font-size:8px;padding:2px 5px;vertical-align:-.15em;margin:0 2px} .plan .nm{font:600 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.72} .plan .pr{font-family:var(--display);font-weight:800;font-size:clamp(34px,3.2vw,50px);letter-spacing:-.045em; line-height:1;display:flex;align-items:baseline;gap:4px;white-space:nowrap} .plan .pr .cur{font-style:normal;font-size:.55em;opacity:.7} .plan .per{margin:6px 0 0;font:500 12.5px/1.35 var(--body);color:var(--mute)} .plan .what{margin:12px 0 10px;padding-top:12px;border-top:1px solid var(--line); font:600 13.5px/1.45 var(--body);color:var(--ink)} .plan .save{font-style:normal;font:700 10px/1 var(--mono);letter-spacing:.06em; background:color-mix(in srgb,var(--acc2) 22%,transparent);color:var(--ink); border-radius:99px;padding:5px 9px;margin-left:8px;vertical-align:middle} .plan .fine{margin:10px 0 0;font:500 12px/1.4 var(--body);color:var(--mute)} .plan .pop{position:absolute;top:-12px;left:50%;transform:translateX(-50%); font:700 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase; background:var(--acc);color:#fff;border-radius:99px;padding:7px 12px;white-space:nowrap; box-shadow:0 8px 22px -10px rgba(0,0,0,.7)} .plan ul li b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.35} .plan ul li span{display:block;font-size:12.5px;line-height:1.4;color:var(--mute);margin-top:1px} .plan .pr small{font:600 14px var(--body);letter-spacing:0;opacity:.72;line-height:1.35;flex-basis:100%} .plan .pr b{display:inline-block;font-weight:800} .plan .pr b.roll{animation:roll .5s cubic-bezier(.2,.9,.2,1)} @keyframes roll{from{transform:translateY(60%);opacity:0}} .plan ul{list-style:none;display:grid;gap:12px;font-weight:500;flex:1;font-size:15px;margin:0} .plan li{display:grid;grid-template-columns:18px 1fr;column-gap:8px;align-items:start} .plan li::before{content:"✓";font-weight:800;color:var(--acc2);line-height:1.35;margin:0;grid-row:1} /* sans cela le texte descriptif retombe dans la colonne de 18px et se coupe mot par mot */ .plan li > b,.plan li > span{grid-column:2} .plan.elite li::before{color:var(--on-acc)} .plan.elite .per,.plan.elite .fine,.plan.elite ul li span{color:color-mix(in srgb,var(--on-acc) 72%,transparent)} .plan.elite .what,.plan.elite ul li b{color:var(--on-acc)} .plan.elite .save{background:color-mix(in srgb,var(--on-acc) 16%,transparent);color:var(--on-acc)} .plan.elite .what{border-top-color:color-mix(in srgb,var(--on-acc) 22%,transparent)} .plan.elite .btn{background:var(--on-acc);color:var(--on-acc-bg)} .note{margin-top:16px;font-size:14.5px;color:var(--mute)} /* confiance — bande condensée */ .trust{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--surf);backdrop-filter:blur(10px)} .tstat{padding:22px 24px;border-right:1px solid var(--line)} .tstat:last-child{border-right:0} .tstat .n{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em;line-height:1;color:var(--acc2)} .tstat .l{font-size:13.5px;color:var(--mute);margin-top:8px} .trust-note{margin-top:18px;font-size:14px;color:var(--mute);max-width:84ch} /* faq */ .faq{display:grid;gap:10px;max-width:920px} .fq{padding:0 22px;overflow:hidden} .fq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:600;font-size:16.5px;display:flex;justify-content:space-between;gap:16px;align-items:center} .fq summary::-webkit-details-marker{display:none} .fq summary::after{content:"+";font:400 25px/1 var(--display);color:var(--acc2);transition:transform .3s} .fq[open] summary::after{transform:rotate(45deg)} .fq .a{padding:0 0 20px;color:var(--mute);font-size:15px;max-width:74ch} /* final */ .final{position:relative;z-index:2;min-height:88vh;display:flex;align-items:center;text-align:center;padding:96px 0;overflow:hidden} .final::before{content:"";position:absolute;left:50%;top:60%;width:120vmax;height:120vmax;transform:translate(-50%,-50%);opacity:.55;filter:blur(30px); background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--acc) 50%,transparent),transparent 40%,color-mix(in srgb,var(--acc2) 30%,transparent),transparent 80%); animation:turn 20s linear infinite} @keyframes turn{to{transform:translate(-50%,-50%) rotate(360deg)}} .final .wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px} .final h2{font-size:clamp(40px,7vw,116px);max-width:14ch} .final p{font-size:clamp(16.5px,1.4vw,20px);color:var(--mute);max-width:46ch} footer{position:relative;z-index:2;padding:44px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--mute)} .foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px} .foot .bcol p{margin-top:12px;max-width:34ch} .foot h4{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--acc2);margin-bottom:12px} .foot .fcol a{display:block;padding:5px 0;transition:color .2s} .foot .fcol a:hover{color:var(--ink)} .foot-bottom{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:13px} @media (max-width:1200px){.rail{display:none}} @media (max-width:1040px){ .idx-in{grid-template-columns:1fr 1fr} .ix:nth-child(3n){border-right:1px solid var(--line)} .ix:nth-child(2n){border-right:0} .ix:nth-last-child(-n+3){border-bottom:1px solid var(--line)} .ix:nth-last-child(-n+1){border-bottom:0} .steps,.spaces,.foot{grid-template-columns:1fr 1fr} .trust{grid-template-columns:1fr 1fr} .tstat:nth-child(2n){border-right:0} .tstat:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media (max-width:960px){ .nav ul{display:none} .hero .wrap,.pin .wrap,.vs,.plans,.band{grid-template-columns:1fr} .med{top:auto;bottom:calc(50% - 43px)} .side.a{padding-right:clamp(22px,3.2vw,46px);padding-bottom:calc(clamp(22px,3.2vw,46px) + 52px)} .side.b{padding-left:clamp(22px,3.2vw,46px);padding-top:calc(clamp(22px,3.2vw,46px) + 52px)} .pin .wrap{gap:14px} .arena{max-height:42vh}.sw{min-height:240px}.oc .ln small{display:none} .st p{margin:12px 0 18px} } @media (max-width:1040px){.trust{grid-template-columns:repeat(2,1fr)}.tstat{border-bottom:1px solid var(--line)}.tstat:nth-child(2n){border-right:0}.tstat:last-child{grid-column:1/-1;border-bottom:0}} @media (max-width:640px){ .idx-in{grid-template-columns:1fr} .ix{border-right:0!important;border-bottom:1px solid var(--line)!important} .ix:last-child{border-bottom:0!important} .steps,.spaces,.foot{grid-template-columns:1fr} .trust{grid-template-columns:1fr} .tstat{border-right:0;border-bottom:1px solid var(--line)} .tstat:last-child{border-bottom:0} .btn{padding:15px 24px} /* ── téléphone ────────────────────────────────────────────── Syne est une chasse large : à 375px « Propbook. » touchait le bord. Le titre se cale sur la largeur réelle, pas sur la hauteur de vue. */ .hero h1{font-size:clamp(36px,11.5vw,54px);margin:18px 0 18px} .hero .sub{font-size:16px} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} /* le bouton de la nav redevient un bouton, pas une pastille sur deux lignes */ .nav .btn{padding:10px 16px;font-size:14px;white-space:nowrap;border-radius:99px} .nav .wrap{gap:10px;height:62px} .logo{font-size:18px} .logo i{width:20px;height:24px} /* sections : moins de rembourrage vertical, le pouce fait moins de chemin */ .sect{padding:56px 0} h2{font-size:clamp(28px,8.5vw,40px)} .sub{font-size:15.5px} /* la bande de logos ralentit : à 375px elle défilait trop vite pour être lue */ .mq .grp{animation-duration:78s} .mq .r2 .grp{animation-duration:96s} .lg{padding:7px 12px} .lg span{font-size:12.5px} /* tableaux : on fait défiler au doigt, la première colonne reste visible */ .tbl-wrap{-webkit-overflow-scrolling:touch} table.cmp th,table.cmp td{padding:12px 14px;font-size:14px} /* la fenêtre Telegram et les cartes gardent leurs marges */ .tg-chat{padding:12px 10px 14px} .bub{max-width:97%} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important} .hero h1 .w>span{transform:none} .rv,.bub{opacity:1;transform:none} } /* ===== Comparateur de firmes — « Every firm. Every rule. » ===== */ .fmx{border-radius:26px;overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow); background:linear-gradient(112deg,color-mix(in srgb,var(--acc) 92%,#000) 0%,var(--acc) 42%,color-mix(in srgb,var(--acc) 78%,#0B2BD6) 100%)} .fmx-duel{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:clamp(200px,24vw,268px)} .fmx-side{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.8vw,40px);position:relative} .fmx-side.b{align-items:flex-end;text-align:right} .fmx-side,.fmx-side *{color:#fff} .fmx-side::after{content:"";position:absolute;top:18%;bottom:18%;right:0;width:1px; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.42) 0 6px,transparent 6px 12px)} .fmx-side.b::after{display:none} .fmx-badge{position:absolute;top:clamp(20px,2.8vw,40px);width:46px;height:46px;border-radius:12px;background:#fff; display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.22)} .fmx-side.a .fmx-badge{left:clamp(20px,2.8vw,40px)} .fmx-side.b .fmx-badge{right:clamp(20px,2.8vw,40px)} .fmx-badge img{width:28px;height:28px;object-fit:contain} .fmx-name{font-size:clamp(38px,6vw,92px);line-height:.95;letter-spacing:-.05em;font-weight:800} a.fmx-side{text-decoration:none;transition:background-color .28s} a.fmx-side:hover{background-color:rgba(255,255,255,.07)} a.fmx-side:hover .fmx-name{text-decoration:underline;text-underline-offset:6px} .fmx-med{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(72px,8vw,104px);aspect-ratio:1; border-radius:50%;background:#fff;color:#0B0F14;display:grid;place-items:center;z-index:2; font:800 clamp(20px,2.2vw,30px)/1 var(--sans,inherit);letter-spacing:-.02em; box-shadow:0 0 0 clamp(8px,1vw,14px) rgba(255,255,255,.16)} .fmx-rules{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid rgba(255,255,255,.26); background:rgba(0,0,0,.14)} .fmx-rule{padding:clamp(14px,1.5vw,20px) clamp(12px,1.4vw,22px);border-right:1px solid rgba(255,255,255,.18)} .fmx-rule:last-child{border-right:0} .fmx-rule b{display:block;color:#fff;font-size:14.5px;margin-bottom:8px} .fmx-rule span{display:flex;align-items:center;gap:8px;font:500 11px/1.35 var(--mono);letter-spacing:.06em; text-transform:uppercase;color:rgba(255,255,255,.82)} .fmx-rule svg{flex:none;width:15px;height:15px} .fmx-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px} .fmx-logos{display:flex} .fmx-logos a{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid var(--bg); display:grid;place-items:center;margin-left:-9px;transition:transform .25s} .fmx-logos a:first-child{margin-left:0} .fmx-logos a:hover{transform:translateY(-4px);z-index:2} .fmx-logos img{width:19px;height:19px;object-fit:contain;border-radius:50%} .fmx-foot p{margin:0;color:var(--mute);font-size:15px} .fmx-foot p b{color:var(--ink)} .fmx-foot p a{color:var(--acc2);font-weight:600} @media(max-width:860px){ .fmx-rules{grid-template-columns:repeat(2,1fr)} .fmx-rule{border-bottom:1px solid rgba(255,255,255,.18)} .fmx-rule:nth-child(2n){border-right:0} .fmx-rule:last-child{grid-column:1/-1;border-bottom:0} } @media(max-width:560px){ .fmx-duel{grid-template-columns:1fr} .fmx-side{min-height:0;justify-content:center;align-items:flex-start;text-align:left} .fmx-side.b{align-items:flex-start;text-align:left} .fmx-side.a{padding-bottom:52px} .fmx-side.b{padding-top:52px} .fmx-badge{position:static;margin-bottom:14px} .fmx-name{font-size:clamp(34px,13vw,58px)} .fmx-med{width:66px;box-shadow:0 0 0 7px rgba(255,255,255,.16);font-size:19px} .fmx-side::after{top:auto;bottom:0;left:0;right:0;width:auto;height:1px; background:repeating-linear-gradient(to right,rgba(255,255,255,.42) 0 6px,transparent 6px 12px)} } /* ===== Comparateur — entrée animée ===== */ .fmx{--fx:0} .fmx-side.a,.fmx-side.b{opacity:0;transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.85,.25,1),background-color .28s} .fmx-side.a{transform:translateX(-34px)} .fmx-side.b{transform:translateX(34px)} .fmx.in .fmx-side.a,.fmx.in .fmx-side.b{opacity:1;transform:none} .fmx.in .fmx-side.b{transition-delay:.09s} .fmx-med{opacity:0;transform:translate(-50%,-50%) scale(.55); transition:opacity .5s ease .34s,transform .62s cubic-bezier(.34,1.56,.5,1) .34s} .fmx.in .fmx-med{opacity:1;transform:translate(-50%,-50%) scale(1)} .fmx.in .fmx-med::before{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid rgba(255,255,255,.55);animation:fmxPulse 2.8s cubic-bezier(.2,.7,.4,1) .9s infinite} @keyframes fmxPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.05);opacity:0}} .fmx-side::after{transform:scaleY(0);transform-origin:top;transition:transform .7s cubic-bezier(.2,.8,.2,1) .2s} .fmx.in .fmx-side::after{transform:scaleY(1)} .fmx-badge{opacity:0;transform:translateY(-10px) scale(.8); transition:opacity .45s ease var(--bd,.42s),transform .55s cubic-bezier(.34,1.5,.5,1) var(--bd,.42s)} .fmx.in .fmx-badge{opacity:1;transform:none} .fmx-side.b .fmx-badge{--bd:.5s} .fmx-rule{opacity:0;transform:translateY(14px); transition:opacity .55s ease var(--rd),transform .65s cubic-bezier(.2,.8,.2,1) var(--rd)} .fmx.in .fmx-rule{opacity:1;transform:none} .fmx-rule:nth-child(1){--rd:.50s}.fmx-rule:nth-child(2){--rd:.57s}.fmx-rule:nth-child(3){--rd:.64s} .fmx-rule:nth-child(4){--rd:.71s}.fmx-rule:nth-child(5){--rd:.78s} .fmx-rule svg{transform:scale(.4);opacity:0;transition:transform .5s cubic-bezier(.34,1.6,.5,1) calc(var(--rd) + .1s),opacity .3s ease calc(var(--rd) + .1s)} .fmx.in .fmx-rule svg{transform:none;opacity:1} /* survol : le camp visé s'éclaire, l'autre recule */ .fmx-duel:hover .fmx-side{opacity:.62} .fmx-duel:hover .fmx-side:hover{opacity:1;background-color:rgba(255,255,255,.09)} .fmx-duel:hover .fmx-side:hover .fmx-name{transform:translateX(6px)} .fmx-side.b:hover .fmx-name{transform:translateX(-6px)!important} .fmx-name{transition:transform .35s cubic-bezier(.2,.8,.2,1)} .fmx-logos a{opacity:0;transform:translateY(10px) scale(.8); transition:opacity .4s ease var(--ld),transform .5s cubic-bezier(.34,1.5,.5,1) var(--ld),margin-left .25s} .fmx-foot.in .fmx-logos a{opacity:1;transform:none} .fmx-logos:hover a{margin-left:2px} .fmx-logos:hover a:first-child{margin-left:0} @media(prefers-reduced-motion:reduce){ .fmx-side.a,.fmx-side.b,.fmx-med,.fmx-badge,.fmx-rule,.fmx-rule svg,.fmx-logos a{ opacity:1!important;transform:none!important;transition:none!important} .fmx-side::after{transform:scaleY(1)!important} .fmx.in .fmx-med::before{animation:none} } /* ── densité téléphone ───────────────────────────────────────── Les clamp() gardent l'échelle du bureau jusque très bas : sur 390 px, les titres, les blocs et les visuels restent énormes et la page demande une vingtaine de balayages. On resserre l'échelle et l'air entre les sections. Ce bloc est volontairement en fin de feuille : il doit passer après les règles qu'il ajuste, sinon il est écrasé par elles. */ @media(max-width:560px){ .hero{min-height:0;padding:64px 0 52px} .hero h1{font-size:clamp(32px,9.6vw,46px);margin:14px 0 14px} .hero .lead{font-size:15px;margin-bottom:22px} .sect{padding:44px 0} .sect h2{font-size:26px;max-width:none;line-height:1.12} .sect .sub{font-size:14.5px;margin:12px 0 22px} .wrap{padding:0 18px} .duo{gap:14px} .duo>div{border-radius:18px;padding:17px} .duo h3{font-size:19px} .duo .lead{font-size:13.5px;margin-bottom:15px} .pb.me span,.pb.it span{font-size:13px;padding:10px 12px} .pip-feats{margin-top:17px;padding-top:14px;gap:12px} .pip-feats b{font-size:13.5px} .pip-feats span{font-size:12.5px} .pip-note{font-size:11.5px;padding-top:13px} .ix{padding:15px 16px} .ix h3{font-size:15px} .ix p{font-size:13px;margin-top:5px} .ix svg{width:16px;height:16px} .final{padding:52px 0} } /* ── téléphone, suite : ce que le passage à 375 px a montré ── */ @media(max-width:560px){ /* les quatre cartes du héros : « Analytics » et « Protection » débordaient de 109 px */ .hero .t{padding:14px 12px} .hero .t p{font-size:12.5px} /* la section épinglée durait 3,6 écrans de défilement pour une seule animation */ #four{height:210vh!important} .arena{overflow:hidden;border-radius:20px} /* pied de page : trois listes empilées = un écran entier de liens */ .foot{grid-template-columns:1fr 1fr;gap:22px 18px} .foot .bcol,.foot .fcol:last-child{grid-column:1/-1} .foot .fcol:last-child{columns:2;column-gap:18px} .foot .fcol:last-child h4{column-span:all} .foot .fcol a{padding:7px 0} } /* ── landing réglable depuis Admin → Landing (landing-cfg.js) ── */ .page>[hidden],.ix[hidden],.btn[hidden],.t-go[hidden]{display:none!important} .cfg-wait #hero-h1,.cfg-wait .hero .lead,.cfg-wait .hero .cta,.cfg-wait .hero .micro,.cfg-wait .hero .eyebrow{visibility:hidden} #hero-h1.cfg-title{font-size:clamp(30px,3.4vw,56px);line-height:1.04} #hero-h1.cfg-title .w{display:block} .t-go{position:absolute;inset:0;z-index:4;border-radius:inherit} .t-go:focus-visible{outline:2px solid var(--acc2);outline-offset:3px} .t:has(.t-go:hover){border-color:var(--acc2)} .chap{display:none;align-items:center;gap:10px;margin:0 0 16px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)} .cfg-chapters .chap{display:inline-flex} .chap span{display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:99px;border:1px solid color-mix(in srgb,var(--acc2) 45%,transparent)} .chap:hover{color:var(--ink)} .cfg-banner{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:200;padding:10px 16px;border-radius:99px;background:#F5B84B;color:#111;font:600 13px var(--body,system-ui);box-shadow:0 8px 30px rgba(0,0,0,.35);max-width:calc(100vw - 32px);text-align:center} @media(max-width:560px){.hero .cta:has(.btn.sec:not([hidden])){display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero .cta .btn{justify-content:center;white-space:nowrap}.hero .cta:has(.btn.sec:not([hidden])) .btn{padding-left:8px;padding-right:8px;font-size:14.5px}}