/* ══════════════════════════════════════════════════════════════════════ LANDING v3 « Nuit de match » — feuille PORTÉE (lot C / B1). Socle À CÔTÉ. Source : design-ref/land3.css + land3-devices.css (v3.4, .l3-* / :where(.l3)), 1:1 (P25) — le chrome de planche (land3-chrome.css) N'EST PAS repris. Scope : tout est .l3-* ou :where(.l3) → s'applique UNIQUEMENT sous #page-home-v3 (qui porte la classe .l3 .l3-live). 0 classe non préfixée, 0 utilitaire global (audit A2 : 0 élément nu hors scope). Sombre par défaut, clair via .l3-light. Buster : landing-v3.css?v=l3-v34 (re-port v3.4). ══════════════════════════════════════════════════════════════════════ */ /* ── land3.css ── */ /* MARX · Landing v3.4 — CSS PRODUIT. Scope .l3 · variables --l3-* · :where() sur les éléments · zéro layout inline (les états dynamiques sont des variables/classes posées par JS) · zéro largeur fixe hors chrome (le téléphone a une taille intrinsèque 300×620 mise à l'échelle par --l3-phsc). Container queries sur .l3-vp et .l3-navc. */ .l3{--l3-bg:#070707;--l3-bg2:#0D0D0D;--l3-card:#111110;--l3-ink:#F4F2ED;--l3-ink2:#B8B3A8;--l3-mut:#A39E93;--l3-line:#262523;--l3-line2:#3A3835;--l3-red:#FF2D1F;--l3-redbtn:#E8170A;--l3-grn:#4CB06F;--l3-dim:#8A857B;--l3-glow:rgba(255,45,31,.42);--l3-glow2:rgba(255,45,31,.12);--l3-navbg:rgba(7,7,7,.74);--l3-big:#101010;--l3-soft:rgba(255,255,255,.03);--l3-gx:clamp(20px,6.6cqw,96px);--l3-ease:cubic-bezier(.2,.7,.2,1);--l3-h:0;--l3-ap:0;--l3-phsc:1;--l3-vh:812px;--l3-vhu:calc(var(--l3-vh) / 100)} .l3-live{--l3-vhu:1svh} :where(.l3){font-family:'Barlow',sans-serif;color:var(--l3-ink);background:var(--l3-bg);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;text-wrap:pretty} :where(.l3) *{box-sizing:border-box;margin:0} :where(.l3) h1,:where(.l3) h2,:where(.l3) h3{font-family:'Barlow Condensed',sans-serif;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:.005em} :where(.l3) p{margin:0} :where(.l3) a{color:inherit;text-decoration:none} :where(.l3) a:hover{color:var(--l3-ink)} :where(.l3) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :where(.l3) img{display:block;max-width:100%} :where(.l3) svg{display:block} :where(.l3) input{font:inherit;color:inherit} :where(.l3) em{font-style:normal;color:var(--l3-red)} .l3-vp{container-type:inline-size;position:relative;overflow-x:clip;background:var(--l3-bg)} /* ── utilitaires ── */ .l3-k{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--l3-mut);line-height:1.4} .l3-k.l3-kr{color:var(--l3-red)} .l3-eyeb{display:flex;align-items:center;gap:14px} .l3-eyeb::before{content:"";width:28px;height:1.5px;background:var(--l3-red);flex-shrink:0} .l3-h2{font-size:clamp(40px,5.4cqw,76px);text-wrap:balance} .l3-lead{font-size:clamp(16px,1.3cqw,20px);line-height:1.5;color:var(--l3-ink2)} .l3-sec{padding:clamp(64px,9cqw,128px) var(--l3-gx);position:relative} .l3-sech{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(28px,4cqw,52px)} .l3-ico{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} @container (min-width:1024px){.l3-sech{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:40px}.l3-sech .l3-lead{max-width:34cqw}} /* ── boutons (cibles ≥ 44 px) ── */ .l3-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:10px;font-weight:700;font-size:16px;letter-spacing:.01em;border:1.5px solid var(--l3-line2);color:var(--l3-ink);background:var(--l3-soft);text-align:center;transition:border-color .16s,background .16s,box-shadow .16s,transform .08s} .l3-btn:hover{border-color:var(--l3-ink);color:var(--l3-ink)} .l3-btn:active{transform:scale(.97)} .l3-btn.l3-p{background:var(--l3-redbtn);border-color:var(--l3-redbtn);color:#FFF} .l3-btn.l3-p:hover{box-shadow:0 0 36px rgba(255,45,31,.35);border-color:var(--l3-red);color:#FFF} .l3-btn .l3-ico{width:18px;height:18px;transition:transform .16s} .l3-btn:hover .l3-ico{transform:translateX(4px)} .l3-btn.l3-lg{min-height:52px;padding:13px 24px;font-size:16px} .l3-btn.l3-full{width:100%} .l3-btn[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none} /* ── nav ── */ .l3-navc{position:fixed;top:0;left:0;right:0;z-index:50;container-type:inline-size} .l3-static .l3-navc{position:absolute} .l3-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--l3-gx);border-bottom:1px solid transparent;transition:background .2s,border-color .2s} .l3-nav.l3-scrolled{background:var(--l3-navbg);border-color:var(--l3-line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .l3-logo{font-family:'Syne',sans-serif;font-weight:800;font-size:22px;letter-spacing:.06em;color:var(--l3-ink);display:inline-flex;align-items:center;min-height:44px} .l3-logo i{font-style:normal;color:var(--l3-red)} .l3-navl{display:none;gap:28px} .l3-navl a{padding:12px 0;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--l3-mut);min-height:44px;display:inline-flex;align-items:center} .l3-navl a:hover{color:var(--l3-ink)} .l3-navr{display:flex;align-items:center;gap:14px} .l3-navr .l3-lnk{display:none;padding:12px 6px;font-weight:600;font-size:15px;color:var(--l3-ink2);min-height:44px;align-items:center} .l3-navr .l3-lnk:hover{color:var(--l3-ink)} .l3-nav .l3-btn{min-height:44px;padding:10px 16px;font-size:16px} @container (min-width:1024px){.l3-navl{display:flex}.l3-navr .l3-lnk{display:inline-flex}.l3-nav .l3-btn{min-height:48px;padding:12px 22px}} /* ── scène hero + produit (un seul téléphone sticky) ── */ .l3-scene{position:relative;--l3-phx:0px;--l3-navh:72px;--l3-phgap:72px;--l3-pincy:calc(var(--l3-navh) + (100 * var(--l3-vhu) - var(--l3-navh) - 214px) / 2);--l3-phjump:0px} .l3-live .l3-scene{height:340svh} .l3-pinned{--l3-h:1} .l3-stage{position:relative;height:var(--l3-vh);overflow:hidden;background:var(--l3-bg);display:flex;flex-direction:column} .l3-live .l3-stage{position:sticky;top:0;height:100svh} .l3-glow{position:absolute;left:50%;bottom:-22%;width:150cqw;max-width:1300px;aspect-ratio:1.7;transform:translateX(-50%);background:radial-gradient(ellipse at center,var(--l3-glow) 0%,var(--l3-glow2) 34%,transparent 68%);pointer-events:none} .l3-vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,transparent 48%,rgba(0,0,0,.6) 100%);pointer-events:none} .l3-hero{position:relative;flex:none;padding:calc(var(--l3-navh) + 3 * var(--l3-vhu)) var(--l3-gx) 0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:clamp(14px,2cqw,24px);z-index:5;opacity:calc(1 - var(--l3-h) * 1.6);transform:translateY(calc(var(--l3-h) * -40px))} .l3-s-pin .l3-hero{pointer-events:none;visibility:hidden} .l3-pio{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--l3-ink2);padding:8px 14px;border:1px solid var(--l3-line2);border-radius:999px;background:var(--l3-soft);min-height:36px;line-height:1.3} .l3-pio i{width:8px;height:8px;border-radius:50%;background:var(--l3-red);box-shadow:0 0 12px var(--l3-red);flex-shrink:0} .l3-pio b{color:var(--l3-ink);font-weight:700} .l3-pio>span{min-width:0} .l3-pio{white-space:nowrap} @container (max-width:379px){.l3-pio{white-space:normal}} .l3-sup{font-size:.55em;vertical-align:.45em;line-height:0} .l3-h1{font-size:min(clamp(54px,8.2cqw,120px),14 * var(--l3-vhu));text-wrap:balance;max-width:12ch} .l3-sub{font-size:clamp(16px,1.35cqw,21px);line-height:1.5;color:var(--l3-ink2);max-width:52ch} .l3-ctas{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:100%} .l3-ctas .l3-k{text-align:center} @container (min-width:600px){.l3-ctas{flex-direction:row;align-items:center;width:auto;gap:18px}.l3-ctas .l3-k{text-align:left}} @container (min-width:1024px){.l3-hero{align-items:center;text-align:center;padding-top:calc(var(--l3-navh) + 4 * var(--l3-vhu))}.l3-h1{max-width:none}.l3-sub{max-width:62ch}.l3-scene{--l3-phx:15cqw;--l3-navh:76px;--l3-pincy:calc(50 * var(--l3-vhu) + var(--l3-navh) / 2)}} .l3-phwrap{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:flex-start;padding-top:var(--l3-phgap);z-index:4;transform:translate(calc(var(--l3-phx) * var(--l3-h)),calc(var(--l3-phjump) * var(--l3-h)))} .l3-static .l3-pinned .l3-phwrap{position:absolute;left:0;right:0;top:calc(var(--l3-pincy) - 340.2px * var(--l3-phsc));flex:none;padding:0} .l3-phwrap .l3-ph{--l3-oy:0%;--l3-rx:calc(56deg * (1 - var(--l3-h)));--l3-rz:calc(-12deg * (1 - var(--l3-h)));--l3-ry:calc(6deg - 14deg * var(--l3-h));--l3-sc:calc(var(--l3-phsc) * (1.15 - .1 * var(--l3-h)))} .l3-phwrap .l3-phscr{box-shadow:0 0 70px rgba(255,45,31,.28)} @container (min-width:1024px){.l3-phwrap .l3-ph{--l3-ry:calc(6deg - 20deg * var(--l3-h))}} .l3-bignum{display:none;position:absolute;right:var(--l3-gx);top:var(--l3-pincy);transform:translateY(-50%);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:min(34cqw,520px);line-height:.8;color:var(--l3-big);user-select:none;opacity:calc((var(--l3-h) - .6) * 2.5)} @container (min-width:1024px){.l3-bignum{display:block}} .l3-prod{position:absolute;left:var(--l3-gx);right:var(--l3-gx);bottom:max(16px,3 * var(--l3-vhu));display:flex;flex-direction:column;gap:14px;z-index:5;opacity:calc((var(--l3-h) - .6) * 2.5);transform:translateY(calc((1 - var(--l3-h)) * 30px))} .l3-s-hero .l3-prod{pointer-events:none;visibility:hidden} .l3-lines{display:flex;flex-direction:column;gap:6px} .l3-line{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(28px,3cqw,44px);line-height:.95;text-transform:uppercase;color:var(--l3-dim);transition:color .15s} .l3-line i{font-style:normal;font-family:'Barlow',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em} .l3-line.l3-on{color:var(--l3-ink)}.l3-line.l3-on i{color:var(--l3-red)} .l3-line em{display:none;font-family:'Barlow',sans-serif;font-weight:400;text-transform:none;font-size:clamp(16px,1.15cqw,18px);line-height:1.5;color:var(--l3-ink2);margin-top:10px;letter-spacing:0;max-width:44ch} .l3-line.l3-on em{display:block} .l3-dots{display:flex;gap:6px} .l3-dots i{flex:1;height:2px;background:var(--l3-line2)}.l3-dots i.l3-on{background:var(--l3-red)} .l3-rail{display:none;position:absolute;right:var(--l3-gx);top:50%;transform:translateY(-50%);flex-direction:column;gap:14px;align-items:center;z-index:5;opacity:calc((var(--l3-h) - .6) * 2.5)} .l3-rail i{width:3px;height:44px;background:var(--l3-line2);border-radius:2px}.l3-rail i.l3-on{background:var(--l3-red);box-shadow:0 0 12px var(--l3-red)} @container (max-width:1023px){.l3-line:not(.l3-on){display:none}} @container (min-width:1024px){.l3-prod{right:auto;bottom:auto;top:var(--l3-pincy);transform:translateY(-50%);width:34cqw;gap:22px}.l3-lines{gap:18px}.l3-dots{display:none}.l3-rail{display:flex;top:var(--l3-pincy)}} /* ── repli sans mouvement : grille des 5 écrans ── */ .l3-prodgrid{display:none;border-top:1px solid var(--l3-line)} .l3-pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:20px} .l3-pg{display:flex;flex-direction:column;gap:12px} .l3-pgscr{aspect-ratio:540/1167;border-radius:22px;border:5px solid #1E1E21;overflow:hidden;background:#F4F2ED;display:flex;flex-direction:column} .l3-pgscr img{width:100%;flex:1;min-height:0;object-fit:contain;object-position:top} .l3-pgscr .l3-scph{margin:10px;height:calc(100% - 20px)} .l3-pg h3{font-size:24px}.l3-pg p{font-size:16px;color:var(--l3-ink2)} /* ── avantages (séquence horizontale volontaire) ── */ .l3-av{position:relative} .l3-avstage{display:flex;flex-direction:column;gap:clamp(28px,4cqw,44px);padding:clamp(64px,9cqw,112px) 0} .l3-av .l3-sech{padding:0 var(--l3-gx);margin:0} .l3-avtrack{display:flex;gap:16px;padding:6px var(--l3-gx);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--l3-gx);scrollbar-width:none;-webkit-overflow-scrolling:touch} .l3-avtrack::-webkit-scrollbar{display:none} .l3-card{flex:0 0 auto;width:min(78cqw,340px);scroll-snap-align:start;border:1px solid var(--l3-line);border-radius:18px;background:var(--l3-card);padding:24px;display:flex;flex-direction:column;gap:14px;min-height:340px;transition:border-color .16s,box-shadow .16s} .l3-card.l3-on{border-color:var(--l3-red);box-shadow:0 0 0 1px var(--l3-red),0 30px 80px rgba(255,45,31,.16)} .l3-cn{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(40px,3.6cqw,56px);line-height:1;color:var(--l3-mut)}.l3-card.l3-on .l3-cn{color:var(--l3-red)} .l3-card .l3-ico{width:32px;height:32px;margin-top:auto;color:var(--l3-ink2)} .l3-ct{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(26px,2.3cqw,34px);text-transform:uppercase;line-height:.95} .l3-cd{font-size:16px;line-height:1.5;color:var(--l3-ink2)} .l3-avprog{display:none;align-items:center;gap:24px;padding:0 var(--l3-gx)} .l3-segs{flex:1;display:flex;gap:6px}.l3-segs i{flex:1;height:2px;background:var(--l3-line2)}.l3-segs i.l3-on{background:var(--l3-red)} @container (min-width:1024px){ .l3-live .l3-av{height:240svh} .l3-avstage{position:sticky;top:0;height:100svh;justify-content:center;padding:0;overflow:hidden} .l3-static .l3-avstage{position:relative;height:auto;padding:104px 0} .l3-avtrack{overflow:visible;gap:24px;width:max-content;padding:10px var(--l3-gx);transform:translate3d(calc(var(--l3-ap) * var(--l3-shift,0px) * -1),0,0);will-change:transform} .l3-static .l3-avtrack{transform:translateX(-24%)} .l3-card{width:clamp(320px,27cqw,400px);min-height:420px;padding:30px;gap:16px} .l3-avprog{display:flex} } /* ── avis ── */ .l3-avis .l3-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px} .l3-rev{border:1px solid var(--l3-line);border-radius:16px;background:var(--l3-card);padding:24px;display:flex;flex-direction:column;gap:14px} .l3-stars{display:flex;gap:4px;color:var(--l3-red)} .l3-stars svg{width:16px;height:16px;fill:currentColor;stroke:none} .l3-stars svg.l3-off{fill:none;stroke:var(--l3-line2);stroke-width:1.5} .l3-rev p{font-size:17px;line-height:1.5;color:var(--l3-ink)} .l3-who{display:flex;align-items:center;gap:12px;margin-top:auto} .l3-avat{width:40px;height:40px;border-radius:50%;background:var(--l3-line);color:var(--l3-ink);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:18px;flex-shrink:0} .l3-who b{display:block;font-weight:600}.l3-who span{font-size:16px;color:var(--l3-mut)} .l3-empty{border:1px dashed var(--l3-line2);border-radius:18px;padding:clamp(32px,5cqw,64px) clamp(24px,4cqw,48px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--l3-bg2)} .l3-empty h3{font-size:clamp(30px,3.6cqw,52px)} .l3-empty p{color:var(--l3-ink2);max-width:56ch;font-size:clamp(16px,1.2cqw,18px)} .l3-pulse{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--l3-red)} .l3-pulse i{width:10px;height:10px;border-radius:50%;background:var(--l3-red);flex-shrink:0} .l3-in .l3-pulse i{animation:l3-pulse 1.6s ease-out 1} @keyframes l3-pulse{0%{box-shadow:0 0 0 0 rgba(255,45,31,.6)}100%{box-shadow:0 0 0 14px rgba(255,45,31,0)}} /* ── pricing ── */ .l3-plans{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} .l3-plan{border:1px solid var(--l3-line);border-radius:18px;background:var(--l3-card);padding:clamp(22px,2.2cqw,32px);display:flex;flex-direction:column;gap:16px;min-width:0;transition:border-color .16s} .l3-plan:hover{border-color:var(--l3-line2)} .l3-plan.l3-on{border-color:var(--l3-red);box-shadow:0 0 0 1px var(--l3-red),0 40px 90px rgba(255,45,31,.14);order:-1} .l3-ptop{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:28px} .l3-pname{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(26px,2cqw,30px);text-transform:uppercase;letter-spacing:.02em} .l3-ptag{color:var(--l3-red);border:1px solid var(--l3-red);padding:5px 8px;border-radius:6px;font-size:11px;white-space:nowrap} .l3-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .l3-num{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(64px,6cqw,96px);line-height:.9;letter-spacing:-.01em} .l3-old{font-size:clamp(22px,2cqw,30px);color:var(--l3-mut);text-decoration:line-through;text-decoration-color:var(--l3-red);text-decoration-thickness:2px} .l3-per{font-size:16px;color:var(--l3-mut)} .l3-life{font-size:16px;color:var(--l3-ink2)} .l3-feat{display:flex;flex-direction:column;border-top:1px solid var(--l3-line)} .l3-feat div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--l3-line);font-size:16px} .l3-feat b{font-weight:600}.l3-feat span{color:var(--l3-mut);text-align:right} .l3-feat .l3-fee{font-size:16px}.l3-feat .l3-fee b{font-weight:500;color:var(--l3-mut)} @container (max-width:359px){.l3-feat div{flex-direction:column;align-items:flex-start;gap:2px}.l3-feat span{text-align:left}} .l3-plan .l3-btn{margin-top:auto;width:100%} .l3-legal{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--l3-line);padding-top:20px;margin-top:clamp(20px,3cqw,36px)} .l3-legal p{font-size:16px;color:var(--l3-ink2)} .l3-jurs{display:flex;flex-wrap:wrap;gap:8px} .l3-jur{display:inline-flex;font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--l3-mut);border:1px dashed var(--l3-line2);padding:6px 9px;border-radius:6px} @container (min-width:768px){.l3-plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6cqw,24px);align-items:stretch}.l3-plan.l3-on{order:0}} @container (min-width:1024px){.l3-legal{flex-direction:row;justify-content:space-between;align-items:center}} /* ── pré-inscription ── */ .l3-form{background:var(--l3-bg2);border-top:1px solid var(--l3-line)} .l3-formwrap{display:grid;gap:clamp(28px,4cqw,56px)} .l3-fintro{display:flex;flex-direction:column;gap:18px} .l3-fintro .l3-h2{font-size:clamp(40px,5cqw,72px)} .l3-fcard{border:1px solid var(--l3-line);border-radius:18px;background:var(--l3-card);padding:clamp(22px,2.6cqw,36px);display:flex;flex-direction:column;gap:18px;position:relative} .l3-fbody{display:flex;flex-direction:column;gap:18px} .l3-fields{display:grid;gap:16px} .l3-field{display:flex;flex-direction:column;gap:8px;min-width:0} .l3-lab{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--l3-mut)} .l3-input{width:100%;min-height:52px;padding:14px 16px;border:1.5px solid var(--l3-line2);border-radius:10px;background:var(--l3-bg);color:var(--l3-ink);font-size:16px;outline:none;transition:border-color .12s} .l3-input::placeholder{color:#7C776D} .l3-input:focus{border-color:var(--l3-ink)} .l3-err .l3-input{border-color:var(--l3-red)} .l3-fx{display:none;font-size:16px;color:var(--l3-red);font-weight:600} .l3-err .l3-fx{display:block} .l3-chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:6px 0;min-height:44px} .l3-chk input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:1.5px solid var(--l3-line2);border-radius:6px;background:var(--l3-bg);flex-shrink:0;margin:2px 0 0;display:grid;place-items:center;cursor:pointer} .l3-chk input:focus-visible{outline:2px solid var(--l3-ink);outline-offset:2px} .l3-chk input:checked{background:var(--l3-redbtn);border-color:var(--l3-redbtn)} .l3-chk input:checked::after{content:"";width:6px;height:11px;border:solid #FFF;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)} .l3-err .l3-chk input{border-color:var(--l3-red)} .l3-chk span{font-size:16px;line-height:1.5;color:var(--l3-ink2)} .l3-chk a{text-decoration:underline;text-underline-offset:2px;color:var(--l3-ink)} .l3-chk a:hover{color:var(--l3-red)} .l3-fnote{font-size:16px;color:var(--l3-mut);line-height:1.5} .l3-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#FFF;border-radius:50%;animation:l3-spin .8s linear infinite;display:none;flex-shrink:0} .l3-f-busy .l3-spin{display:block} .l3-f-busy .l3-btn .l3-ico{display:none} @keyframes l3-spin{to{transform:rotate(360deg)}} .l3-fok{display:none;flex-direction:column;gap:16px;align-items:flex-start} .l3-fok h3{font-size:clamp(34px,4cqw,60px);text-wrap:balance} .l3-fok p{color:var(--l3-ink2);font-size:17px} .l3-f-ok .l3-fok,.l3-f-dup .l3-fok{display:flex} .l3-f-ok .l3-fbody,.l3-f-dup .l3-fbody{display:none} .l3-dupmsg{display:none}.l3-f-dup .l3-dupmsg{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .l3-f-dup .l3-okmsg{display:none} .l3-okmsg{display:flex;flex-direction:column;gap:16px;align-items:flex-start} .l3-fgauge{display:flex;flex-direction:column;gap:8px;width:100%} .l3-fgauge .l3-bar{height:6px;border-radius:3px;background:var(--l3-line);overflow:hidden;position:relative} .l3-fgauge .l3-bar i{position:absolute;inset:0 auto 0 0;width:4px;min-width:4px;background:var(--l3-red);border-radius:3px;transition:width .8s var(--l3-ease)} .l3-in .l3-fgauge .l3-bar i,.l3-static .l3-fgauge .l3-bar i{width:var(--l3-fill,0%)} .l3-fgauge .l3-k{display:flex;justify-content:space-between;gap:12px} @container (min-width:600px){.l3-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @container (min-width:1024px){.l3-formwrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start}} /* ── footer ── */ .l3-foot{padding:clamp(40px,5cqw,64px) var(--l3-gx);border-top:1px solid var(--l3-line);display:flex;flex-direction:column;gap:20px} .l3-footrow{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between} .l3-flinks{display:flex;flex-wrap:wrap;gap:0 20px} .l3-flinks a{padding:10px 0;font-size:16px;color:var(--l3-ink2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;min-height:44px;display:inline-flex;align-items:center;transition:color .16s,text-decoration-color .16s} .l3-flinks a:hover{text-decoration-color:var(--l3-red);color:var(--l3-ink)} .l3-fsmall{font-size:16px;color:var(--l3-mut)} /* ── révélations (une fois, 450 ms) ── */ .l3-js .l3-rv{opacity:0;transform:translateY(24px);transition:opacity .45s var(--l3-ease),transform .45s var(--l3-ease)} .l3-rv.l3-in,.l3-static .l3-rv,.l3-live:not(.l3-js) .l3-rv{opacity:1;transform:none} .l3-rv.l3-d1{transition-delay:.06s}.l3-rv.l3-d2{transition-delay:.12s}.l3-rv.l3-d3{transition-delay:.18s} .l3-live.l3-js .l3-hero>*{animation:l3-up .5s var(--l3-ease) both} .l3-live.l3-js .l3-hero>*:nth-child(2){animation-delay:.1s}.l3-live.l3-js .l3-hero>*:nth-child(3){animation-delay:.2s}.l3-live.l3-js .l3-hero>*:nth-child(4){animation-delay:.3s} @keyframes l3-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .l3-live:not(.l3-js) .l3-prodgrid{display:block} /* ── prefers-reduced-motion : zéro scrub, tout visible ── */ @media (prefers-reduced-motion:reduce){ :where(.l3) *{transition:none!important;animation:none!important} .l3-rv{opacity:1;transform:none} .l3-live .l3-scene{height:auto} .l3-live .l3-stage{position:relative} .l3-live .l3-phwrap .l3-ph{--l3-rx:0deg;--l3-rz:0deg;--l3-ry:-8deg} .l3-live .l3-prod,.l3-live .l3-rail,.l3-live .l3-bignum{display:none} .l3-live .l3-prodgrid{display:block} .l3-live .l3-av{height:auto} .l3-live .l3-avstage{position:relative;height:auto;padding:96px 0;overflow:visible} .l3-live .l3-avtrack{flex-wrap:wrap;width:auto;transform:none;overflow:visible} .l3-live .l3-coach{height:auto} .l3-live .l3-cstage{position:relative;height:auto} .l3-live .l3-mac{--l3-my:16deg;--l3-lid:12deg;--l3-mx:-10deg;--l3-msc:1;--l3-mtz:0px} } /* ── densité ≥ 1024 : corps secondaires resserrés (mobile reste ≥ 16 px) ── */ @container (min-width:1024px){.l3-chk span,.l3-life,.l3-per,.l3-feat .l3-fee,.l3-who span{font-size:15px}.l3-fnote,.l3-fsmall,.l3-fx{font-size:14px}.l3-flinks a,.l3-nav .l3-btn{font-size:15px}.l3-k,.l3-lab,.l3-pio{font-size:12px}} @media (max-height:600px){.l3-live .l3-hero{padding-top:calc(64px + 1 * var(--l3-vhu));gap:12px}.l3-live .l3-h1{font-size:clamp(40px,6cqw,72px)}.l3-live .l3-sub{font-size:16px}.l3-live .l3-btn.l3-lg{min-height:52px;padding:12px 22px;font-size:16px}} /* ── thème clair (bascule dans la nav ; classe sur la racine, mémorisée) ── */ .l3.l3-light{--l3-bg:#F4F2ED;--l3-bg2:#ECE9E1;--l3-card:#FFFFFF;--l3-ink:#0F0E0C;--l3-ink2:#4A463D;--l3-mut:#6F6A60;--l3-line:#E2DED4;--l3-line2:#CFCABF;--l3-red:#E8170A;--l3-redbtn:#E8170A;--l3-grn:#1B6B35;--l3-dim:#6F6A60;--l3-glow:rgba(232,23,10,.16);--l3-glow2:rgba(232,23,10,.05);--l3-navbg:rgba(244,242,237,.8);--l3-big:#E8E4DB;--l3-soft:rgba(15,14,12,.03)} .l3-light .l3-vig{display:none} .l3-light .l3-btn.l3-p{color:#FFF} .l3-light .l3-btn.l3-p:hover{box-shadow:0 0 30px rgba(232,23,10,.22)} .l3-light .l3-phwrap .l3-phscr{box-shadow:0 30px 70px rgba(15,14,12,.22)} .l3-light .l3-card.l3-on,.l3-light .l3-plan.l3-on{box-shadow:0 0 0 1px var(--l3-red),0 30px 70px rgba(15,14,12,.1)} .l3-light .l3-chk input{background:#FFF} .l3-light .l3-input::placeholder{color:#8A8577} .l3-tg{width:44px;height:44px;display:inline-grid;place-items:center;border-radius:10px;border:0;color:var(--l3-ink2);background:none;transition:color .16s;flex-shrink:0} .l3-tg:hover{color:var(--l3-ink)} .l3-tg .l3-ico{grid-area:1/1;width:22px;height:22px;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .4s;stroke-width:1.8} .l3-tg .l3-moon{opacity:0;transform:rotate(-90deg) scale(.6)} .l3-light .l3-tg .l3-sun{opacity:0;transform:rotate(90deg) scale(.6)} .l3-light .l3-tg .l3-moon{opacity:1;transform:none} /* ── espace coach : MacBook pinné (≈ 180 vh de course), 3 écrans ── */ .l3-coach{position:relative;border-top:1px solid var(--l3-line)} .l3-cglow{position:absolute;left:50%;top:50%;width:min(120cqw,1100px);aspect-ratio:1.5;transform:translate(-50%,-46%);background:radial-gradient(ellipse at center,var(--l3-glow) 0%,var(--l3-glow2) 36%,transparent 68%);pointer-events:none} .l3-cstage>*{position:relative} .l3-cstage>.l3-cglow{position:absolute} @container (min-width:1024px){.l3-cglow{left:34%;width:min(70cqw,1000px)}} .l3-cstage{position:relative;display:flex;flex-direction:column;gap:clamp(24px,3cqw,40px);padding:clamp(64px,9cqw,104px) 0 clamp(48px,6cqw,80px);overflow:hidden} .l3-csech{padding:0 var(--l3-gx);display:flex;flex-direction:column;gap:14px} .l3-cbody{display:flex;flex-direction:column;gap:clamp(20px,3cqw,40px);align-items:center} .l3-macwrap{perspective:1600px;perspective-origin:50% 40%;display:flex;justify-content:center;width:100%;padding:0 var(--l3-gx)} .l3-clines{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--l3-gx);padding:4px var(--l3-gx) 8px;width:100%;scrollbar-width:none} .l3-clines::-webkit-scrollbar{display:none} .l3-cline{flex:0 0 auto;width:min(82cqw,360px);scroll-snap-align:start;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;border:1px solid var(--l3-line);border-radius:14px;padding:16px;background:var(--l3-card);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:.95;text-transform:uppercase;color:var(--l3-dim);transition:color .15s,border-color .15s} .l3-cline i{font-style:normal;font-family:'Barlow',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;padding-top:4px} .l3-cline.l3-on{color:var(--l3-ink);border-color:var(--l3-red)}.l3-cline.l3-on i{color:var(--l3-red)} .l3-cline em{display:block;font-family:'Barlow',sans-serif;font-weight:400;text-transform:none;font-size:16px;line-height:1.5;color:var(--l3-ink2);margin-top:8px;letter-spacing:0} .l3-cdots{display:flex;gap:6px;padding:0 var(--l3-gx)} .l3-cdots i{flex:1;height:2px;background:var(--l3-line2)}.l3-cdots i.l3-on{background:var(--l3-red)} @container (min-width:1024px){ .l3-live .l3-coach{height:200svh} .l3-coach{--l3-navh:76px} .l3-live .l3-cstage{position:sticky;top:0;height:100svh;justify-content:center;padding:calc(var(--l3-navh,76px) + 8px) 0 8px} .l3-cbody{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3cqw,56px);align-items:center;padding:0 var(--l3-gx)} .l3-macwrap{padding:0} .l3-clines{flex-direction:column;overflow:visible;padding:0;gap:14px;width:auto} .l3-cline{width:auto;border:0;padding:6px 0;background:none;font-size:clamp(28px,2.6cqw,40px)} .l3-cline.l3-on{border:0} .l3-cline:not(.l3-on) em{display:none} .l3-cdots{display:none} } /* ── pricing : liste complète par plan ── */ .l3-pl{display:flex;flex-direction:column;border-top:1px solid var(--l3-line)} .l3-pl div{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--l3-line);font-size:16px;line-height:1.35;color:var(--l3-ink2)} .l3-pl .l3-ico{width:18px;height:18px;color:var(--l3-grn);margin-top:2px} .l3-pl div.l3-all{color:var(--l3-ink);font-weight:700}.l3-pl div.l3-all .l3-ico{color:var(--l3-red)} .l3-pl div.l3-diff{color:var(--l3-ink)}.l3-pl div.l3-diff b{color:var(--l3-red);font-weight:700} .l3-pl div.l3-fee{font-size:16px;color:var(--l3-mut);justify-content:space-between} .l3-pl b{font-weight:600;color:var(--l3-ink)} @container (min-width:1024px){.l3-pl div{font-size:15px;padding:8px 0}.l3-pl div.l3-fee{font-size:14px}} .l3-fl{display:flex;flex-direction:column;border-top:1px solid var(--l3-line)} .l3-fl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--l3-line);font-size:16px;color:var(--l3-ink2)} .l3-fl div b{font-weight:600;color:var(--l3-ink);text-align:right;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .l3-fl div.l3-no{color:var(--l3-mut)}.l3-fl div.l3-no b{color:var(--l3-mut);font-weight:500} .l3-fl div.l3-diff b{color:var(--l3-red)} .l3-fl .l3-ico{width:18px;height:18px;color:var(--l3-grn)} .l3-fl .l3-no .l3-ico{color:var(--l3-line2)} .l3-fl .l3-fee{font-size:14px} @container (min-width:1024px){.l3-fl div{font-size:15px}.l3-fl .l3-fee{font-size:13.5px}} /* ── filigrane maquette (planches uniquement, jamais en production) ── */ .l3-wm{position:relative} .l3-wm::after{content:"MAQUETTE — AVIS FICTIFS · MAQUETTE — AVIS FICTIFS · MAQUETTE — AVIS FICTIFS · MAQUETTE — AVIS FICTIFS · MAQUETTE — AVIS FICTIFS";position:absolute;inset:-30% -10%;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(40px,7cqw,96px);line-height:1.3;text-transform:uppercase;color:rgba(255,45,31,.16);transform:rotate(-14deg);pointer-events:none;letter-spacing:.04em;overflow:hidden} .l3-fict{color:var(--l3-red);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px dashed var(--l3-red);padding:3px 7px;border-radius:5px} .l3-revtop{display:flex;justify-content:space-between;align-items:center;gap:12px} /* ── land3-devices.css (téléphone + MacBook 3D) ── */ /* MARX · Landing v3 — téléphone + MacBook CSS 3D (captures entières : l’écran suit le ratio de la capture) (zéro image de device, zéro WebGL). Scope .l3 · classes .l3-ph* · angle par variables --l3-rx/ry/rz/sc */ :where(.l3) .l3-ph{--l3-pw:300px;--l3-phh:648px;--l3-rx:0deg;--l3-ry:0deg;--l3-rz:0deg;--l3-sc:1;--l3-oy:50%;width:var(--l3-pw);height:var(--l3-phh);position:relative;flex-shrink:0} :where(.l3) .l3-phi0{--l3-i:0}:where(.l3) .l3-phi1{--l3-i:1}:where(.l3) .l3-phi2{--l3-i:2}:where(.l3) .l3-phi3{--l3-i:3}:where(.l3) .l3-phi4{--l3-i:4} :where(.l3) .l3-ph3d{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% var(--l3-oy);transform:translate3d(0,0,0) scale(var(--l3-sc)) rotateX(var(--l3-rx)) rotateY(var(--l3-ry)) rotateZ(var(--l3-rz));will-change:transform} :where(.l3) .l3-phl{position:absolute;inset:0;border-radius:54px;background:#1E1E21;border:1px solid #3C3C40;transform:translateZ(var(--l3-z))} :where(.l3) .l3-phl:nth-child(1){--l3-z:-1.6px}:where(.l3) .l3-phl:nth-child(2){--l3-z:-3.2px}:where(.l3) .l3-phl:nth-child(3){--l3-z:-4.8px}:where(.l3) .l3-phl:nth-child(4){--l3-z:-6.4px}:where(.l3) .l3-phl:nth-child(5){--l3-z:-8px}:where(.l3) .l3-phl:nth-child(6){--l3-z:-9.6px}:where(.l3) .l3-phl:nth-child(7){--l3-z:-11.2px}:where(.l3) .l3-phl:nth-child(8){--l3-z:-12.8px} :where(.l3) .l3-phback{position:absolute;inset:0;border-radius:54px;background:linear-gradient(155deg,#2A2A2E 0%,#0D0D0F 55%,#1B1B1E 100%);transform:translateZ(-13.6px)} :where(.l3) .l3-phface{position:absolute;inset:0;border-radius:54px;background:#09090A;box-shadow:inset 0 0 0 1.5px #4C4C51,inset 0 0 0 3px #09090A} :where(.l3) .l3-phscr{position:absolute;inset:11px;border-radius:44px;overflow:hidden;background:#F4F2ED;transform:translateZ(.6px)} :where(.l3) .l3-phtrk{position:absolute;inset:0;display:grid;grid-auto-rows:100%;transform:translateY(calc(var(--l3-i,0) * -100%));transition:transform .45s cubic-bezier(.2,.7,.2,1)} :where(.l3) .l3-phisl{position:absolute;top:13px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:14px;background:#000;transform:translateZ(1px)} :where(.l3) .l3-phgl{position:absolute;inset:0;border-radius:54px;background:linear-gradient(112deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.03) 26%,transparent 44%,transparent 72%,rgba(255,255,255,.05) 100%);pointer-events:none;transform:translateZ(1.4px)} :where(.l3) .l3-phb{position:absolute;width:4px;background:#2C2C30;border-radius:2px;left:-3px;top:150px;height:34px;transform:translateZ(-6px)} :where(.l3) .l3-phb.l3-b2{top:204px;height:68px}:where(.l3) .l3-phb.l3-b3{top:282px;height:68px}:where(.l3) .l3-phb.l3-bpw{left:auto;right:-3px;top:216px;height:104px} /* écran : barre d'état dessinée + capture réelle (ou placeholder net) */ :where(.l3) .l3-sc{position:relative;display:flex;flex-direction:column;background:#F4F2ED;color:#0F0E0C;overflow:hidden} :where(.l3) .l3-scst{display:flex;justify-content:space-between;align-items:center;padding:17px 28px 0;height:50px;font-family:'Barlow',sans-serif;font-weight:600;font-size:13px;flex-shrink:0;font-variant-numeric:tabular-nums} :where(.l3) .l3-scst i{display:inline-flex;gap:2.5px;align-items:flex-end;height:11px} :where(.l3) .l3-scst i b{display:block;width:3px;background:currentColor;border-radius:1px} :where(.l3) .l3-scst i b:nth-child(1){height:4px}:where(.l3) .l3-scst i b:nth-child(2){height:6px}:where(.l3) .l3-scst i b:nth-child(3){height:8px}:where(.l3) .l3-scst i b:nth-child(4){height:11px} :where(.l3) .l3-scimg{flex:1;min-height:0;width:100%;height:100%;object-fit:contain;object-position:top;display:block} :where(.l3) .l3-scph{flex:1;margin:0 14px 14px;border:1.5px dashed #8A8577;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:20px;color:#4A463D;background:repeating-linear-gradient(135deg,transparent 0 7px,rgba(138,133,119,.14) 7px 8px)} :where(.l3) .l3-scph b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:22px;text-transform:uppercase;line-height:1;color:#0F0E0C} :where(.l3) .l3-scph span{font-family:'Barlow',sans-serif;font-size:13px;line-height:1.4} /* ── MacBook CSS 3D : capot articulé (--l3-lid), rotation d'entrée (--l3-my), 3 écrans (--l3-mi) ── */ :where(.l3) .l3-mac{--l3-mw:560px;--l3-mh:328px;--l3-md:372px;--l3-my:16deg;--l3-mx:-10deg;--l3-lid:12deg;--l3-msc:var(--l3-macsc,1);--l3-mtz:0px;width:calc(var(--l3-mw) * var(--l3-msc));height:calc((var(--l3-mh) + 200px) * var(--l3-msc));position:relative;flex-shrink:0} :where(.l3) .l3-mac3d{position:absolute;left:50%;top:calc(48px * var(--l3-msc));width:var(--l3-mw);height:var(--l3-mh);margin-left:calc(var(--l3-mw) / -2);transform-style:preserve-3d;transform-origin:50% 100%;transform:translate3d(0,0,var(--l3-mtz)) scale(var(--l3-msc)) rotateX(var(--l3-mx)) rotateY(var(--l3-my));will-change:transform} :where(.l3) .l3-maclid{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateX(var(--l3-lid))} :where(.l3) .l3-maclide{position:absolute;inset:0;border-radius:14px 14px 4px 4px;background:#26262A;transform:translateZ(-1.5px)} :where(.l3) .l3-maclidf{position:absolute;inset:0;border-radius:14px 14px 4px 4px;background:#0B0B0C;box-shadow:inset 0 0 0 1.5px #3A3A3E;transform:translateZ(.6px)} :where(.l3) .l3-maccam{position:absolute;top:4px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1F1F22;box-shadow:inset 0 0 0 1px #34343A} :where(.l3) .l3-macscr{position:absolute;inset:12px;border-radius:6px;overflow:hidden;background:#F4F2ED} :where(.l3) .l3-mactrk{position:absolute;inset:0;display:grid;grid-auto-rows:100%;transform:translateY(calc(var(--l3-mi,0) * -100%));transition:transform .45s cubic-bezier(.2,.7,.2,1)} :where(.l3) .l3-mi0{--l3-mi:0}:where(.l3) .l3-mi1{--l3-mi:1}:where(.l3) .l3-mi2{--l3-mi:2} :where(.l3) .l3-mactrk img{width:100%;height:100%;object-fit:contain;object-position:center;display:block} :where(.l3) .l3-mactrk .l3-scph{margin:0;border-radius:0;border:0;height:100%} :where(.l3) .l3-macgl{position:absolute;inset:12px;border-radius:6px;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.04) 30%,transparent 48%,transparent 100%);transform:translateZ(.4px)} :where(.l3) .l3-machinge{position:absolute;left:14%;right:14%;top:calc(100% - 5px);height:10px;border-radius:5px;background:linear-gradient(180deg,#3E3E44,#141417 55%,#2A2A30);transform:translateZ(-2px)} :where(.l3) .l3-maclidb{display:none;position:absolute;inset:0;border-radius:14px 14px 4px 4px;background:linear-gradient(160deg,#3C3C41 0%,#1C1C1F 58%,#2B2B30 100%);box-shadow:inset 0 0 0 1px #4A4A50;transform:rotateY(180deg) translateZ(3px);display:none;align-items:center;justify-content:center;font-family:'Syne',sans-serif;font-weight:800;font-size:36px;letter-spacing:.08em;color:#8E8E96} :where(.l3) .l3-maclidb i{font-style:normal;color:#FF2D1F} :where(.l3) .l3-mac.l3-away .l3-maclidb{display:flex} :where(.l3) .l3-mac.l3-away .l3-maclidf{visibility:hidden} :where(.l3) .l3-macbase{position:absolute;left:0;right:0;top:100%;height:var(--l3-md);transform-origin:50% 0;transform:rotateX(90deg);border-radius:4px 4px 18px 18px;background:linear-gradient(180deg,#2C2C31 0%,#1F1F23 100%);box-shadow:inset 0 0 0 1px #3A3A40} :where(.l3) .l3-macbase2{position:absolute;left:0;right:0;top:calc(100% + 9px);height:var(--l3-md);transform-origin:50% 0;transform:rotateX(90deg);border-radius:4px 4px 18px 18px;background:#141417} :where(.l3) .l3-macfoot{position:absolute;left:0;right:0;top:calc(100% + 9px);height:var(--l3-md);transform-origin:50% 0;transform:rotateX(90deg) translateZ(-1px);border-radius:18px;background:radial-gradient(ellipse at 50% 40%,rgba(0,0,0,.5),transparent 70%)} :where(.l3) .l3-mackb{position:absolute;left:7%;right:7%;top:7%;height:48%;border-radius:6px;background-color:#0F0F11;background-image:repeating-linear-gradient(90deg,transparent 0 calc(100% / 14 - 3px),#1F1F23 calc(100% / 14 - 3px) calc(100% / 14)),repeating-linear-gradient(0deg,transparent 0 calc(100% / 5 - 3px),#1F1F23 calc(100% / 5 - 3px) calc(100% / 5))} :where(.l3) .l3-mactp{position:absolute;left:34%;right:34%;top:62%;height:30%;border-radius:8px;background:#232328;box-shadow:inset 0 0 0 1px #33333A} :where(.l3) .l3-macfront{position:absolute;left:0;right:0;top:100%;height:9px;transform:translateZ(var(--l3-md));background:linear-gradient(180deg,#2A2A2F,#15151A);border-radius:0 0 6px 6px} :where(.l3) .l3-macfront::after{content:"";position:absolute;left:44%;right:44%;top:2px;height:4px;border-radius:2px;background:#3A3A40} /* ── GLUE anti-cascade marx.css (lot C / B1) — déclarée dans outil/maquettes/land3.mjs (CFG.glue) ── marx.css:124 `nav{position:fixed;…glassmorphism 52px…}` (règle GLOBALE d'élément) fuit dans les