/* ClairPlay – page Tarifs (clair / sombre) */
.tf{--card:#fff;--line:#ededed;--fg:#07070b;--mut:#666;--soft:#f5f5f7;--page:#fff;--g:linear-gradient(90deg,#21ccee,#1470ef 33%,#6927da 71%,#f23d94)}
html[data-theme="dark"] .tf{--card:#121219;--line:rgba(255,255,255,.1);--fg:#f2f2f5;--mut:#a3a3b0;--soft:#1b1b24;--page:#0a0a0f}
.tf-conf{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.9fr);gap:28px;align-items:start}
.tf-build{display:flex;flex-direction:column;gap:18px}
.tf-step{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:24px}
.tf-step-h{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tf-num{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fg);color:var(--card);font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace}
.tf-step-h b{font-size:18px;color:var(--fg);letter-spacing:-.01em}
.tf-step-h>span:not(.tf-num){margin-left:auto;font-size:13px;color:var(--mut)}
/* écrans */
.tf-screens{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf-opt{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:16px;border:1.5px solid var(--line);background:var(--card);cursor:pointer;text-align:left;font:inherit;color:var(--fg);transition:transform .2s,border-color .2s,box-shadow .25s}
.tf-opt:hover{transform:translateY(-2px)}
.tf-opt:focus-visible{outline:3px solid #6927da;outline-offset:3px}
.tf-opt[aria-pressed="true"]{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--g) border-box;box-shadow:0 18px 40px -24px rgba(105,39,218,.7)}
.tf-opt>svg{flex:none;color:var(--fg)}
.tf-opt b{display:block;font-size:16px}
.tf-opt small{color:var(--mut);font-size:13px}
.tf-check{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;color:transparent;transition:.2s}
.tf-opt[aria-pressed="true"] .tf-check{border-color:transparent;background:var(--g);color:#fff}
/* durée : piste à 4 arrêts */
.tf-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);padding-top:6px}
.tf-rail{position:absolute;left:12.5%;right:12.5%;top:21px;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.tf-rail i{display:block;height:100%;width:0;border-radius:inherit;background:var(--g);transition:width .45s cubic-bezier(.2,.9,.25,1)}
.tf-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 4px 4px;border:0;background:none;cursor:pointer;font:inherit;color:var(--mut)}
.tf-stop:focus-visible{outline:3px solid #6927da;outline-offset:4px;border-radius:12px}
.tf-knob{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font:600 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--mut);transition:transform .3s cubic-bezier(.2,.9,.25,1.3),border-color .2s,background .2s,color .2s}
.tf-stop.is-done .tf-knob{border-color:#6927da;color:var(--fg)}
.tf-stop[aria-pressed="true"] .tf-knob{transform:scale(1.22);border-color:transparent;background:var(--fg);color:var(--card);box-shadow:0 0 0 4px var(--card),0 0 0 6px #6927da,0 12px 24px -8px rgba(105,39,218,.8)}
.tf-stop b{font-size:15px;color:var(--fg);margin-top:6px}
.tf-stop small{font-size:12.5px}
.tf-gift{display:inline-block;margin-top:2px;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:600;color:#6927da;background:rgba(105,39,218,.1)}
html[data-theme="dark"] .tf-gift{color:#c4a8ff;background:rgba(150,110,255,.16)}
.tf-gift.none{visibility:hidden}
/* bande des mois */
.tf-months{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tf-m{width:34px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;background:var(--fg);animation:tfPop .4s cubic-bezier(.2,.9,.25,1.3) both}
html[data-theme="dark"] .tf-m{color:#07070b}
.tf-m.bonus{background:var(--g);color:#fff;width:auto;padding:0 12px;gap:6px}
@keyframes tfPop{from{transform:scale(.5);opacity:0}}
.tf-months-t{margin:0 0 12px;color:var(--mut);font-size:15px}
.tf-months-t b{color:var(--fg)}
/* ticket */
.tf-ticket{position:sticky;top:110px;border-radius:26px;border:1.5px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#21ccee,#1470ef 35%,#6927da 70%,#f23d94) border-box;box-shadow:0 40px 80px -40px rgba(105,39,218,.6);color:var(--fg)}
.tf-glow{position:absolute;z-index:-1;left:10%;right:10%;bottom:-14px;height:34px;border-radius:99px;filter:blur(22px);opacity:.6;background:var(--g)}
.tf-t-top{padding:26px 26px 22px}
.tf-t-k{display:flex;justify-content:space-between;align-items:center;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.tf-t-name{margin:14px 0 2px;font-size:20px;font-weight:700;letter-spacing:-.01em}
.tf-t-sub{color:var(--mut);font-size:14px}
.tf-price{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.tf-price strong{font-size:58px;line-height:1;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tf-price span{color:var(--mut);font-size:15px}
.tf-eq{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font-size:14.5px;color:var(--mut)}
.tf-eq b{color:var(--fg);font-variant-numeric:tabular-nums}
.tf-save{padding:4px 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:#fff;background:var(--g)}
.tf-save[hidden]{display:none}
.tf-cut{position:relative;height:0;border-top:2px dashed var(--line);margin:0 22px}
.tf-cut::before,.tf-cut::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--page)}
.tf-cut::before{left:-36px}.tf-cut::after{right:-36px}
.tf-t-bot{padding:22px 26px 26px}
.tf-inc{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font-size:14px;color:var(--fg)}
.tf-inc li{display:flex;align-items:center;gap:8px}
.tf-inc svg{flex:none;color:#6927da}
html[data-theme="dark"] .tf-inc svg{color:#b79bff}
.tf-ticket .button-box{display:block;width:100%}
.tf-ticket .button-box .button{width:100%;justify-content:center;padding:16px 20px;font-size:16px}
.tf-try{display:block;margin-top:12px;text-align:center;padding:13px;border-radius:14px;border:1px solid var(--line);color:var(--fg);font-weight:600;font-size:15px;text-decoration:none;transition:background .2s}
.tf-try:hover{background:var(--soft)}
.tf-fine{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--mut)}
/* grille complète */
.tf-grid{margin-top:22px;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--card)}
.tf-row{display:grid;grid-template-columns:150px repeat(4,1fr)}
.tf-row+.tf-row{border-top:1px solid var(--line)}
.tf-row>*{padding:18px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:2px}
.tf-row>*:first-child{border-left:0}
.tf-head>*{font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--soft);padding-block:12px}
.tf-lab{font-weight:700;color:var(--fg);font-size:15px}
.tf-lab small{font-weight:400;color:var(--mut);font-size:12.5px}
.tf-cell{position:relative;text-decoration:none;color:var(--fg);transition:background .2s}
.tf-cell:hover{background:var(--soft)}
.tf-cell:focus-visible{outline:3px solid #6927da;outline-offset:-3px}
.tf-cell strong{font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tf-cell small{color:var(--mut);font-size:12.5px}
.tf-cell.best::after{content:"Meilleur prix";position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:99px;font-size:10.5px;font-weight:700;color:#fff;background:var(--g)}
.tf-cell.is-sel{box-shadow:inset 0 0 0 2px #6927da}
.tf-end{margin-top:26px;padding:34px 28px;border-radius:26px;text-align:center;color:#fff;background:radial-gradient(120% 140% at 0% 0%,#1470ef 0,transparent 55%),radial-gradient(120% 140% at 100% 100%,#f23d94 0,transparent 55%),#190f3a}
.tf-end h2{color:#fff;margin:0 0 8px}
.tf-end p{margin:0 auto 20px;max-width:520px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.6}
.tf-end a{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:14px;background:#fff;color:#07070b;font-weight:700;text-decoration:none;transition:transform .2s}
.tf-end a:hover{transform:translateY(-2px)}
@media (max-width:960px){.tf-conf{grid-template-columns:1fr}.tf-ticket{position:relative;top:0}}
@media (max-width:640px){
 .tf-step{padding:18px}.tf-screens{grid-template-columns:1fr}.tf-step-h>span:not(.tf-num){display:none}
 .tf-stop b{font-size:13.5px}.tf-stop small{font-size:11.5px}.tf-gift{font-size:10px;padding:3px 6px}
 .tf-price strong{font-size:48px}.tf-inc{grid-template-columns:1fr}
 .tf-grid{border:0;background:none;border-radius:0;overflow:visible;display:grid;gap:14px}
 .tf-head{display:none}
 .tf-row{grid-template-columns:1fr 1fr;border:1px solid var(--line)!important;border-radius:18px;overflow:hidden;background:var(--card)}
 .tf-row .tf-lab{grid-column:1/-1;background:var(--soft);padding-block:12px;flex-direction:row;align-items:baseline;gap:8px;justify-content:flex-start}
 .tf-row .tf-cell{border-top:1px solid var(--line)}
 .tf-row .tf-cell:nth-child(even){border-left:0}
}
@media (prefers-reduced-motion:reduce){.tf-m{animation:none}.tf-rail i,.tf-knob{transition:none}}