/* ═══════════════════════════════════════════════════════════ AGOGE — Unified Design System v4.0 Athlete App — Dark Inferno + Warm Beige themes Single source of truth for athlete-app.html ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { /* ── SURFACES ── */ --bg: #0f0f12; --surface: #161619; --card-bg: #1e1e23; --elevated: #282830; --hover: #303038; --input-bg: #141417; --nav-bg: rgba(15,15,18, 0.95); --sheet-bg: #1a1a1f; /* ── TEXT ── */ --text: #f1f5f9; --text2: #94a3b8; --muted: #475569; --disabled: #334155; /* ── ACCENT ── */ --accent: #f97316; --accent-hover: #ea580c; --orange: #f97316; --orange-rgb: 249,115,22; /* ── ORION ── */ --violet: #a78bfa; --violet-rgb: 167,139,250; --indigo: #818cf8; /* ── SEMANTIC ── */ --emerald: #22c55e; --rose: #fb7185; --amber: #fbbf24; --blue: #3b82f6; /* ── LEVELS ── */ --lv-instinctif: #22d3ee; --lv-regulier: #3b82f6; --lv-structure: #10b981; --lv-methodique: #f97316; --lv-pro: #e11d48; --lv-elite: #a855f7; /* ── PILLARS ── */ --pillar-constance: #22d3ee; --pillar-dosage: #60a5fa; --pillar-progression: #34d399; --pillar-recuperation: #60a5fa; --pillar-objectif: #fbbf24; --pillar-fondations: #a78bfa; /* ── ZONES FC / ALLURE (5 zones — Charte V4) ── */ --z1: #94a3b8; --z2: #3b82f6; --z3: #22c55e; --z4: #f59e0b; --z5: #ef4444; /* ── ZONES FTP (7 zones Coggan — Charte V4) ── */ --z-ftp-1: #94a3b8; --z-ftp-2: #3b82f6; --z-ftp-3: #22c55e; --z-ftp-4: #f59e0b; --z-ftp-5: #f97316; --z-ftp-6: #ef4444; --z-ftp-7: #a855f7; /* ── OVERLAYS ── */ --ov-orange: var(--ov-orange); --ov-orange-med: var(--ov-orange-med); --ov-orange-strong: rgba(249,115,22, 0.25); --ov-emerald: rgba(34,197,94, 0.08); --ov-emerald-med: rgba(34,197,94, 0.15); --ov-emerald-strong: rgba(34,197,94, 0.25); --ov-rose: var(--ov-rose); --ov-rose-med: rgba(251,113,133, 0.15); --ov-rose-strong: rgba(251,113,133, 0.25); --ov-amber: var(--ov-amber); --ov-amber-med: rgba(251,191,36, 0.15); --ov-amber-strong: rgba(251,191,36, 0.25); --ov-blue: rgba(59,130,246, 0.08); --ov-blue-med: rgba(59,130,246, 0.15); --ov-blue-strong: rgba(59,130,246, 0.25); --ov-violet: var(--ov-violet); --ov-violet-med: rgba(167,139,250, 0.15); --ov-violet-strong: rgba(167,139,250, 0.25); --ov-cyan: rgba(34,211,238, 0.08); --ov-cyan-med: rgba(34,211,238, 0.15); --ov1: rgba(255,255,255, 0.03); --ov2: rgba(255,255,255, 0.05); --ov3: rgba(255,255,255, 0.08); --ov4: rgba(255,255,255, 0.12); --ov5: rgba(255,255,255, 0.16); /* ── BORDERS ── */ --border: rgba(255,255,255, 0.06); --border2: rgba(255,255,255, 0.10); --border-bold: rgba(255,255,255, 0.16); --border-focus: rgba(249,115,22, 0.40); --card-border: var(--border); /* ── GRADIENTS ── */ --grad-accent: linear-gradient(135deg, #f97316, #ea580c); --grad-warm: linear-gradient(135deg, #f97316, #f59e0b); --grad-glow: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%); --grad-ring: conic-gradient(from 220deg, #fbbf24, #f97316, #ea580c, #dc2626); --grad-surface: linear-gradient(180deg, rgba(249,115,22,0.03) 0%, transparent 40%); /* ── SHADOWS ── */ --shadow-xs: 0 1px 2px rgba(0,0,0, 0.25); --shadow-sm: 0 2px 6px rgba(0,0,0, 0.30); --shadow-md: 0 4px 12px rgba(0,0,0, 0.35); --shadow-lg: 0 8px 24px rgba(0,0,0, 0.40); --shadow-xl: 0 16px 40px rgba(0,0,0, 0.50); --shadow-glow: 0 0 24px rgba(249,115,22, 0.12); --shadow-nav: 0 -4px 20px rgba(0,0,0, 0.20); /* ── RADIUS ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; --radius: 14px; /* compat alias */ /* ── SPACING (base 4px) ── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── TYPE SCALE (Major Third) ── */ --fs-hero: 2.8rem; --fs-display: 1.75rem; --fs-stat: 1.35rem; --fs-title: 0.88rem; --fs-body: 0.82rem; --fs-meta: 0.72rem; --fs-micro: 0.62rem; /* ── WEIGHTS ── */ --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ── MOTION ── */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 0.15s; --dur: 0.25s; --dur-med: 0.40s; --dur-slow: 0.80s; /* ── Z-INDEX ── */ --z-base: 0; --z-card: 1; --z-sticky: 100; --z-sheet: 200; --z-modal: 300; --z-toast: 400; --z-max: 9999; /* ── COMPAT (V3 aliases still used in component CSS) ── */ --card: var(--card-bg); --text1: var(--text); --orange2: #ea580c; --orange2-rgb: 234,88,12; --emerald-rgb: 52,211,153; --rose-rgb: 251,113,133; --amber-rgb: 251,191,36; --blue-rgb: 96,165,250; --cyan-rgb: 34,211,238; --indigo-rgb: 129,140,248; --red-rgb: 239,68,68; --green-rgb: 34,197,94; --ring-track: #334155; --bar-bg: var(--nav-bg); --sidebar-w: 0px; --font-heading: 'Plus Jakarta Sans', sans-serif; --bar-h: 60px; --nav-h: 56px; --hide-speed: 0.3s; } .light-theme, .theme-ghost { --bg: #F8F9FA; --surface: #FFFFFF; --card-bg: #FFFFFF; --elevated: #F1F3F5; --hover: #E9ECEF; --input-bg: #F1F3F5; --text: #111827; --text2: #4B5563; --muted: #9CA3AF; --disabled: #D1D5DB; --border: rgba(0,0,0, 0.06); --border2: rgba(0,0,0, 0.10); --border-bold: rgba(0,0,0, 0.14); --border-focus: rgba(194,65,12, 0.35); --card-border: rgba(0,0,0, 0.06); --ring-track: #D1D5DB; --nav-bg: rgba(255,255,255, 0.95); --bar-bg: rgba(255,255,255, 0.95); --accent: #D97706; --accent-hover: #B45309; --orange: #D97706; --orange2: #B45309; --emerald: #059669; --rose: #E11D48; --amber: #D97706; --blue: #2563EB; --violet: #7C3AED; --cyan: #0891B2; --orange-rgb: 217,119,6; --orange2-rgb: 180,83,9; --emerald-rgb: 5,150,105; --rose-rgb: 225,29,72; --amber-rgb: 217,119,6; --blue-rgb: 37,99,235; --violet-rgb: 124,58,237; --cyan-rgb: 8,145,178; --indigo-rgb: 99,102,241; --red-rgb: 220,38,38; --green-rgb: 22,163,74; --ov1: rgba(0,0,0, 0.02); --ov2: rgba(0,0,0, 0.04); --ov3: rgba(0,0,0, 0.05); --ov4: rgba(0,0,0, 0.07); --ov5: rgba(0,0,0, 0.10); --ov-orange: rgba(194,65,12, 0.06); --ov-emerald: rgba(5,150,105, 0.06); --ov-rose: rgba(225,29,72, 0.06); --ov-amber: rgba(180,83,9, 0.06); --ov-blue: rgba(37,99,235, 0.06); --ov-violet: rgba(124,58,237, 0.06); --ov-cyan: rgba(8,145,178, 0.06); --shadow-xs: 0 1px 2px rgba(0,0,0, 0.04); --shadow-sm: 0 2px 6px rgba(0,0,0, 0.05); --shadow-md: 0 4px 12px rgba(0,0,0, 0.07); --shadow-lg: 0 8px 24px rgba(0,0,0, 0.09); --shadow-xl: 0 16px 40px rgba(0,0,0, 0.12); --shadow-glow: 0 0 20px rgba(194,65,12, 0.08); --shadow-nav: 0 -4px 20px rgba(0,0,0, 0.06); /* compat alias */ --card: var(--card-bg); } *{margin:0;padding:0;box-sizing:border-box}html{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden;background:#0f0f12} body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--text);line-height:1.5;min-height:100vh;min-height:100dvh;overflow-x:hidden;max-width:100vw} body.login-mode .app-bar,body.login-mode .bottom-nav,body.login-mode .sidebar{display:none!important} body.login-mode .container{margin-left:0!important;padding-top:0!important} ::selection{background:rgba(249,115,22,0.3)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-thumb{background:var(--elevated);border-radius:2px} a{color:var(--accent);text-decoration:none;cursor:pointer} .app-bar{position:sticky;top:0;z-index:50;background:var(--bar-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:14px 20px;padding-top:calc(14px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border2)} .app-bar .logo{display:flex;align-items:center;gap:8px} .app-bar .logo-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:2px;background:linear-gradient(135deg,var(--orange),var(--orange2));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .app-bar .name{font-size:0.88rem;color:var(--text2);font-weight:500} .bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-top:1px solid var(--border2);display:flex;padding:8px 0;padding-bottom:calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px rgba(0,0,0,0.15)} .bottom-nav::before{content:'';position:absolute;top:0;left:var(--pill-x,10%);width:20%;height:2px;background:var(--accent);border-radius:0 0 2px 2px;transition:left .3s cubic-bezier(.22,1,.36,1);pointer-events:none} .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0;cursor:pointer;transition:all .25s var(--ease);color:var(--text2);position:relative;-webkit-tap-highlight-color:transparent;min-width:0} .nav-item.active{color:var(--accent)}.nav-item svg{width:22px;height:22px;transition:transform .25s var(--ease)}.nav-item.active svg{transform:scale(1.1)} .nav-item .nav-label{font-size:0.65rem;font-weight:600;letter-spacing:0.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%} .nav-item .nav-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:0;transition:opacity .2s}.nav-item.active .nav-dot{opacity:1} .nav-badge{display:none;position:absolute;top:4px;right:50%;transform:translateX(12px);width:8px;height:8px;border-radius:50%;background:var(--rose)}.nav-badge.visible{display:block} .sidebar{display:none} .container{max-width:600px;margin:0 auto;padding:20px 16px;padding-bottom:calc(90px + env(safe-area-inset-bottom))} #app{transition:opacity .15s ease;min-height:50vh;will-change:transform,opacity} @keyframes tabSlideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-40px);opacity:0}} @keyframes tabSlideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(40px);opacity:0}} @keyframes tabSlideInRight{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}} @keyframes tabSlideInLeft{from{transform:translateX(-40px);opacity:0}to{transform:translateX(0);opacity:1}} .tab-slide-out-left{animation:tabSlideOutLeft .12s ease forwards} .tab-slide-out-right{animation:tabSlideOutRight .12s ease forwards} .tab-slide-in-right{animation:tabSlideInRight .2s var(--ease) forwards} .tab-slide-in-left{animation:tabSlideInLeft .2s var(--ease) forwards} .heading-xl{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.4rem;font-weight:700;margin-bottom:4px} .sub-text{font-size:0.88rem;color:var(--muted);margin-bottom:20px} .section-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:0.92rem;font-weight:700;color:var(--text2);margin-bottom:12px;display:flex;align-items:center;gap:8px} .g-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px;margin-bottom:14px;transition:all .3s var(--ease);position:relative;overflow:hidden}.g-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}.g-card:hover{border-color:var(--border2);background:rgba(255,255,255,0.04)} .g-card-accent{background:var(--card-bg);border:1px solid rgba(var(--orange-rgb),0.1);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;position:relative;overflow:hidden}.g-card-accent::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--orange),var(--violet))} .stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .stat-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px;text-align:center;transition:all .3s var(--ease)}.stat-card:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.1)} .stat-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.8rem;font-weight:800;line-height:1}.stat-label{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px} @keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes barShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .stat-bar{height:6px;background:var(--elevated);border-radius:3px;margin-top:10px;overflow:hidden}.stat-bar-fill{height:100%;border-radius:3px;width:var(--bar-w,0%);transform-origin:left;animation:barGrow .8s var(--ease) both;animation-delay:var(--d,.2s);background-size:200% 100%;background-image:linear-gradient(90deg,var(--bar-c) 40%,rgba(255,255,255,.15) 50%,var(--bar-c) 60%)} .stat-bar-fill.shimmer{animation:barGrow .8s var(--ease) both,barShimmer 2s ease 1s 1;animation-delay:var(--d,.2s)} .pillars-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px} .pillar-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:14px;display:flex;align-items:center;gap:12px;transition:all .3s var(--ease)} .pillar-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .pillar-info{flex:1;min-width:0}.pillar-name{font-size:0.75rem;font-weight:600;color:var(--text2);margin-bottom:4px}.pillar-pct{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:800;line-height:1} .pillar-bar{height:6px;background:var(--elevated);border-radius:3px;margin-top:5px;overflow:hidden}.pillar-bar-fill{height:100%;border-radius:3px;width:var(--bar-w,0%);transform-origin:left;animation:barGrow 1s var(--ease) both;animation-delay:var(--d,.3s);background-size:200% 100%;background-image:linear-gradient(90deg,var(--bar-c) 40%,rgba(255,255,255,.12) 50%,var(--bar-c) 60%)} .pillar-row{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;transition:background .15s;border-radius:6px}.pillar-row:active{background:var(--ov1)} .pillar-row-name{font-size:.78rem;font-weight:500;color:var(--text2);width:90px;flex-shrink:0} .pillar-row-bar{flex:1;height:6px;background:var(--elevated);border-radius:3px;overflow:hidden;box-shadow:0 0 8px var(--glow,transparent),0 1px 4px var(--glow,transparent);transition:box-shadow .8s var(--ease)} .pillar-row-fill{height:100%;border-radius:3px;transform-origin:left;animation:barGrow .8s var(--ease) both;background-size:200% 100%;position:relative;overflow:hidden;animation-play-state:paused} .in-view .pillar-row-fill{animation-play-state:running} .pillar-row-fill::after{content:'';position:absolute;top:0;bottom:0;left:-100%;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:pillarShimmer 1s ease var(--shim-d,1s) 1 both;animation-play-state:paused} .in-view .pillar-row-fill::after{animation-play-state:running} @keyframes pillarShimmer{0%{left:-100%}100%{left:200%}} .pillar-row-pct{font-size:.78rem;font-weight:700;color:var(--text2);width:32px;text-align:right;flex-shrink:0} .pillar-row-chev{flex-shrink:0;opacity:.5;transition:opacity .15s,transform .15s} .pillar-row:hover .pillar-row-chev,.pillar-row:active .pillar-row-chev{opacity:.8;transform:translateX(2px)} .lever-orion{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px 18px;margin-bottom:18px;animation:fadeUp .4s var(--ease) both;position:relative;overflow:hidden} .lever-orion::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)} .lever-orion-head{display:flex;align-items:center;gap:8px;margin-bottom:8px} .lever-orion-star{color:var(--violet);font-size:.85rem;flex-shrink:0} .lever-orion-title{font-size:.88rem;font-weight:700;color:var(--text);flex:1} .lever-orion-pts{font-size:.75rem;font-weight:600;color:var(--orange);background:rgba(var(--orange-rgb),.1);padding:3px 10px;border-radius:var(--radius-sm)} .lever-orion-msg{font-size:.82rem;color:var(--text2);line-height:1.5;margin-bottom:10px} .lever-orion-cta{font-size:.78rem;color:var(--violet);font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:opacity .2s;background:none;border:none;padding:0;font-family:inherit}.lever-orion-cta:hover{opacity:.7} .hero-meta-row{display:flex;justify-content:center;gap:24px;margin-top:16px} .hero-meta-item{text-align:center} .hero-meta-item.is-clickable{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--radius-sm);padding:2px 6px;margin:-2px -6px;transition:background .18s var(--ease)} .hero-meta-item.is-clickable:hover{background:var(--ov1)} .hero-meta-item.is-clickable:active{background:var(--ov2)} .hero-meta-label{font-size:.68rem;color:var(--muted);margin-bottom:3px} .hero-meta-val{font-size:.82rem;color:var(--text2);display:flex;align-items:center;gap:5px;justify-content:center} .hero-share-row{display:flex;justify-content:center;padding:8px 0} .hero-share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-xl);border:1px solid var(--border2);background:var(--card-bg);color:var(--text);font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}.hero-share-btn:hover{border-color:var(--accent);color:var(--accent)}.hero-share-btn:active{transform:scale(0.97)} .insight{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;margin-bottom:8px;font-size:.85rem;line-height:1.5;animation:fadeUp .4s var(--ease) both} .insight-good{background:var(--ov-emerald);border:1px solid rgba(52,211,153,0.15);color:var(--emerald)} .insight-warn{background:var(--ov-amber);border:1px solid rgba(251,191,36,0.15);color:var(--amber)} .insight-bad{background:var(--ov-rose);border:1px solid rgba(251,113,133,0.15);color:var(--rose)} .insight-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .insight-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:10px;font-size:.82rem;font-weight:600;line-height:1.3;animation:fadeUp .4s var(--ease) both} .insight-chip.good{background:var(--ov-emerald);border:1px solid rgba(52,211,153,0.15);color:var(--emerald)} .insight-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .insight-hero{border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;animation:fadeUp .4s var(--ease) both} .insight-hero.good{background:rgba(52,211,153,0.05);border:1px solid rgba(52,211,153,0.15)} .insight-hero.bad{background:rgba(251,113,133,0.05);border:1px solid rgba(251,113,133,0.15)} .insight-hero-badge{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center} .insight-hero.good .insight-hero-badge{background:rgba(52,211,153,0.15);color:var(--emerald)} .insight-hero.bad .insight-hero-badge{background:rgba(251,113,133,0.15);color:var(--rose)} .insight-hero-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px} .insight-hero.good .insight-hero-label{color:var(--emerald)} .insight-hero.bad .insight-hero-label{color:var(--rose)} .insight-hero-text{font-size:.82rem;line-height:1.45;color:var(--text)} .insight-mini{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:10px;font-size:.82rem;line-height:1.4;color:var(--text2);animation:fadeUp .3s var(--ease) both} .insight-mini.good{background:rgba(52,211,153,0.03)} .insight-mini.bad{background:rgba(251,113,133,0.03)} .insight-mini-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:6px} .insight-toggle{display:block;width:100%;padding:10px;background:none;border:none;color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:color .2s;text-align:center;margin-top:2px} .insight-toggle:hover{color:var(--accent)} .insight-body{display:flex;flex-direction:column;gap:6px;flex:1} .insight-cta{display:inline-block;font-size:.78rem;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:none;margin-top:2px;transition:opacity .2s} .insight-cta:hover{opacity:.7} .insight-more{display:block;width:100%;padding:10px;background:var(--card-bg);border:1px solid var(--border2);border-radius:10px;color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;margin-top:4px} .insight-more:hover{border-color:var(--accent);color:var(--accent)} .orion-card{border-radius:16px;border:1px solid rgba(96,165,250,.12);background:linear-gradient(135deg,rgba(96,165,250,.04),rgba(139,92,246,.03));overflow:hidden;margin-bottom:12px} .orion-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .2s} .orion-header:hover{background:rgba(96,165,250,.04)} .orion-header-left{display:flex;align-items:center;gap:10px} .orion-stars{display:flex;align-items:center;gap:2px;color:#60a5fa;font-size:1.1rem;letter-spacing:2px} .orion-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.92rem;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent} .orion-quota{font-size:.72rem;color:var(--muted);font-weight:600} .orion-chevron{color:var(--muted);transition:transform .3s var(--ease)} .orion-card.open .orion-chevron{transform:rotate(180deg)} .orion-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .orion-card.open .orion-body{max-height:600px} .orion-chat{padding:0 14px;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto;scroll-behavior:smooth} .orion-chat::-webkit-scrollbar{width:3px}.orion-chat::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} .orion-msg{max-width:88%;padding:10px 14px;border-radius:14px;font-size:.82rem;line-height:1.55;animation:fadeUp .3s var(--ease) both;word-wrap:break-word} .orion-msg.user{align-self:flex-end;background:rgba(249,115,22,.12);border:1px solid rgba(249,115,22,.15);color:var(--text);border-bottom-right-radius:4px} .orion-msg.ai{align-self:flex-start;background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.1);color:var(--text);border-bottom-left-radius:4px} .orion-msg.ai .orion-msg-name{font-size:.7rem;font-weight:700;color:#60a5fa;margin-bottom:3px} .orion-msg.system{align-self:center;text-align:center;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.12);color:var(--text2);max-width:94%;font-size:.78rem} .orion-typing{display:flex;gap:4px;padding:10px 14px;align-self:flex-start} .orion-typing span{width:6px;height:6px;border-radius:50%;background:#60a5fa;opacity:.4;animation:orionDot .8s ease infinite} .orion-typing span:nth-child(2){animation-delay:.15s}.orion-typing span:nth-child(3){animation-delay:.3s} @keyframes orionDot{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}} .orion-input-wrap{display:flex;align-items:center;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--border)} .orion-input{flex:1;background:var(--elevated);border:1px solid var(--border2);border-radius:12px;padding:10px 14px;font-size:.84rem;color:var(--text);font-family:inherit;resize:none;outline:none;transition:border-color .2s;min-height:40px;max-height:80px} .orion-input:focus{border-color:#60a5fa40} .orion-input::placeholder{color:var(--muted)} .orion-send{width:38px;height:38px;border-radius:12px;border:none;background:linear-gradient(135deg,#60a5fa,#a78bfa);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:opacity .2s,transform .1s} .orion-send:disabled{opacity:.3;cursor:not-allowed}.orion-send:active:not(:disabled){transform:scale(.92)} .orion-mic{width:38px;height:38px;border-radius:12px;border:1px solid rgba(168,85,247,.2);background:rgba(168,85,247,.08);color:#a78bfa;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .25s;position:relative} .orion-mic:active{transform:scale(.92)}.orion-mic.recording{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);animation:micPulse 1.5s ease infinite} .orion-mic.recording svg{stroke:#f87171} @keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.2)}50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}} .orion-cta{display:block;text-align:center;padding:12px;font-size:.78rem;color:var(--accent);font-weight:600;cursor:pointer;transition:opacity .2s;text-decoration:none;border-top:1px solid var(--border)} .orion-cta:hover{opacity:.7} .orion-welcome{text-align:center;padding:16px 12px;color:var(--text2);font-size:.8rem;line-height:1.5} .orion-welcome-icon{font-size:1.5rem;margin-bottom:6px;display:block} /* ═══════════════════════════════════════════════════════════ ORION BAND V4.1 (athlete) — proue après hero ring Gradient violet→bleu, sweep orange→violet au mount, 4 chips dynamiques, quota progressif. Pattern fiche-orion-band adapté. ═══════════════════════════════════════════════════════════ */ .orion-band{position:relative;background:linear-gradient(135deg,rgba(var(--violet-rgb),.09) 0%,rgba(var(--blue-rgb),.06) 100%);border:1px solid rgba(var(--violet-rgb),.22);border-radius:var(--radius-lg);padding:13px 14px 11px;overflow:hidden;margin-bottom:18px;animation:fadeUp .4s var(--ease) both} .orion-band::before{content:'';position:absolute;top:0;left:-30%;right:0;height:2px;background:linear-gradient(90deg,transparent 20%,rgba(var(--orange-rgb),.85) 45%,rgba(var(--violet-rgb),.9) 55%,transparent 80%);animation:fobSweep 1.5s var(--ease) .4s 1 both;pointer-events:none} .orion-band-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .orion-band-id{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--text)} .orion-band-star{color:var(--violet);font-size:.92rem;line-height:1;animation:orionFabStarPulse 2.6s ease-in-out infinite} .orion-band-quota{display:inline-flex;align-items:center;gap:1px;font-size:.66rem;color:var(--violet);font-weight:700;padding:2px 8px;border-radius:var(--radius-xl);background:rgba(var(--violet-rgb),.10);border:1px solid rgba(var(--violet-rgb),.20);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s} .orion-band-quota:hover{opacity:.8} .orion-band-quota-sep{opacity:.45;margin:0 1px} .orion-band-quota.warn{color:var(--amber);background:rgba(var(--amber-rgb),.10);border-color:rgba(var(--amber-rgb),.22)} .orion-band-quota.crit{color:var(--rose);background:rgba(var(--rose-rgb),.10);border-color:rgba(var(--rose-rgb),.24)} .orion-band-quota.empty{color:var(--rose);background:rgba(var(--rose-rgb),.16);border-color:rgba(var(--rose-rgb),.32)} .orion-band-msg{font-size:.78rem;color:#cbd5e1;line-height:1.5;margin-bottom:11px} .orion-band-msg strong{font-weight:700} .orion-band-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:9px} .orion-band-chips.is-disabled .orion-band-chip{opacity:.4;cursor:not-allowed} .orion-band-chip{padding:9px 11px;border:1px solid rgba(var(--violet-rgb),.22);background:rgba(var(--violet-rgb),.08);border-radius:var(--radius-md);font-size:.72rem;font-weight:600;color:#c4b5fd;line-height:1.3;text-align:left;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .18s var(--ease)} .orion-band-chip:hover{background:rgba(var(--violet-rgb),.14);border-color:rgba(var(--violet-rgb),.32);color:#ddd6fe} .orion-band-chip:active{transform:scale(.97)} .orion-band-cta{display:block;width:100%;text-align:center;font-size:.72rem;color:var(--violet);font-weight:600;cursor:pointer;background:none;border:none;border-top:1px solid rgba(var(--violet-rgb),.12);padding:8px 0 2px;margin-top:2px;font-family:inherit;transition:opacity .2s;-webkit-tap-highlight-color:transparent} .orion-band-cta:hover{opacity:.7} /* ═══════════════════════════════════════════════════════════ ORION FAB SCROLL-AWARE V4.1 (athlete) Pastille 50x50 en bottom-right au-dessus du bottom-nav. Apparaît quand le bandeau Orion sort du viewport. ═══════════════════════════════════════════════════════════ */ .orion-fab{position:fixed;right:14px;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px);width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--blue) 0%,var(--violet) 100%);box-shadow:0 6px 20px rgba(var(--violet-rgb),.42),0 0 0 1px rgba(var(--violet-rgb),.30),0 0 24px rgba(var(--violet-rgb),.18);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:55;border:none;-webkit-tap-highlight-color:transparent;opacity:0;transform:translateY(8px) scale(.92);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)} .orion-fab.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto} .orion-fab:active{transform:translateY(0) scale(.94)} .orion-fab-star{color:#fff;font-size:1.45rem;line-height:1;font-weight:400;animation:orionFabStarPulse 2.6s ease-in-out infinite} @media(min-width:768px){.orion-fab{bottom:24px;right:24px}} @media (prefers-reduced-motion: reduce){.orion-fab,.orion-fab-star{animation:none!important;transition:opacity .15s linear!important}.orion-band::before{animation:none!important;display:none}} /* ═══════════════════════════════════════════════════════════ STAT CARD SPARKLINE V4.1 (mc-spark pattern) Mini-graphique 8 sem en background, opacité 55%, texte au-dessus. ═══════════════════════════════════════════════════════════ */ .stat-card.has-spark{position:relative;overflow:hidden;min-height:88px;padding-bottom:28px} .stat-card.has-spark .stat-val,.stat-card.has-spark .stat-label{position:relative;z-index:2} .sc-spark{position:absolute;left:0;right:0;bottom:0;height:34px;width:100%;opacity:.55;pointer-events:none;z-index:1} /* ═══════════════════════════════════════════════════════════ ORION ANIMATIONS V4.1 ═══════════════════════════════════════════════════════════ */ @keyframes fobSweep{0%{left:-30%}100%{left:130%}} @keyframes orionFabStarPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.10);opacity:.88}} @keyframes orionFabExtend{from{transform:translateY(8px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} /* ═══════════════════════════════════════════════════════════ ORION WIZARD V4.2 — création de séance dans le chat Boutons inline sous les messages bot, bloc séance proposée riche, skeleton de génération. ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════ MOMENT SIGNATURE V4.2 — Sprint C Overlay hebdo dimanche soir (récap) / lundi matin (perspective). 1× par semaine max via localStorage flag. ═══════════════════════════════════════════════════════════ */ .sig-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:20px;animation:sigFade .25s var(--ease) both} .sig-overlay.sig-out{animation:sigFadeOut .25s var(--ease) both} .sig-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at top,rgba(var(--violet-rgb),.08) 0%,rgba(0,0,0,.85) 50%,rgba(0,0,0,.92) 100%);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer} .sig-card{position:relative;width:100%;max-width:420px;max-height:calc(100vh - 40px);overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--card,#1c1c21);border:1px solid rgba(var(--violet-rgb),.20);border-radius:24px;padding:28px 22px 22px;box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 60px rgba(var(--violet-rgb),.12);animation:sigCardIn .55s var(--ease) .05s both} .sig-card::before{content:'';position:absolute;inset:0;border-radius:24px;background:linear-gradient(135deg,rgba(var(--violet-rgb),.05) 0%,transparent 50%,rgba(var(--orange-rgb),.04) 100%);pointer-events:none} .sig-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:var(--ov1);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:all .15s var(--ease);-webkit-tap-highlight-color:transparent} .sig-close:hover{background:var(--ov2);color:var(--text)} .sig-sweep{position:absolute;top:0;left:-30%;right:0;height:2px;background:linear-gradient(90deg,transparent 15%,rgba(var(--orange-rgb),.85) 45%,rgba(var(--violet-rgb),.95) 55%,transparent 85%);animation:fobSweep 1.6s var(--ease) .35s 1 both;pointer-events:none} /* Header */ .sig-head{position:relative;text-align:center;margin-bottom:22px;padding-top:6px} .sig-eyebrow{font-size:.7rem;font-weight:700;color:var(--violet);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;animation:sigItemIn .5s var(--ease) .25s both} .sig-title{font-size:1.18rem;font-weight:800;color:var(--text);line-height:1.3;font-family:'Plus Jakarta Sans',sans-serif;animation:sigItemIn .5s var(--ease) .35s both} .sig-subtitle{font-size:.78rem;color:var(--text2);margin-top:5px;animation:sigItemIn .5s var(--ease) .45s both} /* Stats grid (3 cols, hero takes more emphasis) */ .sig-stats{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:18px;animation:sigItemIn .5s var(--ease) .55s both} .sig-stat{background:var(--ov1);border:1px solid var(--border);border-radius:14px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:84px;position:relative} .sig-stat-hero{background:linear-gradient(135deg,rgba(var(--orange-rgb),.10),rgba(var(--violet-rgb),.06));border-color:rgba(var(--orange-rgb),.22)} .sig-stat-val{font-size:1.42rem;font-weight:800;color:var(--text);line-height:1;font-family:'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums} .sig-stat-hero .sig-stat-val{font-size:1.65rem;background:linear-gradient(135deg,var(--accent),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .sig-stat-lbl{font-size:.62rem;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-top:6px;line-height:1.2} .sig-stat-trend{position:absolute;top:6px;right:8px;font-size:.62rem;font-weight:700} /* Highlight (best session) */ .sig-highlight{position:relative;display:flex;align-items:center;gap:12px;padding:11px 13px;background:rgba(var(--orange-rgb),.05);border:1px solid rgba(var(--orange-rgb),.16);border-radius:13px;margin-bottom:14px;animation:sigItemIn .5s var(--ease) .65s both} .sig-highlight-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.18)} .sig-highlight-text{flex:1;min-width:0} .sig-highlight-title{font-size:.66rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px} .sig-highlight-sub{font-size:.78rem;color:var(--text);font-weight:600;line-height:1.3} /* Streak badge */ .sig-streak{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 13px;background:rgba(var(--amber-rgb),.07);border:1px solid rgba(var(--amber-rgb),.22);border-radius:11px;margin-bottom:14px;font-size:.78rem;color:var(--text);animation:sigItemIn .5s var(--ease) .7s both} .sig-streak-flame{font-size:1rem;line-height:1} .sig-streak strong{color:var(--amber);font-weight:700} /* Orion quote */ .sig-quote{position:relative;display:flex;gap:10px;align-items:flex-start;padding:13px 14px;background:rgba(var(--violet-rgb),.07);border:1px solid rgba(var(--violet-rgb),.20);border-radius:13px;margin-bottom:18px;animation:sigItemIn .5s var(--ease) .8s both} .sig-quote-mark{font-size:1.05rem;color:var(--violet);line-height:1;flex-shrink:0;margin-top:1px;animation:orionFabStarPulse 2.6s ease-in-out infinite} .sig-quote-text{font-size:.84rem;color:var(--text);line-height:1.5;font-weight:500} .sig-quote-text strong{font-weight:700} /* Orion suggestion (Monday only) */ .sig-orion-hint{position:relative;display:flex;align-items:center;gap:9px;padding:11px 12px;background:rgba(var(--violet-rgb),.04);border:1px dashed rgba(var(--violet-rgb),.28);border-radius:11px;margin-bottom:14px;animation:sigItemIn .5s var(--ease) .75s both} .sig-orion-mark{font-size:.95rem;color:var(--violet);line-height:1;flex-shrink:0} .sig-orion-text{font-size:.74rem;color:var(--text2);line-height:1.4} .sig-orion-text strong{color:var(--violet)} /* CTA button */ .sig-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:14px 20px;border-radius:14px;background:linear-gradient(135deg,var(--accent),#fb923c);color:#fff;border:none;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .18s var(--ease);box-shadow:0 6px 20px rgba(var(--orange-rgb),.32);animation:sigItemIn .5s var(--ease) .9s both} .sig-cta:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(var(--orange-rgb),.42)} .sig-cta:active{transform:translateY(0) scale(.98)} .sig-invite-tease{ display:inline-flex;align-items:center;justify-content:center;gap:6px; margin-top:10px;padding:8px 4px; width:100%; font-size:.75rem;font-weight:600; color:var(--accent); cursor:pointer; text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px; -webkit-tap-highlight-color:transparent; transition:opacity .15s var(--ease); animation:sigItemIn .5s var(--ease) 1.05s both; } .sig-invite-tease:hover{opacity:.75} .sig-invite-tease svg{flex-shrink:0;opacity:.85} /* Mode-specific tints */ .sig-mode-monday .sig-eyebrow{color:var(--accent)} .sig-mode-monday .sig-stat-hero{background:linear-gradient(135deg,rgba(var(--violet-rgb),.10),rgba(var(--orange-rgb),.06));border-color:rgba(var(--violet-rgb),.22)} .sig-mode-monday .sig-stat-hero .sig-stat-val{background:linear-gradient(135deg,var(--violet),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent} /* Animations */ @keyframes sigFade{from{opacity:0}to{opacity:1}} @keyframes sigFadeOut{from{opacity:1}to{opacity:0}} @keyframes sigCardIn{0%{opacity:0;transform:scale(.92) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}} @keyframes sigItemIn{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion: reduce){ .sig-overlay,.sig-card,.sig-eyebrow,.sig-title,.sig-subtitle,.sig-stats,.sig-highlight,.sig-streak,.sig-quote,.sig-orion-hint,.sig-cta{animation:none!important} .sig-sweep{display:none} .sig-quote-mark{animation:none!important} } /* Mobile : safe-area + tighter spacing */ @media(max-width:480px){ .sig-overlay{padding:14px} .sig-card{padding:24px 18px 18px;max-height:calc(100vh - 28px)} .sig-title{font-size:1.08rem} .sig-stat-hero .sig-stat-val{font-size:1.5rem} .sig-stat-val{font-size:1.3rem} } /* ═══════════════════════════════════════════════════════════ CALENDAR HEATMAP V4.2 — Sprint B Niveau de charge par jour 1-5 → opacity graduée du fond. Couleur orange (charte) avec opacité progressive. Coexiste avec agc-today, agc-has-log, agc-has-coach via z-index. ═══════════════════════════════════════════════════════════ */ .agc-cell.agc-heat-1{background:rgba(var(--orange-rgb),.06)} .agc-cell.agc-heat-2{background:rgba(var(--orange-rgb),.11)} .agc-cell.agc-heat-3{background:rgba(var(--orange-rgb),.18)} .agc-cell.agc-heat-4{background:rgba(var(--orange-rgb),.28)} .agc-cell.agc-heat-5{background:rgba(var(--orange-rgb),.40)} /* Combine heat avec has-log : booster la lisibilité du num */ .agc-cell.agc-has-log.agc-heat-3 .agc-num, .agc-cell.agc-has-log.agc-heat-4 .agc-num, .agc-cell.agc-has-log.agc-heat-5 .agc-num{color:#fff;font-weight:800} /* Today + heat : garder la border accent visible */ .agc-cell.agc-today.agc-heat-1, .agc-cell.agc-today.agc-heat-2, .agc-cell.agc-today.agc-heat-3, .agc-cell.agc-today.agc-heat-4, .agc-cell.agc-today.agc-heat-5{border:1.5px solid var(--accent)} @media (prefers-reduced-motion: reduce){.agc-cell{transition:none!important}} /* ═══════════════════════════════════════════════════════════ TRAINING WEEK RING V4.2 — Sprint B Composant central remplaçant les 4 barres plates. Ring SVG + stats latérales + mini-bars condensées en bas. ═══════════════════════════════════════════════════════════ */ .th-week-card .th-ring-progress{transition:stroke-dasharray .9s var(--ease)!important;animation:ringDraw .9s var(--ease) both} @keyframes ringDraw{from{stroke-dasharray:0 999}} @media (prefers-reduced-motion: reduce){.th-week-card .th-ring-progress{animation:none!important}} /* ═══════════════════════════════════════════════════════════ PLANNED SESSION CARDS V4.2 — Sprint B Cards enrichies avec icône sport, mini timeline, badge Orion. ═══════════════════════════════════════════════════════════ */ .th-planned-card{position:relative;background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:10px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease);overflow:hidden} .th-planned-card::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--p-c);opacity:.55} .th-planned-card:hover{border-color:rgba(var(--p-rgb),.32);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--p-rgb),.12)} .th-planned-card:active{transform:translateY(0) scale(.99)} .th-planned-head{display:flex;align-items:center;gap:11px} .th-planned-icon{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.18)} .th-planned-meta{flex:1;min-width:0} .th-planned-title{font-weight:700;font-size:.84rem;color:var(--text);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .th-planned-sub{font-size:.72rem;color:var(--text2);margin-top:2px;line-height:1.3} .th-planned-badge{font-size:.58rem;font-weight:700;letter-spacing:.4px;padding:2px 7px;border-radius:5px;flex-shrink:0;align-self:flex-start;margin-top:2px} .th-planned-badge.th-badge-orion{background:var(--violet);color:#fff} .th-planned-preview{margin-top:10px;border-radius:var(--radius-sm);overflow:hidden;min-height:32px} .th-planned-preview:empty{display:none} .th-planned-preview-renfo{margin-top:9px;padding:7px 10px;background:rgba(var(--violet-rgb),.05);border:1px solid rgba(var(--violet-rgb),.12);border-radius:var(--radius-sm);display:flex;align-items:center;gap:7px;font-size:.7rem;color:var(--text2);font-weight:600} @media (prefers-reduced-motion: reduce){.th-planned-card{transition:none!important}} /* Override the default sess-planned ::after badge for our enriched cards (we have our own badge layout) */ .th-planned-card.sess-planned::after{display:none} .th-planned-card.sess-planned{opacity:1;background:var(--card-bg)!important;border-color:var(--card-border)!important} .th-planned-card.sess-planned::before{background:var(--p-c)} /* ═══════════════════════════════════════════════════════════ TRAINING HERO V4.2 — Bandeau "Aujourd'hui" en proue Composant contextuel : séance loggée / planifiée / repos / reprise. Couleur dynamique via --th-c (override inline selon état). ═══════════════════════════════════════════════════════════ */ .th-hero{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:var(--radius-lg);background:var(--th-bg,linear-gradient(135deg,rgba(var(--orange-rgb),.06),rgba(var(--orange-rgb),.02)));border:1px solid var(--th-bd,rgba(var(--orange-rgb),.18));margin-bottom:18px;position:relative;overflow:hidden} .th-hero::before{content:'';position:absolute;top:0;left:-30%;right:0;height:1px;background:linear-gradient(90deg,transparent 25%,var(--th-c,var(--accent)) 50%,transparent 75%);animation:fobSweep 1.6s var(--ease) .3s 1 both;opacity:.6;pointer-events:none} .th-hero-icon{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid var(--th-bd,rgba(255,255,255,.06));display:flex;align-items:center;justify-content:center;color:var(--th-c,var(--accent));flex-shrink:0} .th-hero-body{flex:1;min-width:0} .th-hero-title{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:3px} .th-hero-sub{font-size:.74rem;color:var(--text2);line-height:1.45;word-wrap:break-word} .th-hero-sub strong{color:var(--text);font-weight:600} .th-hero-cta{flex-shrink:0;align-self:center} .th-cta{padding:8px 14px;border-radius:var(--radius-md);background:var(--th-c,var(--accent));color:#fff;border:none;font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);white-space:nowrap} .th-cta:hover{transform:translateY(-1px);filter:brightness(1.08)} .th-cta:active{transform:translateY(0) scale(.97)} /* ═══════════════════════════════════════════════════════════ SCROLL-REVEAL V4.2 — cascade au scroll des sections principales Init via AgogeTraining.initScrollReveal() ou autres modules. Transition delay calculée à l'observation pour stagger natural. ═══════════════════════════════════════════════════════════ */ .scroll-reveal{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .scroll-reveal.is-revealed{opacity:1;transform:translateY(0)} @media (prefers-reduced-motion: reduce){.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}.th-hero::before{animation:none!important;display:none}} .orion-wizard-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 0 8px 0;padding:0 4px;animation:fadeUp .25s var(--ease) both} .orion-wizard-buttons.is-inactive{opacity:.4;pointer-events:none} .orion-wizard-btn{padding:8px 13px;border-radius:18px;border:1px solid rgba(var(--violet-rgb),.30);background:rgba(var(--violet-rgb),.10);color:#c4b5fd;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);line-height:1.2} .orion-wizard-btn:hover{background:rgba(var(--violet-rgb),.18);border-color:rgba(var(--violet-rgb),.42);color:#ddd6fe;transform:translateY(-1px)} .orion-wizard-btn:active{transform:translateY(0) scale(.97)} /* Skeleton bot message during generation — 3 placeholder lines that shimmer */ .orion-msg.orion-skeleton{background:linear-gradient(135deg,rgba(var(--violet-rgb),.08),rgba(var(--blue-rgb),.04));border:1px solid rgba(var(--violet-rgb),.18);position:relative;overflow:hidden;padding:12px 14px;animation:fadeUp .25s var(--ease) both} .orion-msg.orion-skeleton::after{content:'';position:absolute;top:0;left:-30%;width:60%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(var(--violet-rgb),.18) 40%,rgba(255,255,255,.06) 50%,rgba(var(--violet-rgb),.18) 60%,transparent 100%);animation:fobSweep 1.4s linear infinite;pointer-events:none;z-index:2} .orion-msg.orion-skeleton .orion-msg-name{display:flex;align-items:center;gap:5px;margin-bottom:8px;color:var(--violet);font-weight:700;font-size:.72rem} .orion-skeleton-star{font-size:.95rem;animation:orionFabStarPulse 1.4s ease-in-out infinite} .orion-skeleton-text{font-size:.78rem;color:#cbd5e1;line-height:1.4;margin-bottom:9px;position:relative;z-index:1} .orion-skeleton-bars{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1} .orion-skeleton-bar{display:block;height:9px;background:rgba(var(--violet-rgb),.10);border-radius:4px} /* Session block — rich card for proposed session */ .orion-session-block{margin:6px 0;padding:14px;background:linear-gradient(135deg,rgba(var(--violet-rgb),.07) 0%,rgba(var(--blue-rgb),.04) 100%);border:1px solid rgba(var(--violet-rgb),.24);border-radius:var(--radius-lg);animation:fadeUp .35s var(--ease) both} .orion-session-head{display:flex;align-items:center;gap:10px;margin-bottom:11px} .orion-session-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.18)} .orion-session-meta{flex:1;min-width:0} .orion-session-title{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orion-session-sub{font-size:.7rem;color:var(--text2);margin-top:2px} .orion-session-badge{font-size:.58rem;background:var(--violet);color:#fff;padding:2px 7px;border-radius:5px;font-weight:700;letter-spacing:.4px;flex-shrink:0;align-self:flex-start;margin-top:2px} .orion-session-preview{margin-bottom:10px;border-radius:var(--radius-sm);overflow:hidden} .orion-session-preview:empty{display:none} .orion-session-preview-renfo{max-height:280px;overflow-y:auto;-webkit-overflow-scrolling:touch} .orion-session-rationale{font-size:.74rem;color:#cbd5e1;line-height:1.55;padding:8px 11px;background:rgba(255,255,255,.025);border-left:2px solid var(--violet);border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin-bottom:11px} .orion-session-rationale strong{color:var(--violet);font-weight:700} .orion-session-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px} .orion-session-action{padding:10px 12px;border-radius:var(--radius-md);font-size:.76rem;font-weight:600;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);display:inline-flex;align-items:center;justify-content:center;gap:5px;border:none} .orion-session-action.ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);color:var(--text2)} .orion-session-action.ghost:hover{background:rgba(255,255,255,.08);color:var(--text)} .orion-session-action.ghost:disabled{opacity:.5;cursor:default;background:rgba(34,197,94,.10);color:var(--emerald);border-color:rgba(34,197,94,.20)} .orion-session-action.add{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(34,197,94,.25)} .orion-session-action.add:hover{box-shadow:0 4px 14px rgba(34,197,94,.36);transform:translateY(-1px)} .orion-session-action.add:active{transform:translateY(0) scale(.97)} @media (prefers-reduced-motion: reduce){.orion-session-block,.orion-wizard-buttons{animation:none!important}.orion-msg.orion-skeleton::after{animation:none!important;display:none}.orion-skeleton-dot{animation:none!important}} /* ═══════════════════════════════════════════════════════════ LEVER ORION (legacy V3) — DEPRECATED, kept for any in-flight page that might still reference these classes. Safe to remove in next cleanup sprint. ═══════════════════════════════════════════════════════════ */ .notif-bell{position:relative;cursor:pointer;padding:4px;-webkit-tap-highlight-color:transparent} .notif-bell svg{color:var(--text2);transition:color .2s} .notif-bell:hover svg{color:var(--text)} .notif-dot{position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:#ef4444;border:2px solid var(--bg);display:none;animation:notifPulse 2s ease infinite} @keyframes notifPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}} .notif-dot.visible{display:block} .notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;background:var(--card);border:1px solid var(--border2);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.4);overflow:hidden;z-index:200;display:none;animation:fadeUp .25s var(--ease)} .notif-dropdown.open{display:block} .sb-notif-bell{position:relative;cursor:pointer;padding:4px;margin-left:auto;-webkit-tap-highlight-color:transparent} .sb-notif-bell svg{color:var(--muted);transition:color .2s}.sb-notif-bell:hover svg{color:var(--text)} .sb-notif-bell .notif-dot{position:absolute;top:0;right:0} .sb-notif-bell .notif-dropdown{position:absolute;top:0;left:calc(100% + 12px);right:auto;width:340px} .notif-dd-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)} .notif-dd-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.92rem} .notif-dd-clear{font-size:.75rem;color:var(--accent);cursor:pointer;font-weight:600} .notif-dd-clear:hover{opacity:.7} .notif-dd-list{overflow-y:auto;max-height:360px} .notif-dd-list::-webkit-scrollbar{width:3px}.notif-dd-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px} .notif-item{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s} .notif-item:hover{background:rgba(255,255,255,.03)} .notif-item.unread{background:rgba(96,165,250,.08);border-left:3px solid var(--accent)} .notif-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .notif-icon.like{background:rgba(249,115,22,.12);color:#f97316} .notif-icon.comment{background:rgba(96,165,250,.12);color:#60a5fa} .notif-icon.coaching{background:rgba(52,211,153,.12);color:#34d399} .notif-icon.coaching-end{background:rgba(148,163,184,.12);color:#94a3b8} .notif-icon.coaching-decline{background:rgba(251,113,133,.12);color:#fb7185} .notif-icon.community{background:rgba(167,139,250,.12);color:#a78bfa} .notif-icon.community-ok{background:rgba(52,211,153,.12);color:#34d399} .notif-icon.community-no{background:rgba(251,113,133,.12);color:#fb7185} .notif-icon.referral{background:linear-gradient(135deg,rgba(var(--orange-rgb),.14),rgba(var(--amber-rgb),.14));color:var(--accent)} .notif-text{flex:1;min-width:0} .notif-msg{font-size:.82rem;color:var(--text);line-height:1.45} .notif-msg strong{color:var(--text);font-weight:600} .notif-preview{font-size:.78rem;color:var(--text2);margin-top:3px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .notif-time{font-size:.72rem;color:var(--muted);margin-top:2px} .notif-empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:.84rem} @media(max-width:767px){.notif-dropdown{position:fixed;top:auto;bottom:60px;left:0;right:0;width:100%;max-height:55vh;border-radius:20px 20px 0 0;border-bottom:none;background:var(--surface,#161619);border:1px solid var(--border2);border-bottom:none}} .comm-group-bar{display:flex;align-items:center;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;margin-bottom:14px} .comm-group-bar::-webkit-scrollbar{display:none} .pillar-bar-fill.shimmer{background-size:200% 100%;background-image:linear-gradient(90deg,var(--bar-c) 30%,rgba(255,255,255,.18) 50%,var(--bar-c) 70%);animation:barGrow 1s var(--ease) both,barShimmer 3s ease 1.2s infinite;animation-delay:var(--d,.3s),calc(var(--d,.3s) + 1.2s)} @keyframes volGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}} .vol-bars{display:flex;gap:6px;align-items:flex-end;height:80px;margin-bottom:8px} .vol-bar{flex:1;border-radius:6px 6px 0 0;min-height:4px;height:var(--bar-h,0%);transform-origin:bottom;animation:volGrow .6s var(--ease) both;animation-delay:var(--d,0s);position:relative} .vol-bar-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:0.6rem;color:var(--muted);white-space:nowrap} .vol-bar-val{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:0.6rem;font-weight:700;color:var(--text2);white-space:nowrap} .streak-card{background:linear-gradient(135deg,var(--ov-orange),rgba(234,88,12,0.04));border:1px solid var(--ov-orange-med);border-radius:16px;padding:20px;margin-bottom:16px} .streak-flame{animation:flameGlow 2s ease infinite} @keyframes flameGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(249,115,22,0.4))}50%{filter:drop-shadow(0 0 12px rgba(249,115,22,0.7))}} @keyframes ringReveal{from{stroke-dashoffset:339.292}to{stroke-dashoffset:var(--ring-target)}} @keyframes ringPulse{0%,100%{filter:drop-shadow(0 0 4px var(--ring-color,#f97316)50) drop-shadow(0 0 12px var(--ring-color,#f97316)20)}50%{filter:drop-shadow(0 0 8px var(--ring-color,#f97316)80) drop-shadow(0 0 20px var(--ring-color,#f97316)40)}} @keyframes ringOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} @keyframes ringShimmer{0%{opacity:.5}50%{opacity:1}100%{opacity:.5}} @keyframes ringScaleIn{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}} @keyframes tickFade{from{opacity:0}to{opacity:.25}} @keyframes auraBreathCalm{0%,100%{stroke-width:5;opacity:.18}50%{stroke-width:10;opacity:.35}} @keyframes auraBreathFast{0%,100%{stroke-width:5;opacity:.15}50%{stroke-width:9;opacity:.30}} @keyframes auraBreathIrregular{0%{stroke-width:5;opacity:.15}25%{stroke-width:9;opacity:.28}40%{stroke-width:6;opacity:.18}65%{stroke-width:8;opacity:.25}100%{stroke-width:5;opacity:.15}} @keyframes auraLiquid{0%{stroke-dashoffset:0}100%{stroke-dashoffset:-60}} @keyframes auraTremble{0%,100%{transform:translate(0,0)}20%{transform:translate(0.4px,-0.3px)}40%{transform:translate(-0.3px,0.4px)}60%{transform:translate(0.3px,0.2px)}80%{transform:translate(-0.2px,-0.3px)}} .aura-fresh .hero-ring-glow{animation:haloBreath 4.5s ease infinite !important} .aura-fresh .hero-ring-orbit{animation-duration:10s !important} .aura-loaded .hero-ring-glow{animation:haloBreath 2.5s ease infinite !important;opacity:.6 !important} .aura-loaded .hero-ring-orbit{animation-duration:18s !important} .aura-loaded .hero-ring-orbit.o2{animation-duration:28s !important} .aura-loaded .hero-ring-orbit.o3{animation-duration:35s !important} .aura-glitch .hero-ring-glow{opacity:.3 !important;animation:none !important} .aura-glitch .hero-ring-svg{animation:auraTremble .4s linear infinite !important} .aura-glitch .hero-ring-orbit{animation-duration:12s !important} .aura-glitch .hero-ring-orbit::after{animation:ringShimmer .8s ease infinite !important} .aura-dormant .hero-ring-glow{opacity:0 !important;animation:none !important} .aura-dormant .hero-ring-orbit{animation-duration:40s !important} .aura-dormant .hero-ring-orbit.o2{animation-duration:55s !important} .aura-dormant .hero-ring-orbit.o3{animation-duration:70s !important} .aura-dormant .hero-ring-orbit::after{opacity:.2 !important} .bottom-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9998;opacity:0;transition:opacity .3s cubic-bezier(.22,1,.36,1);pointer-events:none} .bottom-sheet-overlay.open{opacity:1;pointer-events:auto} .bottom-sheet{position:fixed;bottom:0;left:0;right:0;max-height:88vh;background:linear-gradient(180deg,#1c1c21,#161619);border:1px solid var(--border2);border-bottom:none;border-top-left-radius:20px;border-top-right-radius:20px;z-index:9999;transform:translateY(100%);transition:transform .4s cubic-bezier(.22,1,.36,1);overflow-y:auto;padding:20px 20px calc(28px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;font-family:'Plus Jakarta Sans',system-ui,sans-serif;box-shadow:0 -16px 50px rgba(0,0,0,.5)} .bottom-sheet::before{content:"";position:absolute;top:0;left:-30%;height:1.5px;width:60%;background:linear-gradient(90deg,transparent,rgba(var(--orange-rgb),.85),rgba(var(--violet-rgb),.6),transparent);border-radius:1px;pointer-events:none;opacity:0;transition:opacity .3s} .bottom-sheet.open::before{opacity:1;animation:bsSweep 1.5s cubic-bezier(.22,1,.36,1) .15s both} @keyframes bsSweep{0%{left:-30%}100%{left:130%}} .bottom-sheet.open{transform:translateY(0)} .bottom-sheet-handle{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.15);margin:0 auto 16px} .hero-ring-wrap{position:relative;width:180px;height:180px;margin:0 auto 16px;animation:ringScaleIn .6s var(--ease) both;overflow:visible} .hero-ring-orbit{position:absolute;inset:-3px;border-radius:50%;animation:ringOrbit 10s linear infinite} .hero-ring-orbit::after{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--ring-color,#f97316);box-shadow:0 0 8px var(--ring-color,#f97316),0 0 16px var(--ring-color,#f97316)40;animation:ringShimmer 2.5s ease infinite} .hero-ring-orbit.o2{inset:-5px;animation:ringOrbit 16s linear infinite reverse} .hero-ring-orbit.o2::after{width:4px;height:4px;opacity:.7;background:var(--ring-color2,#818cf8);box-shadow:0 0 6px var(--ring-color2,#818cf8),0 0 14px var(--ring-color2,#818cf8)40;animation:ringShimmer 3.2s ease .8s infinite} .hero-ring-orbit.o3{inset:-1px;animation:ringOrbit 22s linear infinite} .hero-ring-orbit.o3::after{width:3px;height:3px;opacity:.5;background:var(--ring-color3,#c084fc);box-shadow:0 0 5px var(--ring-color3,#c084fc),0 0 12px var(--ring-color3,#c084fc)40;animation:ringShimmer 4s ease 1.5s infinite} .hero-ring-orbit.cal{animation-duration:12s} .hero-ring-orbit.cal::after{background:#c084fc;box-shadow:0 0 6px #a855f7,0 0 14px #a855f740} .hero-ring-orbit.cal.o2{animation-duration:18s} .hero-ring-orbit.cal.o2::after{background:#f97316;box-shadow:0 0 6px #f97316,0 0 14px #f9731640} .hero-ring-orbit.cal.o3{animation-duration:25s} .hero-ring-orbit.cal.o3::after{background:#818cf8;box-shadow:0 0 5px #818cf8,0 0 12px #818cf840} .hero-ring-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,var(--ring-color,#f97316)05,transparent 70%);animation:haloBreath 4s ease infinite;z-index:0;pointer-events:none} @keyframes haloBreath{0%,100%{opacity:.15;transform:scale(.98)}50%{opacity:.35;transform:scale(1.03)}} .hero-ring-svg{position:relative;z-index:2;overflow:visible} .hero-ring-svg .ring-track{fill:none;stroke:var(--ring-track);stroke-width:5;opacity:.35} .hero-ring-svg .ring-ticks{fill:none;stroke:var(--ring-track);stroke-width:1;stroke-dasharray:2 13.4;stroke-linecap:round;animation:tickFade .8s ease both} .hero-ring-svg .ring-progress{fill:none;stroke-width:7;stroke-linecap:round;animation:ringReveal 1.8s var(--ease) forwards,ringPulse 4s ease 2s infinite} .hero-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3} .hero-ring-score{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:2.8rem;line-height:1;letter-spacing:-1px} .hero-ring-level{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.5px;margin-top:4px} .hero-ring-calsub{font-size:.75rem;color:var(--muted);margin-top:4px} .prog-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;padding:20px;margin-bottom:20px;position:relative;overflow:hidden;animation:fadeUp .5s var(--ease)} .prog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--indigo),var(--violet))} .pc-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.15rem;font-weight:700;margin-bottom:4px}.pc-meta{font-size:.82rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap} .week-tabs{display:flex;gap:6px;margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}.week-tabs::-webkit-scrollbar{display:none} .week-tab{flex-shrink:0;padding:10px 20px;border-radius:10px;background:var(--card-bg);border:1px solid var(--card-border);color:var(--text2);font-weight:600;font-size:.88rem;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap} .week-tab.active{background:rgba(249,115,22,0.12);border-color:rgba(249,115,22,0.3);color:var(--accent)}.wt-sub{font-size:.7rem;font-weight:400;display:block;margin-top:2px} .sess-list{display:flex;flex-direction:column;gap:8px} .sess{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);overflow:hidden;transition:all .3s var(--ease);animation:fadeUp .4s var(--ease) both;position:relative} .sess:nth-child(1){animation-delay:.03s}.sess:nth-child(2){animation-delay:.06s}.sess:nth-child(3){animation-delay:.09s}.sess:nth-child(4){animation-delay:.12s}.sess:nth-child(5){animation-delay:.15s}.sess:nth-child(6){animation-delay:.18s}.sess:nth-child(7){animation-delay:.21s} .sess:hover{border-color:var(--border2)}.sess.rest{opacity:.35}.sess.is-today{border-color:rgba(249,115,22,0.3);box-shadow:0 0 20px var(--ov-orange)} .sess-head{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer}.sess-color{width:4px;height:36px;border-radius:2px;flex-shrink:0} .sh-info{flex:1;min-width:0}.sh-day{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}.sh-label{font-weight:700;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sh-right{text-align:right;flex-shrink:0}.sh-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-sm);font-size:.78rem;font-weight:600;border:1px solid currentColor;border-color:rgba(255,255,255,0.1)} .sh-dur{font-size:.78rem;color:var(--muted);margin-top:2px}.sh-fb-done{color:var(--emerald);font-size:.78rem;margin-top:2px} .sh-pilot{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;opacity:.7} .sess-detail{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}.sess.open .sess-detail{max-height:1200px} .sd-inner{padding:0 16px 16px;border-top:1px solid var(--border)}.sd-section{margin-top:14px} .sd-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-bottom:6px;display:flex;align-items:center;gap:6px} .sd-val{font-size:.88rem;color:var(--text2);line-height:1.6;white-space:pre-wrap} .sd-targets{display:flex;gap:8px;flex-wrap:wrap}.sd-target{padding:6px 12px;background:var(--bg);border-radius:8px;font-size:.82rem;color:var(--text2)} .blk-timeline{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-bottom:12px;gap:2px}.blk-seg{display:flex;align-items:center;justify-content:center;font-size:.55rem;font-weight:700;color:rgba(255,255,255,.9);min-width:8px;border-radius:2px} .blk-detail{display:flex;flex-direction:column}.blk-row{display:flex;align-items:stretch;padding:10px 0;border-bottom:1px solid var(--border)}.blk-row:last-child{border-bottom:none} .blk-bar{width:4px;border-radius:2px;margin-right:12px;flex-shrink:0}.blk-info{flex:1;min-width:0}.blk-header{display:flex;align-items:center;gap:8px;margin-bottom:3px} .blk-type{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.3px}.blk-dur{font-size:.75rem;color:var(--muted)}.blk-pilot{display:inline-flex;align-items:center;gap:3px;font-size:.65rem;font-weight:700;opacity:.7;margin-left:auto} .blk-desc{font-size:.85rem;color:var(--text2);line-height:1.5}.blk-desc strong{color:var(--text);font-weight:700}.blk-recov{opacity:.6;font-size:.8rem;margin-top:2px} .blk-footer{text-align:right;font-size:.72rem;color:var(--muted);padding-top:8px;border-top:1px solid var(--border);margin-top:4px} .zones-legend-toggle{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--muted);cursor:pointer;padding:8px 0;margin-bottom:8px;font-weight:500}.zones-legend-toggle:hover{color:var(--accent)} .zones-legend{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-bottom:8px}.zones-legend.open{max-height:300px} .zones-table{width:100%;border-collapse:collapse;font-size:.75rem;background:var(--card-bg);border-radius:8px;overflow:hidden} .zones-table th{text-align:left;padding:6px 10px;font-weight:700;color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)} .zones-table td{padding:6px 10px;border-bottom:1px solid var(--border);color:var(--text2)}.zones-table tr:last-child td{border-bottom:none}.zt-zone{font-weight:700;font-size:.8rem} .renfo-item{background:var(--bg);border-radius:10px;padding:12px 14px;margin-bottom:6px}.ri-name{font-weight:600;font-size:.88rem;color:var(--violet);margin-bottom:2px}.ri-info{font-size:.82rem;color:var(--text2)} .bilan-card{background:linear-gradient(135deg,var(--ov-orange),rgba(234,88,12,0.06));border:1px solid var(--ov-orange-med);border-radius:var(--radius-lg);padding:18px;margin-bottom:12px;animation:fadeUp .4s var(--ease)} .bc-head{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.92rem;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:6px} .bc-text{font-size:.88rem;color:var(--text2);line-height:1.7;white-space:pre-wrap}.bc-week{font-size:.75rem;color:var(--muted);margin-top:8px} .pain-lvl{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.2rem;font-weight:800;display:block;line-height:1} .pain-btn{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;padding:12px 8px;border-radius:12px;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text2);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}.pain-btn.active{border-color:var(--accent);background:rgba(249,115,22,0.1)} .status-btn{display:inline-flex;align-items:center;gap:6px;flex:1;padding:12px 16px;border-radius:12px;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text2);font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.status-btn.active{border-color:var(--accent);background:rgba(249,115,22,0.1);color:var(--accent)} .status-selector{display:flex;gap:8px} .pain-selector{display:flex;gap:8px} .sleep-star{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--card-border);background:var(--card-bg);color:var(--muted);cursor:pointer;transition:all .2s}.sleep-star.active{border-color:var(--amber);background:rgba(251,191,36,0.12);color:var(--amber)} .sleep-stars{display:flex;gap:6px} .scale-dots{display:flex;gap:3px} .scale-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);background:var(--bg);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--muted)}.scale-dot:hover{border-color:var(--accent)}.scale-dot.active{border-color:transparent;color:#fff} .strava-match-banner{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(252,76,2,0.08);border:1px solid rgba(252,76,2,0.2);margin-bottom:16px;font-size:.85rem;color:var(--text2)} .strava-badge{font-size:.68rem;color:#FC4C02;font-weight:700;margin-top:2px} .strava-filled{border-color:rgba(252,76,2,0.2) !important} .fg-section{margin-bottom:16px}.fg-section-title{font-size:.82rem;font-weight:700;color:var(--text2);margin-bottom:10px;display:flex;align-items:center;gap:8px} .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fg{margin-bottom:12px} .fg label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:4px} .fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:10px;color:var(--text);font-size:.9rem;font-family:inherit;outline:none;transition:border-color .2s}.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent)} .btn-submit{width:100%;padding:13px;margin-top:10px;border:none;border-radius:var(--radius-md);background:var(--orange);color:#fff;font-weight:600;font-size:.88rem;cursor:pointer;font-family:inherit;transition:all .2s}.btn-submit:disabled{opacity:.4;cursor:not-allowed}.btn-submit:active{transform:scale(0.97)} .btn-cancel-sm{width:100%;padding:10px;margin-top:6px;border:none;border-radius:var(--radius-md);background:transparent;color:var(--muted);font-weight:500;font-size:.84rem;cursor:pointer;font-family:inherit;transition:all .15s}.btn-cancel-sm:hover{color:var(--text2)} .rpe-slider input[type=range]{width:100%;accent-color:var(--accent)}.rpe-val{font-family:'Plus Jakarta Sans',sans-serif;font-size:2rem;font-weight:800;text-align:center}.rpe-desc{text-align:center;font-size:.82rem;margin-bottom:8px} .pain-zone-grid{display:flex;flex-wrap:wrap;gap:6px}.pain-zone-btn{padding:6px 12px;border-radius:8px;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text2);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s}.pain-zone-btn.selected{border-color:var(--rose);background:rgba(251,113,133,0.1);color:var(--rose)} .sub-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:4px} .sub-tab{flex:1;text-align:center;padding:10px 8px;border-radius:10px;font-size:.82rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s var(--ease)}.sub-tab.active{background:var(--accent);color:#fff} .sub-badge{display:inline-block;min-width:18px;padding:1px 5px;border-radius:9px;background:var(--rose);color:#fff;font-size:.6rem;font-weight:700;margin-left:4px;vertical-align:1px} .lb-filters{display:flex;gap:6px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px} .lb-filter{padding:8px 16px;border-radius:20px;font-size:.82rem;font-weight:600;border:1px solid var(--card-border);background:var(--card-bg);color:var(--text2);cursor:pointer;transition:all .2s;white-space:nowrap}.lb-filter.active{background:var(--accent);border-color:var(--accent);color:#fff} .lb-metric-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:4px} .lb-metric-tab{flex:1;text-align:center;padding:8px;border-radius:10px;font-size:.78rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .2s}.lb-metric-tab.active{background:linear-gradient(135deg,var(--orange),var(--orange2));color:#fff} .lb-podium{display:flex;justify-content:center;gap:12px;margin-bottom:20px;padding:16px 0}.lb-podium-item{display:flex;flex-direction:column;align-items:center;gap:6px} .lb-podium-name{font-size:.78rem;font-weight:600;color:var(--text2);max-width:80px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-podium-score{font-family:'Plus Jakarta Sans',sans-serif;font-size:.82rem;font-weight:700} .lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;margin-bottom:6px;background:var(--card-bg);border:1px solid var(--card-border);transition:all .2s;animation:fadeUp .3s var(--ease) both;cursor:pointer} .lb-row.me{background:rgba(249,115,22,0.06);border-color:rgba(249,115,22,0.2)} .lb-rank{font-family:'Plus Jakarta Sans',sans-serif;width:34px;flex-shrink:0;text-align:center;color:var(--text2)} .lb-row:hover{border-color:rgba(249,115,22,.18)} .lb-avatar{width:36px;height:36px;flex-shrink:0}.lb-name{flex:1;min-width:0;font-weight:600;font-size:.88rem;overflow:hidden}.lb-name span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .lb-score{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:.95rem;flex-shrink:0}.lb-level{font-size:.68rem;font-weight:600;padding:2px 8px;border-radius:6px;flex-shrink:0} .comm-card{animation:fadeUp .4s var(--ease) both;margin-bottom:14px} .comm-card-inner{overflow:hidden;background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;transition:all .2s} .comm-card-inner:hover{border-color:var(--accent)40;transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)} .comm-cover{width:100%;height:120px;object-fit:cover;display:block} .comm-cover-fallback{width:100%;height:80px;background:linear-gradient(135deg,var(--accent)22,var(--indigo)22);display:flex;align-items:center;justify-content:center} .comm-body{padding:14px 16px} .comm-header{display:flex;align-items:center;gap:8px;margin-bottom:6px} .comm-name{font-weight:700;font-size:.95rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comm-vis-badge{font-size:.68rem;padding:3px 8px;border-radius:6px;font-weight:700;flex-shrink:0} .comm-vis-badge.public{background:rgba(52,211,153,.12);color:var(--emerald)} .comm-vis-badge.private{background:rgba(251,191,36,.12);color:var(--amber)} .comm-desc{font-size:.82rem;color:var(--text2);margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comm-footer{display:flex;align-items:center;justify-content:space-between;gap:10px} .comm-meta{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:4px} .comm-join{padding:8px 18px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--indigo));color:#fff;border:none;font-weight:700;font-size:.8rem;cursor:pointer;font-family:inherit;flex-shrink:0;transition:all .2s} .comm-join:active{transform:scale(.96)} .comm-join.pending{background:rgba(251,191,36,.15);color:var(--amber);border:1px solid rgba(251,191,36,.3);cursor:default} .comm-join.member{background:rgba(52,211,153,.12);color:var(--emerald);border:1px solid rgba(52,211,153,.2);cursor:default} .comm-action-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:6px 14px;color:#9ca3af;font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s} .comm-action-btn:hover{border-color:var(--accent);color:var(--accent)} .comm-action-btn.quit{background:rgba(251,113,133,.06);border-color:rgba(251,113,133,.15);color:#fb7185} .comm-action-btn.quit:hover{background:rgba(251,113,133,.15);border-color:#fb7185} .profile-header{text-align:center;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)} .profile-avatar{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2));display:flex;align-items:center;justify-content:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:800;margin:0 auto 12px} .profile-avatar:has(.agoge-avatar-component){width:auto;height:auto;background:none;overflow:visible;box-shadow:none;border-radius:0} .profile-name{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;font-weight:700}.profile-sport{font-size:.88rem;color:var(--accent);margin-top:2px} .profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .profile-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);margin-bottom:12px;overflow:hidden} .ps-toggle{cursor:pointer;-webkit-tap-highlight-color:transparent} .ps-toggle .ps-chev{transition:transform .25s;display:inline-block} .ps-toggle.collapsed .ps-chev{transform:rotate(-90deg)} .ps-toggle.collapsed+.ps-body{display:none} .ps-title{font-size:.72rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:700;padding:14px 16px 8px;display:flex;align-items:center;gap:6px} .ps-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--border)}.ps-row:first-of-type{border-top:none} .ps-label{font-size:.85rem;color:var(--text2)}.ps-val{font-size:.85rem;font-weight:600} /* ═══ Profil restructuré V4 — group titles + action btns + danger zone ═══ */ .prof-group-title{ font-size:.65rem; text-transform:uppercase; letter-spacing:1.2px; color:var(--accent); font-weight:700; margin:22px 4px 10px; display:flex; align-items:center; gap:8px; } .prof-group-title svg{flex-shrink:0;opacity:.85} .prof-group-title:first-of-type{margin-top:8px} /* Boutons d'action dans Aide & Support */ .prof-action-btn{ width:100%; display:flex; align-items:center; gap:12px; padding:13px 16px; background:transparent; border:none; border-top:1px solid var(--border); color:var(--text); font-family:inherit; font-size:.85rem; font-weight:500; cursor:pointer; text-align:left; transition:background .15s var(--ease); } .prof-action-btn:first-child{border-top:none} .prof-action-btn:hover{background:var(--ov1)} .prof-action-btn:active{background:var(--ov2)} .prof-action-btn>svg:first-child{flex-shrink:0} /* Zone de risque — séparée visuellement */ .prof-danger-zone{ margin-top:32px; padding-top:8px; } .prof-danger-divider{ display:flex;align-items:center;gap:10px; margin:0 4px 14px; font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1.2px; font-weight:700; } .prof-danger-divider::before,.prof-danger-divider::after{ content:'';flex:1;height:1px;background:var(--border); } .prof-danger-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; margin-bottom:8px; border-radius:var(--radius-md); background:rgba(var(--rose-rgb),.06); border:1px solid rgba(var(--rose-rgb),.16); color:var(--rose); font-family:inherit; font-weight:600; font-size:.82rem; cursor:pointer; transition:all .15s var(--ease); } .prof-danger-btn:hover{background:rgba(var(--rose-rgb),.1);border-color:rgba(var(--rose-rgb),.28)} .prof-danger-btn:active{transform:scale(.98)} .prof-danger-btn--del{ background:transparent; border-color:var(--border); color:var(--muted); font-size:.75rem; padding:9px 18px; } .prof-danger-btn--del:hover{ background:rgba(var(--rose-rgb),.04); border-color:rgba(var(--rose-rgb),.18); color:var(--rose); } .link{color:var(--accent);cursor:pointer;font-weight:600} .theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer} .theme-toggle-track{width:48px;height:26px;border-radius:13px;background:var(--elevated);position:relative;transition:background .3s} .theme-toggle-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .3s var(--ease);display:flex;align-items:center;justify-content:center;font-size:.7rem}.light-theme .theme-toggle-thumb{left:25px} .msg-container{display:flex;flex-direction:column;height:calc(100vh - 200px - env(safe-area-inset-bottom));max-height:calc(100dvh - 200px - env(safe-area-inset-bottom));margin:0 -16px;padding:0} .msg-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0} .msg-header-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--orange2));display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700;flex-shrink:0} .msg-header-avatar:has(.agoge-avatar-component){width:auto;height:auto;background:none;overflow:visible;box-shadow:none;border-radius:0} .msg-header-name{font-weight:700;font-size:.95rem}.msg-header-sub{font-size:.75rem;color:var(--muted)} .msg-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch} .msg-bubble{max-width:82%;padding:10px 14px;border-radius:16px;font-size:.88rem;line-height:1.5;word-break:break-word;animation:fadeUp .2s var(--ease)} .msg-bubble.coach{align-self:flex-start;background:var(--card);border:1px solid var(--card-border);border-bottom-left-radius:4px} .msg-bubble.athlete{align-self:flex-end;background:linear-gradient(135deg,var(--ov-orange-med),rgba(234,88,12,0.1));border:1px solid rgba(249,115,22,0.2);border-bottom-right-radius:4px} .msg-bubble.sending{opacity:.6}.msg-time{font-size:.68rem;color:var(--muted);margin-top:3px}.msg-time.coach{text-align:left}.msg-time.athlete{text-align:right} .msg-date-sep{text-align:center;font-size:.72rem;color:var(--muted);padding:8px 0;font-weight:600} .msg-input-bar{flex-shrink:0;display:flex;align-items:flex-end;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--surface)} .msg-input{flex:1;padding:10px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:20px;color:var(--text);font-size:.88rem;font-family:inherit;resize:none;max-height:100px;overflow-y:auto;outline:none;transition:border .2s;line-height:1.4}.msg-input:focus{border-color:var(--accent)} .msg-send{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange2));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}.msg-send:hover{box-shadow:0 2px 12px rgba(249,115,22,0.3);transform:scale(1.05)} .inp{padding:10px 12px;background:var(--bg);border:1px solid var(--border2);border-radius:10px;color:var(--text);font-size:.88rem;font-family:inherit;outline:none;transition:border .2s;box-sizing:border-box}.inp:focus{border-color:var(--accent)} /* Global and overrides native browser rendering */ select{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:100%;padding:10px 36px 10px 14px;background-color:var(--input-bg,var(--bg));background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;border:1px solid var(--border2);border-radius:10px;color:var(--text);font-size:.88rem;font-family:inherit;cursor:pointer;transition:border-color .2s,box-shadow .2s;outline:none;box-sizing:border-box} select:hover{border-color:rgba(255,255,255,0.15)} select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--orange-rgb),0.12)} select:disabled{opacity:.5;cursor:not-allowed} select option{background:var(--card-bg);color:var(--text);padding:8px} /* .inp and .ag-input on selects need chevron + right padding */ select.inp,select.ag-input{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer} .btn-outline{padding:10px 20px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:var(--radius-md);color:var(--text);font-size:.88rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--orange-rgb),0.05)} .msg-empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted);padding:40px} .modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(8px);z-index:100;align-items:flex-end;justify-content:center}.modal-overlay.open{display:flex} .modal-sheet{background:var(--surface);border-radius:20px 20px 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;padding:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));animation:sheetUp .35s var(--ease)} @keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}} /* ═══════════════════════════════════════════════════════════ SESSION DETAIL — VERDICT V4.2 Sprint E v3 (signature pédagogique) Bandeau premium en proue de la fiche d'activité. Hiérarchie : badge eyebrow → titre constat → divider → body insight. ═══════════════════════════════════════════════════════════ */ .sd-verdict{position:relative;margin:0 0 16px;padding:18px 16px 16px;background:linear-gradient(135deg,rgba(var(--violet-rgb),.14) 0%,rgba(var(--violet-rgb),.05) 50%,rgba(var(--orange-rgb),.08) 100%);border:1px solid rgba(var(--violet-rgb),.32);border-radius:16px;overflow:hidden;animation:sdVerdictIn .6s var(--ease) .15s both;box-shadow:0 4px 18px rgba(var(--violet-rgb),.12)} /* Glow halo derrière le bandeau */ .sd-verdict-glow{position:absolute;top:-40%;right:-15%;width:55%;height:160%;background:radial-gradient(ellipse at center,rgba(var(--violet-rgb),.20) 0%,transparent 60%);pointer-events:none;animation:sdGlowPulse 4.2s ease-in-out infinite} @keyframes sdGlowPulse{0%,100%{opacity:.55}50%{opacity:.85}} /* Sweep horizontal (signature mount) */ .sd-verdict-sweep{position:absolute;top:0;left:-40%;right:0;height:1.5px;background:linear-gradient(90deg,transparent 12%,rgba(var(--violet-rgb),.85) 42%,rgba(var(--orange-rgb),1) 58%,transparent 88%);animation:fobSweep 1.6s var(--ease) .35s 1 both;pointer-events:none} /* Badge eyebrow (clair, sans confusion avec un H1) */ .sd-verdict-badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;background:rgba(var(--violet-rgb),.18);border:1px solid rgba(var(--violet-rgb),.40);border-radius:999px;margin-bottom:14px;animation:sdItemIn .5s var(--ease) .35s both} .sd-verdict-star{font-size:.9rem;line-height:1;color:var(--violet);animation:orionFabStarPulse 2.6s ease-in-out infinite;text-shadow:0 0 8px rgba(var(--violet-rgb),.6)} .sd-verdict-badge-lbl{font-size:.62rem;font-weight:700;color:var(--violet);text-transform:uppercase;letter-spacing:.7px;line-height:1} /* Titre du constat (gros, contrasté, signature) */ .sd-verdict-title{position:relative;font-size:1.18rem;font-weight:800;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;line-height:1.3;margin-bottom:10px;letter-spacing:-.2px;animation:sdItemIn .5s var(--ease) .5s both} /* Divider subtil entre titre et body */ .sd-verdict-divider{position:relative;width:36px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--violet),var(--accent));margin-bottom:11px;animation:sdDividerIn .5s var(--ease) .65s both;transform-origin:left} /* Body insight pédagogique */ .sd-verdict-body{position:relative;font-size:.85rem;color:var(--text2);line-height:1.62;animation:sdItemIn .5s var(--ease) .8s both} @keyframes sdVerdictIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes sdItemIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} @keyframes sdDividerIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (prefers-reduced-motion: reduce){ .sd-verdict,.sd-verdict-sweep,.sd-verdict-star,.sd-verdict-glow,.sd-verdict-badge,.sd-verdict-title,.sd-verdict-divider,.sd-verdict-body{animation:none!important} } .modal-handle{width:36px;height:4px;background:var(--elevated);border-radius:2px;margin:0 auto 20px}.modal-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:20px} .fg{margin-bottom:18px}.fg label{display:block;font-size:.82rem;font-weight:500;color:var(--text2);margin-bottom:6px} .fg input,.fg select,.fg textarea{width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:10px;color:var(--text);font-size:.92rem;font-family:inherit;outline:none;transition:border .2s} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--accent)}.fg textarea{resize:vertical;min-height:70px} .fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fg-section{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border)} .fg-section-title{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;gap:6px} .rpe-slider{position:relative;margin-top:8px}.rpe-slider input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--emerald) 0%,var(--amber) 50%,var(--rose) 100%);outline:none;cursor:pointer} .rpe-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.3);cursor:pointer;border:3px solid var(--accent)} .rpe-val{text-align:center;font-family:'Plus Jakarta Sans',sans-serif;font-size:2.4rem;font-weight:800;margin-bottom:4px;transition:color .2s} .rpe-desc{text-align:center;font-size:.82rem;font-weight:500;margin-top:4px;transition:color .2s} .status-selector{display:flex;gap:8px;margin-bottom:20px} .status-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border-radius:10px;border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-size:.82rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;min-height:44px} .status-btn.active[data-status="done"]{background:rgba(52,211,153,0.1);border-color:#34d399;color:#34d399} .status-btn.active[data-status="adapted"]{background:rgba(251,191,36,0.1);border-color:#fbbf24;color:#fbbf24} .status-btn.active[data-status="skipped"]{background:rgba(251,113,133,0.1);border-color:#fb7185;color:#fb7185} .pain-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .pain-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:12px;border:1.5px solid var(--border2);background:transparent;color:var(--text2);font-size:.75rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;min-height:44px} .pain-btn.active[data-pain="Non"]{background:var(--ov-emerald);border-color:#34d399;color:#34d399} .pain-btn.active[data-pain="Légère"]{background:var(--ov-amber);border-color:#fbbf24;color:#fbbf24} .pain-btn.active[data-pain="Modérée"]{background:rgba(249,115,22,0.06);border-color:#f97316;color:#f97316} .pain-btn.active[data-pain="Importante"]{background:var(--ov-rose);border-color:#fb7185;color:#fb7185} .pain-zone-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .pain-zone-btn{padding:8px 14px;border-radius:8px;border:1px solid var(--border2);background:var(--bg);font-size:.82rem;font-weight:500;cursor:pointer;transition:all .2s;min-height:44px;display:flex;align-items:center}.pain-zone-btn.selected{background:var(--ov-orange-med);border-color:var(--accent);color:var(--accent)} .scale-dots{display:flex;gap:3px} .scale-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--border2);background:var(--bg);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:var(--muted)}.scale-dot:hover{border-color:var(--accent)}.scale-dot.active{border-color:transparent;color:#fff} .sleep-stars{display:flex;gap:6px}.sleep-star{width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);background:var(--bg);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;color:var(--muted)}.sleep-star.active{background:var(--accent);border-color:var(--accent);color:#fff} .strava-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border:none;border-radius:10px;font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s} .strava-connect{background:#FC4C02;color:#fff}.strava-connected{background:rgba(52,211,153,0.1);color:var(--emerald);border:1px solid rgba(52,211,153,0.2);cursor:default}.strava-icon{width:18px;height:18px} .strava-match-banner{display:flex;align-items:center;gap:10px;padding:12px 16px;background:rgba(252,76,2,0.08);border:1px solid rgba(252,76,2,0.25);border-radius:10px;margin-bottom:16px;font-size:.82rem}.strava-match-banner strong{color:#FC4C02} .strava-no-match{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--bg);border:1px solid var(--border2);border-radius:10px;margin-bottom:16px;font-size:.8rem;color:var(--muted)} .strava-filled{position:relative}.strava-filled input{background:rgba(252,76,2,0.04);border-color:rgba(252,76,2,0.2)} .strava-badge{position:absolute;top:0;right:0;display:flex;align-items:center;gap:4px;padding:2px 8px;border-radius:0 8px 0 8px;background:rgba(252,76,2,0.1);font-size:.68rem;font-weight:600;color:#FC4C02} .btn-feedback{width:100%;padding:12px;margin-top:14px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s;font-family:inherit}.btn-feedback:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--orange-rgb),0.25)}.btn-feedback:disabled{opacity:.4;cursor:default;transform:none;filter:none} .btn-feedback:active,.btn-submit:active{transform:scale(0.97)} .btn-cancel{width:100%;padding:12px;background:transparent;color:var(--text2);border:1px solid var(--border2);border-radius:var(--radius-md);font-size:.88rem;cursor:pointer;font-family:inherit;margin-top:8px;transition:all .2s}.btn-cancel:hover{border-color:var(--accent);color:var(--accent)} .btn-ghost{background:none;border:none;color:var(--text2);font-size:.82rem;font-weight:500;cursor:pointer;font-family:inherit;padding:6px 10px;border-radius:var(--radius-sm);transition:all .15s}.btn-ghost:hover{background:rgba(var(--orange-rgb),0.05);color:var(--accent)} .btn-danger{padding:10px 20px;background:transparent;color:var(--rose);border:1px solid rgba(var(--rose-rgb),0.15);border-radius:var(--radius-md);font-size:.88rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}.btn-danger:hover{background:rgba(var(--rose-rgb),0.08);border-color:rgba(var(--rose-rgb),0.3)} .ag-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;font-size:.68rem;font-weight:600;border-radius:var(--radius-sm);border:1px solid rgba(var(--orange-rgb),0.1);background:rgba(var(--orange-rgb),0.06);color:var(--orange);letter-spacing:.2px} .ag-badge-emerald{background:rgba(var(--emerald-rgb),0.06);color:var(--emerald);border-color:rgba(var(--emerald-rgb),0.1)} .ag-badge-rose{background:rgba(var(--rose-rgb),0.06);color:var(--rose);border-color:rgba(var(--rose-rgb),0.1)} .ag-badge-amber{background:rgba(var(--amber-rgb),0.06);color:var(--amber);border-color:rgba(var(--amber-rgb),0.1)} .ag-badge-cyan{background:rgba(var(--cyan-rgb),0.06);color:var(--cyan);border-color:rgba(var(--cyan-rgb),0.1)} .ag-badge-violet{background:rgba(var(--violet-rgb),0.06);color:var(--violet);border-color:rgba(var(--violet-rgb),0.1)} .ag-badge-muted{background:rgba(255,255,255,0.03);color:var(--muted);border-color:var(--border2)} .btn-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;background:var(--orange);color:#fff;border:none;border-radius:var(--radius-md);font-size:.88rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s}.btn-cta:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 12px rgba(var(--orange-rgb),0.25)}.btn-cta:active{transform:scale(0.97)}.btn-cta:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none} .locked-screen{min-height:50vh;display:flex;align-items:center;justify-content:center} .locked-card{background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:40px 30px;text-align:center;max-width:360px;animation:fadeUp .4s var(--ease)}.locked-icon{margin:0 auto 16px;color:var(--muted)}.locked-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.1rem;font-weight:700;margin-bottom:8px}.locked-text{font-size:.88rem;color:var(--text2);margin-bottom:20px;line-height:1.5} .race-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;display:flex;align-items:center;gap:14px} .race-icon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--amber),var(--rose));display:flex;align-items:center;justify-content:center;flex-shrink:0} .race-info{flex:1}.race-name{font-weight:700;font-size:.95rem}.race-countdown{font-size:.82rem;color:var(--amber)} .race-days{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.5rem;font-weight:800;color:var(--amber);flex-shrink:0}.race-days small{font-size:.65rem;color:var(--muted);display:block} .community-link{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-lg);padding:16px;margin-top:16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .3s var(--ease)}.community-link:hover{border-color:var(--border2);transform:translateY(-2px)} .compliance-bar{height:6px;border-radius:3px;background:var(--elevated);overflow:hidden}.compliance-bar-fill{height:100%;border-radius:3px;transition:width .8s var(--ease)} .chart-container{display:flex;gap:8px;align-items:flex-end;height:120px}.chart-bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;gap:4px} .chart-value{font-size:.75rem;font-weight:700;color:var(--text2)}.chart-bar{width:100%;border-radius:8px 8px 0 0;min-height:4px;animation:growUp .6s var(--ease) both;animation-delay:var(--delay,0s)} @keyframes growUp{from{max-height:0;height:0}to{max-height:var(--h);height:var(--h)}}.chart-label{font-size:.7rem;color:var(--muted);margin-top:4px} .toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:12px;font-size:.85rem;font-weight:500;z-index:200;box-shadow:0 8px 30px rgba(0,0,0,0.4);animation:toastIn .3s var(--ease),toastOut .3s var(--ease) 3s forwards;backdrop-filter:blur(12px)} .toast-ok{background:rgba(52,211,153,0.2);border:1px solid rgba(52,211,153,0.3);color:#6ee7b7}.toast-err{background:rgba(251,113,133,0.2);border:1px solid rgba(251,113,133,0.3);color:#fda4af}.toast-info{background:rgba(96,165,250,0.15);border:1px solid rgba(96,165,250,0.25);color:#93c5fd}.toast-warn{background:rgba(251,191,36,0.15);border:1px solid rgba(251,191,36,0.25);color:#fde68a} @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}} @keyframes toastOut{to{opacity:0;transform:translateX(-50%) translateY(-10px)}} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}@keyframes lbPodUp{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}} /* ─── Leaderboard motion (Charte V4 — ease AGOGE) ─── */ @keyframes lbRingDraw{from{stroke-dasharray:0 999}} @keyframes lbCrownFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} @keyframes lbPodestRise{from{transform:scaleY(0)}to{transform:scaleY(1)}} @keyframes lbAuraPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.45),0 0 14px 0 rgba(251,191,36,.18)}50%{box-shadow:0 0 0 6px rgba(251,191,36,0),0 0 22px 4px rgba(251,191,36,.32)}} .lb-podium-aura{border-radius:50%;animation:lbAuraPulse 2.4s ease-in-out infinite} .lb-podium-item{transition:transform .15s var(--ease)} .lb-podium-item:active{transform:scale(.97)} .rw-card{transition:border-color .25s var(--ease),background .25s var(--ease)} .rw-body{transition:max-height .35s var(--ease)} .rw-reveal:hover{filter:brightness(1.15)} .rw-reveal:active{transform:scale(.95)} /* Solo form styles */ .sf-step-dot{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.08);transition:all .3s}.sf-step-dot.active{background:linear-gradient(90deg,#f97316,#ef4444)} .sf-chip{padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);color:var(--text2);font-size:.8rem;font-weight:500;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}.sf-chip:hover,.sf-chip:active{border-color:var(--chip-c,#f97316);background:rgba(249,115,22,.06)}.sf-chip.active{border-color:var(--chip-c,#f97316);background:rgba(249,115,22,.1);color:var(--chip-c,#f97316);font-weight:700;box-shadow:0 0 12px rgba(249,115,22,.15)} .sf-label{font-size:.72rem;color:var(--muted);display:block;margin-bottom:4px;font-weight:500;text-transform:uppercase;letter-spacing:.5px} .sf-field{position:relative}.sf-inp{width:100%;padding-right:36px!important}.sf-unit{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.72rem;color:var(--muted);pointer-events:none} .sf-rpe-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,#22c55e,#84cc16,#eab308,#f97316,#ef4444);outline:none;opacity:.85;transition:opacity .2s}.sf-rpe-slider:hover{opacity:1}.sf-rpe-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 2px rgba(249,115,22,.3)}.sf-rpe-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:none;box-shadow:0 2px 8px rgba(0,0,0,.3)} .loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px;color:var(--muted)} .ls-spinner{width:40px;height:40px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}} .agoge-loader{display:inline-block;position:relative}.agoge-loader svg{display:block} .error-screen{text-align:center;padding:80px 24px}.bilans-empty{text-align:center;padding:60px 20px;color:var(--muted)} @media(min-width:768px){:root{--sidebar-w:240px}.app-bar{display:none}.bottom-nav{display:none!important} .sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--surface);border-right:1px solid var(--border2);z-index:50;padding:24px 16px;gap:4px} .sb-logo{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:20px}.sb-logo-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:2px;background:linear-gradient(135deg,var(--orange),var(--orange2));-webkit-background-clip:text;-webkit-text-fill-color:transparent} .sb-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;color:var(--muted);cursor:pointer;transition:all .2s;font-size:.88rem;font-weight:600}.sb-item:hover{background:var(--card-bg);color:var(--text2)}.sb-item.active{background:rgba(249,115,22,0.1);color:var(--accent)}.sb-item svg{width:20px;height:20px;flex-shrink:0} .sb-bottom{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}.sb-user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;cursor:pointer}.sb-user-name{font-size:.85rem;font-weight:600}.sb-user-sub{font-size:.72rem;color:var(--muted)} .sb-theme{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:.82rem;color:var(--muted);cursor:pointer;border-radius:8px;transition:all .2s}.sb-theme:hover{background:var(--card-bg)} .container{margin-left:var(--sidebar-w);max-width:800px;padding:32px 40px 40px}.pillars-grid{grid-template-columns:1fr 1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr 1fr 1fr}} @media(min-width:1024px){:root{--sidebar-w:260px}.container{max-width:900px;padding:32px 48px 48px}} /* ─── PWA Install Banner ─── */ /* ═════ Install Banner V4.1 ═════ */ .install-banner{position:fixed;bottom:84px;left:14px;right:14px;z-index:60;background:linear-gradient(180deg,#1c1c21,#161619);border-radius:18px;padding:18px 20px;border:1px solid var(--border2);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(var(--orange-rgb),.06);display:none;max-width:420px;margin:0 auto;overflow:hidden;font-family:'Plus Jakarta Sans',system-ui,sans-serif} .install-banner.show{display:block;animation:bannerSlideUp .45s cubic-bezier(.22,1,.36,1) both} .install-banner::before{content:"";position:absolute;top:0;left:-30%;height:1.5px;width:60%;background:linear-gradient(90deg,transparent,rgba(var(--orange-rgb),.85),rgba(var(--violet-rgb),.6),transparent);animation:ibSweep 1.5s cubic-bezier(.22,1,.36,1) .25s both;border-radius:1px;pointer-events:none} @keyframes bannerSlideUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes ibSweep{0%{left:-30%}100%{left:130%}} .install-banner-close{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;border:none;background:rgba(255,255,255,.06);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;padding:0;transition:all .15s cubic-bezier(.22,1,.36,1);z-index:2} .install-banner-close:hover{background:rgba(255,255,255,.1);color:var(--text);transform:rotate(90deg)} .install-banner-close svg{width:11px;height:11px} .install-banner-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;margin-right:24px} .install-banner-icon{width:46px;height:46px;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative} .install-banner-icon::before{content:"";position:absolute;inset:-2px;border-radius:14px;background:radial-gradient(circle,rgba(var(--orange-rgb),.4),transparent 70%);opacity:.5;pointer-events:none} .install-banner-icon svg{position:relative;z-index:1;width:46px;height:46px} .install-banner-title{font-weight:800;font-size:.95rem;color:var(--text);letter-spacing:-.2px;line-height:1.2} .install-banner-sub{font-size:.74rem;color:var(--text2);margin-top:3px;line-height:1.35} .install-banner-features{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px} .install-banner-feat{font-size:.68rem;font-weight:600;padding:5px 11px;background:rgba(var(--orange-rgb),.08);border:1px solid rgba(var(--orange-rgb),.18);border-radius:9999px;color:#fb923c;letter-spacing:.2px} .install-banner-actions{display:flex;gap:8px} .install-banner-btn{flex:1;padding:11px 14px;border-radius:11px;border:none;font-size:.82rem;font-weight:700;cursor:pointer;text-align:center;font-family:inherit;transition:transform .15s cubic-bezier(.22,1,.36,1),background .15s cubic-bezier(.22,1,.36,1),border-color .15s cubic-bezier(.22,1,.36,1)} .install-banner-btn.primary{background:#fff;color:#0f0f12} .install-banner-btn.primary:hover{transform:translateY(-1px)} .install-banner-btn.secondary{background:transparent;color:var(--text2);border:1px solid rgba(255,255,255,.12)} .install-banner-btn.secondary:hover{background:rgba(255,255,255,.04);color:var(--text)} @media(min-width:768px){.install-banner{bottom:24px;left:auto;right:24px;max-width:380px}} @media (prefers-reduced-motion: reduce){.install-banner.show,.install-banner::before{animation:none !important}.install-banner-btn,.install-banner-close{transition:none !important}} /* ═══════════════════════════════════════════════════════════ LAYOUT FULLSCREEN — Mobile edge-to-edge Strava-style ═══════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ 0b. LOGO AGOGE — blanc pur, compact, plus de gradient ═══════════════════════════════════════════════════════════════ */ .app-bar .logo-text, .sb-logo-text { font-family: var(--font-heading) !important; font-weight: 800 !important; letter-spacing: 0.5px !important; background: none !important; -webkit-background-clip: unset !important; -webkit-text-fill-color: #ffffff !important; color: #ffffff !important; } /* Light theme : logo en noir */ .light-theme .app-bar .logo-text, .light-theme .sb-logo-text, .theme-ghost .app-bar .logo-text, .theme-ghost .sb-logo-text { -webkit-text-fill-color: var(--text) !important; color: var(--text) !important; } /* ═══════════════════════════════════════════════════════════════ 0c. HEADER COMMUNAUTE IMMERSIF ═══════════════════════════════════════════════════════════════ */ .comm-hero { position: relative; width: 100%; height: 200px; overflow: hidden; margin-bottom: 0; } .comm-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .comm-hero-fallback { width: 100%; height: 100%; background: linear-gradient(135deg, var(--ov-orange-med), rgba(129,140,248,0.1)); display: flex; align-items: center; justify-content: center; } /* Gradient sombre en bas pour lisibilite du texte */ .comm-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 65%; background: linear-gradient(to top, rgba(17,17,20,0.9) 0%, rgba(17,17,20,0.4) 50%, transparent 100%); pointer-events: none; } .light-theme .comm-hero::after, .theme-ghost .comm-hero::after { background: linear-gradient(to top, rgba(248,249,250,0.92) 0%, rgba(248,249,250,0.4) 50%, transparent 100%); } /* Contenu positionne par-dessus l'image */ .comm-hero-content { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 16px; display: flex; align-items: flex-end; gap: 10px; } .comm-hero-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: #ffffff; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } .light-theme .comm-hero-name, .theme-ghost .comm-hero-name { color: var(--text); text-shadow: none; } .comm-hero-actions { display: flex; gap: 6px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ 1. APP-BAR — fixed, semi-transparent, contenu passe derriere ═══════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .app-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: rgba(17,17,20,0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: none; transition: transform var(--hide-speed) var(--ease), background 0.3s ease; will-change: transform; } .light-theme .app-bar, .theme-ghost .app-bar { background: rgba(248,249,250,0.4); } .app-bar.hidden { transform: translateY(-100%); } /* Hero communaute : remonte derriere le header, image bord-a-bord */ .comm-hero { margin-top: calc(-1 * (var(--bar-h) + env(safe-area-inset-top))); height: calc(240px + var(--bar-h) + env(safe-area-inset-top)); } /* ═══════════════════════════════════════════════════════════════ 2. BOTTOM-NAV — auto-hide au scroll ═══════════════════════════════════════════════════════════════ */ .bottom-nav { transition: transform var(--hide-speed) var(--ease); will-change: transform; } .bottom-nav.hidden { transform: translateY(100%); } /* ═══════════════════════════════════════════════════════════════ 3. CONTAINER — compenser le header fixed + pleine largeur ═══════════════════════════════════════════════════════════════ */ .container { max-width: 100%; padding: 0; padding-top: calc(var(--bar-h) + env(safe-area-inset-top)); padding-bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); } /* ═══════════════════════════════════════════════════════════════ 4. FOND UNIFORME — meme bg partout, zero difference de couleur Seule separation = border-bottom fin ═══════════════════════════════════════════════════════════════ */ .g-card, .g-card-accent, .orion-card, .streak-card, .comm-card-inner, .stat-card, .pillar-card, .insight, .insight-hero, .insight-mini, .prog-card, .sess, .profile-section { background: transparent; border-color: transparent; } /* ═══════════════════════════════════════════════════════════════ 5. CARDS — edge-to-edge, zero border-radius, border-bottom only ═══════════════════════════════════════════════════════════════ */ .g-card, .g-card-accent { border-radius: 0; margin-left: 0; margin-right: 0; margin-bottom: 0; border: none; border-bottom: 1px solid var(--border2); box-shadow: none; } .g-card:hover, .g-card-accent:hover { transform: none; box-shadow: none; } .orion-card { border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid var(--border2); } .streak-card { border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid var(--border2); } .comm-card { margin-bottom: 0; } .comm-card-inner { background: transparent; border-radius: 0; border: none; border-bottom: 1px solid var(--border2); box-shadow: none; } .comm-card-inner:hover { transform: none; box-shadow: none; } .insight, .insight-hero { border-radius: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; border: none; border-bottom: 1px solid var(--border2); } .prog-card { border-radius: 0; margin-bottom: 0; border: none; border-bottom: 1px solid var(--border2); box-shadow: none; } .sess { border-radius: 0; border: none; border-bottom: 1px solid var(--border2); box-shadow: none; } .profile-section { border-radius: 0; border: none; border-bottom: 1px solid var(--border2); margin-bottom: 0; } /* ═══════════════════════════════════════════════════════════════ 6. GRIDS — pleine largeur, fond uniforme ═══════════════════════════════════════════════════════════════ */ .stats-grid { border-radius: 0; gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--border2); } .stat-card { border-radius: 0; border: none; border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border2); box-shadow: none; } .stat-card:hover { transform: none; box-shadow: none; } .stats-grid .stat-card:nth-child(2n) { border-right: none; } /* Derniere ligne : pas de border-bottom (le grid a deja le sien) */ .stats-grid .stat-card:nth-last-child(-n+2) { border-bottom: none; } .pillars-grid { gap: 0; margin-bottom: 0; border-bottom: 1px solid var(--border2); } .pillar-card { border-radius: 0; border: none; border-right: 1px solid var(--border2); border-bottom: 1px solid var(--border2); } .pillars-grid .pillar-card:nth-child(2n) { border-right: none; } .pillars-grid .pillar-card:nth-last-child(-n+2) { border-bottom: none; } /* ═══════════════════════════════════════════════════════════════ 7. TITRES & TEXTE — padding interne pour ne pas coller les bords ═══════════════════════════════════════════════════════════════ */ .heading-xl, .sub-text, .section-title { padding-left: 16px; padding-right: 16px; } .section-title { padding-top: 16px; padding-bottom: 4px; } /* Chips, toggles, duo dans le feed */ .insight-chips, .insight-duo, .insight-toggle, .insight-more { margin-left: 16px; margin-right: 16px; } /* ═══════════════════════════════════════════════════════════════ 7. IMAGES & MAPS — pleine largeur bord a bord ═══════════════════════════════════════════════════════════════ */ .comm-cover, .comm-cover-fallback { border-radius: 0; width: 100%; } /* Cartes Leaflet ou images dans les posts */ .g-card img, .g-card .leaflet-container { border-radius: 0; margin-left: -16px; margin-right: -16px; width: calc(100% + 32px); max-width: none; } /* ═══════════════════════════════════════════════════════════════ 8. VOLUME BARS, EVOLUTION — padding interne ═══════════════════════════════════════════════════════════════ */ .vol-bars { padding-left: 16px; padding-right: 16px; } /* ═══════════════════════════════════════════════════════════════ 9. HERO RING — pleine largeur ═══════════════════════════════════════════════════════════════ */ #agoge-hero-ring, #agoge-hero-ring-static { padding-left: 0; padding-right: 0; margin: 0; } /* ═══════════════════════════════════════════════════════════════ 10. NOTIF DROPDOWN — Capacitor safe-area ═══════════════════════════════════════════════════════════════ */ .notif-dropdown { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); } } /* fin @media max-width:767px */ /* ═══════════════════════════════════════════════════════════════ 11. DESKTOP — centrer le contenu dans l'espace restant ═══════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .container { margin-left: var(--sidebar-w); /* Centrer dans l'espace restant = calc(100% - sidebar) */ margin-right: 0; /* On utilise padding + max-width + auto pour centrer */ max-width: 800px; /* Centre le bloc dans l'espace dispo : espace total = 100vw - sidebar marge de chaque cote = (espace total - max-width) / 2 on simule ca avec margin-left auto depuis le bord sidebar */ margin-left: calc(var(--sidebar-w) + ((100vw - var(--sidebar-w) - 800px) / 2)); } } @media (min-width: 1024px) { .container { max-width: 900px; margin-left: calc(var(--sidebar-w) + ((100vw - var(--sidebar-w) - 900px) / 2)); } } /* Eviter le decalage negatif sur ecrans pas assez larges */ @media (min-width: 768px) and (max-width: 1100px) { .container { margin-left: var(--sidebar-w); margin-right: 0; padding-left: 32px; padding-right: 32px; max-width: none; } } /* ═══════════════════════════════════════════════════════════════ 12. CAPACITOR / iOS — safe-area variables Ne touche PAS au overflow de html/body pour eviter les conflits avec le CSS original. ═══════════════════════════════════════════════════════════════ */ html { --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom); --sal: env(safe-area-inset-left); --sar: env(safe-area-inset-right); } /* ═══ iOS: prevent keyboard zoom ═══ */ @media (max-width: 768px) { input, textarea, select { font-size: 16px !important; } } /* ═══════════════════════════════════════════════════════════ PREMIUM LAYER — Depth, Motion, Polish Effet "wow" : glassmorphism, ombres vivantes, micro-animations ═══════════════════════════════════════════════════════════ */ /* ─── Background atmosphere ─── */ body::before{content:'';position:fixed;top:-30%;left:-20%;width:70%;height:70%;background:radial-gradient(ellipse,rgba(var(--orange-rgb),0.04) 0%,transparent 70%);pointer-events:none;z-index:-1} body::after{content:'';position:fixed;bottom:-40%;right:-15%;width:60%;height:60%;background:radial-gradient(ellipse,rgba(var(--violet-rgb),0.03) 0%,transparent 70%);pointer-events:none;z-index:-1} /* ─── Cards: layered shadows + glass top edge ─── */ .g-card{box-shadow:0 1px 3px rgba(0,0,0,0.2),0 4px 12px rgba(0,0,0,0.08)} .g-card::before{background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,0.08) 50%,transparent 90%)} .g-card:hover{border-color:rgba(255,255,255,0.1);box-shadow:0 2px 8px rgba(0,0,0,0.15),0 8px 24px rgba(0,0,0,0.08);transform:translateY(-1px)} .g-card-accent{box-shadow:0 2px 8px rgba(var(--orange-rgb),0.06),0 8px 24px rgba(0,0,0,0.08)} .g-card-accent::before{background:linear-gradient(90deg,var(--orange),var(--violet),var(--cyan));opacity:0.8} /* ─── Stat cards: premium hover + value glow ─── */ .stat-card{box-shadow:0 1px 3px rgba(0,0,0,0.1)} .stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.12),0 12px 32px rgba(0,0,0,0.06);transform:translateY(-3px)} .stat-val{text-shadow:0 0 30px rgba(var(--orange-rgb),0.15)} /* ─── Progress bars: glow effect ─── */ .stat-bar-fill,.pillar-bar-fill,.compliance-bar-fill{box-shadow:0 0 8px rgba(var(--orange-rgb),0.2)} .stat-bar-fill.shimmer,.pillar-bar-fill.shimmer{box-shadow:0 0 12px rgba(var(--orange-rgb),0.3)} /* ─── Bottom nav: active pill + subtle glow ─── */ .nav-item::before{content:'';position:absolute;inset:4px 8px;border-radius:var(--radius-md);background:transparent;transition:all .25s var(--ease);z-index:-1} .nav-item.active::before{background:rgba(var(--orange-rgb),0.08)} .nav-item.active svg{filter:drop-shadow(0 0 6px rgba(var(--orange-rgb),0.3))} .nav-item:active{transform:scale(0.92)} /* ─── Sidebar: active item premium ─── */ .sb-item.active{box-shadow:inset 3px 0 0 var(--accent);background:rgba(var(--orange-rgb),0.06)} /* ─── Buttons: premium press + glow ─── */ .btn-cta,.btn-feedback,.btn-submit{box-shadow:0 2px 8px rgba(var(--orange-rgb),0.2)} .btn-cta:hover,.btn-feedback:hover,.btn-submit:hover{box-shadow:0 4px 16px rgba(var(--orange-rgb),0.3)} .btn-cta:active,.btn-feedback:active,.btn-submit:active{box-shadow:0 1px 4px rgba(var(--orange-rgb),0.15)} .btn-outline:active,.btn-ghost:active,.btn-danger:active,.btn-soft:active{transform:scale(0.97)} .g-card:active,.sess:active,.pillar-card:active,.lb-row:active,.stat-card:active{transform:scale(0.98);transition:transform 100ms ease} /* ─── Inputs: premium focus ring ─── */ input:focus,textarea:focus,select:focus,.inp:focus,.sf-inp:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(var(--orange-rgb),0.12),0 0 16px rgba(var(--orange-rgb),0.06)!important;outline:none} /* ─── Modales: premium depth ─── */ .bottom-sheet{box-shadow:0 -8px 40px rgba(0,0,0,0.4),0 -2px 12px rgba(0,0,0,0.2)} .bottom-sheet-handle{background:rgba(255,255,255,0.2);transition:background .2s} .bottom-sheet-handle:hover{background:rgba(255,255,255,0.35)} /* ─── Orion card: premium glow ─── */ .orion-card{box-shadow:0 2px 12px rgba(var(--blue-rgb),0.06)} .orion-card.open{box-shadow:0 4px 20px rgba(var(--blue-rgb),0.1),0 0 40px rgba(var(--violet-rgb),0.04)} .orion-send{box-shadow:0 2px 12px rgba(var(--blue-rgb),0.3)} /* ─── Hero ring: enhanced glow ─── */ .hero-ring-wrap{filter:drop-shadow(0 0 40px rgba(var(--orange-rgb),0.08))} .hero-ring-score{text-shadow:0 0 40px rgba(var(--orange-rgb),0.2),0 0 80px rgba(var(--orange-rgb),0.1)} /* ─── Toast: premium glass ─── */ .toast{box-shadow:0 8px 32px rgba(0,0,0,0.3),0 2px 8px rgba(0,0,0,0.15)} /* ─── Avatar ring: level glow ─── */ .agoge-avatar-ring svg{filter:drop-shadow(0 0 6px rgba(var(--orange-rgb),0.15))} .agoge-avatar-component{transition:transform .2s var(--ease)} /* ─── Stat bar fill: gradient luminosity ─── */ .stat-bar-fill{background-image:linear-gradient(90deg,var(--bar-c) 40%,rgba(255,255,255,.18) 55%,var(--bar-c) 70%)} /* ─── Scroll-triggered animations ─── */ .scroll-anim .stat-bar-fill,.scroll-anim .stat-bar-fill.shimmer{animation-play-state:paused} .scroll-anim.in-view .stat-bar-fill,.scroll-anim.in-view .stat-bar-fill.shimmer{animation-play-state:running} .scroll-anim .vol-bar{animation-play-state:paused} .scroll-anim.in-view .vol-bar{animation-play-state:running} .scroll-reveal{opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .4s var(--ease)} .scroll-reveal.in-view{opacity:1;transform:translateY(0)} /* ─── Scrollbar: themed ─── */ ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(var(--orange-rgb),0.15);border-radius:3px} ::-webkit-scrollbar-thumb:hover{background:rgba(var(--orange-rgb),0.3)} /* ─── Selection: premium ─── */ ::selection{background:rgba(var(--orange-rgb),0.25);color:#fff} /* ─── Stagger animations: smoother ─── */ @keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}} @keyframes scaleReveal{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}} .g-card,.stat-card,.pillar-card,.sess,.profile-section{animation:fadeUp .4s var(--ease) both} .g-card:nth-child(1){animation-delay:.03s}.g-card:nth-child(2){animation-delay:.06s}.g-card:nth-child(3){animation-delay:.09s}.g-card:nth-child(4){animation-delay:.12s}.g-card:nth-child(5){animation-delay:.15s} /* ─── Streak card: flame glow enhanced ─── */ .streak-card{box-shadow:0 2px 12px rgba(var(--orange-rgb),0.08)} /* ─── Insight cards: left accent bar ─── */ .insight-good{border-left:3px solid var(--emerald)} .insight-warn{border-left:3px solid var(--amber)} .insight-bad{border-left:3px solid var(--rose)} .insight-hero.good{box-shadow:0 2px 12px rgba(var(--emerald-rgb),0.08)} .insight-hero.bad{box-shadow:0 2px 12px rgba(var(--rose-rgb),0.08)} /* ─── Pillar cards: hover glow matches pillar color ─── */ .pillar-card{transition:all .25s var(--ease)} .pillar-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,0.1)} /* ─── Session cards: left sport color bar ─── */ .sess .sess-color{width:3px;min-height:100%;border-radius:2px;flex-shrink:0;transition:width .2s} .sess:hover .sess-color{width:4px} .sess.is-today{box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),0.15)} /* ─── Week tabs: premium active ─── */ .week-tab{transition:all .2s var(--ease)} .week-tab.active{box-shadow:0 2px 8px rgba(var(--orange-rgb),0.15)} /* ─── Community cards: subtle lift ─── */ .comm-card-inner{transition:all .25s var(--ease)} .comm-card-inner:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.08)} /* ─── Profile sections: subtle left accent on expand ─── */ .profile-section.open{border-left:2px solid var(--accent)} /* ─── Notif items: premium unread ─── */ .notif-item.unread{box-shadow:inset 3px 0 0 var(--accent);background:rgba(var(--orange-rgb),0.04)} /* ─── Loading skeleton: premium shimmer ─── */ .skeleton{background:linear-gradient(90deg,var(--card-bg) 25%,rgba(255,255,255,0.06) 50%,var(--card-bg) 75%);background-size:200% 100%;animation:skeletonShimmer 1.8s ease infinite;border-radius:var(--radius-sm)} @keyframes skeletonShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .skeleton-text{height:14px;margin-bottom:8px;width:80%} .skeleton-title{height:20px;margin-bottom:12px;width:50%} .skeleton-avatar{width:40px;height:40px;border-radius:50%} .skeleton-card{height:120px;border-radius:var(--radius-lg)} /* ═══════════════════════════════════════════════════════════ LIGHT THEME — Premium adjustments ═══════════════════════════════════════════════════════════ */ .light-theme body::before,.theme-ghost body::before{background:radial-gradient(ellipse,rgba(var(--orange-rgb),0.06) 0%,transparent 60%)} .light-theme body::after,.theme-ghost body::after{background:radial-gradient(ellipse,rgba(var(--violet-rgb),0.04) 0%,transparent 60%)} .light-theme .g-card,.theme-ghost .g-card{box-shadow:0 1px 3px rgba(0,0,0,0.04),0 4px 12px rgba(0,0,0,0.03)} .light-theme .g-card:hover,.theme-ghost .g-card:hover{box-shadow:0 2px 8px rgba(0,0,0,0.06),0 12px 32px rgba(0,0,0,0.04)} .light-theme .g-card::before,.theme-ghost .g-card::before{background:linear-gradient(90deg,transparent 10%,rgba(0,0,0,0.03) 50%,transparent 90%)} .light-theme .g-card-accent,.theme-ghost .g-card-accent{box-shadow:0 2px 12px rgba(var(--orange-rgb),0.08)} .light-theme .g-card-accent::before,.theme-ghost .g-card-accent::before{opacity:0.6} .light-theme .stat-card,.theme-ghost .stat-card{box-shadow:0 1px 4px rgba(0,0,0,0.04)} .light-theme .stat-card:hover,.theme-ghost .stat-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.06)} .light-theme .stat-val,.theme-ghost .stat-val{text-shadow:none} .light-theme .bottom-sheet,.theme-ghost .bottom-sheet{box-shadow:0 -8px 40px rgba(0,0,0,0.12),0 -2px 8px rgba(0,0,0,0.06)} .light-theme .bottom-sheet-handle,.theme-ghost .bottom-sheet-handle{background:rgba(0,0,0,0.12)} .light-theme .bottom-sheet-handle:hover,.theme-ghost .bottom-sheet-handle:hover{background:rgba(0,0,0,0.2)} .light-theme .toast,.theme-ghost .toast{box-shadow:0 8px 32px rgba(0,0,0,0.1),0 2px 8px rgba(0,0,0,0.06)} .light-theme ::selection,.theme-ghost ::selection{background:rgba(var(--orange-rgb),0.2);color:#1c1c21} .light-theme ::-webkit-scrollbar-thumb,.theme-ghost ::-webkit-scrollbar-thumb{background:rgba(var(--orange-rgb),0.12)} .light-theme ::-webkit-scrollbar-thumb:hover,.theme-ghost ::-webkit-scrollbar-thumb:hover{background:rgba(var(--orange-rgb),0.25)} .light-theme .hero-ring-score,.theme-ghost .hero-ring-score{text-shadow:0 0 30px rgba(var(--orange-rgb),0.15)} .light-theme .btn-cta,.light-theme .btn-feedback,.light-theme .btn-submit, .theme-ghost .btn-cta,.theme-ghost .btn-feedback,.theme-ghost .btn-submit{box-shadow:0 2px 8px rgba(var(--orange-rgb),0.15)} .light-theme .btn-cta:hover,.light-theme .btn-feedback:hover,.light-theme .btn-submit:hover, .theme-ghost .btn-cta:hover,.theme-ghost .btn-feedback:hover,.theme-ghost .btn-submit:hover{box-shadow:0 4px 16px rgba(var(--orange-rgb),0.2)} .light-theme .comm-card-inner:hover,.theme-ghost .comm-card-inner:hover{box-shadow:0 4px 12px rgba(0,0,0,0.04)} .light-theme .sess.is-today,.theme-ghost .sess.is-today{box-shadow:inset 0 0 0 1px rgba(var(--orange-rgb),0.2);background:rgba(var(--orange-rgb),0.03)} .light-theme .nav-item.active::before,.theme-ghost .nav-item.active::before{background:rgba(var(--orange-rgb),0.06)} .light-theme .notif-item.unread,.theme-ghost .notif-item.unread{background:rgba(var(--orange-rgb),0.03)} /* ═══════════════════════════════════════════════════════════ BUTTON & BADGE VARIANTS — Color system ═══════════════════════════════════════════════════════════ */ /* ─── Button sizes ─── */ .btn-sm{padding:6px 14px!important;font-size:.78rem!important} .btn-xs{padding:4px 10px!important;font-size:.72rem!important} .btn-full{width:100%} .btn-icon{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-md);border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;font-family:inherit;transition:all .15s} .btn-icon:hover{border-color:var(--accent);color:var(--accent);background:rgba(var(--orange-rgb),0.05)} /* ─── CTA color variants ─── */ .btn-emerald{background:var(--emerald);color:#fff;box-shadow:0 2px 8px rgba(var(--emerald-rgb),0.2)} .btn-emerald:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(var(--emerald-rgb),0.3)} .btn-violet{background:var(--violet);color:#fff;box-shadow:0 2px 8px rgba(var(--violet-rgb),0.2)} .btn-violet:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(var(--violet-rgb),0.3)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(var(--blue-rgb),0.2)} .btn-blue:hover{filter:brightness(1.1);box-shadow:0 4px 16px rgba(var(--blue-rgb),0.3)} /* ─── Soft button (colored bg + text, no fill) ─── */ .btn-soft{padding:8px 14px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;background:rgba(var(--orange-rgb),0.08);color:var(--orange);display:inline-flex;align-items:center;gap:6px} .btn-soft:hover{background:rgba(var(--orange-rgb),0.15);border-color:rgba(var(--orange-rgb),0.1)} .btn-soft-emerald{background:rgba(var(--emerald-rgb),0.08);color:var(--emerald)} .btn-soft-emerald:hover{background:rgba(var(--emerald-rgb),0.15)} .btn-soft-rose{background:rgba(var(--rose-rgb),0.08);color:var(--rose)} .btn-soft-rose:hover{background:rgba(var(--rose-rgb),0.15)} .btn-soft-violet{background:rgba(var(--violet-rgb),0.08);color:var(--violet)} .btn-soft-violet:hover{background:rgba(var(--violet-rgb),0.15)} .btn-soft-cyan{background:rgba(var(--cyan-rgb),0.08);color:var(--cyan)} .btn-soft-cyan:hover{background:rgba(var(--cyan-rgb),0.15)} .btn-soft-amber{background:rgba(var(--amber-rgb),0.08);color:var(--amber)} .btn-soft-amber:hover{background:rgba(var(--amber-rgb),0.15)} /* ─── Pill (like a badge but clickable) ─── */ .btn-pill{padding:5px 12px;border-radius:var(--radius-xl);border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:inline-flex;align-items:center;gap:5px} .btn-pill:hover{border-color:var(--accent);color:var(--accent)} /* ─── Premium: Index hero surface ─── */ .index-hero-surface{background:#1a1a1f;padding:24px 16px 20px;margin:0 -16px 16px;border-bottom:1px solid var(--border2);position:relative;overflow:hidden} .index-hero-surface::before{content:'';position:absolute;top:30%;left:50%;transform:translate(-50%,-40%);width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(var(--orange-rgb),.06) 0%,transparent 70%);pointer-events:none} .light-theme .index-hero-surface,.theme-ghost .index-hero-surface{background:var(--elevated)} .light-theme .index-hero-surface::before,.theme-ghost .index-hero-surface::before{background:radial-gradient(circle,rgba(var(--orange-rgb),.04) 0%,transparent 70%)} /* ─── Premium: Leaderboard podium card ─── */ .lb-podium-card{background:linear-gradient(135deg,rgba(var(--orange-rgb),.04),rgba(var(--violet-rgb),.02));border:1px solid rgba(var(--orange-rgb),.1);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px} /* ─── Utility: flex gaps ─── */ .flex{display:flex}.flex-col{display:flex;flex-direction:column}.flex-center{display:flex;align-items:center;justify-content:center} .flex-between{display:flex;align-items:center;justify-content:space-between} .items-center{align-items:center}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px} /* ─── Utility: text ─── */ .text-xs{font-size:.68rem}.text-sm{font-size:.78rem}.text-base{font-size:.88rem}.text-md{font-size:.95rem}.text-lg{font-size:1.1rem}.text-xl{font-size:1.4rem} .font-500{font-weight:500}.font-600{font-weight:600}.font-700{font-weight:700}.font-800{font-weight:800} .text-accent{color:var(--accent)}.text-emerald{color:var(--emerald)}.text-rose{color:var(--rose)}.text-amber{color:var(--amber)}.text-blue{color:var(--blue)}.text-violet{color:var(--violet)}.text-cyan{color:var(--cyan)}.text-muted{color:var(--muted)}.text-secondary{color:var(--text2)} .uppercase{text-transform:uppercase;letter-spacing:.5px} /* ─── Utility: spacing ─── */ .mb-0{margin-bottom:0}.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px} .mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px} .p-12{padding:12px}.p-16{padding:16px}.p-20{padding:20px} /* ─── Utility: visual ─── */ .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0} /* ═══════════════════════════════════════════════════════════ PLANNER — Session builder + templates + index gauge ═══════════════════════════════════════════════════════════ */ /* Template grid */ .plan-tpl-btn{padding:14px 10px;border-radius:var(--radius-md);border:1px solid var(--border2);background:var(--ov1);cursor:pointer;text-align:center;transition:all .2s;font-family:inherit} .plan-tpl-btn:hover{border-color:var(--accent);background:rgba(var(--orange-rgb),.05)} .plan-tpl-btn:active{transform:scale(0.97)} /* Timeline bar */ .plan-timeline{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1px;margin-bottom:4px} .plan-tl-seg{border-radius:2px;transition:flex .3s var(--ease)} /* Block card */ .plan-block{display:flex;align-items:stretch;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;background:var(--ov1);overflow:hidden;transition:all .15s} .plan-block:hover{border-color:var(--border2)} .plan-block-bar{width:4px;flex-shrink:0} .plan-block-content{flex:1;padding:8px 10px;display:flex;flex-direction:column;gap:6px} .plan-block-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .plan-block-actions{display:flex;flex-direction:column;gap:2px;padding:4px 6px;justify-content:center} .plan-block-act{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.72rem;padding:2px 4px;border-radius:4px;transition:all .15s;font-family:inherit} .plan-block-act:hover{color:var(--text);background:var(--ov2)} .plan-block-del:hover{color:var(--rose);background:rgba(var(--rose-rgb),.08)} /* Block fields */ .plan-sel{background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-size:.78rem;font-weight:600;padding:4px 8px;font-family:inherit;cursor:pointer} .plan-field{display:flex;flex-direction:column;gap:2px} .plan-field label{font-size:.62rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px} .plan-field input,.plan-field select{background:var(--bg);border:1px solid var(--border2);border-radius:var(--radius-sm);color:var(--text);font-size:.78rem;padding:4px 8px;width:60px;font-family:inherit} .plan-field select{width:auto;cursor:pointer} /* Session Index card */ .plan-index-card{padding:14px;border-radius:var(--radius-md);background:var(--ov1);border:1px solid var(--border2)} .plan-gauge{position:relative;width:56px;height:56px;flex-shrink:0} .plan-gauge-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.88rem} /* Planned session in calendar */ .cal-planned-dot{width:4px;height:4px;border-radius:50%;opacity:.5} /* Planned session in list */ .sess-planned{opacity:.85;position:relative;border-color:rgba(var(--orange-rgb),.15)!important;background:rgba(var(--orange-rgb),.02)!important} .sess-planned::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;border-radius:2px 0 0 2px;background:var(--accent);opacity:.4} .sess-planned::after{content:'PLANIFIÉ';position:absolute;top:8px;right:10px;font-size:.55rem;font-weight:700;letter-spacing:.5px;color:var(--accent);background:rgba(var(--orange-rgb),.1);padding:2px 8px;border-radius:var(--radius-sm)} .sess-planned:hover{opacity:1} /* Comparison banner */ .sess-comparison{display:flex;align-items:center;gap:6px;padding:6px 10px;margin-top:6px;border-radius:var(--radius-sm);background:var(--ov1);font-size:.68rem} .sess-comp-badge{padding:2px 8px;border-radius:4px;font-weight:700;font-size:.62rem;letter-spacing:.3px} .sess-comp-badge.match{background:rgba(var(--emerald-rgb),.08);color:var(--emerald)} .sess-comp-badge.diff{background:rgba(var(--amber-rgb),.08);color:var(--amber)} .sess-comp-badge.skip{background:rgba(var(--muted),.15);color:var(--muted)}/* ═══════════════════════════════════════ AGOGE Calendar — Month View ═══════════════════════════════════════ */ .agc-wrap{ background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); padding:14px; margin-bottom:16px; overflow:hidden; } /* Header */ .agc-header{ display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:0 2px; } .agc-nav{ width:32px;height:32px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--ov1); color:var(--text2); display:flex;align-items:center;justify-content:center; cursor:pointer; transition:all .15s; flex-shrink:0; } .agc-nav:active{background:var(--ov3);transform:scale(.92)} .agc-title{ flex:1; text-align:center; font-weight:800; font-size:.92rem; color:var(--text); letter-spacing:-.01em; } .agc-month{color:var(--text)} .agc-year{color:var(--muted);font-weight:600;font-size:.82rem} .agc-today-btn{ padding:4px 10px; border-radius:var(--radius-sm); border:1px solid rgba(var(--orange-rgb),.2); background:rgba(var(--orange-rgb),.06); color:var(--accent); font-size:.68rem;font-weight:700; cursor:pointer;flex-shrink:0; } .agc-today-btn:active{background:rgba(var(--orange-rgb),.15)} /* Grid */ .agc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; } .agc-day-header{ font-size:.6rem; font-weight:700; color:var(--muted); text-align:center; padding-bottom:6px; user-select:none; } /* Day cell */ .agc-cell{ position:relative; width:100%; aspect-ratio:1; border-radius:var(--radius-sm); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:background .12s,transform .1s; overflow:hidden; -webkit-tap-highlight-color:transparent; } .agc-cell:active{transform:scale(.92)} .agc-num{ font-size:.72rem; font-weight:600; color:var(--text2); line-height:1; z-index:1; } /* Other month */ .agc-cell.agc-other{opacity:.3;cursor:default} .agc-cell.agc-other:active{transform:none} /* Today */ .agc-cell.agc-today{ border:1.5px solid var(--accent); background:rgba(var(--orange-rgb),.06); } .agc-cell.agc-today .agc-num{color:var(--accent);font-weight:800} /* Has real sessions */ .agc-cell.agc-has-log{ background:var(--ov2); } .agc-cell.agc-has-log .agc-num{color:var(--text);font-weight:700} /* Has planned sessions — solid border, no dashed */ .agc-cell.agc-has-plan{ border:1.5px solid rgba(var(--orange-rgb),.25); background:rgba(var(--orange-rgb),.03); } .agc-cell.agc-has-plan .agc-num{color:var(--accent);font-weight:600} /* Has coach-planned sessions — accent border, subtle glow */ .agc-cell.agc-has-coach{ border:1.5px solid rgba(var(--orange-rgb),.35); background:rgba(var(--orange-rgb),.06); } .agc-cell.agc-has-coach .agc-num{color:var(--accent);font-weight:700} /* Future (empty) */ .agc-cell.agc-future .agc-num{color:var(--muted)} .agc-add-hint{ position:absolute;bottom:4px;right:4px; opacity:.2;transition:opacity .15s; } .agc-cell:hover .agc-add-hint{opacity:.5} /* Has objective — prominent glow */ .agc-cell.agc-has-obj{ background:rgba(var(--orange-rgb),.08); border:1.5px solid rgba(var(--orange-rgb),.35); box-shadow:0 0 12px rgba(var(--orange-rgb),.12); } .agc-cell.agc-has-obj .agc-num{color:var(--accent);font-weight:800} /* Objective flag (top gradient bar) */ .agc-obj-flag{ position:absolute; top:0;left:0;right:0; height:3px; border-radius:2px 2px 0 0; } /* Objective target icon (replaces plain flag for visibility) */ .agc-obj-icon{ position:absolute; bottom:3px;right:3px; width:12px;height:12px; z-index:2; opacity:.7; } /* Sport dots */ .agc-dots{ display:flex; gap:2px; margin-top:2px; z-index:1; } .agc-dot{ width:5px;height:5px; border-radius:50%; } .agc-dot-plan{ background:transparent !important; border:1.5px solid; width:4px;height:4px; } /* Coach-planned session dot — filled with outer ring */ .agc-dot-coach{ width:5px;height:5px; border:1.5px solid; opacity:.85; box-shadow:0 0 0 1px rgba(255,255,255,.15); } /* ═══ Objectives section — premium cards ═══ */ .agc-objectives{ margin-top:16px; } .agc-obj-title{ font-size:.68rem; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase; letter-spacing:.5px; display:flex;align-items:center;gap:6px; } .agc-obj-row{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-lg); cursor:pointer; transition:all .15s var(--ease); margin-bottom:8px; position:relative; overflow:hidden; } .agc-obj-row::before{ content:''; position:absolute; top:0;left:0;bottom:0; width:3px; } .agc-obj-row:active{transform:scale(.98)} .agc-obj-info{flex:1;min-width:0} .agc-obj-name{ font-size:.85rem;font-weight:700;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .agc-obj-meta{ font-size:.72rem;color:var(--text2);margin-top:3px; } .agc-obj-jx{ display:flex;flex-direction:column;align-items:center; flex-shrink:0; } .agc-obj-jx-num{ font-size:1.3rem;font-weight:900;line-height:1; } .agc-obj-jx-label{ font-size:.55rem;font-weight:600;color:var(--muted); text-transform:uppercase;letter-spacing:.3px; } /* Add objective button — solid, no dashed */ .agc-add-obj{ display:flex; align-items:center;justify-content:center; gap:6px; width:100%; padding:12px; margin-top:4px; border-radius:var(--radius-lg); border:1px solid rgba(var(--orange-rgb),.12); background:rgba(var(--orange-rgb),.04); color:var(--text); font-size:.78rem;font-weight:600; cursor:pointer; transition:all .15s var(--ease); } .agc-add-obj svg{stroke:var(--accent)} .agc-add-obj:hover{border-color:rgba(var(--orange-rgb),.25);background:rgba(var(--orange-rgb),.08)} .agc-add-obj:active{background:var(--elevated);transform:scale(.98)} /* Day action sheet */ .agc-sheet{ position:relative; background:linear-gradient(180deg,#1c1c21,#161619); border:1px solid var(--border2); border-bottom:none; border-radius:20px 20px 0 0; max-width:420px;width:100%; padding:18px 20px calc(22px + env(safe-area-inset-bottom)); font-family:'Plus Jakarta Sans',system-ui,sans-serif; box-shadow:0 -16px 50px rgba(0,0,0,.5); overflow:hidden; animation:agcSheetIn .4s cubic-bezier(.22,1,.36,1) both; } .agc-sheet::before{ content:"";position:absolute;top:0;left:-30%; height:1.5px;width:60%; background:linear-gradient(90deg,transparent,rgba(var(--orange-rgb),.85),rgba(var(--violet-rgb),.6),transparent); animation:agcSweep 1.5s cubic-bezier(.22,1,.36,1) .15s both; border-radius:1px;pointer-events:none; } @keyframes agcSheetIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}} @keyframes agcSweep{0%{left:-30%}100%{left:130%}} .agc-sheet-handle{ width:40px;height:4px; border-radius:2px; background:rgba(255,255,255,.16); margin:0 auto 16px; } .agc-sheet-title{ font-size:1.05rem;font-weight:800; color:var(--text); margin-bottom:16px; text-align:center; letter-spacing:-.2px; } .agc-sheet-btn{ width:100%; display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--ov1); cursor:pointer; margin-bottom:8px; text-align:left; transition:background .12s; } .agc-sheet-btn:active{background:var(--ov3)} .agc-sheet-icon{ width:36px;height:36px; border-radius:var(--radius-md); display:flex;align-items:center;justify-content:center; flex-shrink:0; } .agc-sheet-btn-title{ font-size:.85rem;font-weight:600;color:var(--text); } .agc-sheet-btn-sub{ font-size:.72rem;color:var(--text2);margin-top:1px; } /* ═══ Invite Sheet (V4) — sheet unifiée d'invitation amis ═══ */ /* App-bar mobile : icône invite */ .invite-icon{position:relative;cursor:pointer;padding:4px;-webkit-tap-highlight-color:transparent} .invite-icon svg{color:var(--text2);transition:color .2s} .invite-icon:hover svg,.invite-icon:active svg{color:var(--text)} .invite-icon-badge{ position:absolute;top:2px;right:2px; width:8px;height:8px;border-radius:50%; background:var(--accent); display:none; box-shadow:0 0 0 2px var(--bg2,#0f0f12); animation:invitePulse 2s ease-in-out infinite; } .invite-icon-badge.visible{display:block} @keyframes invitePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.15);opacity:.85}} /* Sidebar desktop : icône invite */ .sb-invite-icon{ position:relative;cursor:pointer;padding:4px; margin-left:auto;margin-right:8px; -webkit-tap-highlight-color:transparent; } .sb-invite-icon svg{color:var(--muted);transition:color .2s} .sb-invite-icon:hover svg{color:var(--accent)} /* Sheet container */ .inv-sheet{ background:var(--card-bg); border:1px solid var(--card-border);border-bottom:none; border-radius:18px 18px 0 0; max-width:480px;width:100%; max-height:92vh;overflow-y:auto; padding:14px 18px calc(20px + env(safe-area-inset-bottom)); animation:sheetUp .3s var(--ease); box-shadow:0 -8px 32px rgba(0,0,0,.4); } /* Hero compact */ .inv-hero{ display:flex;align-items:center;gap:14px; padding:8px 0 16px; margin-bottom:14px; border-bottom:1px solid var(--border); } .inv-hero-avatar{flex-shrink:0} .inv-hero-info{flex:1;min-width:0} .inv-hero-title{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.15rem;font-weight:800; color:var(--text);line-height:1.2; } .inv-hero-sub{ font-size:.78rem;color:var(--text2); margin-top:4px; line-height:1.4; } /* Sections */ .inv-section{margin-bottom:14px} .inv-section-label{ font-size:.62rem; text-transform:uppercase;letter-spacing:.5px; color:var(--muted);font-weight:700; margin-bottom:8px;padding-left:2px; } /* Lien à copier */ .inv-link-row{ display:flex;align-items:center;gap:8px; border-radius:var(--radius-md); border:1px solid var(--border2); background:var(--ov1); padding:4px 4px 4px 12px; transition:border-color .2s var(--ease); } .inv-link-row:focus-within{border-color:rgba(var(--orange-rgb),.4)} .inv-link-input{ flex:1;min-width:0; background:transparent;border:none;outline:none; color:var(--text); font-family:'Plus Jakarta Sans',sans-serif; font-size:.78rem; padding:8px 0; text-overflow:ellipsis; } .inv-link-copy{ flex-shrink:0; width:36px;height:36px; border-radius:var(--radius-sm); border:none; background:rgba(var(--orange-rgb),.1); color:var(--accent); cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .15s var(--ease); } .inv-link-copy:hover{background:rgba(var(--orange-rgb),.18)} .inv-link-copy:active{transform:scale(.93)} /* Diviseur de section */ .inv-divider{ display:flex;align-items:center;gap:10px; margin:18px 0 12px; font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:700; } .inv-divider::before,.inv-divider::after{ content:'';flex:1;height:1px;background:var(--border); } /* 4 chips canaux */ .inv-channels{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; } .inv-channel{ display:flex;flex-direction:column; align-items:center;justify-content:center; gap:6px; padding:14px 4px 11px; border-radius:var(--radius-md); border:1px solid var(--border2); background:var(--ov1); color:var(--text2); font-family:inherit; cursor:pointer; transition:all .2s var(--ease); min-height:78px; } .inv-channel:hover{ border-color:rgba(var(--cc-rgb),.4); background:rgba(var(--cc-rgb),.05); } .inv-channel:active{transform:scale(.96)} .inv-channel-ic{ width:38px;height:38px; border-radius:50%; background:rgba(var(--cc-rgb),.12); color:rgb(var(--cc-rgb)); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:all .2s var(--ease); } .inv-channel:hover .inv-channel-ic{ background:rgba(var(--cc-rgb),.2); transform:scale(1.05); } .inv-channel-l{ font-size:.7rem;font-weight:700; color:var(--text); letter-spacing:.1px; } /* Bloc paliers */ .inv-tiers{ padding:12px 14px; border-radius:var(--radius-md); background:linear-gradient(135deg,rgba(var(--orange-rgb),.04),rgba(var(--orange-rgb),.01)); border:1px solid rgba(var(--orange-rgb),.12); } .inv-tiers-loading{ text-align:center; font-size:.78rem;color:var(--muted); padding:8px; } /* Track 3 nœuds */ .inv-tiers-track{ display:flex;align-items:center; margin-bottom:12px; padding:0 8px; } .inv-tiers-node{ width:14px;height:14px; border-radius:50%; background:var(--ov3); border:2px solid var(--border2); flex-shrink:0; transition:all .3s var(--ease); position:relative; } .inv-tiers-node.on{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(var(--orange-rgb),.18); } .inv-tiers-node.next{ border-color:var(--accent); background:var(--ov2); animation:invitePulse 2s ease-in-out infinite; } .inv-tiers-line{ flex:1;height:2px; background:var(--border2); transition:background .3s var(--ease); } .inv-tiers-line.on{background:var(--accent)} /* Stats compactes */ .inv-tiers-stats{ display:flex;align-items:center;justify-content:center; gap:14px; font-size:.75rem;color:var(--text2); margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--border); } .inv-tiers-stats strong{color:var(--text);font-size:.95rem;font-weight:800} .inv-tiers-empty{ color:var(--muted);font-size:.72rem; font-weight:500; border-bottom:none;padding-bottom:0; font-style:italic; } /* Liste des paliers */ .inv-tiers-list{display:flex;flex-direction:column;gap:8px} .inv-tier-row{ display:flex;align-items:flex-start;gap:10px; padding:8px 0; } .inv-tier-status{ flex-shrink:0; width:22px;height:22px; border-radius:50%; display:flex;align-items:center;justify-content:center; margin-top:1px; } .inv-tier-row.done .inv-tier-status{ background:rgba(var(--emerald-rgb,16,185,129),.15); color:var(--emerald); } .inv-tier-row.active .inv-tier-status{ background:rgba(var(--orange-rgb),.15); color:var(--accent); } .inv-tier-row.locked .inv-tier-status{ background:var(--ov2); color:var(--muted); } .inv-tier-info{flex:1;min-width:0} .inv-tier-l{ font-size:.84rem;font-weight:700; color:var(--text); line-height:1.25; display:flex;align-items:center;flex-wrap:wrap;gap:6px; } .inv-tier-row.locked .inv-tier-l{color:var(--text2)} .inv-tier-pill{ font-size:.6rem;font-weight:700; padding:2px 7px;border-radius:var(--radius-sm); background:var(--emerald);color:#fff; text-transform:uppercase;letter-spacing:.3px; } .inv-tier-todo{ font-size:.72rem;color:var(--text2); font-weight:500; } .inv-tier-reward{ font-size:.72rem;color:var(--text2); margin-top:3px; font-weight:500; line-height:1.4; } .inv-tier-row.locked .inv-tier-reward{color:var(--muted)} /* ═══ Add Objective Sheet — bottom sheet immersif ═══ */ @keyframes sheetDown{from{transform:translateY(0);opacity:1}to{transform:translateY(20px);opacity:0}} .agc-obj-sheet{ position:relative; background:linear-gradient(180deg,#1c1c21,#161619); border:1px solid var(--border2);border-bottom:none; border-radius:20px 20px 0 0; max-width:480px;width:100%; max-height:90vh;overflow-y:auto; padding:14px 20px calc(22px + env(safe-area-inset-bottom)); font-family:'Plus Jakarta Sans',system-ui,sans-serif; animation:agcSheetIn .4s cubic-bezier(.22,1,.36,1) both; box-shadow:0 -16px 50px rgba(0,0,0,.5); } .agc-obj-sheet::before{ content:"";position:absolute;top:0;left:-30%; height:1.5px;width:60%; background:linear-gradient(90deg,transparent,rgba(var(--orange-rgb),.85),rgba(var(--violet-rgb),.6),transparent); animation:agcSweep 1.5s cubic-bezier(.22,1,.36,1) .15s both; border-radius:1px;pointer-events:none;z-index:5; } /* Hero countdown */ .obj-hero{ text-align:center; padding:14px 0 16px; margin-bottom:14px; border-bottom:1px solid var(--border); transition:border-color .25s var(--ease); } .obj-hero-jx{ font-family:'Plus Jakarta Sans',sans-serif; font-size:2.4rem;font-weight:800; color:var(--muted); line-height:1; letter-spacing:-1.2px; transition:color .3s var(--ease),text-shadow .3s var(--ease),transform .3s var(--ease); } .obj-hero.on .obj-hero-jx{ color:var(--amber); text-shadow:0 0 28px rgba(251,191,36,.28); transform:scale(1.02); } .obj-hero.past .obj-hero-jx{color:var(--rose);opacity:.7} .obj-hero-label{ font-size:.7rem; color:var(--text2); margin-top:8px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; } /* Optional label tag */ .obj-opt{ text-transform:none; font-size:.62rem; color:var(--muted); font-weight:500; letter-spacing:0; margin-left:4px; } /* Sport chips wrap */ .obj-sport-chips{display:flex;flex-wrap:wrap;gap:6px} /* Type d'objectif — cards visuelles */ .obj-type-cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .obj-type-card{ display:flex;flex-direction:column;align-items:center; gap:3px;padding:12px 6px 10px; border-radius:var(--radius-md); border:1px solid var(--border2); background:var(--ov1); color:var(--text2); font-family:inherit; cursor:pointer; transition:all .2s var(--ease); min-height:84px; } .obj-type-card:active{transform:scale(.96)} .obj-type-card.on{ border-color:rgb(var(--card-rgb)); background:rgba(var(--card-rgb),.08); color:rgb(var(--card-rgb)); box-shadow:0 0 0 3px rgba(var(--card-rgb),.08); } .obj-type-ic{flex-shrink:0;margin-bottom:4px;opacity:.85} .obj-type-card.on .obj-type-ic{opacity:1} .obj-type-l{font-size:.78rem;font-weight:700;line-height:1.1} .obj-type-d{font-size:.6rem;color:var(--muted);text-align:center;line-height:1.2;margin-top:2px} .obj-type-card.on .obj-type-d{color:inherit;opacity:.7} /* Priorité cards */ .obj-prio-row{display:grid;grid-template-columns:1fr 1fr;gap:8px} .obj-prio{ display:flex;flex-direction:column; gap:4px;padding:11px 12px; border-radius:var(--radius-md); border:1px solid var(--border2); background:var(--ov1); text-align:left; cursor:pointer; font-family:inherit; transition:all .2s var(--ease); } .obj-prio:active{transform:scale(.97)} .obj-prio[data-active="1"]#obj-prio-principal{ border-color:var(--accent); background:rgba(var(--orange-rgb),.07); box-shadow:0 0 0 3px rgba(var(--orange-rgb),.06); } .obj-prio[data-active="1"]#obj-prio-secondaire{ border-color:var(--violet); background:rgba(var(--violet-rgb),.07); box-shadow:0 0 0 3px rgba(var(--violet-rgb),.06); } .obj-prio-head{display:flex;align-items:center;gap:6px} .obj-prio-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0} .obj-prio-label{font-size:.85rem;font-weight:700;color:var(--text)} .obj-prio-sub{font-size:.65rem;color:var(--muted);font-weight:500;line-height:1.3} /* Live preview */ .obj-preview{ margin:14px 0 12px;padding-top:14px; border-top:1px solid var(--border); animation:fadeUp .25s var(--ease) both; } .obj-preview-label{ font-size:.6rem;color:var(--muted); text-transform:uppercase;letter-spacing:.5px; font-weight:700;margin-bottom:6px; } .obj-preview-card{ padding:12px 14px; border-radius:var(--radius-md); background:linear-gradient(135deg,rgba(var(--orange-rgb),.06),rgba(var(--orange-rgb),.01)); border:1px solid rgba(var(--orange-rgb),.16); } .opc-row1{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px} .opc-prio{font-size:.6rem;font-weight:700;padding:2px 8px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.3px} .opc-type{font-size:.65rem;font-weight:600;color:var(--text2);padding:2px 7px;border-radius:var(--radius-sm);background:var(--ov2)} .opc-jx{font-size:.7rem;font-weight:700;color:var(--amber);margin-left:auto} .opc-name{font-size:.95rem;font-weight:700;color:var(--text);line-height:1.25;margin-bottom:3px;word-break:break-word} .opc-sub{font-size:.7rem;color:var(--text2);font-weight:500;display:flex;flex-wrap:wrap;gap:4px;align-items:center} /* Cancel button */ .obj-btn-cancel{ flex:0 0 auto;padding:13px 18px; border-radius:var(--radius-md); background:var(--ov2); border:1px solid var(--border2); color:var(--text2); font-family:inherit;font-weight:600;font-size:.85rem; cursor:pointer; transition:all .15s var(--ease); } .obj-btn-cancel:active{transform:scale(.96);background:var(--ov3)} /* Responsive: smaller cells on very small screens */ @media(max-width:360px){ .agc-grid{gap:2px} .agc-num{font-size:.62rem} .agc-dot{width:4px;height:4px} .agc-wrap{padding:10px} } /* ═══════════════════════════════════════ AGOGE Planner v2 — Inline Builder ═══════════════════════════════════════ */ .plv2-wrap{padding:0} /* Header */ .plv2-header{ display:flex;align-items:center;gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); position:sticky;top:0; background:var(--bg);z-index:10; } .plv2-back{ width:36px;height:36px;border-radius:var(--radius-md); border:1px solid var(--border);background:var(--ov1); color:var(--text2);display:flex;align-items:center;justify-content:center; cursor:pointer;flex-shrink:0; } .plv2-back:active{background:var(--ov3);transform:scale(.92)} .plv2-header-info{flex:1} .plv2-header-title{font-weight:800;font-size:.92rem;color:var(--text)} .plv2-header-date{font-size:.72rem;color:var(--muted);font-weight:500} .plv2-header-dur{font-size:.88rem;font-weight:800;color:var(--accent)} /* ═══════════════════════════════════════════════════════════ PLANNER V4.2 — Sprint D Stepper + sport cards + choice cards + alerts modernisées + signature ═══════════════════════════════════════════════════════════ */ /* Stepper visuel en haut de chaque step */ .plv2-stepper{display:flex;align-items:center;justify-content:center;gap:4px;margin:0 0 22px;padding:0 4px} .plv2-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;min-width:54px} .plv2-step-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;font-family:'Plus Jakarta Sans',sans-serif;transition:all .25s var(--ease)} .plv2-step-todo .plv2-step-dot{background:var(--ov1);color:var(--muted);border:1px solid var(--border)} .plv2-step-active .plv2-step-dot{background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:0 0 0 4px rgba(var(--orange-rgb),.18);animation:plv2StepPulse 1.6s var(--ease) infinite} .plv2-step-done .plv2-step-dot{background:rgba(var(--orange-rgb),.18);color:var(--accent);border:1px solid rgba(var(--orange-rgb),.4)} .plv2-step-lbl{font-size:.62rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;line-height:1} .plv2-step-active .plv2-step-lbl{color:var(--accent)} .plv2-step-done .plv2-step-lbl{color:var(--text2)} .plv2-step-sep{flex:1;height:1.5px;border-radius:1px;background:var(--border);max-width:42px;margin:0 -4px;align-self:flex-start;margin-top:13px;transition:background .3s var(--ease)} .plv2-step-sep-done{background:rgba(var(--orange-rgb),.4)} @keyframes plv2StepPulse{0%,100%{box-shadow:0 0 0 4px rgba(var(--orange-rgb),.18)}50%{box-shadow:0 0 0 8px rgba(var(--orange-rgb),.06)}} /* Sport grid V2 — cards modernes avec gradient sport */ .plv2-sport-grid-v2{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .plv2-sport-card{position:relative;padding:16px 8px 12px;border-radius:14px;border:1px solid rgba(var(--sp-rgb,100,116,139),.18);background:linear-gradient(155deg,rgba(var(--sp-rgb,100,116,139),.10) 0%,rgba(var(--sp-rgb,100,116,139),.03) 100%);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .18s var(--ease);-webkit-tap-highlight-color:transparent;overflow:hidden;animation:plv2CardIn .4s var(--ease) both;font-family:inherit} .plv2-sport-card::before{content:'';position:absolute;top:0;left:-30%;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--sp-c) 50%,transparent);opacity:.6} .plv2-sport-card-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:rgba(var(--sp-rgb,100,116,139),.14);color:var(--sp-c);transition:transform .2s var(--ease)} .plv2-sport-card-name{font-size:.74rem;font-weight:700;color:var(--text);text-align:center;line-height:1.2;font-family:'Plus Jakarta Sans',sans-serif} .plv2-sport-card:hover{border-color:rgba(var(--sp-rgb,100,116,139),.45);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--sp-rgb,100,116,139),.18)} .plv2-sport-card:hover .plv2-sport-card-icon{transform:scale(1.08)} .plv2-sport-card:active{transform:translateY(0) scale(.97)} .plv2-sport-card-rest{grid-column:span 3;flex-direction:row;justify-content:center;padding:12px} .plv2-sport-card-rest .plv2-sport-card-icon{width:32px;height:32px;border-radius:9px} .plv2-sport-card-rest .plv2-sport-card-name{font-size:.78rem} /* Renfo hint (sous le sport grid) */ .plv2-renfo-hint{position:relative;display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:18px;padding:13px 14px;background:rgba(var(--violet-rgb),.05);border:1px solid rgba(var(--violet-rgb),.18);border-radius:13px;animation:plv2CardIn .45s var(--ease) .35s both;animation-fill-mode:both;opacity:0} .plv2-renfo-icon{flex-shrink:0;width:30px;height:30px;border-radius:9px;background:rgba(var(--violet-rgb),.12);display:flex;align-items:center;justify-content:center} .plv2-renfo-text{flex:1;min-width:0;font-size:.74rem;color:var(--text2);line-height:1.45} .plv2-renfo-text strong{color:var(--violet);font-weight:700} .plv2-renfo-cta{padding:8px 14px;border-radius:10px;background:var(--violet);color:#fff;border:none;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);white-space:nowrap} .plv2-renfo-cta:hover{transform:translateY(-1px);filter:brightness(1.08)} .plv2-renfo-cta:active{transform:translateY(0) scale(.97)} .plv2-renfo-locked{font-size:.66rem;color:var(--muted);font-style:italic} /* Sport badge (en-tête des steps choice/template/builder) */ .plv2-sport-badge{display:flex;align-items:center;gap:9px;margin-bottom:18px;padding:9px 12px;background:var(--ov1);border:1px solid var(--border);border-radius:11px} .plv2-sport-badge-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.18)} .plv2-sport-badge-name{font-size:.84rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif} .plv2-sport-badge-dur{margin-left:auto;font-size:.78rem;font-weight:800;color:var(--accent);font-family:'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums} .plv2-sport-badge-back{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--ov2);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:all .15s var(--ease);-webkit-tap-highlight-color:transparent} .plv2-sport-badge-back:hover{background:var(--ov3);color:var(--text)} .plv2-sport-badge-dur + .plv2-sport-badge-back{margin-left:0} /* Choice cards — 3 voies (template / builder / orion) */ .plv2-choice-grid{display:flex;flex-direction:column;gap:10px;margin-top:6px} .plv2-choice-card{display:flex;align-items:center;gap:13px;padding:14px 14px;border-radius:14px;border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;transition:all .18s var(--ease);-webkit-tap-highlight-color:transparent;font-family:inherit;text-align:left;width:100%;position:relative;overflow:hidden;animation:plv2CardIn .4s var(--ease) both;opacity:0} .plv2-choice-card::before{content:'';position:absolute;top:0;left:-30%;width:60%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--orange-rgb),.4),transparent)} .plv2-choice-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.18);border-color:rgba(var(--orange-rgb),.30)} .plv2-choice-card:active{transform:translateY(0) scale(.99)} .plv2-choice-card-icon{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.22)} .plv2-choice-card-icon-orion{background:linear-gradient(135deg,#a78bfa,#7c3aed) !important} .plv2-choice-card-star{font-size:1.4rem;color:#fff;font-weight:700;line-height:1;animation:orionFabStarPulse 2.6s ease-in-out infinite} .plv2-choice-card-body{flex:1;min-width:0} .plv2-choice-card-title{font-size:.86rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:3px;line-height:1.25} .plv2-choice-card-sub{font-size:.72rem;color:var(--text2);line-height:1.4} .plv2-choice-card-chev{flex-shrink:0;opacity:.6;transition:transform .2s var(--ease),opacity .2s var(--ease)} .plv2-choice-card:hover .plv2-choice-card-chev{transform:translateX(3px);opacity:1} .plv2-choice-card-orion{background:linear-gradient(135deg,rgba(var(--violet-rgb),.06),rgba(var(--violet-rgb),.02));border-color:rgba(var(--violet-rgb),.22)} .plv2-choice-card-orion:hover{border-color:rgba(var(--violet-rgb),.45);box-shadow:0 6px 20px rgba(var(--violet-rgb),.18)} .plv2-choice-card-orion .plv2-choice-card-title{color:var(--text)} /* Template cards V2 — 1 clic = save direct */ .plv2-template-list-v2{display:flex;flex-direction:column;gap:10px} .plv2-tpl-card{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:13px;border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer;transition:all .18s var(--ease);-webkit-tap-highlight-color:transparent;font-family:inherit;text-align:left;width:100%;animation:plv2CardIn .4s var(--ease) both;opacity:0} .plv2-tpl-card:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18);border-color:rgba(var(--orange-rgb),.32)} .plv2-tpl-card:active{transform:translateY(0) scale(.99)} .plv2-tpl-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .plv2-tpl-card-name{font-size:.84rem;font-weight:700;color:var(--text);font-family:'Plus Jakarta Sans',sans-serif} .plv2-tpl-card-dur{font-size:.74rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums} .plv2-tpl-card-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1.5px;background:var(--ov1)} .plv2-tpl-card-bar > div{height:100%;border-radius:2px} .plv2-tpl-card-summary{font-size:.7rem;color:var(--muted);line-height:1.4} .plv2-tpl-card-scratch{border-style:dashed;background:var(--ov1)} .plv2-tpl-card-scratch:hover{background:var(--ov2)} /* Timeline V2 (animation au mount des segments) */ .plv2-timeline-v2{display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;margin:14px 0 18px;background:var(--ov1);padding:1.5px} .plv2-timeline-v2 .plv2-timeline-seg{height:100%;border-radius:3px;animation:plv2SegIn .5s var(--ease) both;transform-origin:left center} @keyframes plv2SegIn{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}} /* Coaching alerts modernisées (cards slide-in cascade, sans score) */ .plv2-alerts-v2{display:flex;flex-direction:column;gap:8px;margin:14px 0 18px} .plv2-alert-card{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:11px;font-size:.76rem;line-height:1.4;animation:plv2AlertIn .45s var(--ease) both;opacity:0} .plv2-alert-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;margin-top:1px} .plv2-alert-text{flex:1;min-width:0;color:var(--text)} .plv2-alert-ok{background:rgba(var(--emerald-rgb),.06);border:1px solid rgba(var(--emerald-rgb),.20);color:var(--emerald)} .plv2-alert-ok .plv2-alert-icon{background:rgba(var(--emerald-rgb),.14)} .plv2-alert-warn{background:rgba(var(--amber-rgb),.06);border:1px solid rgba(var(--amber-rgb),.22);color:var(--amber)} .plv2-alert-warn .plv2-alert-icon{background:rgba(var(--amber-rgb),.14)} @keyframes plv2AlertIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}} /* Save button glow */ .plv2-save-btn{box-shadow:0 4px 14px rgba(var(--orange-rgb),.25);transition:all .18s var(--ease)} .plv2-save-btn:hover{box-shadow:0 6px 20px rgba(var(--orange-rgb),.38);transform:translateY(-1px)} /* Label hint inline */ .plv2-label-hint{font-weight:500;color:var(--muted);font-size:.74rem;text-transform:none;letter-spacing:0} /* Card mount animation */ @keyframes plv2CardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ═══════════════════════════════════════════════════════════ MODE SELECTOR + POPUP REFERENCE V4.2 — Sprint D Sélection BPM/FTP/VMA + popup saisie rapide si valeur manquante. ═══════════════════════════════════════════════════════════ */ .plv2-mode-row{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;padding:11px 12px;background:var(--ov1);border:1px solid var(--border);border-radius:11px;animation:plv2CardIn .35s var(--ease) both} .plv2-mode-label{font-size:.62rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px} .plv2-mode-pills{display:flex;gap:6px;flex-wrap:wrap} .plv2-mode-pill{padding:6px 12px;border-radius:8px;background:var(--ov2);border:1px solid var(--border);color:var(--text2);font-size:.74rem;font-weight:700;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);position:relative;display:inline-flex;align-items:center;gap:5px} .plv2-mode-pill:hover{background:var(--ov3);color:var(--text)} .plv2-mode-pill.active{background:rgba(var(--orange-rgb),.14);border-color:rgba(var(--orange-rgb),.42);color:var(--accent)} .plv2-mode-pill.plv2-mode-empty{opacity:.78} .plv2-mode-warn{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:rgba(var(--amber-rgb),.18);color:var(--amber);font-size:.62rem;font-weight:800;line-height:1} .plv2-mode-cur{font-size:.7rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums} /* Popup référence rapide */ .plv2-ref-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;animation:plv2RefFade .22s var(--ease) both} .plv2-ref-overlay.plv2-ref-out{animation:plv2RefFadeOut .22s var(--ease) both} .plv2-ref-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);cursor:pointer} .plv2-ref-card{position:relative;width:100%;max-width:340px;padding:24px 22px 18px;background:var(--card,#1c1c21);border:1px solid rgba(var(--orange-rgb),.22);border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.5),0 0 30px rgba(var(--orange-rgb),.10);animation:plv2RefCardIn .35s var(--ease) .04s both} .plv2-ref-close{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--ov1);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s var(--ease);-webkit-tap-highlight-color:transparent} .plv2-ref-close:hover{background:var(--ov2);color:var(--text)} .plv2-ref-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,rgba(var(--orange-rgb),.16),rgba(var(--orange-rgb),.06));border:1px solid rgba(var(--orange-rgb),.28);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:13px} .plv2-ref-title{font-size:1.05rem;font-weight:800;color:var(--text);margin-bottom:7px;font-family:'Plus Jakarta Sans',sans-serif} .plv2-ref-help{font-size:.74rem;color:var(--text2);line-height:1.45;margin-bottom:15px} .plv2-ref-input-row{display:flex;align-items:center;gap:10px;background:var(--ov1);border:1.5px solid var(--border);border-radius:11px;padding:0 14px;margin-bottom:14px;transition:border-color .15s var(--ease)} .plv2-ref-input-row:focus-within{border-color:rgba(var(--orange-rgb),.5)} .plv2-ref-input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:1.2rem;font-weight:700;padding:13px 0;font-family:'Plus Jakarta Sans',sans-serif;font-variant-numeric:tabular-nums;-moz-appearance:textfield} .plv2-ref-input::-webkit-outer-spin-button,.plv2-ref-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .plv2-ref-input.plv2-ref-error{color:var(--rose)} .plv2-ref-unit{font-size:.86rem;color:var(--muted);font-weight:600;flex-shrink:0} .plv2-ref-actions{display:flex;gap:8px} .plv2-ref-cancel{flex:0 0 auto;padding:11px 16px;background:var(--ov1);border:1px solid var(--border);color:var(--text2);border-radius:10px;font-size:.78rem;font-weight:600;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease)} .plv2-ref-cancel:hover{background:var(--ov2);color:var(--text)} .plv2-ref-save{flex:1;padding:11px 16px;background:linear-gradient(135deg,var(--accent),#fb923c);border:none;color:#fff;border-radius:10px;font-size:.82rem;font-weight:700;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;transition:all .15s var(--ease);box-shadow:0 4px 12px rgba(var(--orange-rgb),.28)} .plv2-ref-save:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(var(--orange-rgb),.40)} .plv2-ref-save:active{transform:translateY(0) scale(.98)} @keyframes plv2RefFade{from{opacity:0}to{opacity:1}} @keyframes plv2RefFadeOut{from{opacity:1}to{opacity:0}} @keyframes plv2RefCardIn{0%{opacity:0;transform:scale(.92) translateY(12px)}100%{opacity:1;transform:scale(1) translateY(0)}} /* Zone row labels (effort/récup) dans intervalles */ .plv2-zone-row-effort,.plv2-zone-row-recov{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap} .plv2-zone-row-recov{margin-bottom:10px} .plv2-zone-row-lbl{font-size:.6rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.4px;min-width:42px;flex-shrink:0} @media (prefers-reduced-motion: reduce){ .plv2-mode-row,.plv2-ref-overlay,.plv2-ref-card{animation:none!important} } /* ═══════════════════════════════════════════════════════════ MOMENT SIGNATURE À L'ENREGISTREMENT (Sprint D) Overlay court avec checkmark animé, 1.4s puis fade out. ═══════════════════════════════════════════════════════════ */ .plv2-sig{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;pointer-events:none;animation:plv2SigFade .25s var(--ease) both} .plv2-sig.plv2-sig-out{animation:plv2SigFadeOut .28s var(--ease) both} .plv2-sig::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(var(--sig-rgb,249,115,22),.12) 0%,rgba(0,0,0,.78) 60%,rgba(0,0,0,.85) 100%);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} .plv2-sig-card{position:relative;width:100%;max-width:280px;padding:24px 22px 22px;background:var(--card,#1c1c21);border:1px solid rgba(var(--sig-rgb,249,115,22),.25);border-radius:18px;box-shadow:0 16px 50px rgba(0,0,0,.45),0 0 40px rgba(var(--sig-rgb,249,115,22),.12);text-align:center;animation:plv2SigCardIn .42s var(--ease) .04s both;overflow:hidden} .plv2-sig-sweep{position:absolute;top:0;left:-30%;right:0;height:1.5px;background:linear-gradient(90deg,transparent 15%,var(--sig-c,#f97316) 50%,transparent 85%);opacity:.7;animation:fobSweep 1.4s var(--ease) .2s 1 both} /* Checkmark : circle drawn then check drawn */ .plv2-sig-check{margin:0 auto 12px;display:block} .plv2-sig-check-circle{stroke-dasharray:151;stroke-dashoffset:151;animation:plv2SigCircle .5s var(--ease) .15s forwards} .plv2-sig-check-mark{stroke-dasharray:36;stroke-dashoffset:36;animation:plv2SigMark .35s var(--ease) .55s forwards} @keyframes plv2SigCircle{to{stroke-dashoffset:0}} @keyframes plv2SigMark{to{stroke-dashoffset:0}} .plv2-sig-title{font-size:.96rem;font-weight:800;color:var(--text);margin-bottom:6px;font-family:'Plus Jakarta Sans',sans-serif;animation:plv2SigItemIn .35s var(--ease) .65s both} .plv2-sig-detail{font-size:.78rem;color:var(--text2);margin-bottom:3px;animation:plv2SigItemIn .35s var(--ease) .75s both} .plv2-sig-day{font-size:.72rem;color:var(--sig-c,var(--accent));font-weight:700;animation:plv2SigItemIn .35s var(--ease) .85s both} @keyframes plv2SigFade{from{opacity:0}to{opacity:1}} @keyframes plv2SigFadeOut{from{opacity:1}to{opacity:0}} @keyframes plv2SigCardIn{0%{opacity:0;transform:scale(.88) translateY(12px)}100%{opacity:1;transform:scale(1) translateY(0)}} @keyframes plv2SigItemIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion: reduce){ .plv2-step-active .plv2-step-dot, .plv2-sport-card,.plv2-choice-card,.plv2-tpl-card,.plv2-renfo-hint, .plv2-timeline-v2 .plv2-timeline-seg,.plv2-alert-card, .plv2-sig,.plv2-sig-card,.plv2-sig-sweep, .plv2-sig-check-circle,.plv2-sig-check-mark, .plv2-sig-title,.plv2-sig-detail,.plv2-sig-day, .plv2-choice-card-star{animation:none!important;opacity:1!important;transform:none!important} .plv2-sig-check-circle,.plv2-sig-check-mark{stroke-dashoffset:0!important} } /* Section */ .plv2-section{padding:16px} .plv2-label{font-size:.78rem;font-weight:700;color:var(--text2);margin-bottom:10px} /* Sport grid */ .plv2-sport-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; } .plv2-sport-btn{ padding:16px 8px;border-radius:14px; border:1px solid var(--border);background:var(--ov1); cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px; transition:all .12s;-webkit-tap-highlight-color:transparent; } .plv2-sport-btn:active{background:var(--ov3);transform:scale(.95)} .plv2-sport-icon{font-size:28px;line-height:1} .plv2-sport-name{font-size:.72rem;font-weight:700} /* Template list */ .plv2-template-list{display:flex;flex-direction:column;gap:6px} .plv2-tpl-btn{ display:flex;align-items:center;gap:10px; padding:12px 14px;border-radius:12px; border:1px solid var(--border);background:var(--ov1); cursor:pointer;text-align:left;width:100%; transition:all .12s;-webkit-tap-highlight-color:transparent; } .plv2-tpl-btn:active{background:var(--ov3);transform:scale(.98)} .plv2-tpl-bar{ display:flex;height:6px;border-radius:3px;overflow:hidden;gap:1px; width:60px;flex-shrink:0; } .plv2-tpl-name{font-weight:700;font-size:.82rem;color:var(--text);flex:1} .plv2-tpl-dur{font-size:.72rem;color:var(--muted);font-weight:600;flex-shrink:0} .plv2-tpl-scratch{justify-content:center;gap:6px;border:1px solid var(--card-border);color:var(--muted)} /* Timeline bar */ .plv2-timeline{ display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px; margin-bottom:4px; } /* Block card */ .plv2-block{ border:1px solid rgba(255,255,255,.06); border-left:3px solid; border-radius:12px; padding:10px 12px; margin-bottom:8px; transition:all .15s; } .plv2-block-head{ display:flex;align-items:center;gap:6px;margin-bottom:8px; } .plv2-block-icon{font-size:16px;line-height:1} .plv2-block-type{font-weight:700;font-size:.82rem;color:var(--text);flex:1} .plv2-block-dur-label{font-size:.72rem;color:var(--muted);font-weight:600} .plv2-block-rm{ width:26px;height:26px;border-radius:8px; border:none;background:rgba(251,113,133,.08); color:#fb7185;font-size:16px;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center; flex-shrink:0; } .plv2-block-rm:active{background:rgba(251,113,133,.2);transform:scale(.9)} /* Zone pills */ .plv2-zone-row{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px} .plv2-zone-pill{ font-size:.65rem;font-weight:700; padding:3px 10px;border-radius:10px; border:1.5px solid rgba(255,255,255,.08); background:transparent;color:var(--muted); cursor:pointer;transition:all .1s; -webkit-tap-highlight-color:transparent; } .plv2-zone-pill.active{ border-color:var(--zc); background:var(--zbg); color:var(--zc); } .plv2-zone-pill:active{transform:scale(.92)} .plv2-zone-hint{font-size:.62rem;color:var(--muted);margin-bottom:6px} /* Duration +/- */ .plv2-dur-row{ display:flex;align-items:center;justify-content:center;gap:12px; } .plv2-pm{ width:40px;height:32px;border-radius:8px; border:1px solid var(--border);background:var(--ov1); color:var(--text2);font-size:.82rem;font-weight:700; cursor:pointer;display:flex;align-items:center;justify-content:center; } .plv2-pm:active{background:var(--ov3);transform:scale(.92)} .plv2-dur-val{ font-size:1.1rem;font-weight:900;color:var(--text); min-width:60px;text-align:center; } .plv2-dur-unit{font-size:.65rem;color:var(--muted);font-weight:600;margin-left:2px} /* Interval controls */ .plv2-int-row{ display:flex;align-items:center;gap:6px;justify-content:center; flex-wrap:wrap; } .plv2-int-group{text-align:center} .plv2-int-label{font-size:.58rem;color:var(--muted);font-weight:600;margin-bottom:3px;display:inline-flex;align-items:baseline;gap:5px} .plv2-int-step{font-size:.52rem;font-weight:600;color:var(--text2);background:var(--ov2);padding:1px 5px;border-radius:4px;letter-spacing:.2px} .plv2-int-ctrl{ display:flex;align-items:center;gap:4px; background:var(--ov1);border-radius:8px;padding:3px 6px; } .plv2-pm-sm{ width:24px;height:22px;border-radius:5px; border:none;background:var(--ov3);color:var(--text2); font-size:.78rem;font-weight:700;cursor:pointer; display:flex;align-items:center;justify-content:center; } .plv2-pm-sm:active{background:var(--ov4);transform:scale(.9)} .plv2-int-val{ font-size:.88rem;font-weight:800;color:var(--text); min-width:42px;text-align:center;font-variant-numeric:tabular-nums; } .plv2-int-x{font-size:.72rem;color:var(--muted);font-weight:700} /* Add block row */ .plv2-add-row{ display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;margin-bottom:16px; } .plv2-add-btn{ padding:6px 12px;border-radius:10px; border:1px solid;border-color:color-mix(in srgb,var(--bc) 20%,transparent); background:color-mix(in srgb,var(--bc) 8%,transparent); color:var(--bc);font-size:.72rem;font-weight:600; cursor:pointer;display:flex;align-items:center;gap:4px; -webkit-tap-highlight-color:transparent; } .plv2-add-btn:active{opacity:.7;transform:scale(.95)} /* Fallback for browsers without color-mix */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .plv2-add-btn{ border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.03); } } /* Session Index card */ .plv2-index-card{ padding:14px;border-radius:var(--radius-md); background:var(--ov1);border:1px solid var(--border); margin-bottom:16px; } .plv2-gauge{position:relative;width:52px;height:52px;flex-shrink:0} .plv2-gauge-val{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-weight:900;font-size:.92rem; } /* Orion button */ .plv2-orion-btn{ width:100%;margin-top:10px;padding:8px;border-radius:8px; border:1px solid rgba(139,92,246,.2); background:rgba(139,92,246,.06); color:var(--violet);font-size:.75rem;font-weight:600; cursor:pointer;text-align:center; -webkit-tap-highlight-color:transparent; } .plv2-orion-btn:active{background:rgba(139,92,246,.12)} /* Actions */ .plv2-actions{display:flex;gap:8px;margin-top:8px} /* Responsive */ @media(max-width:360px){ .plv2-sport-grid{grid-template-columns:repeat(2,1fr)} .plv2-int-row{gap:4px} .plv2-pm{width:36px;height:28px} } /* ═══════════════════════════════════════ AGOGE Index Projection Widget ═══════════════════════════════════════ */ .proj-card{ padding:14px;border-radius:var(--radius-md); background:var(--ov1);border:1px solid var(--border); margin-bottom:16px; } .proj-header{ font-size:.72rem;font-weight:700;color:var(--muted); margin-bottom:10px;letter-spacing:.02em;text-transform:uppercase; } /* Score row: current → arrow → target + delta */ .proj-score-row{ display:flex;align-items:center;gap:10px;margin-bottom:10px; justify-content:center;flex-wrap:wrap; } .proj-score-now,.proj-score-target{text-align:center} .proj-score-val{font-size:1.4rem;font-weight:900;line-height:1.1;font-family:'Plus Jakarta Sans',system-ui} .proj-score-label{font-size:.6rem;font-weight:600;color:var(--muted);margin-top:1px} .proj-score-arrow{font-size:1.2rem;font-weight:900;opacity:.8} .proj-score-delta{ padding:3px 10px;border-radius:var(--radius-full); font-size:.72rem;font-weight:800; background:rgba(52,211,153,.08); } /* Sparkline */ .proj-spark-wrap{ display:flex;justify-content:center;margin:6px 0 12px; } .proj-spark{display:block;max-width:100%} /* Ring (kept for backwards compat) */ .proj-main{ display:flex;align-items:flex-start;gap:14px; } .proj-ring-wrap{text-align:center;flex-shrink:0} .proj-delta{ font-size:.72rem;font-weight:800;margin-top:-2px; } .proj-pillars{flex:1;min-width:0} .proj-pillar-row{ display:flex;align-items:center;gap:6px;margin-bottom:5px; } .proj-p-label{ font-size:.62rem;color:var(--muted);width:52px;flex-shrink:0; font-weight:600; } .proj-p-bar{ flex:1;height:4px;border-radius:2px; background:rgba(255,255,255,.06);overflow:hidden; position:relative; } .proj-p-fill{ height:100%;border-radius:2px; position:absolute;top:0;left:0; transform-origin:left; animation:barGrow .8s var(--ease) both; } .proj-p-fill-base{position:absolute;top:0;left:0} .proj-p-val{ font-size:.62rem;font-weight:700;width:50px;text-align:right;flex-shrink:0; display:flex;align-items:center;gap:2px;justify-content:flex-end; } .proj-up{color:#34d399;font-size:.55rem} .proj-down{color:#fb7185;font-size:.55rem} /* Alerts */ .proj-alerts{margin-top:10px} .proj-alert{ font-size:.72rem;padding:6px 10px;border-radius:8px; margin-bottom:4px;display:flex;align-items:center;gap:6px; } .proj-alert-warning{ background:rgba(251,113,133,.06);border:1px solid rgba(251,113,133,.12); color:#fb7185; } .proj-alert-info{ background:rgba(96,165,250,.06);border:1px solid rgba(96,165,250,.12); color:#60a5fa; } .proj-hint{ font-size:.72rem;color:var(--muted);text-align:center; margin-top:10px;padding:8px 12px; background:rgba(251,191,36,.04);border:1px solid rgba(251,191,36,.12); border-radius:8px; } .proj-empty{ padding:20px;text-align:center;font-size:.78rem;color:var(--muted); } /* ═══ Planner alerts (replaces gauge) ═══ */ .plv2-alerts { margin: 12px 0 8px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--ov1); } .plv2-alert { font-size: .78rem; font-weight: 600; padding: 3px 0; line-height: 1.4; } /* ═══ Calendar skipped dot ═══ */ .agc-dot-skip { opacity: 0.35; position: relative; } .agc-dot-skip::after { content: ''; position: absolute; top: 50%; left: -1px; right: -1px; height: 1.5px; background: var(--text); transform: rotate(-45deg); } .agc-has-skip { opacity: 0.7; }