/* Séance guidée d'une routine (#tpl-start-overlay) — refonte visuelle.
   CSS uniquement : mêmes champs, mêmes coches, mêmes boutons, mêmes
   gestionnaires. Préfixe « html body » pour passer devant
   session-complete-local.css sans !important. Aucune classe n'est ajoutée
   aux lignes de série (un test exige « tplset-row checked » exact). Le bas
   d'écran reste compact (< 150 px, vérifié par les tests). */

html body #tpl-start-overlay .runner-box{position:relative;isolation:isolate;background:radial-gradient(90% 30% at 50% 0%,rgba(var(--accent-rgb),.2),transparent 70%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23fff' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E") 0 0/28px 50px,linear-gradient(180deg,#121216,#09090b 45%)}

/* ── En-tête ── */
html body #tpl-start-overlay .runner-head{background:linear-gradient(180deg,rgba(18,18,22,.96),rgba(12,12,15,.92));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
html body #tpl-start-overlay .runner-title{font:900 28px/1 'Barlow Condensed',sans-serif;letter-spacing:.3px;text-transform:uppercase;color:#f7f3ee}
html body #tpl-start-overlay .runner-prog-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 2px rgba(0,0,0,.5)}
html body #tpl-start-overlay .runner-prog-bar i{display:block;height:100%;border-radius:inherit;transform-origin:0 50%;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 12px rgba(var(--accent-rgb),.7)}
html body #tpl-start-overlay .runner-prog-txt{color:#fff;letter-spacing:1.2px}

/* Chronos */
html body #tpl-start-overlay .runner-live-stat{position:relative;overflow:hidden;min-height:58px;padding:9px 12px 9px 40px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
html body #tpl-start-overlay .runner-live-stat::before{content:'';position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M9.5 2.5h5'/%3E%3C/svg%3E") center/contain no-repeat}
html body #tpl-start-overlay .runner-rest-stat::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M17 8a7 7 0 1 0 2 5M19 3v5h-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M17 8a7 7 0 1 0 2 5M19 3v5h-5'/%3E%3C/svg%3E")}
html body #tpl-start-overlay .runner-live-stat b{font-size:24px;color:#fff}
html body #tpl-start-overlay .runner-live-stat span{color:#a29d9a}
html body #tpl-start-overlay .runner-rest-stat.resting{border-color:transparent;background:radial-gradient(120% 120% at 0% 0%,rgba(var(--accent-rgb),.3),transparent 70%) padding-box,linear-gradient(170deg,#21160f,#140f0c) padding-box,linear-gradient(140deg,#ffe2cf,var(--accent) 50%,var(--accent2)) border-box;border:1px solid transparent;box-shadow:0 0 22px rgba(var(--accent-rgb),.3);animation:rhRest 2s ease-in-out infinite}
html body #tpl-start-overlay .runner-rest-stat.resting b{color:#fff;text-shadow:0 0 14px rgba(var(--accent-rgb),.8)}
html body #tpl-start-overlay .runner-rest-stat.resting span{color:var(--accent-soft)}
html body #tpl-start-overlay .runner-rest-plus{border-radius:16px;background:rgba(var(--accent-rgb),.14);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.45);border-color:transparent;color:#fff;font-size:13px}

/* ── Cartes d'exercice ── */
html body #tpl-start-overlay .runner-body .tpl-ex-card{border-radius:22px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(170deg,rgba(255,255,255,.05),rgba(255,255,255,.012)),#0f0f12;box-shadow:0 12px 26px rgba(0,0,0,.3)}
html body #tpl-start-overlay .runner-body .tpl-ex-card.active{border:1px solid transparent;background:radial-gradient(100% 40% at 50% 0%,rgba(var(--accent-rgb),.16),transparent 70%) padding-box,linear-gradient(170deg,#18181d,#0f0f12) padding-box,linear-gradient(150deg,rgba(var(--accent-rgb),.85),rgba(255,255,255,.08) 40%,rgba(255,255,255,.05) 70%,rgba(var(--accent-rgb),.5)) border-box;box-shadow:0 18px 40px rgba(0,0,0,.42),0 0 30px rgba(var(--accent-rgb),.14)}
html body #tpl-start-overlay .runner-body .tpl-ex-card.done{border-color:rgba(34,197,94,.35);background:linear-gradient(170deg,rgba(34,197,94,.1),rgba(34,197,94,.02)),#0f0f12}
html body #tpl-start-overlay .tpl-ex-card-top{min-height:76px;padding:12px 14px}
html body #tpl-start-overlay .tpl-ex-thumb{flex-basis:56px;width:56px;height:56px;border-radius:16px;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45),0 8px 16px rgba(0,0,0,.45)}
html body #tpl-start-overlay .tpl-ex-card.done .tpl-ex-thumb{box-shadow:0 0 0 2px rgba(34,197,94,.55),0 8px 16px rgba(0,0,0,.45)}
html body #tpl-start-overlay .tpl-ex-toggle .tpl-ex-card-name{font:900 22px/1.02 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.2px;color:#fff}
html body #tpl-start-overlay .tpl-last-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#d9d4cf;font-size:12px}
html body #tpl-start-overlay .tpl-last-badge::before{content:'';width:12px;height:12px;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7M3 4v5h5M12 8v4l3 2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7M3 4v5h5M12 8v4l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
html body #tpl-start-overlay .tpl-last-badge.first{background:rgba(34,197,94,.1);box-shadow:inset 0 0 0 1px rgba(34,197,94,.35);color:#86efac}
html body #tpl-start-overlay .tpl-last-badge.first::before{background:#22c55e}

/* Repos et charge : pastilles compactes */
html body #tpl-start-overlay .tpl-ex-rest{border-color:rgba(255,255,255,.06)}
html body #tpl-start-overlay .tpl-ex-rest button,html body #tpl-start-overlay .tpl-weight-tools button{border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:800}
html body #tpl-start-overlay .tpl-ex-rest button:last-child{color:#fff;background:rgba(var(--accent-rgb),.16);border-color:rgba(var(--accent-rgb),.5)}
html body #tpl-start-overlay .tpl-weight-tools{border-radius:16px;background:rgba(255,255,255,.03)}

/* Lignes de série */
html body #tpl-start-overlay .tplset-head span{color:color-mix(in srgb,var(--accent) 45%,var(--muted));letter-spacing:1.4px}
html body #tpl-start-overlay .tplset-row{border-radius:16px;transition:background .25s}
html body #tpl-start-overlay .tplset-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);color:#d9d4cf;font-weight:800}
html body #tpl-start-overlay .tplset-in{border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.4);box-shadow:inset 0 2px 8px rgba(0,0,0,.4)}
html body #tpl-start-overlay .tplset-in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25),inset 0 2px 8px rgba(0,0,0,.4)}
html body #tpl-start-overlay .tplset-in input{font:900 26px/1 'Barlow Condensed',sans-serif;color:#fff}
html body #tpl-start-overlay .tplset-check{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);color:rgba(255,255,255,.4);font-size:18px}
html body #tpl-start-overlay .tplset-check[aria-pressed="true"]{border-color:transparent;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff;box-shadow:0 0 16px rgba(34,197,94,.55)}
html body #tpl-start-overlay .tplset-row.checked{background:linear-gradient(90deg,rgba(34,197,94,.16),rgba(34,197,94,.04))}
html body #tpl-start-overlay .tplset-row.checked .tplset-num{background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff}
html body #tpl-start-overlay .tplset-row.checked .tplset-in{border-color:rgba(34,197,94,.3)}
html body #tpl-start-overlay .tplset-help{color:#8f8a86}

/* Actions de l'exercice */
html body #tpl-start-overlay .tplset-add{border-radius:16px;border:1px dashed rgba(255,255,255,.18);background:transparent;color:#d9d4cf}
html body #tpl-start-overlay .tpl-ex-validate{position:relative;overflow:hidden;border:0;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.28),transparent 50%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent) 50%,color-mix(in srgb,var(--accent) 70%,#000));color:#fff;box-shadow:0 12px 26px rgba(var(--accent-rgb),.42),inset 0 1px 0 rgba(255,255,255,.35)}
html body #tpl-start-overlay .tpl-ex-validate::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);transform:translateX(-120%);animation:rhShine 3.8s cubic-bezier(.4,0,.2,1) infinite 1s;pointer-events:none}
html body #tpl-start-overlay .tpl-ex-saved{color:#a7e9be}
html body #tpl-start-overlay .tpl-ex-saved b{display:inline-grid;place-items:center;width:22px;height:22px;margin-right:6px;border-radius:50%;background:linear-gradient(135deg,#4ade80,#16a34a);color:#fff}

/* ── Bas d'écran ── */
html body #tpl-start-overlay .runner-foot{background:linear-gradient(180deg,rgba(12,12,15,.86),rgba(9,9,11,.98));border-top:1px solid rgba(255,255,255,.06)}
html body #tpl-start-overlay .runner-foot .tpl-pts-total-v{font-size:26px;background:linear-gradient(180deg,#fff 20%,color-mix(in srgb,var(--accent) 60%,#fff));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
html body #tpl-start-overlay .runner-foot .tpl-pts-total-l{color:color-mix(in srgb,var(--accent) 55%,#fff)}
html body #tpl-start-overlay .runner-foot .session-cancel{border-radius:14px}
html body #tpl-start-overlay .runner-foot #tpl-start-btn{position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(120% 140% at 100% 0%,rgba(255,255,255,.25),transparent 50%),linear-gradient(135deg,color-mix(in srgb,var(--accent) 72%,#fff),var(--accent) 50%,color-mix(in srgb,var(--accent) 70%,#000));box-shadow:0 12px 28px rgba(var(--accent-rgb),.42),inset 0 1px 0 rgba(255,255,255,.35)}
html body #tpl-start-overlay .runner-foot #tpl-start-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.32) 50%,transparent 65%);transform:translateX(-120%);animation:rhShine 4.4s cubic-bezier(.4,0,.2,1) infinite 2s;pointer-events:none}

@keyframes rhRest{0%,100%{box-shadow:0 0 16px rgba(var(--accent-rgb),.22)}50%{box-shadow:0 0 30px rgba(var(--accent-rgb),.45)}}
@keyframes rhShine{0%{transform:translateX(-120%)}40%,100%{transform:translateX(120%)}}

@media(max-width:360px){
  html body #tpl-start-overlay .runner-title{font-size:23px}
  html body #tpl-start-overlay .tplset-in input{font-size:22px}
  html body #tpl-start-overlay .tplset-check{width:38px;height:38px}
}
@media(prefers-reduced-motion:reduce){
  html body #tpl-start-overlay *,html body #tpl-start-overlay *::before,html body #tpl-start-overlay *::after{animation:none!important}
}

/* Champs numériques sans flèches natives ; exercice validé en vert, lisible. */
html body #tpl-start-overlay .tplset-in input::-webkit-inner-spin-button,html body #tpl-start-overlay .tplset-in input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
html body #tpl-start-overlay .tplset-in input{-moz-appearance:textfield;appearance:textfield}
html body #tpl-start-overlay .tpl-ex-card.just-validated::after{background:linear-gradient(135deg,#4ade80,#16a34a);box-shadow:0 0 18px rgba(34,197,94,.6)}
html body #tpl-start-overlay .runner-body .tpl-ex-card.done{opacity:1}
html body #tpl-start-overlay .tpl-ex-card.done .tpl-ex-card-name{color:#d9f5e2}