<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Mon Programme Sport</title>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #f4f5fa;
--card: #ffffff;
--card2: #f0f3ff;
--border: rgba(0,0,0,0.10);
--border2:rgba(0,0,0,0.18);
--text: #0d0f1a;
--muted: #8a8fa8;
--done-bg:#f0f7f0;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
background: var(--bg);
color: #0d0f1a;
font-family: 'Inter', sans-serif;
font-weight: 300;
min-height: 100vh;
max-width: 480px;
margin: 0 auto;
padding-bottom: 100px;
/* subtle grid bg */
background-image: none;
background-size: 32px 32px;
}
/* ── HEADER ── */
header {
padding: 44px 20px 18px;
text-align: center;
position: sticky;
top: 0;
z-index: 100;
background: rgba(255,255,255,0.97);
border-bottom: 1px solid var(--border);
}
.header-eyebrow {
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
header h1 {
font-family: 'Syne', sans-serif;
font-size: 1.6rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #1a1d2e 30%, #4a5580);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── TABS ── */
.tabs-wrap {
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
background: rgba(255,255,255,0.97);
border-bottom: 1px solid var(--border);
position: sticky;
top: 82px;
z-index: 99;
}
.tabs-wrap::-webkit-scrollbar { display: none; }
.tabs { display: flex; padding: 0 14px; min-width: max-content; }
.tab {
padding: 13px 13px;
font-size: 0.7rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color .2s, border-color .2s;
white-space: nowrap;
user-select: none;
font-family: 'Inter', sans-serif;
}
.tab.active { color: #0d0f1a; border-bottom-color: var(--accent); }
/* ── PAGES ── */
.page { display: none; padding: 20px 14px; }
.page.active { display: block; }
/* ── MOTIVATIONAL BANNER ── */
.motive-banner {
border-radius: 16px;
padding: 18px 20px;
margin-bottom: 18px;
position: relative;
overflow: hidden;
border: 1px solid var(--border);
background: var(--card2);
}
.motive-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%);
pointer-events: none;
}
.motive-banner::after {
content: '';
position: absolute;
top: -40px; right: -40px;
width: 120px; height: 120px;
border-radius: 50%;
background: color-mix(in srgb, var(--accent) 8%, transparent);
pointer-events: none;
}
.motive-day {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.motive-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
flex-shrink: 0;
}
.motive-day-name {
font-family: 'Syne', sans-serif;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: -0.02em;
color: #0d0f1a;
}
.motive-sub {
font-size: 0.68rem;
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 500;
margin-left: auto;
background: color-mix(in srgb, var(--accent) 12%, transparent);
padding: 3px 10px;
border-radius: 99px;
flex-shrink: 0;
}
.motive-quote {
font-size: 0.88rem;
color: #3a3e58;
line-height: 1.55;
font-style: italic;
position: relative;
padding-left: 14px;
border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
/* ── PROGRESS ── */
.progress-wrap {
height: 3px;
background: var(--border);
border-radius: 99px;
margin-bottom: 5px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 60%, white));
border-radius: 99px;
transition: width .5s cubic-bezier(.4,0,.2,1);
width: 0%;
box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
}
.progress-label {
font-size: 0.68rem;
color: var(--muted);
text-align: right;
margin-bottom: 16px;
}
/* ── BLOCKS ── */
.block {
background: var(--card);
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
margin-bottom: 12px;
transition: border-color .2s;
}
.block:hover { border-color: var(--border2); }
.block-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
background: rgba(0,0,0,0.025);
}
.block-header-icon { font-size: 0.95rem; }
.block-header-title {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--muted);
font-weight: 500;
}
.block-timing {
margin-left: auto;
font-size: 0.63rem;
color: var(--muted);
font-style: italic;
}
/* ── FOOD ── */
.food-item {
padding: 11px 16px;
font-size: 0.855rem;
color: #2a2e42;
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
gap: 10px;
}
.food-item:last-child { border-bottom: none; }
.food-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
opacity: 0.8;
}
/* ── EXERCISE ── */
.exercise-item {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 16px;
border-bottom: 1px solid var(--border);
transition: background .15s;
user-select: none;
}
.exercise-item:last-child { border-bottom: none; }
.exercise-item.done { background: var(--done-bg); }
.check-box {
width: 22px; height: 22px;
border-radius: 7px;
border: 1.5px solid rgba(255,255,255,0.1);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, border-color .2s, box-shadow .2s;
cursor: pointer;
background: rgba(0,0,0,0.03);
}
.exercise-item.done .check-box {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.check-icon { opacity:0; transform:scale(0.4); transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1); }
.exercise-item.done .check-icon { opacity:1; transform:scale(1); }
.exercise-name {
flex: 1;
font-size: 0.875rem;
color: #1a1d2e;
transition: color .2s;
cursor: pointer;
}
.exercise-item.done .exercise-name {
color: var(--muted);
text-decoration: line-through;
text-decoration-color: var(--muted);
}
.exercise-sets {
font-size: 0.7rem;
color: var(--accent);
font-weight: 500;
background: color-mix(in srgb, var(--accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
padding: 3px 9px;
border-radius: 99px;
white-space: nowrap;
flex-shrink: 0;
transition: opacity .2s;
}
.exercise-item.done .exercise-sets { opacity: 0.3; }
.info-btn {
width: 22px; height: 22px;
border-radius: 50%;
border: 1.5px solid rgba(255,255,255,0.1);
background: rgba(0,0,0,0.03);
color: var(--muted);
font-size: 0.68rem;
font-weight: 600;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: border-color .2s, color .2s, background .2s;
font-family: 'Inter', sans-serif;
}
.info-btn:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* ── MODAL ── */
.modal-overlay {
display: none;
position: fixed; inset: 0;
background: rgba(0,0,0,0.9);
z-index: 200;
align-items: flex-end;
justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 24px 24px 0 0;
width: 100%;
max-width: 480px;
padding: 0 0 44px;
animation: slideUp .3s cubic-bezier(.34,1.2,.64,1);
max-height: 92vh;
overflow-y: auto;
}
@keyframes slideUp { from{transform:translateY(70px);opacity:0} to{transform:translateY(0);opacity:1} }
.modal-handle { width:32px; height:4px; background:rgba(255,255,255,0.1); border-radius:99px; margin:14px auto 0; }
.modal-svg-wrap {
width: 100%;
background: #edf0f8;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.modal-body { padding: 18px 20px 0; }
.modal-title { font-family:'Syne',sans-serif; font-size:1.2rem; font-weight:700; margin-bottom:8px; }
.modal-sets {
display: inline-block;
font-size: 0.72rem;
color: var(--accent);
font-weight: 500;
background: color-mix(in srgb, var(--accent) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
padding: 4px 12px;
border-radius: 99px;
margin-bottom: 14px;
}
.modal-tip {
font-size: 0.83rem;
color: #4a4e68;
line-height: 1.65;
border-left: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
padding-left: 12px;
}
.modal-close {
display: block;
width: calc(100% - 40px);
margin: 22px auto 0;
padding: 14px;
background: rgba(0,0,0,0.05);
border: 1px solid var(--border);
border-radius: 14px;
color: #0d0f1a;
font-size: 0.88rem;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: background .2s;
}
.modal-close:hover { background: rgba(0,0,0,0.08); }
/* ── COMPLETE BADGE ── */
.complete-badge {
display: none;
text-align: center;
padding: 16px;
background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent);
border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
border-radius: 14px;
font-size: 0.88rem;
color: var(--accent);
margin-top: 14px;
animation: popIn .4s cubic-bezier(.34,1.56,.64,1);
font-weight: 500;
}
@keyframes popIn { from{transform:scale(0.9);opacity:0} to{transform:scale(1);opacity:1} }
/* ── RESET ── */
.reset-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
margin-top: 16px;
padding: 13px;
background: transparent;
border: 1px solid var(--border);
border-radius: 14px;
color: #6b7090;
font-size: 0.78rem;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: border-color .2s, color .2s;
}
.reset-btn:hover { color: #0d0f1a; border-color: var(--border2); }
/* ── ACCENT COLORS ── */
[data-color="green"] { --accent:#4ade80; }
[data-color="purple"] { --accent:#c084fc; }
[data-color="blue"] { --accent:#60a5fa; }
[data-color="yellow"] { --accent:#fbbf24; }
[data-color="red"] { --accent:#f87171; }
[data-color="violet"] { --accent:#a78bfa; }
[data-color="gray"] { --accent:#94a3b8; }
/* ── SVG ANIMATIONS ── */
@keyframes walk { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
@keyframes pull { 0%{transform:translateX(0)} 50%{transform:translateX(-14px)} 100%{transform:translateX(0)} }
@keyframes curl { 0%{transform:rotate(0deg)} 50%{transform:rotate(-55deg)} 100%{transform:rotate(0deg)} }
@keyframes press { 0%{transform:translateY(0)} 50%{transform:translateY(8px)} 100%{transform:translateY(0)} }
@keyframes lat { 0%{transform:rotate(0deg)} 50%{transform:rotate(35deg)} 100%{transform:rotate(0deg)} }
@keyframes plank { 0%{opacity:1} 50%{opacity:.6} 100%{opacity:1} }
@keyframes breathe { 0%{transform:scaleX(1)} 50%{transform:scaleX(1.04)} 100%{transform:scaleX(1)} }
@keyframes march { 0%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-4px) rotate(5deg)} 100%{transform:translateY(0) rotate(-5deg)} }
@keyframes ext { 0%{transform:rotate(0deg)} 50%{transform:rotate(50deg)} 100%{transform:rotate(0deg)} }
@keyframes row { 0%{transform:translateX(0)} 50%{transform:translateX(12px)} 100%{transform:translateX(0)} }
</style>
</head>
<body>
<header>
<div class="header-eyebrow">Semaine type · 7 jours</div>
<h1>Mon Programme 💪</h1>
</header>
<div class="tabs-wrap"><div class="tabs" id="tabs"></div></div>
<div id="pages"></div>
<!-- MODAL -->
<div class="modal-overlay" id="modal" onclick="closeModal(event)">
<div class="modal">
<div class="modal-handle"></div>
<div class="modal-svg-wrap" id="modal-svg"></div>
<div class="modal-body">
<div class="modal-title" id="modal-title"></div>
<div class="modal-sets" id="modal-sets"></div>
<div class="modal-tip" id="modal-tip"></div>
</div>
<button class="modal-close" onclick="document.getElementById('modal').classList.remove('open')">Fermer</button>
</div>
</div>
<script>
const svgs = {
"Tapis incliné":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="90" width="200" height="8" rx="4" fill="#dde0e8"/><rect x="20" y="90" width="200" height="8" rx="4" fill="none" stroke="#a8acb8" stroke-width="1"/><line x1="20" y1="98" x2="20" y2="50" stroke="#b8bcc8" stroke-width="2.5" stroke-linecap="round"/><line x1="220" y1="98" x2="220" y2="85" stroke="#b8bcc8" stroke-width="2.5" stroke-linecap="round"/><line x1="20" y1="50" x2="220" y2="85" stroke="#c4c8d4" stroke-width="2"/><line x1="50" y1="50" x2="50" y2="20" stroke="#a8acb8" stroke-width="1.5" stroke-linecap="round"/><line x1="190" y1="80" x2="190" y2="50" stroke="#a8acb8" stroke-width="1.5" stroke-linecap="round"/><line x1="50" y1="20" x2="190" y2="50" stroke="#a8acb8" stroke-width="1.5" stroke-linecap="round"/><g style="transform-origin:120px 88px;animation:walk 1s ease-in-out infinite"><ellipse cx="120" cy="68" rx="7" ry="9" fill="#4ade80" opacity=".85"/><circle cx="120" cy="56" r="6" fill="#c8a87a"/><line x1="120" y1="77" x2="113" y2="88" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round"/><line x1="120" y1="77" x2="127" y2="88" stroke="#4ade80" stroke-width="2.5" stroke-linecap="round"/><line x1="115" y1="63" x2="107" y2="72" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="125" y1="63" x2="133" y2="72" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/></g><text x="120" y="118" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Inclinaison 8–12%</text></svg>`,
"Tirage horizontal":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="30" width="20" height="80" rx="4" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><circle cx="20" cy="70" r="8" fill="#cccfd8" stroke="#a8acb8" stroke-width="1"/><line x1="28" y1="70" x2="100" y2="70" stroke="#a8acb8" stroke-dasharray="4 3" stroke-width="1"/><rect x="96" y="66" width="14" height="8" rx="3" fill="#bbbfc8" stroke="#a8acb8" stroke-width="1"/><g style="transform-origin:140px 70px;animation:pull 1.4s ease-in-out infinite"><rect x="120" y="55" width="30" height="30" rx="8" fill="#60a5fa" opacity=".85"/><circle cx="135" cy="48" r="7" fill="#c8a87a"/><line x1="120" y1="65" x2="110" y2="70" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/></g><rect x="115" y="85" width="80" height="10" rx="4" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="125" y="95" width="8" height="25" rx="2" fill="#cccfd8"/><rect x="177" y="95" width="8" height="25" rx="2" fill="#cccfd8"/><text x="120" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Serre les omoplates</text></svg>`,
"Tirage vertical":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="80" y="8" width="80" height="6" rx="3" fill="#cccfd8" stroke="#a8acb8" stroke-width="1"/><line x1="120" y1="14" x2="120" y2="38" stroke="#a8acb8" stroke-dasharray="4 3" stroke-width="1"/><rect x="82" y="9" width="16" height="5" rx="2" fill="#bbbfc8"/><rect x="142" y="9" width="16" height="5" rx="2" fill="#bbbfc8"/><g style="transform-origin:120px 70px;animation:pull 1.4s ease-in-out infinite"><line x1="102" y1="55" x2="92" y2="38" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><line x1="138" y1="55" x2="148" y2="38" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><rect x="107" y="55" width="26" height="28" rx="8" fill="#4ade80" opacity=".85"/><circle cx="120" cy="48" r="7" fill="#c8a87a"/></g><rect x="95" y="84" width="50" height="8" rx="3" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="105" y="92" width="6" height="22" rx="2" fill="#cccfd8"/><rect x="129" y="92" width="6" height="22" rx="2" fill="#cccfd8"/><text x="120" y="128" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Tire vers la poitrine</text></svg>`,
"Rowing":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="30" y="95" width="8" height="20" rx="2" fill="#bbbfc8"/><rect x="202" y="95" width="8" height="20" rx="2" fill="#bbbfc8"/><rect x="38" y="103" width="164" height="6" rx="3" fill="#cccfd8" stroke="#a8acb8" stroke-width="1"/><g style="transform-origin:120px 80px;animation:row 1.4s ease-in-out infinite"><line x1="110" y1="95" x2="103" y2="118" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><line x1="130" y1="95" x2="137" y2="118" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><rect x="100" y="70" width="40" height="26" rx="8" fill="#60a5fa" opacity=".85" transform="rotate(-25,120,83)"/><circle cx="100" cy="65" r="7" fill="#c8a87a"/><line x1="108" y1="78" x2="100" y2="103" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><line x1="130" y1="78" x2="140" y2="103" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/></g><text x="120" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Dos droit, 45°</text></svg>`,
"Gainage":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="100" width="200" height="4" rx="2" fill="#dde0ee"/><g style="animation:plank 2s ease-in-out infinite"><rect x="55" y="85" width="110" height="14" rx="7" fill="#f87171" opacity=".85"/><circle cx="50" cy="90" r="8" fill="#c8a87a"/><rect x="85" y="99" width="12" height="4" rx="2" fill="#c8a87a"/><rect x="115" y="99" width="12" height="4" rx="2" fill="#c8a87a"/><rect x="158" y="99" width="12" height="5" rx="2" fill="#c8a87a"/><line x1="50" y1="78" x2="170" y2="78" stroke="#f87171" stroke-width="1" stroke-dasharray="4 3" opacity=".4"/></g><text x="120" y="118" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Corps aligné · ventre contracté</text></svg>`,
"Yoga – mobilité + posture":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="30" y="108" width="180" height="4" rx="2" fill="#dde0ee"/><g style="transform-origin:120px 80px;animation:breathe 3s ease-in-out infinite"><line x1="105" y1="95" x2="75" y2="108" stroke="#c084fc" stroke-width="3" stroke-linecap="round"/><line x1="125" y1="95" x2="145" y2="108" stroke="#c084fc" stroke-width="3" stroke-linecap="round"/><rect x="108" y="65" width="24" height="32" rx="10" fill="#c084fc" opacity=".85"/><circle cx="120" cy="56" r="8" fill="#c8a87a"/><line x1="110" y1="74" x2="84" y2="63" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="130" y1="74" x2="156" y2="63" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/></g><text x="120" y="126" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Respirez lentement</text></svg>`,
"Escaliers ou tapis":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="100" width="36" height="10" rx="2" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="56" y="88" width="36" height="22" rx="2" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="92" y="76" width="36" height="34" rx="2" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="128" y="64" width="36" height="46" rx="2" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><rect x="164" y="52" width="36" height="58" rx="2" fill="#dde0ee" stroke="#b8bcc8" stroke-width="1"/><g style="transform-origin:80px 85px;animation:march 1s ease-in-out infinite"><circle cx="80" cy="73" r="7" fill="#c8a87a"/><rect x="73" y="80" width="14" height="20" rx="6" fill="#60a5fa" opacity=".85"/><line x1="76" y1="88" x2="68" y2="98" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round"/><line x1="88" y1="88" x2="92" y2="98" stroke="#60a5fa" stroke-width="2.5" stroke-linecap="round"/><line x1="74" y1="84" x2="66" y2="92" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="87" y1="84" x2="94" y2="90" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/></g><text x="120" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Rythme soutenu · genoux protégés</text></svg>`,
"Curl biceps":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><line x1="110" y1="100" x2="103" y2="128" stroke="#4ade80" stroke-width="3" stroke-linecap="round"/><line x1="130" y1="100" x2="137" y2="128" stroke="#4ade80" stroke-width="3" stroke-linecap="round"/><rect x="105" y="68" width="30" height="34" rx="10" fill="#4ade80" opacity=".85"/><circle cx="120" cy="60" r="8" fill="#c8a87a"/><g style="transform-origin:130px 85px;animation:curl 1.4s ease-in-out infinite"><line x1="130" y1="85" x2="150" y2="105" stroke="#c8a87a" stroke-width="3" stroke-linecap="round"/><rect x="148" y="102" width="14" height="5" rx="2" fill="#adb1ba"/><rect x="148" y="101" width="4" height="7" rx="1" fill="#9ea2aa"/><rect x="158" y="101" width="4" height="7" rx="1" fill="#9ea2aa"/></g><line x1="108" y1="85" x2="90" y2="105" stroke="#c8a87a" stroke-width="3" stroke-linecap="round"/><rect x="78" y="102" width="14" height="5" rx="2" fill="#adb1ba"/><text x="120" y="138" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Coudes fixes · montée lente</text></svg>`,
"Extension triceps":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><line x1="110" y1="100" x2="103" y2="128" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><line x1="130" y1="100" x2="137" y2="128" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><rect x="105" y="68" width="30" height="34" rx="10" fill="#60a5fa" opacity=".85"/><circle cx="120" cy="60" r="8" fill="#c8a87a"/><line x1="128" y1="72" x2="138" y2="48" stroke="#c8a87a" stroke-width="3" stroke-linecap="round"/><g style="transform-origin:138px 48px;animation:ext 1.4s ease-in-out infinite"><line x1="138" y1="48" x2="148" y2="72" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><rect x="143" y="70" width="12" height="5" rx="2" fill="#adb1ba"/><rect x="143" y="69" width="3" height="7" rx="1" fill="#9ea2aa"/><rect x="152" y="69" width="3" height="7" rx="1" fill="#9ea2aa"/></g><text x="120" y="138" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Coudes fixes · expire en poussant</text></svg>`,
"Pompes":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="20" y="108" width="200" height="4" rx="2" fill="#dde0ee"/><g style="transform-origin:120px 90px;animation:press 1.4s ease-in-out infinite"><rect x="55" y="80" width="115" height="14" rx="7" fill="#f87171" opacity=".85"/><circle cx="48" cy="84" r="8" fill="#c8a87a"/><rect x="78" y="93" width="10" height="8" rx="3" fill="#c8a87a"/><rect x="148" y="93" width="10" height="8" rx="3" fill="#c8a87a"/><rect x="162" y="93" width="10" height="8" rx="3" fill="#c8a87a"/><text x="120" y="74" text-anchor="middle" font-family="Inter,sans-serif" font-size="12" fill="#f87171" opacity=".6">↓</text></g><text x="120" y="124" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Corps rigide · descente contrôlée</text></svg>`,
"Élévations latérales":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><line x1="110" y1="100" x2="103" y2="128" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><line x1="130" y1="100" x2="137" y2="128" stroke="#60a5fa" stroke-width="3" stroke-linecap="round"/><rect x="105" y="68" width="30" height="34" rx="10" fill="#60a5fa" opacity=".85"/><circle cx="120" cy="60" r="8" fill="#c8a87a"/><g style="transform-origin:108px 80px;animation:lat 1.4s ease-in-out infinite"><line x1="108" y1="80" x2="82" y2="90" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><rect x="68" y="87" width="14" height="5" rx="2" fill="#adb1ba"/><rect x="68" y="86" width="3" height="7" rx="1" fill="#9ea2aa"/><rect x="79" y="86" width="3" height="7" rx="1" fill="#9ea2aa"/></g><g style="transform-origin:132px 80px;animation:lat 1.4s ease-in-out infinite reverse"><line x1="132" y1="80" x2="158" y2="90" stroke="#c8a87a" stroke-width="2.5" stroke-linecap="round"/><rect x="158" y="87" width="14" height="5" rx="2" fill="#adb1ba"/><rect x="158" y="86" width="3" height="7" rx="1" fill="#9ea2aa"/><rect x="169" y="86" width="3" height="7" rx="1" fill="#9ea2aa"/></g><text x="120" y="138" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Jusqu'à l'horizontale · sans hausser</text></svg>`,
"Yoga doux – étirements + respiration":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><rect x="40" y="108" width="160" height="6" rx="3" fill="#dde0ee" stroke="#c0c4d0" stroke-width="1"/><g style="transform-origin:120px 90px;animation:breathe 3.5s ease-in-out infinite"><line x1="100" y1="100" x2="68" y2="105" stroke="#fbbf24" stroke-width="3" stroke-linecap="round"/><line x1="120" y1="100" x2="172" y2="105" stroke="#fbbf24" stroke-width="3" stroke-linecap="round"/><rect x="105" y="78" width="26" height="24" rx="9" fill="#fbbf24" opacity=".8" transform="rotate(-20,120,90)"/><circle cx="102" cy="73" r="7" fill="#c8a87a"/><line x1="107" y1="84" x2="80" y2="96" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="120" y1="86" x2="148" y2="98" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/></g><text x="120" y="126" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Inspire · étire · expire</text></svg>`,
"Yoga ou marche tranquille":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><path d="M20 115 Q120 108 220 115" fill="none" stroke="#1a1c27" stroke-width="3" stroke-linecap="round"/><g style="transform-origin:120px 88px;animation:walk 1.8s ease-in-out infinite"><circle cx="120" cy="65" r="8" fill="#c8a87a"/><rect x="112" y="73" width="16" height="24" rx="7" fill="#a78bfa" opacity=".85"/><line x1="113" y1="80" x2="104" y2="92" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round"/><line x1="127" y1="80" x2="136" y2="92" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round"/><line x1="115" y1="97" x2="108" y2="113" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round"/><line x1="125" y1="97" x2="132" y2="113" stroke="#a78bfa" stroke-width="2.5" stroke-linecap="round"/></g><text x="120" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="10" fill="#9096b0">Allure confortable · détente</text></svg>`,
"Marche + étirements":`<svg viewBox="0 0 240 140" width="240" height="140" xmlns="http://www.w3.org/2000/svg"><g style="transform-origin:80px 88px;animation:walk 1.6s ease-in-out infinite"><circle cx="80" cy="62" r="7" fill="#c8a87a"/><rect x="73" y="69" width="14" height="22" rx="6" fill="#94a3b8" opacity=".85"/><line x1="74" y1="75" x2="66" y2="86" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/><line x1="87" y1="75" x2="94" y2="86" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/><line x1="76" y1="91" x2="70" y2="108" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/><line x1="84" y1="91" x2="90" y2="108" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/></g><g style="transform-origin:168px 85px;animation:breathe 3s ease-in-out infinite"><circle cx="168" cy="60" r="7" fill="#c8a87a"/><rect x="161" y="67" width="14" height="24" rx="6" fill="#94a3b8" opacity=".85"/><line x1="163" y1="72" x2="150" y2="52" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="175" y1="72" x2="185" y2="82" stroke="#c8a87a" stroke-width="2" stroke-linecap="round"/><line x1="163" y1="91" x2="156" y2="110" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/><line x1="173" y1="91" x2="180" y2="110" stroke="#94a3b8" stroke-width="2.5" stroke-linecap="round"/></g><line x1="124" y1="55" x2="124" y2="115" stroke="#1a1c27" stroke-width="1" stroke-dasharray="4 3"/><text x="80" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="#9096b0">Marche</text><text x="168" y="130" text-anchor="middle" font-family="Inter,sans-serif" font-size="9" fill="#9096b0">Étirements</text></svg>`,
};
const tips = {
"Tapis incliné":"Incline 8–12%, vitesse modérée. Garde le dos droit, ne t'accroche pas aux barres. Active les fessiers à chaque pas.",
"Tirage horizontal":"Tire les coudes vers les hanches, pas vers le bas. Serre les omoplates en fin de mouvement. Expire en tirant.",
"Tirage vertical":"Tire la barre vers le bas de la poitrine, légèrement penchée en arrière. Évite de tirer derrière la nuque.",
"Rowing":"Dos droit, buste penché à 45°. Tire les coudes vers les hanches. Contrôle la descente lentement.",
"Gainage":"Corps aligné des talons aux épaules. Contracte ventre et fessiers. Respire normalement sans cambrer.",
"Yoga – mobilité + posture":"Concentre-toi sur la respiration. Tiens chaque posture 30–60 sec. Ne force pas si la tension est douloureuse.",
"Escaliers ou tapis":"Monte à rythme soutenu mais contrôlé. Descends doucement pour protéger les genoux. Abdos engagés.",
"Curl biceps":"Coudes collés au corps, ne les bascule pas. Monte lentement, descends encore plus lentement. Squeeze en haut.",
"Extension triceps":"Coudes fixes, seuls les avant-bras bougent. Expire en poussant. Contrôle la montée pour l'articulation.",
"Pompes":"Corps rigide comme une planche. Descends jusqu'à effleurer le sol, pousse en expirant. Mains légèrement larges.",
"Élévations latérales":"Légère flexion du coude, monte jusqu'à l'horizontale. Évite de hausser les épaules — isole le deltoïde.",
"Yoga doux – étirements + respiration":"Journée recovery. Étirements passifs, postures au sol. Reste 1–2 min dans chaque posture.",
"Yoga ou marche tranquille":"Écoute ton corps. Fatiguée → marche légère. Énergie → yoga 30 min.",
"Marche + étirements":"20–30 min de marche confortable. Puis 10 min d'étirements complets : dos, jambes, épaules."
};
const days = [
{id:"lundi", label:"Lun", title:"Lundi", sub:"Cardio + Dos", color:"green",
quote:"Le dos que tu construis aujourd'hui te portera demain. Lance-toi !",
food:{timing:"1h–2h avant", items:["Flocons d'avoine + yaourt + rouina","1 banane"]},
exercises:[{name:"Tapis incliné",sets:"25 min"},{name:"Tirage horizontal",sets:"3×12"},{name:"Tirage vertical",sets:"3×10"},{name:"Rowing",sets:"3×10"},{name:"Gainage",sets:"3×30 sec"}]},
{id:"mardi", label:"Mar", title:"Mardi", sub:"Yoga", color:"purple",
quote:"Le mouvement, c'est la vie. Chaque souffle est une victoire.",
food:{timing:"1h avant", items:["Yaourt + granola + dates"]},
exercises:[{name:"Yoga – mobilité + posture",sets:"Séance"}]},
{id:"mercredi",label:"Mer",title:"Mercredi", sub:"Cardio + Bras", color:"blue",
quote:"Des bras forts naissent d'une volonté plus forte encore. Go !",
food:{timing:"1h–2h avant", items:["Pain complet + beurre de cacahuète","1 pomme"]},
exercises:[{name:"Escaliers ou tapis",sets:"25 min"},{name:"Curl biceps",sets:"3×12"},{name:"Extension triceps",sets:"3×12"},{name:"Pompes",sets:"3×max"},{name:"Élévations latérales",sets:"3×12"}]},
{id:"jeudi", label:"Jeu", title:"Jeudi", sub:"Yoga léger · Recovery", color:"yellow",
quote:"Se reposer, c'est se reconstruire. Ton corps te remercie.",
food:{timing:"45min–1h", items:["Smoothie – banane + lait + dattes/miel"]},
exercises:[{name:"Yoga doux – étirements + respiration",sets:"Séance"}]},
{id:"vendredi",label:"Ven",title:"Vendredi", sub:"Cardio + Dos (léger)", color:"red",
quote:"La semaine se finit en beauté. Tu es plus forte qu'hier.",
food:{timing:"1h–2h avant", items:["2 œufs + pain complet","1 fruit"]},
exercises:[{name:"Tapis incliné",sets:"20–25 min"},{name:"Tirage vertical",sets:"3×10"},{name:"Rowing",sets:"3×12"},{name:"Gainage",sets:"3×30 sec"}]},
{id:"samedi", label:"Sam", title:"Samedi", sub:"Yoga ou Marche", color:"violet",
quote:"Prends l'air, prends soin de toi. Le calme est aussi une force.",
food:{timing:"1h avant", items:["Fromage blanc + miel + fruits"]},
exercises:[{name:"Yoga ou marche tranquille",sets:"Séance"}]},
{id:"dimanche",label:"Dim",title:"Dimanche", sub:"Repos actif", color:"gray",
quote:"Chaque grand voyage commence par un pas. Demain, tu recommences.",
food:{timing:"Si activité", items:["1 fruit + noix"]},
exercises:[{name:"Marche + étirements",sets:"Séance"}]},
];
const icons={green:"🏋️",purple:"🧘",blue:"🏋️",yellow:"🧘",red:"🏋️",violet:"🧘",gray:"🚶"};
const tabsEl=document.getElementById('tabs');
const pagesEl=document.getElementById('pages');
const state=JSON.parse(localStorage.getItem('sport_v4')||'{}');
days.forEach((day,i)=>{
if(!state[day.id]) state[day.id]={};
// Tab
const tab=document.createElement('div');
tab.className='tab'+(i===0?' active':'');
tab.dataset.color=day.color;
tab.textContent=day.label;
tab.addEventListener('click',()=>switchTab(day.id));
tabsEl.appendChild(tab);
// Page
const page=document.createElement('div');
page.className='page'+(i===0?' active':'');
page.id='page-'+day.id;
page.dataset.color=day.color;
// Motivational banner
page.innerHTML=`
<div class="motive-banner" data-color="${day.color}">
<div class="motive-day">
<div class="motive-dot"></div>
<div class="motive-day-name">${day.title}</div>
<div class="motive-sub">${day.sub}</div>
</div>
<div class="motive-quote">${day.quote}</div>
</div>
<div class="progress-wrap"><div class="progress-bar" id="bar-${day.id}"></div></div>
<div class="progress-label" id="prog-${day.id}">0 / ${day.exercises.length}</div>
`;
// Food block
const fb=document.createElement('div'); fb.className='block';
fb.innerHTML=`<div class="block-header"><span class="block-header-icon">🍽️</span><span class="block-header-title">Avant la séance</span><span class="block-timing">${day.food.timing}</span></div>${day.food.items.map(f=>`<div class="food-item"><div class="food-dot" data-color="${day.color}"></div>${f}</div>`).join('')}`;
page.appendChild(fb);
// Exercise block
const eb=document.createElement('div'); eb.className='block';
eb.innerHTML=`<div class="block-header"><span class="block-header-icon">${icons[day.color]}</span><span class="block-header-title">Séance</span></div>`;
day.exercises.forEach((ex,j)=>{
const key='ex_'+j, done=!!state[day.id][key];
const item=document.createElement('div');
item.className='exercise-item'+(done?' done':'');
item.dataset.color=day.color;
item.innerHTML=`
<div class="check-box"><svg class="check-icon" width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1.5" stroke="#ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
<span class="exercise-name">${ex.name}</span>
<span class="exercise-sets">${ex.sets}</span>
<button class="info-btn" title="Voir le mouvement">i</button>`;
const toggle=()=>{ const d=item.classList.toggle('done'); state[day.id][key]=d; save(); updateProgress(day.id,page,day.exercises.length); if(navigator.vibrate) navigator.vibrate(d?[15]:[8]); };
item.querySelector('.check-box').addEventListener('click',e=>{e.stopPropagation();toggle();});
item.querySelector('.exercise-name').addEventListener('click',e=>{e.stopPropagation();toggle();});
item.querySelector('.info-btn').addEventListener('click',e=>{e.stopPropagation();openModal(ex.name,ex.sets);});
eb.appendChild(item);
});
page.appendChild(eb);
const badge=document.createElement('div'); badge.className='complete-badge'; badge.id='badge-'+day.id;
badge.innerHTML='✦ Séance terminée — Bravo !'; page.appendChild(badge);
const reset=document.createElement('button'); reset.className='reset-btn';
reset.innerHTML=`<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Réinitialiser la séance`;
reset.addEventListener('click',()=>{ state[day.id]={}; save(); page.querySelectorAll('.exercise-item').forEach(el=>el.classList.remove('done')); updateProgress(day.id,page,day.exercises.length); });
page.appendChild(reset);
pagesEl.appendChild(page);
updateProgress(day.id,page,day.exercises.length);
});
function openModal(name,sets){
document.getElementById('modal-title').textContent=name;
document.getElementById('modal-sets').textContent=sets;
document.getElementById('modal-tip').textContent=tips[name]||'Effectue ce mouvement avec contrôle et régularité.';
document.getElementById('modal-svg').innerHTML=svgs[name]||'<div style="color:#6b7090;padding:20px;font-size:0.8rem">Schéma non disponible</div>';
document.getElementById('modal').classList.add('open');
}
function closeModal(e){ if(e.target===document.getElementById('modal')) document.getElementById('modal').classList.remove('open'); }
function updateProgress(id,page,total){
const n=Object.values(state[id]).filter(Boolean).length;
const bar=document.getElementById('bar-'+id),prog=document.getElementById('prog-'+id),badge=document.getElementById('badge-'+id);
if(bar) bar.style.width=(total?(n/total)*100:0)+'%';
if(prog) prog.textContent=n+' / '+total;
if(badge) badge.style.display=(n===total&&total>0)?'block':'none';
}
function save(){ localStorage.setItem('sport_v4',JSON.stringify(state)); }
function switchTab(id){
document.querySelectorAll('.tab').forEach((t,i)=>t.classList.toggle('active',days[i].id===id));
document.querySelectorAll('.page').forEach(p=>p.classList.toggle('active',p.id==='page-'+id));
const at=document.querySelector('.tab.active'); if(at) at.scrollIntoView({behavior:'smooth',block:'nearest',inline:'center'});
}
const todayMap=[null,'lundi','mardi','mercredi','jeudi','vendredi','samedi','dimanche'];
const tid=todayMap[new Date().getDay()]; if(tid) switchTab(tid);
</script>
</body>
</html>