/* QTouch — « On supprime les intermédiaires » v3 (JS : lib/site/ml7.js). Canevas 760×1020 mis à l'échelle. */
.ml7{position:relative;height:640vh;background:var(--h7-bg,#F2EFEA);color:#141218;font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.ml-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;gap:var(--ml-gap,40px);padding:84px var(--ml-pad,24px) 20px;box-sizing:border-box}
.ml-l{width:var(--ml-lw,380px);flex:none;display:flex;flex-direction:column;justify-content:center;gap:26px;min-width:0}
.ml-hd{opacity:0;transform:translateY(16px);filter:blur(8px);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1),filter .5s}
.ml-hd.in{opacity:1;transform:none;filter:none}
.ml-k{display:inline-block;padding:6px 12px;border-radius:99px;background:#ECE7E1;color:#6B6672;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.ml-hd.q .ml-k{background:#FDE3D3;color:#C2410C}
.ml-hd h2{margin:14px 0 0;font-family:'Figtree',sans-serif;font-size:clamp(28px,3vw,50px);line-height:1;letter-spacing:-.045em;font-weight:600;text-wrap:balance}
.ml-hd h2 b{font-weight:inherit;color:#9A938C}
.ml-hd.q h2 b{color:#F26B1D}
.ml-hd p{margin:12px 0 0;max-width:46ch;font-size:clamp(15px,1.2vw,18px);line-height:1.5;color:#6B6672}
.ml-st{display:flex;gap:8px;max-width:380px}
.ml-st div{flex:1;min-width:0;padding:12px 10px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 20px 40px -32px rgba(20,18,24,.5)}
.ml-st small{display:block;font-size:12px;font-weight:700;color:#6B6672}
.ml-st b{display:block;margin-top:2px;font-size:20px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#B91C1C;transition:color .4s}
.ml7.good .ml-st b{color:#16A34A}
.ml-cv{position:relative;flex:1;height:100%;min-width:0;display:flex;flex-direction:column}
.ml-wr{position:relative;flex:1;min-height:0}
.ml-cn{position:absolute;left:0;top:0;width:760px;height:1150px;transform-origin:0 0}
.ml-cn *{box-sizing:border-box}
/* liens */
.ml-ln{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ml-ln path{fill:none;stroke-width:3.5;stroke-linecap:round;transition:opacity .6s,stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1)}
.ml-ln .l1,.ml-ln .l2,.ml-ln .l3{stroke:#C9C1B8;stroke-dasharray:9 10;opacity:0}
.ml7.s-l1 .l1,.ml7.s-l2 .l2,.ml7.s-l3 .l3{opacity:1;animation:mlDash 1.2s linear infinite}
@keyframes mlDash{to{stroke-dashoffset:-38}}
.ml7.s-x1 .l1,.ml7.s-x2 .l2,.ml7.s-x2 .l3{opacity:0}
.ml-ln .lq{stroke:url(#none);stroke:#F26B1D;stroke-width:6;stroke-dasharray:1200;stroke-dashoffset:1200;opacity:0}
.ml7.s-lq .lq{opacity:1;stroke-dashoffset:0}
/* cartes carrées */
.ml-n{position:absolute;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:22px;border-radius:32px;background:#fff;box-shadow:0 34px 60px -38px rgba(20,18,24,.5),0 0 0 1px #ECE7E1;opacity:0;transform:translateY(40px) scale(.9);filter:blur(8px);transition:opacity .6s,transform .9s cubic-bezier(.22,1,.36,1),filter .6s,box-shadow .5s}
.ml-n .tx b{display:block;font-size:22px;letter-spacing:-.02em}
.ml-n .tx small{display:block;margin-top:4px;font-size:14px;color:#6B6672}
.n-an{left:160px;top:0;width:280px}
.n-ag{left:330px;top:270px;width:260px}
.n-li{left:170px;top:540px;width:260px}
.n-sc{left:230px;top:790px;width:360px;height:auto;padding:12px 12px 16px;gap:10px;border-radius:30px}
.ml7.s-an .n-an,.ml7.s-ag .n-ag,.ml7.s-li .n-li,.ml7.s-sc .n-sc{opacity:1;transform:none;filter:none}
.tile{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 26px -14px var(--sh)}
.tile svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.t-an{background:linear-gradient(135deg,#FB923C,#EA580C);--sh:rgba(234,88,12,.7)}
.t-ag{background:linear-gradient(135deg,#94A3B8,#475569);--sh:rgba(71,85,105,.7)}
.t-li{background:linear-gradient(135deg,#A78BFA,#6D28D9);--sh:rgba(109,40,217,.7)}
.n-an .ad{position:absolute;right:-14px;top:-14px;width:64px;height:64px;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px #fff,0 16px 30px -12px rgba(190,24,93,.6);transform:rotate(8deg)}
.n-an .ad img{width:100%;height:100%;object-fit:cover}
.ml-n .tg{position:absolute;right:-12px;top:-12px;padding:7px 11px;border-radius:99px;background:#FEE2E2;color:#B91C1C;font-size:13px;font-weight:900}
.ml-n .lay{position:absolute;left:16px;top:16px;padding:5px 10px;border-radius:99px;background:#F4F1EC;color:#8A8399;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* croix */
.xx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s}
.xx::before,.xx::after{content:"";position:absolute;left:50%;top:50%;width:110%;height:7px;border-radius:7px;background:#EF4444;transform:translate(-50%,-50%) rotate(30deg) scaleX(0);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.xx::after{transform:translate(-50%,-50%) rotate(-30deg) scaleX(0);transition-delay:.12s}
.ml7.s-x1 .n-ag .xx,.ml7.s-x2 .n-li .xx,.ml7.s-x2 .ml-ct .xx{opacity:1}
.ml7.s-x1 .n-ag .xx::before,.ml7.s-x2 .n-li .xx::before,.ml7.s-x2 .ml-ct .xx::before{transform:translate(-50%,-50%) rotate(30deg) scaleX(1)}
.ml7.s-x1 .n-ag .xx::after,.ml7.s-x2 .n-li .xx::after,.ml7.s-x2 .ml-ct .xx::after{transform:translate(-50%,-50%) rotate(-30deg) scaleX(1)}
.ml7.s-x1 .n-ag,.ml7.s-x2 .n-li,.ml7.s-x2 .ml-ct{opacity:0;filter:blur(6px);transition:opacity .45s .4s,transform .7s .4s cubic-bezier(.5,0,.75,0),filter .45s .4s}
.ml7.s-x1 .n-ag{transform:translateX(140px) scale(.85)}
.ml7.s-x2 .n-li{transform:translateX(-140px) scale(.85)}
.ml7.s-x2.s-ct .ml-ct{opacity:0;transform:translateX(140px) rotate(5deg) scale(.85)}
/* écran */
.n-sc .ph{position:relative;width:100%;aspect-ratio:16/7;border-radius:20px;overflow:hidden}
.n-sc .ph>img{width:100%;height:100%;object-fit:cover;display:block}
.n-sc .scr{position:absolute;overflow:hidden;background:#000}
.n-sc .scr img{width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.2);transition:opacity .6s,transform .8s}
.ml7.s-live .n-sc .scr img{opacity:1;transform:none}
.n-sc .lv{position:absolute;right:10px;top:10px;display:flex;align-items:center;gap:5px;padding:5px 9px;border-radius:99px;background:#EF4444;color:#fff;font-size:11px;font-weight:900;letter-spacing:.08em;opacity:0;transform:scale(.6);transition:.4s .3s cubic-bezier(.3,1.6,.5,1)}
.n-sc .lv i{width:6px;height:6px;border-radius:50%;background:#fff;animation:mlBl 1s infinite}
@keyframes mlBl{50%{opacity:.25}}
.ml7.s-live .n-sc .lv{opacity:1;transform:none}
.ml7.s-live .n-sc{box-shadow:0 0 0 4px #F26B1D,0 30px 70px -30px rgba(242,107,29,.7)}
.n-sc .tx b{font-size:18px}.n-sc .tx small{font-size:13px}
.n-sc .cd{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s,opacity .5s}
.n-sc .cd span{padding:6px 11px;border-radius:99px;background:#ECFDF5;color:#047857;font-size:13px;font-weight:700}
.ml7.s-cond .n-sc .cd{max-height:80px;opacity:1}
/* bulle + contrat */
.ml-b{position:absolute;left:0;top:300px;padding:13px 15px;border-radius:16px 16px 4px 16px;background:#141218;color:#fff;font-size:15px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(10px) scale(.9);transition:.45s cubic-bezier(.3,1.4,.5,1)}
.ml7.s-b1:not(.s-x1) .ml-b{opacity:1;transform:none}
.ml-ct{position:absolute;left:470px;top:560px;width:240px;padding:18px;border-radius:20px;background:#FFFBEB;box-shadow:0 26px 50px -26px rgba(20,18,24,.5),0 0 0 1px #F3E8C8;opacity:0;transform:translateY(-20px) rotate(5deg) scale(.9);transition:opacity .5s,transform .8s cubic-bezier(.22,1,.36,1)}
.ml-ct b{display:block;font-size:15px}
.ml-ct small{display:block;font-size:12px;color:#92400E;margin-top:2px}
.ml-ct i{display:block;height:6px;border-radius:6px;background:#F1E4C3;margin-top:8px}
.ml-ct i.s{width:60%}
.ml-ct .cc{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.ml-ct .cc span{padding:4px 9px;border-radius:99px;background:#FDE68A;font-size:11px;font-weight:700;color:#78350F}
.ml7.s-ct .ml-ct{opacity:1;transform:rotate(5deg)}
/* QTouch */
.ml-q{position:absolute;left:170px;top:440px;width:260px;padding:26px 20px 18px;border-radius:30px;background:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;transform:scale(.7);box-shadow:0 0 0 3px #F26B1D,0 30px 80px -20px rgba(242,107,29,.65);transition:opacity .35s,transform .35s;z-index:5}
.ml-q img{height:48px;width:auto}
.ml-q small{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#F26B1D}
.ml7.s-qt .ml-q{opacity:1;transform:none;transition:opacity .5s .55s,transform .8s .55s cubic-bezier(.3,1.4,.5,1)}
/* la pub voyage le long du trait direct */
.ml-pl{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:#F26B1D;box-shadow:0 0 0 8px rgba(242,107,29,.25),0 0 26px #F26B1D;opacity:0;z-index:6;offset-path:path("M300 200 L300 790");offset-rotate:0deg}
.ml7.s-pub:not(.s-live) .ml-pl{animation:mlPub 1.3s cubic-bezier(.6,0,.3,1) infinite}
@keyframes mlPub{0%{opacity:0;offset-distance:0%}10%{opacity:1}90%{opacity:1}100%{opacity:0;offset-distance:100%}}
@media(prefers-reduced-motion:reduce){.ml7 *{animation:none!important}}

/* v4 : trait direct bien droit, chiffres à droite de l'animation, pas d'étiquette « Avec QTouch » */
.n-sc{left:120px!important}
.ml-hd.q .ml-k{display:none}

/* carte écran : sans pastilles (prix, horaires, thèmes), photo plus grande */
.n-sc{padding:8px 8px 14px!important;gap:8px!important}
.n-sc .ph{aspect-ratio:16/9!important;border-radius:22px!important}
.n-sc .cd{display:none!important}

/* v5 cadrage : le JS (fit) choisit 2 colonnes (titre + chiffres | schéma) ou empilé (titre / schéma / chiffres)
   selon ce qui donne le schéma le plus grand, et centre le schéma dans .ml-wr à partir de sa vraie boîte englobante. */
.ml7 .ml-st.ml-st{position:static!important;transform:none!important;left:auto!important;right:auto!important;width:auto!important;flex-direction:row!important;z-index:auto}
.ml7.ml-stk .ml-pin{flex-direction:column;align-items:stretch;gap:14px;padding-bottom:16px}
.ml7.ml-stk .ml-l{width:auto}
.ml7.ml-stk .ml-hd h2{font-size:clamp(26px,3.6vw,40px)}
.ml7.ml-stk .ml-hd p{max-width:60ch;font-size:clamp(14px,1.8vw,17px)}
.ml7.ml-stk .ml-cv{height:auto;flex:1;min-height:0}
.ml7.ml-stk .ml-st.ml-st{flex:none;align-self:center;width:min(100%,420px)!important;max-width:none;margin-top:12px}
.ml-hd{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ml7 .ml-st div{padding:12px 6px}
.ml7 .ml-st b{white-space:nowrap;font-size:clamp(16px,1.45vw,20px)}
.ml7 .ml-st small{white-space:nowrap}

/* chiffres sous le schéma (colonne de droite) */
.ml7 .ml-cv>.ml-st.ml-st{flex:none;align-self:center;width:min(100%,420px)!important;max-width:none;margin-top:12px}