/* Vendre landing · sections 4-7. Markup: vendre-more.html, reveal/tilt: vendre-more.js. All classes are tmx- prefixed on purpose: the page has generic .btn/.cta/.p/.main/.car rules. */
.tmx{--o:#FF5400;--k:#0B0F14;--s:#F5F3EE;--m:#5B6470;--l:#E3E1DA;--li:#40FF00;font-family:'Manrope',system-ui,sans-serif;color:var(--k)}
.tmx *{box-sizing:border-box}
.tmx-sec{max-width:1080px;margin:0 auto;padding:clamp(48px,7vw,104px) 20px;border-top:1px solid var(--l)}
.tmx-over{margin:0 0 .5em;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--m)}
.tmx-h{margin:0 0 clamp(24px,4vw,44px);font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.035em;line-height:1.04}
.tmx-h span{color:var(--m)}.tmx-h.tmx-c{text-align:center}
.tmx-rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .8s cubic-bezier(.3,1.2,.4,1)}
.tmx-rv.tmx-in{opacity:1;transform:none}
/* 4 */
.tmx-vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tmx-side{background:#fff;border-radius:26px;padding:clamp(18px,2.4vw,28px);box-shadow:0 18px 44px rgba(11,15,20,.07)}
.tmx-side.tmx-paper{background:#ECE9E2;box-shadow:none}
.tmx-side .tmx-lbl{display:inline-block;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:6px 12px;background:#fff;color:var(--m)}
.tmx-side.tmx-stk .tmx-lbl{background:var(--o);color:var(--k)}
.tmx-art{position:relative;height:clamp(200px,23vw,250px);margin:12px 0 14px;border-radius:18px;overflow:hidden;background:#E4E0D7}
.tmx-art .tmx-car{position:absolute;left:50%;top:10%;width:128%;transform:translateX(-50%)}
.tmx-art .tmx-car img{width:100%;display:block}
.tmx-art .tmx-sign{position:absolute;left:50%;top:17.6%;width:22.5%;aspect-ratio:1.42;transform:translate(-50%,-50%) rotate(-1.5deg);background:#fff;border:2px solid #fff;border-radius:2px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);display:flex;flex-direction:column;overflow:hidden}
.tmx-art .tmx-sign b{flex:0 0 46%;display:flex;align-items:center;justify-content:center;background:#D5352B;color:#fff;font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(12px,1.55vw,19px);letter-spacing:.01em;white-space:nowrap}
.tmx-art .tmx-sign span{flex:1;display:flex;align-items:center;justify-content:center;font-family:'Caveat',cursive;font-weight:700;color:#1B2A6B;font-size:clamp(14px,1.75vw,22px);white-space:nowrap;
  background:repeating-linear-gradient(180deg,transparent 0 30%,rgba(213,53,43,.18) 30% calc(30% + 1px),transparent calc(30% + 1px) 60%)}
.tmx-art .tmx-sk{position:absolute;inset-inline-start:66%;top:21%;width:17%;transform:translate(-50%,-50%) rotate(-1deg);filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.tmx-art .tmx-sk svg{width:100%;display:block}
.tmx-art .tmx-glass{position:absolute;inset-inline-start:14%;inset-inline-end:14%;top:6.5%;height:22.5%;border-radius:4px;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 26%,rgba(255,255,255,.28) 38%,rgba(255,255,255,0) 50%,rgba(255,255,255,.12) 62%,rgba(255,255,255,0) 70%)}
.tmx-call,.tmx-msg{position:absolute;display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding-block:7px 7px;padding-inline:7px 12px;font-weight:800;font-size:12.5px;white-space:nowrap;box-shadow:0 10px 22px rgba(11,15,20,.14)}
.tmx-call i,.tmx-msg i{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}.tmx-call i svg,.tmx-msg i svg{width:60%;height:60%}
.tmx-call i{background:#D0161F;color:#fff}
.tmx-c1{inset-inline-end:2%;top:12%}.tmx-c2{inset-inline-start:2%;bottom:10%}
.tmx-side.tmx-in .tmx-call{animation:tmxRing 2.6s ease-in-out infinite}.tmx-side.tmx-in .tmx-c2{animation-delay:1.3s}
@keyframes tmxRing{0%,70%,100%{transform:none}74%{transform:rotate(-5deg)}78%{transform:rotate(5deg)}82%{transform:rotate(-4deg)}86%{transform:rotate(3deg)}}
.tmx-msg i{background:#25D366}.tmx-m2 i{background:var(--li);color:var(--k)}
.tmx-m1{inset-inline-end:0;top:6%;opacity:0;transform:translateX(20px)}.tmx-m2{inset-inline-start:2%;bottom:6%;opacity:0;transform:translateX(-20px)}
.tmx-side.tmx-in .tmx-msg{opacity:1;transform:none;transition:all .7s cubic-bezier(.3,1.4,.4,1) .6s}.tmx-side.tmx-in .tmx-m2{transition-delay:1s}
.tmx-side ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.tmx-side li{display:flex;gap:12px;align-items:flex-start}
.tmx-side li>i{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:1px}.tmx-side li>i svg{width:60%;height:60%}
.tmx-side li.tmx-ko>i{background:#F4D6D6;color:#B3261E}.tmx-side li.tmx-ok>i{background:var(--li);color:var(--k)}
.tmx-side li b{display:block;font-weight:800;font-size:15px}.tmx-side li small{display:block;font-size:14px;color:var(--m)}
/* 5 */
.tmx-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.tmx-lead{font-size:17px;line-height:1.55;color:var(--m);margin:-12px 0 18px;max-width:38ch}
.tmx-pts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tmx-pts li{font-size:15px;color:var(--m);padding-inline-start:18px;position:relative}.tmx-pts li::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--o)}
.tmx-pts b{color:var(--k)}
.tmx-buyer{position:relative;justify-self:center;width:min(100%,400px);background:#fff;border-radius:30px;padding:12px;box-shadow:0 30px 70px rgba(11,15,20,.16)}
.tmx-buyer.tmx-in{animation:tmxFloat 6s ease-in-out infinite 1s}
@keyframes tmxFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.tmx-scanned{position:absolute;inset-inline-start:-14px;top:22px;z-index:2;background:var(--k);color:var(--s);font-weight:800;font-size:12px;border-radius:999px;padding:7px 12px;transform:rotate(-4deg)}
.tmx-gal .tmx-main{position:relative;background:var(--s);border-radius:20px;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.tmx-gal .tmx-main img{width:84%;height:84%;object-fit:contain}
.tmx-gal .tmx-cnt{position:absolute;inset-inline-end:10px;bottom:10px;background:var(--k);color:#fff;font-weight:700;font-size:11px;border-radius:999px;padding:3px 9px}
.tmx-gal .tmx-th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.tmx-gal .tmx-th i{background:var(--s);border-radius:12px;aspect-ratio:1.4;display:flex;align-items:center;justify-content:center}.tmx-gal .tmx-th img{width:80%;height:80%;object-fit:contain}
.tmx-buyer .tmx-bd{padding:12px 6px 4px}
.tmx-buyer .tmx-pr{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tmx-buyer .tmx-pr b{font-family:'Sora',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;margin-inline-end:4px}
.tmx-buyer .tmx-p{font-weight:800;font-size:11px;border-radius:999px;padding:4px 9px}.tmx-p.tmx-ok{background:var(--li)}.tmx-p.tmx-am{background:#FFBD00}
.tmx-buyer h3{margin:8px 0 2px;font-size:16px;font-weight:800}.tmx-buyer .tmx-mt{display:block;font-size:13px;color:var(--m)}
.tmx-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.tmx-facts span{background:var(--s);border-radius:12px;padding:8px 10px}.tmx-facts small{display:block;font-size:11px;font-weight:700;color:var(--m)}.tmx-facts b{font-size:14px}
.tmx-cta{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;border-radius:14px;background:var(--o);color:var(--k);font-family:'Sora',sans-serif;font-weight:800;font-size:15px;text-decoration:none}
.tmx-cta i{width:26px;height:26px;border-radius:50%;background:var(--k);display:flex;align-items:center;justify-content:center}.tmx-cta i svg{width:60%;height:60%}
/* 6 */
.tmx-faq{display:flex;flex-direction:column;gap:10px;max-width:760px;margin:0 auto}
.tmx-over.tmx-c{text-align:center}
/* Every section intro (label + title) is centred; nested labels inside cards keep their own alignment. */
.tmx-sec>.tmx-over,.tmx-sec>.tmx-h{text-align:center}

.tmx-q{background:#fff;border-radius:18px;padding:0 20px;box-shadow:0 8px 24px rgba(11,15,20,.05)}
.tmx-q summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:800;font-size:16px}
.tmx-q summary::-webkit-details-marker{display:none}
.tmx-q summary i{flex:none;width:26px;height:26px;border-radius:50%;background:var(--s);position:relative;transition:transform .3s,background .3s}
.tmx-q summary i::before,.tmx-q summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2.5px;margin-block:-1.25px 0;margin-inline:-5.5px 0;border-radius:2px;background:var(--k)}
.tmx-q summary i::after{transform:rotate(90deg);transition:transform .3s}
.tmx-q[open] summary i{background:var(--o)}.tmx-q[open] summary i::after{transform:rotate(0)}
.tmx-q p{margin:0 0 18px;font-size:15px;line-height:1.6;color:var(--m);max-width:62ch}
/* 7 */
.tmx-fin{text-align:center;background:radial-gradient(120% 80% at 50% 38%,#fff 0%,var(--s) 62%);border-radius:0}
.tmx-stage{position:relative;max-width:860px;margin:10px auto 20px;padding:56px 0 64px}
.tmx-big{width:min(76%,620px);margin:0 auto;perspective:1400px}
.tmx-tilt{transform-style:preserve-3d;filter:drop-shadow(0 40px 50px rgba(11,15,20,.18)) drop-shadow(0 8px 14px rgba(11,15,20,.12));will-change:transform;transform:rotateX(18deg) rotateY(-14deg) rotateZ(-3deg)}
.tmx-tilt svg{width:100%;display:block}
.tmx-co{position:absolute;display:flex;flex-direction:column;align-items:flex-start;text-align:start;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 12px 30px rgba(11,15,20,.1);opacity:0;transform:translateY(10px) scale(.94);transition:all .6s cubic-bezier(.3,1.4,.4,1)}
.tmx-co b{font-family:'Sora',sans-serif;font-weight:800;font-size:15px}.tmx-co small{font-size:12.5px;color:var(--m)}.tmx-co small a{color:var(--o);font-weight:700;text-decoration:none}
.tmx-co::after{content:"";position:absolute;width:44px;height:2px;background:var(--k);opacity:.35}
.tmx-co.tmx-a{inset-inline-start:0;top:8%}.tmx-co.tmx-a::after{inset-inline-end:-44px;top:50%}
.tmx-co.tmx-b{inset-inline-end:0;top:8%}.tmx-co.tmx-b::after{inset-inline-start:-44px;top:50%}
.tmx-co.tmx-c{inset-inline-start:0;bottom:8%}.tmx-co.tmx-c::after{inset-inline-end:-44px;top:50%}
.tmx-co.tmx-d{inset-inline-end:0;bottom:8%}.tmx-co.tmx-d::after{inset-inline-start:-44px;top:50%}
.tmx-stage.tmx-in .tmx-co{opacity:1;transform:none}.tmx-stage.tmx-in .tmx-co.tmx-b{transition-delay:.12s}.tmx-stage.tmx-in .tmx-co.tmx-c{transition-delay:.24s}.tmx-stage.tmx-in .tmx-co.tmx-d{transition-delay:.36s}
.tmx-opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:0 auto;text-align:start}
.tmx-opt{display:flex;align-items:center;gap:14px;background:#fff;border-radius:20px;padding:18px;box-shadow:0 10px 26px rgba(11,15,20,.06);border:2px solid transparent}
.tmx-opt.tmx-hl{border-color:var(--o)}
.tmx-opt>i{flex:none;width:44px;height:44px;border-radius:14px;background:var(--s);display:flex;align-items:center;justify-content:center}.tmx-opt>i svg{width:55%;height:55%}
.tmx-opt.tmx-hl>i{background:var(--o)}
.tmx-opt span{flex:1}.tmx-opt b{display:block;font-weight:800;font-size:16px}.tmx-opt small{display:block;font-size:13px;color:var(--m)}
.tmx-opt strong{font-family:'Sora',sans-serif;font-weight:800;font-size:18px;white-space:nowrap}
.tmx-go{margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tmx-btn{display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 34px;border-radius:16px;background:var(--o);color:var(--k);font-family:'Sora',sans-serif;font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 16px 32px rgba(255,84,0,.28)}
.tmx-btn:hover{background:#FF8104}
.tmx-go small{font-size:13px;color:var(--m);font-weight:600}
@media(max-width:820px){
  .tmx-vs,.tmx-two,.tmx-opts{grid-template-columns:1fr}
  .tmx-buyer{justify-self:stretch;width:100%}.tmx-scanned{inset-inline-start:10px}
  .tmx-stage{padding:10px 0 0}
  .tmx-big{width:92%}
  .tmx-co{position:static;opacity:1;transform:none}.tmx-co::after{display:none}
  .tmx-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tmx-stage .tmx-big{grid-column:1/-1;margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){.tmx *{transition:none !important;animation:none !important}.tmx-rv{opacity:1;transform:none}}
/* Integration: follows the "Comment ça marche" scenes inside .welcome-content (mobile: padded
   column; desktop: its own full-width row of the welcome grid). Sections keep the page edges. */
.tmx{text-align:start;margin-top:clamp(28px,4vw,56px)}
.tmx-sec{max-width:none;margin:0;padding-inline:0}
.tmx-fin{padding-inline:clamp(16px,3vw,40px)}
.tmx-btn{width:auto}
/* Arabic: the car artwork (paper sign, sticker on the rear window) is a picture and keeps its physical layout;
   the chat bubbles inside read right-to-left. */
[dir="rtl"] .tmx-art{direction:ltr}
[dir="rtl"] .tmx-art :is(.tmx-call,.tmx-msg){direction:rtl}