/* ============================================================================= * Novalyz · layout.css — Couche 4 : templates de pages & grille responsive * ----------------------------------------------------------------------------- * BREAKPOINTS BOOTSTRAP STANDARD : * sm ≥576 · md ≥768 · lg ≥992 · xl ≥1200 · xxl ≥1400 * LARGEURS CONTENEUR BOOTSTRAP : * 540 · 720 · 960 · 1140 · 1320 * * Toutes les largeurs de l'app dérivent de DEUX tokens (source unique de vérité) * → largeurs cohérentes sur tout le produit, un seul endroit à ajuster : * --app-w : conteneur athlète / joueur / général (suit l'échelle jusqu'à 1320 desktop) * --coach-w : conteneur espace coach (data-dense, suit l'échelle jusqu'à 1320) * Sur desktop, toutes les vues sont donc plafonnées à 1320 (même largeur max). * Les barres de nav fixes et les overlays s'alignent sur ces mêmes tokens. * =========================================================================== */ /* ===== Tokens de largeur responsive (échelle Bootstrap) ===== */ :root { --app-w: 100%; /* xs : fluide — monte jusqu'à 1320 sur desktop */ --app-pad: 16px 20px; --coach-w: 720px; /* < lg : coach = largeur app */ --coach-pad: 20px 20px; --overlay-w: 100%; /* modales / overlays larges */ --auth-w: 100%; /* écran d'auth (formulaire focalisé) */ } @media (min-width:576px) { :root { --app-w:540px; --auth-w:460px; --overlay-w:540px; } } @media (min-width:768px) { :root { --app-w:720px; --app-pad:20px 24px; --coach-w:720px; --overlay-w:720px; } } @media (min-width:992px) { :root { --app-w:960px; --coach-w:960px; --coach-pad:24px 28px; --overlay-w:900px; } } @media (min-width:1200px) { :root { --app-w:1140px; --coach-w:1140px; } } @media (min-width:1400px) { :root { --app-w:1320px; --coach-w:1320px; --coach-pad:28px 36px; } } /* ===== Conteneur principal ===== */ .container { width:100%; max-width:var(--app-w); padding:var(--app-pad); margin:0 auto; } .container.no-pad { padding:0; } /* ===== Système de vues (SPA) ===== */ .view { display:none; } .view.active { display:block; } .tab-content { display:none; } .tab-content.active { display:block; } /* ===== Template : authentification ===== */ #view-login { max-width:var(--auth-w); margin:0 auto; } /* Écran de connexion — 1re version : logo centré au-dessus du formulaire sur fond clair (pas de hero dégradé, pas de fond noir, pas de split desktop). */ .nv-login-hero { text-align:center; padding:34px 0 22px; } .nv-login-hero .nv-hero-tile { display:inline-block; } .nv-login-hero .nv-hero-tile img { display:block; width:240px; max-width:80%; height:auto; margin:0 auto; } .nv-login-body { padding:0 2px; } /* Note : les barres de nav fixes (.tabs-bar, #view-coach-detail .sub-tabs) * lisent directement --app-w dans components.css → largeur alignée sur le conteneur. */ /* ===== Grille liste athlètes (coach) — responsive Bootstrap ===== */ #coach-athletes-grid { display:grid; grid-template-columns:1fr !important; gap:10px; } @media (min-width:576px) { #coach-athletes-grid { grid-template-columns:1fr 1fr !important; } } @media (min-width:992px) { #coach-athletes-grid { grid-template-columns:1fr 1fr 1fr !important; } } /* ===== Template : coach-detail — en-tête masqué ===== */ body.coach-active > header { display:none; } /* ===== Template : page joueur foot ===== */ #detail-joueur-body .sub-tabs { margin-bottom:14px; } .fjd-rail { display:none; } /* Overlay en flex-colonne : la zone .fjd-scroll défile, la barre d'onglets est un * enfant flex en bas (pas de position:fixed → fiable iOS). * La zone qui défile prend TOUTE la largeur → l'ascenseur est au bord droit de * la fenêtre (comme la vue athlète muscu). Le contenu, lui, reste centré à * --app-w via #detail-joueur-body. */ .fjd-scroll { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; min-height:0; width:100%; } #detail-joueur-body { max-width:var(--app-w); margin:0 auto; } /* Fiche joueur foot ouverte : on fige la page du dessous (une seule barre de * défilement, celle de l'overlay). */ html.fjd-open, html.fjd-open body { overflow:hidden; } /* ===== Espace coach — conteneur large (data-dense) ===== */ body.coach-active #main-container { max-width:var(--coach-w); padding:var(--coach-pad); } /* ===== Bureau coach (≥ lg 992) : layouts avancés ===== */ @media (min-width:992px) { /* Accueil coach (aucun athlète sélectionné) */ body.coach-active:not(.athlete-selected) #view-coach-detail.view { display:none !important; } /* Détail athlète : centre 2/3 + rail droit 1/3 */ body.coach-active.athlete-selected #view-coach.view { display:none !important; } body.coach-active #cd-body { display:flex; align-items:flex-start; gap:24px; } body.coach-active #cd-main { flex:1 1 auto; min-width:0; } /* Colonne de droite : largeur fixe (maquette Aperçu v2) */ body.coach-active #cd-rail { flex:0 0 320px; width:320px; max-width:320px; min-width:0; position:sticky; top:78px; display:block !important; } /* Sous-onglets coach : barre horizontale (plus de barre fixe bas) */ body.coach-active #view-coach-detail .sub-tabs { position:static; max-width:none; margin:0 0 18px; border-top:none; background:none; border:none; border-bottom:1px solid var(--border); border-radius:0; padding:0; z-index:auto; } body.coach-active #view-coach-detail .sub-tab { font-size:10.5px; padding:9px 4px; } body.coach-active.cd-nav { padding-bottom:0; } body.coach-active #cd-indicateurs > div { gap:10px; } /* Bandeau coach : masqué en bureau (la nav passe par le header + rail) */ #coach-bandeau { display:none !important; } body.coach-active:not(.athlete-selected) #main-container { padding-bottom:var(--coach-pad); } /* Page joueur foot en bureau : main + rail */ .fjd-body { display:flex; align-items:flex-start; gap:22px; } .fjd-main { flex:2 1 0; min-width:0; } .fjd-rail { display:block; flex:1 1 0; min-width:0; position:sticky; top:64px; } } /* ============================================================ * BUREAU ATHLÈTE (≥ 992) — navigation latérale + contenu large. * Ne s'active QUE pour l'athlète muscu (body.has-bottom-nav) ; jamais au * login (pas de has-bottom-nav), ni en espace coach (coach-active), ni pour * un athlète d'un sport collectif (vue joueur). Mobile/tablette (<992) : * la sidebar reste cachée et tout est strictement inchangé. * ============================================================ */ #app-side { display:none; } /* caché par défaut (mobile + autres rôles) */ /* Styles de la sidebar (inoffensifs hors desktop car #app-side est display:none) */ .as-brand { display:flex; align-items:center; gap:10px; padding:4px 10px 18px; } .as-logo { width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff; display:grid; place-items:center; font-family:'Michroma','Helvetica Neue',Arial,sans-serif; font-size:14px; } .as-nm { font-family:'Michroma','Helvetica Neue',Arial,sans-serif; font-size:15px; letter-spacing:.02em; color:var(--text); } .as-nav { display:flex; flex-direction:column; gap:3px; } .as-foot { margin-top:auto; display:flex; flex-direction:column; gap:3px; padding-top:12px; border-top:1px solid var(--border); } .as-item { display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; padding:11px 12px; border-radius:12px; border:none; background:none; font-family:inherit; font-weight:600; font-size:14px; color:var(--text); } .as-item svg { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .as-item:hover { background:var(--surface2); } .as-item.active { background:var(--accent-a12, rgba(26,95,255,.12)); color:var(--accent); font-weight:800; } .as-item.as-sm { font-size:13px; color:var(--text-subtle); } .as-item.as-sm:hover { color:var(--text); } @media (min-width:992px) { body.has-bottom-nav #app-side { display:flex; flex-direction:column; gap:4px; position:fixed; top:0; left:0; bottom:0; width:248px; z-index:60; background:var(--surface); border-right:1px solid var(--border); padding:22px 16px; overflow-y:auto; } /* La sidebar remplace le header mobile + la bottom-nav pour l'athlète */ body.has-bottom-nav > #app-header { display:none; } body.has-bottom-nav #tabs-bar { display:none !important; } body.has-bottom-nav { padding-bottom:0; } /* Le conteneur occupe la zone à droite de la sidebar. width:auto (et non le width:100% de .container) pour tenir dans l'espace restant et ne pas déborder sous la sidebar fixe. Plafonné puis aligné à gauche en ultra-large. */ body.has-bottom-nav #main-container { width:auto; max-width:1500px; margin:0 auto 0 248px; padding:26px 34px 48px; } /* Bulle « Demande à Novalyz » (élément global #fab-novalyz) : plus de bottom-nav en bureau → on la cale en bas à droite de la zone de contenu. */ body.has-bottom-nav #fab-novalyz { bottom:28px !important; right:28px !important; } /* Sous-écrans plein écran (Objectif / Conversation / Blessures / Nutrition) : en mobile ils sont centrés sur tout l'écran (left:50% + translateX). En bureau ils passaient SOUS la sidebar fixe → on les cale à droite d'elle (de 248px au bord droit), sans translation ni centrage viewport. */ body.has-bottom-nav #tab-objectif.tab-content, body.has-bottom-nav #tab-conseils.tab-content, body.has-bottom-nav #tab-blessures.tab-content, body.has-bottom-nav #tab-nutrition.tab-content, body.has-bottom-nav #tab-suivi.tab-content, body.has-bottom-nav #tab-morpho.tab-content { left:248px; right:0; width:auto; max-width:none; transform:none; bottom:0; } /* Conversation : le panneau remplit la zone à droite de la sidebar, et la COLONNE de chat est plafonnée MAIS alignée à GAUCHE (collée à la sidebar), pas centrée — sinon les bulles flottent au milieu, détachées de la colonne. */ body.has-bottom-nav #tab-conseils .cv-top, body.has-bottom-nav #tab-conseils .cv-list, body.has-bottom-nav #tab-conseils .cv-msgs, body.has-bottom-nav #tab-conseils .cv-sugg-wrap, body.has-bottom-nav #tab-conseils .cv-input { width:100%; max-width:820px; margin-left:0; margin-right:auto; } } /* ============================================================ * Bloc « Demande à Novalyz » — rail DESKTOP (remplace la bulle flottante). * Présent dans le rail de chaque écran athlète en bureau (sauf conversation/ * morpho qui n'ont pas de rail). Masqué en mobile (la bulle #fab-novalyz reste * le point d'entrée IA sur petit écran). * ============================================================ */ .nvz-ask{ display:none; } /* Desktop : carte d'assistant de HAUTEUR NORMALE (pas d'étirement) en bas du rail — en-tête + suggestions + champ de saisie empilés. Le rail se remplit avec de VRAIS blocs de contenu au-dessus, pas en étirant ce panneau. */ @media (min-width:992px){ body.has-bottom-nav .nvz-ask{ display:flex; flex-direction:column; } } .nvz-ask{ background:linear-gradient(135deg,var(--accent),var(--accent-strong)); color:#fff; border:none; border-radius:18px; padding:16px; box-shadow:0 10px 26px rgba(26,95,255,.30); } .nvz-ask-hd{ display:flex; align-items:center; gap:11px; } .nvz-ask-l{ width:38px; height:38px; border-radius:11px; background:rgba(255,255,255,.18); display:grid; place-items:center; font-family:'Michroma','Helvetica Neue',Arial,sans-serif; font-size:13px; flex:none; } .nvz-ask-ti{ font-size:15px; font-weight:800; } .nvz-ask-sb{ font-size:12px; opacity:.9; margin-top:1px; } .nvz-ask-chips{ display:flex; flex-direction:column; gap:8px; margin-top:14px; } .nvz-ask-chip{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; text-align:left; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:10px 13px; font:inherit; font-size:12.5px; font-weight:600; color:#fff; cursor:pointer; } .nvz-ask-chip svg{ width:15px; height:15px; opacity:.85; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } .nvz-ask-chip:hover{ background:rgba(255,255,255,.24); } /* Champ de saisie : vrai (on écrit directement). Ancré en bas du panneau. */ .nvz-ask-field{ display:flex; align-items:center; gap:9px; margin-top:14px; width:100%; background:#fff; border:none; border-radius:999px; padding:5px 5px 5px 15px; } .nvz-ask-inp{ flex:1; min-width:0; border:none; outline:none; background:transparent; font:inherit; font-size:13px; color:#13203f; padding:7px 0; } .nvz-ask-inp::placeholder{ color:#8A97BC; } .nvz-ask-send{ width:38px; height:38px; border-radius:999px; background:var(--accent); color:#fff; display:grid; place-items:center; flex:none; border:none; cursor:pointer; padding:0; } .nvz-ask-send svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } /* ============================================================ * Blocs de contenu des rails BUREAU (désactivés en mobile pour ne rien changer * au flux mobile). .rail-only = visible seulement ≥992px. * ============================================================ */ @media (max-width:991px){ .rail-only{ display:none !important; } } .rail-hd{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); margin-bottom:10px; } .rail-snap-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .rail-tile{ background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; min-width:0; } .rail-tile .k{ font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--text-subtle); display:flex; align-items:center; gap:5px; } .rail-tile .v{ font-size:16px; font-weight:800; margin-top:4px; color:var(--text); font-family:var(--head,'Michroma',sans-serif); line-height:1.1; overflow-wrap:anywhere; } .rail-tile .v small{ font-size:11px; font-weight:600; font-family:var(--font,inherit); color:var(--text-subtle); } .rail-tile .dot{ width:8px; height:8px; border-radius:999px; flex:none; display:inline-block; } .rail-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid var(--border); font-size:12.5px; } .rail-row:first-of-type{ border-top:none; } .rail-row .rk{ color:var(--text-muted); font-weight:600; } .rail-row .rv{ font-weight:800; color:var(--text); } /* Pages Hyrox (overlays plein écran : circuit, atelier, détail, saisie). En bureau, on les cale à DROITE de la sidebar (nav visible) et on élargit un peu la colonne de contenu — avant : elles couvraient tout l'écran, colonne centrée de travers. */ @media (min-width:992px){ body.has-bottom-nav .hx-overlay{ left:248px !important; } body.has-bottom-nav .hx-overlay > div{ max-width:600px !important; } } /* ============================================================ * Sélecteur d'exercices (séance libre) — filtres groupes + fréquents + * multi-sélection. Mobile par défaut ; liste en 2 colonnes en bureau. * ============================================================ */ .exo-chips{ display:flex; gap:7px; overflow-x:auto; padding:10px 0 4px; scrollbar-width:none; } .exo-chips::-webkit-scrollbar{ display:none; } .exo-chip{ flex:none; display:inline-flex; align-items:center; gap:6px; border:1.5px solid var(--border); background:var(--surface); border-radius:999px; padding:7px 13px; font:inherit; font-size:12.5px; font-weight:700; color:var(--text-muted); cursor:pointer; white-space:nowrap; } .exo-chip .d{ width:9px; height:9px; border-radius:999px; } .exo-chip.on{ border-color:transparent; color:#fff; } .exo-freq-lab{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-subtle); margin:8px 2px 7px; } .exo-freqs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:6px; } .exo-fchip{ display:inline-flex; align-items:center; gap:6px; background:var(--accent-a08,rgba(26,95,255,.08)); border:1px solid var(--accent-a15,rgba(26,95,255,.16)); color:var(--accent); border-radius:10px; padding:7px 11px; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; } .exo-fchip svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; flex:none; } .exo-card{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:7px; cursor:pointer; } .exo-card.sel{ border-color:var(--accent); background:var(--accent-a08,rgba(26,95,255,.08)); } .exo-card .ck{ width:23px; height:23px; border-radius:7px; border:2px solid var(--border); flex:none; display:grid; place-items:center; } .exo-card.sel .ck{ background:var(--accent); border-color:var(--accent); } .exo-card .ck svg{ width:13px; height:13px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; } .exo-card.sel .ck svg{ opacity:1; } .exo-card .nm{ flex:1; min-width:0; } .exo-card .nm .a{ font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .exo-card .nm .b{ font-size:11px; color:var(--text-subtle); margin-top:1px; } .exo-card .mt{ font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:999px; color:#fff; white-space:nowrap; flex:none; } .exo-card .already{ font-size:10px; font-weight:800; color:var(--good); flex:none; } .exo-addbtn{ width:100%; border:none; border-radius:13px; padding:14px; font:inherit; font-weight:800; font-size:14.5px; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong,#0a46d6)); cursor:pointer; box-shadow:0 6px 16px rgba(26,95,255,.28); } @media (min-width:992px){ body.has-bottom-nav #liste-exos-libres{ display:grid; grid-template-columns:1fr 1fr; gap:7px; max-height:460px; align-content:start; } body.has-bottom-nav #liste-exos-libres .exo-card{ margin-bottom:0; } } /* ═══════════ ÉDITEUR DE PROGRAMME ATHLÈTE — refonte « vue semaine » ═══════════ */ /* Portée : #prog-editor-overlay uniquement (coach/joueur conservent l'accordéon). */ body.prog-editor-open{ overflow:hidden; } #prog-editor-overlay .prog-editor-scroll{ max-width:640px; } #prog-editor-overlay .prog-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; } #prog-editor-overlay .prog-seg{ display:none; } #prog-editor-overlay .prog-btn-ia{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--accent); background:var(--accent-a08); color:var(--accent); border-radius:11px; padding:9px 13px; font-weight:800; font-size:12.5px; cursor:pointer; font-family:inherit; margin-left:auto; } #prog-editor-overlay .prog-tabs{ display:flex; gap:7px; overflow-x:auto; padding-bottom:10px; margin-bottom:6px; scrollbar-width:none; } #prog-editor-overlay .prog-tabs::-webkit-scrollbar{ display:none; } #prog-editor-overlay .prog-tab{ flex:none; border:1.5px solid var(--border); background:var(--surface); border-radius:11px; padding:7px 13px; font-size:12.5px; font-weight:800; color:var(--text-muted); cursor:pointer; text-align:center; line-height:1.25; font-family:inherit; } #prog-editor-overlay .prog-tab small{ display:block; font-size:10px; color:var(--text-subtle); font-weight:600; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #prog-editor-overlay .prog-tab.on{ border-color:var(--accent); background:var(--accent); color:#fff; } #prog-editor-overlay .prog-tab.on small{ color:rgba(255,255,255,.82); } #prog-editor-overlay .prog-tab-add{ color:var(--accent); border-style:dashed; } #prog-editor-overlay .prog-col[data-off]{ display:none; } #prog-editor-overlay .prog-colhd{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 11px; border-radius:12px; padding:9px 11px; } #prog-editor-overlay .prog-colhd-t{ display:flex; align-items:center; gap:9px; min-width:0; } #prog-editor-overlay .prog-colbar{ width:5px; height:30px; border-radius:3px; flex:none; } #prog-editor-overlay .prog-colhd .dn{ font-weight:800; font-size:15px; } #prog-editor-overlay .prog-colhd .ds{ font-size:11px; color:var(--text-muted); font-weight:700; margin-top:1px; } #prog-editor-overlay .prog-exc-tag{ display:inline-block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:20px; margin-top:4px; } #prog-editor-overlay .prog-col-del{ background:var(--bad-a); border:1px solid var(--danger); color:var(--danger); border-radius:8px; width:32px; height:32px; padding:0; cursor:pointer; font-size:14px; line-height:1; flex:none; } #prog-editor-overlay .prog-exc{ background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:11px 12px; margin-bottom:9px; box-shadow:0 1px 4px rgba(0,0,0,.18); } #prog-editor-overlay .prog-exc-top{ display:flex; align-items:center; gap:10px; cursor:pointer; } #prog-editor-overlay .prog-exc-nm{ flex:1; min-width:0; } #prog-editor-overlay .prog-exc-nm .a{ font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #prog-editor-overlay .prog-exc-nm .b{ font-size:11px; color:var(--text-subtle); margin-top:1px; } #prog-editor-overlay .prog-exc-pen{ border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); width:32px; height:32px; border-radius:9px; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; } #prog-editor-overlay .prog-grip{ display:none; color:var(--text-subtle); cursor:grab; flex:none; align-items:center; } #prog-editor-overlay .prog-grip:active{ cursor:grabbing; } #prog-editor-overlay .prog-move-sel{ font-size:13px; padding:8px 10px; width:auto; min-width:160px; margin-top:10px; margin-bottom:0; } #prog-editor-overlay .prog-sets{ display:flex; gap:8px; margin-top:10px; } #prog-editor-overlay .prog-sb{ flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:7px 3px; text-align:center; } #prog-editor-overlay .prog-sb-v{ font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; } #prog-editor-overlay .prog-sb-l{ font-size:9px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.04em; font-weight:700; margin-top:1px; } #prog-editor-overlay .prog-sb-ser{ background:rgba(26,95,255,.09); border-color:rgba(26,95,255,.20); } #prog-editor-overlay .prog-sb-ser .prog-sb-v{ color:#1A5FFF; } #prog-editor-overlay .prog-sb-rep{ background:rgba(0,168,84,.09); border-color:rgba(0,168,84,.20); } #prog-editor-overlay .prog-sb-rep .prog-sb-v{ color:#00A854; } #prog-editor-overlay .prog-sb-chg{ background:rgba(224,120,0,.10); border-color:rgba(224,120,0,.22); } #prog-editor-overlay .prog-sb-chg .prog-sb-v{ color:#E07800; } #prog-editor-overlay .prog-sb-rst{ background:rgba(124,92,255,.09); border-color:rgba(124,92,255,.20); } #prog-editor-overlay .prog-sb-rst .prog-sb-v{ color:#7C5CFF; } #prog-editor-overlay .prog-addexo{ width:100%; border:1.5px dashed var(--accent); background:var(--accent-a08); border-radius:12px; padding:12px; font:inherit; font-weight:800; font-size:13.5px; color:var(--accent); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:2px; } /* Écran de départ (modèles) */ #prog-editor-overlay .prog-start-lab{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text-subtle); margin:4px 2px 9px; } #prog-editor-overlay .prog-tpl{ display:flex; align-items:center; gap:12px; width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:15px; padding:13px; margin-bottom:9px; cursor:pointer; font-family:inherit; text-align:left; } #prog-editor-overlay .prog-tpl.ia{ border-color:var(--accent); background:linear-gradient(135deg,var(--accent-a08),var(--surface)); } #prog-editor-overlay .prog-tpl-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; color:#fff; font-weight:800; font-size:18px; } #prog-editor-overlay .prog-tpl-tt{ flex:1; min-width:0; } #prog-editor-overlay .prog-tpl-tt .a{ display:block; font-weight:800; font-size:14.5px; color:var(--text); } #prog-editor-overlay .prog-tpl-tt .b{ display:block; font-size:11.5px; color:var(--text-subtle); margin-top:2px; } #prog-editor-overlay .prog-tpl-chev{ color:var(--text-subtle); font-size:20px; flex:none; } /* Bouton « Ajouter une séance » : masqué en mobile (l'onglet « ＋ Jour » s'en charge). */ #prog-editor-overlay .prog-addday{ display:none; } @media (min-width:992px){ #prog-editor-overlay .prog-editor-scroll{ max-width:1180px; } #prog-editor-overlay .prog-seg{ display:flex; gap:4px; background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:4px; } #prog-editor-overlay .prog-seg button{ border:none; background:none; font:inherit; font-weight:800; font-size:12.5px; color:var(--text-muted); padding:7px 13px; border-radius:8px; cursor:pointer; } #prog-editor-overlay .prog-seg button.on{ background:var(--surface); color:var(--accent); box-shadow:0 1px 2px rgba(0,0,0,.14); } #prog-editor-overlay .prog-tabs{ display:none; } #prog-editor-overlay .prog-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:start; } #prog-editor-overlay .prog-cols.liste{ display:block; max-width:660px; margin:0 auto; } #prog-editor-overlay .prog-col{ background:var(--surface2); border:1px solid var(--border); border-radius:16px; padding:14px; } #prog-editor-overlay .prog-col[data-off]{ display:block; } #prog-editor-overlay .prog-start{ max-width:640px; margin:0 auto; } #prog-editor-overlay .prog-addday{ display:flex; align-items:center; justify-content:center; gap:8px; align-self:stretch; min-height:120px; border:1.5px dashed var(--border); background:transparent; border-radius:16px; color:var(--text-subtle); font-weight:800; font-size:13.5px; cursor:pointer; font-family:inherit; } #prog-editor-overlay .prog-addday:hover{ border-color:var(--accent); color:var(--accent); } #prog-editor-overlay .prog-cols.liste .prog-addday{ width:100%; min-height:0; padding:14px; margin-top:4px; } #prog-editor-overlay .prog-grip{ display:inline-flex; } #prog-editor-overlay .prog-col-drop{ outline:2px dashed var(--accent); outline-offset:3px; background:var(--accent-a08); } } @media (min-width:992px) and (max-width:1200px){ #prog-editor-overlay .prog-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ═══════════ ÉDITEUR PROGRAMME — Builder pro (desktop, piste A) ═══════════ */ @media (min-width:992px){ /* Plein écran : les panneaux défilent eux-mêmes → scrollbar au bord de la fenêtre. Chaîne flex jusqu'au builder pour que sa hauteur soit BORNÉE (sinon #prog-editor-content est en hauteur auto → height:100% ne contraint rien et le volet central ne scrolle pas). */ #prog-editor-overlay .prog-editor-scroll:has(.pb-builder){ max-width:none !important; padding:0 !important; overflow:hidden !important; display:flex; flex-direction:column; min-height:0; } #prog-editor-overlay .prog-editor-scroll:has(.pb-builder) > #prog-editor-content{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } #prog-editor-overlay .pb-builder{ display:grid; grid-template-columns:236px minmax(0,1fr) 300px; flex:1 1 auto; min-height:0; } /* Rail des jours */ #prog-editor-overlay .pb-rail{ background:var(--surface2); border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; gap:6px; overflow:auto; min-height:0; } #prog-editor-overlay .pb-rail-t{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--text-subtle); margin:2px 6px 6px; } #prog-editor-overlay .pb-dayrow{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; cursor:pointer; border:1px solid transparent; } #prog-editor-overlay .pb-dayrow:hover{ background:var(--surface); } #prog-editor-overlay .pb-dayrow.on{ background:var(--surface); border-color:var(--border); box-shadow:0 1px 3px rgba(0,0,0,.08); } #prog-editor-overlay .pb-dayrow .nm{ flex:1; min-width:0; } #prog-editor-overlay .pb-dayrow .nm b{ display:block; font-size:13.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #prog-editor-overlay .pb-dayrow .nm span{ display:block; font-size:11px; color:var(--text-subtle); } #prog-editor-overlay .pb-dayrow .ct{ font-size:11px; font-weight:800; color:var(--text-muted); background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:1px 8px; } #prog-editor-overlay .pb-dayrow.on .ct{ background:var(--accent-a14); color:var(--accent); border-color:transparent; } #prog-editor-overlay .pb-railadd{ margin-top:8px; border:1.5px dashed var(--border); background:transparent; color:var(--text-muted); border-radius:12px; padding:11px; font:inherit; font-weight:800; font-size:12.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; } #prog-editor-overlay .pb-railadd:hover{ border-color:var(--accent); color:var(--accent); } #prog-editor-overlay .pb-dayrow.prog-col-drop{ outline:2px dashed var(--accent); outline-offset:2px; background:var(--accent-a08); } /* Plan central */ #prog-editor-overlay .pb-canvas{ overflow:auto; min-height:0; } #prog-editor-overlay .pb-ctop{ position:sticky; top:0; background:var(--surface); border-bottom:1px solid var(--border); padding:16px 22px; display:flex; align-items:center; gap:10px; z-index:2; } #prog-editor-overlay .pb-ctop h3{ font-size:17px; } #prog-editor-overlay .pb-ctop .pb-sub{ font-size:12px; color:var(--text-subtle); font-weight:700; } #prog-editor-overlay .pb-seance-del{ margin-left:auto; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:9px; width:34px; height:34px; display:grid; place-items:center; cursor:pointer; } #prog-editor-overlay .pb-seance-del:hover{ border-color:var(--danger); color:var(--danger); } #prog-editor-overlay .pb-rows{ padding:14px 22px 24px; display:flex; flex-direction:column; gap:8px; } #prog-editor-overlay .pb-row{ display:grid; grid-template-columns:18px minmax(120px,1fr) auto auto auto auto 30px; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:9px 12px; } #prog-editor-overlay .pb-row:hover{ box-shadow:0 1px 4px rgba(0,0,0,.08); } /* Ligne muscu : nom complet + suppr sur la 1re ligne, paramètres (séries/reps/%/RPE/repos) sur une 2e ligne qui s'enroule → fin des débordements (RPE/repos) et nom lisible. */ #prog-editor-overlay .pb-row-muscu{ display:flex; flex-wrap:wrap; align-items:center; column-gap:10px; row-gap:10px; } #prog-editor-overlay .pb-row-muscu .pb-exn{ flex:1 1 auto; } #prog-editor-overlay .pb-row-muscu .pb-exo{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #prog-editor-overlay .pb-row-muscu .pb-del{ margin-left:auto; align-self:center; flex:0 0 auto; } #prog-editor-overlay .pb-row-muscu .pb-flds{ flex:1 1 100%; display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; } #prog-editor-overlay .pb-row-muscu .pb-fld{ flex:0 0 auto; } #prog-editor-overlay .pb-row-muscu .pb-rpe .pb-in{ width:74px; } #prog-editor-overlay .pb-row .prog-grip{ display:inline-flex; } #prog-editor-overlay .pb-exn{ display:flex; align-items:center; gap:9px; min-width:0; } #prog-editor-overlay .pb-exn-c{ min-width:0; flex:1; } #prog-editor-overlay .pb-exo{ font-weight:800; font-size:13.5px; border:1px solid transparent; background:transparent; padding:3px 4px; border-radius:7px; width:100%; margin:0; cursor:pointer; color:var(--text); } #prog-editor-overlay .pb-exo:hover{ border-color:var(--border); background:var(--surface2); } #prog-editor-overlay .pb-exn-c small{ display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.03em; padding-left:4px; } #prog-editor-overlay .pb-fld{ text-align:center; } #prog-editor-overlay .pb-fld .pb-l{ display:block; font-size:9px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); font-weight:700; margin-bottom:3px; } #prog-editor-overlay .pb-in{ width:54px; text-align:center; font-weight:800; font-size:13.5px; font-variant-numeric:tabular-nums; border:1px solid var(--border); border-radius:8px; padding:6px 4px; margin:0; background:var(--surface2); } /* Masque les flèches du spinner number (elles rognaient les nombres ≥ 2 chiffres). */ #prog-editor-overlay .pb-in::-webkit-outer-spin-button, #prog-editor-overlay .pb-in::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } #prog-editor-overlay .pb-in{ -moz-appearance:textfield; appearance:textfield; } /* Séries = 1 chiffre le plus souvent → case plus étroite ; Reps = min–max (jusqu'à 2 chiffres chacun) → cases un peu plus larges pour ne pas couper « 12 ». */ #prog-editor-overlay .pb-series .pb-in{ width:44px; } #prog-editor-overlay .pb-reps-in{ display:flex; align-items:center; gap:3px; justify-content:center; } #prog-editor-overlay .pb-reps-in .pb-in{ width:50px; } #prog-editor-overlay .pb-reps-in i{ color:var(--text-subtle); font-style:normal; } #prog-editor-overlay .pb-del{ border:none; background:none; color:#c0c8d4; font-size:15px; cursor:pointer; } #prog-editor-overlay .pb-del:hover{ color:var(--danger); } #prog-editor-overlay .pb-addexo{ border:1.5px dashed var(--accent); background:var(--accent-a08); border-radius:12px; padding:12px; color:var(--accent); font:inherit; font-weight:800; font-size:13.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:4px; } #prog-editor-overlay .pb-row-cardio{ grid-template-columns:18px minmax(120px,1fr) auto auto 30px; } #prog-editor-overlay .pb-cardio-mode{ display:flex; gap:4px; } #prog-editor-overlay .pb-cardio-mode button{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:8px; padding:6px 9px; font-size:11px; font-weight:800; cursor:pointer; font-family:inherit; } #prog-editor-overlay .pb-cardio-mode button.on{ border-color:#9D5FD3; background:#9D5FD31a; color:#9D5FD3; } #prog-editor-overlay .pb-cardio-cible{ display:flex; align-items:center; gap:6px; } #prog-editor-overlay .pb-cardio-cible .pb-unit{ font-size:12px; font-weight:800; color:var(--text-muted); } #prog-editor-overlay .pb-cardio-libre{ font-size:12px; color:var(--text-subtle); } #prog-editor-overlay .pb-superset{ background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:10px 10px 10px 12px; display:flex; flex-direction:column; gap:7px; } #prog-editor-overlay .pb-superset-h{ font-size:11px; font-weight:800; letter-spacing:.3px; } #prog-editor-overlay .pb-superset .pb-row{ background:var(--surface); } /* Inspecteur */ #prog-editor-overlay .pb-insp{ background:var(--surface2); border-left:1px solid var(--border); padding:16px; overflow:auto; display:flex; flex-direction:column; gap:14px; min-height:0; } #prog-editor-overlay .pb-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; } #prog-editor-overlay .pb-card-t{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:9px; } #prog-editor-overlay .pb-iacard{ background:linear-gradient(135deg,var(--accent-a08),var(--surface)); border-color:rgba(26,95,255,.25); } #prog-editor-overlay .pb-iacard h4{ font-size:14.5px; margin:0 0 4px; } #prog-editor-overlay .pb-iacard p{ font-size:12px; color:var(--text-muted); margin:0 0 11px; line-height:1.45; } #prog-editor-overlay .pb-iabtn{ width:100%; border:none; border-radius:11px; padding:11px; background:var(--accent); color:#fff; font:inherit; font-weight:800; font-size:13px; cursor:pointer; } #prog-editor-overlay .pb-voltot{ font-size:20px; font-weight:800; margin-bottom:9px; } #prog-editor-overlay .pb-volwrap{ display:flex; flex-wrap:wrap; gap:6px; } #prog-editor-overlay .pb-volchip{ font-size:11.5px; font-weight:700; border:1px solid; border-radius:20px; padding:3px 9px; background:var(--surface); } #prog-editor-overlay .pb-volchip b{ font-weight:800; } } /* ═══════════════ ESPACE COACH — SHELL DESKTOP (≥992px) ═══════════════ */ /* #coach-rail = barre latérale sombre persistante (accueil + fiche). #coach-shell = plan de travail de l'accueil. Mobile : les deux cachés. */ #coach-shell, #coach-rail{ display:none; } @media (min-width:992px){ /* Rail sombre persistant (présent aussi sur la fiche athlète) */ body.coach-active #coach-rail{ display:flex; position:fixed; top:0; left:0; bottom:0; width:248px; z-index:62; background:#0f1726; } body.coach-active #coach-rail .cs-side{ width:100%; flex:1; background:#0f1726; color:#c7d0e0; display:flex; flex-direction:column; gap:4px; padding:20px 14px; overflow-y:auto; } /* Plan de travail de l'accueil, à droite du rail */ body.coach-active:not(.athlete-selected) #coach-shell{ display:flex; position:fixed; top:0; left:248px; right:0; bottom:0; z-index:60; background:var(--surface2); } body.coach-active:not(.athlete-selected) #coach-topbar, body.coach-active #coach-bandeau{ display:none !important; } /* Fiche athlète : réutilise #view-coach-detail, décalée à droite du rail */ body.coach-active.athlete-selected #main-container{ margin-left:248px; } body.coach-active.athlete-selected #cd-header{ margin-left:248px; z-index:9; } /* Sidebar sombre (rendue dans #coach-rail) */ #coach-rail .cs-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; } #coach-rail .cs-logo{ width:32px; height:32px; border-radius:9px; background:linear-gradient(135deg,var(--accent),#7C5CFF); display:grid; place-items:center; color:#fff; font-weight:800; font-family:'Michroma',sans-serif; font-size:14px; } #coach-rail .cs-brand b{ font-family:'Michroma',sans-serif; font-size:15px; color:#fff; display:block; } #coach-rail .cs-brand span{ font-size:10px; color:#7f8da6; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #coach-rail .cs-nav{ display:flex; flex-direction:column; gap:3px; } #coach-rail .cs-item{ display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:11px; color:#c7d0e0; cursor:pointer; font-weight:700; font-size:13.5px; border:none; background:none; font-family:inherit; text-align:left; width:100%; } #coach-rail .cs-item svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } #coach-rail .cs-item:hover{ background:#1b2740; } #coach-rail .cs-item.on{ background:var(--accent); color:#fff; } #coach-rail .cs-bdg{ margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:800; border-radius:20px; padding:1px 7px; } #coach-rail .cs-me{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 8px 2px; border-top:1px solid #20304d; } #coach-rail .cs-av{ width:34px; height:34px; border-radius:50%; background:#243049; display:grid; place-items:center; color:#9fb2d6; font-weight:800; font-size:12px; flex:none; } #coach-rail .cs-me b{ font-size:13px; color:#fff; display:block; } #coach-rail .cs-me span{ font-size:11px; color:#7f8da6; } /* Zone principale */ #coach-shell .cs-main{ flex:1; min-width:0; display:flex; flex-direction:column; } #coach-shell .cs-top{ display:flex; align-items:center; gap:14px; padding:16px 26px; border-bottom:1px solid var(--border); background:var(--surface); flex:none; } #coach-shell .cs-top h1{ font-size:19px; font-family:'Michroma',sans-serif; margin:0; } #coach-shell .cs-search{ margin-left:auto; display:flex; align-items:center; gap:8px; background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:0 12px; width:240px; color:var(--text-subtle); } #coach-shell .cs-search svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; flex:none; } #coach-shell .cs-search input{ border:none; background:none; outline:none; font:inherit; font-size:12.5px; color:var(--text); padding:9px 0; width:100%; margin:0; } #coach-shell .cs-btn{ border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:10px; padding:9px 14px; font-weight:800; font-size:12.5px; cursor:pointer; font-family:inherit; } #coach-shell .cs-btn.p{ background:var(--accent); border-color:var(--accent); color:#fff; } #coach-shell .cs-body{ flex:1; overflow:auto; padding:22px 26px; } /* KPIs */ #coach-shell .cs-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; } #coach-shell .cs-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 16px; position:relative; overflow:hidden; } #coach-shell .cs-kstrip{ position:absolute; left:0; top:0; bottom:0; width:4px; } #coach-shell .cs-kv{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; } #coach-shell .cs-kl{ font-size:11.5px; color:var(--text-muted); font-weight:700; margin-top:5px; } /* Briefing unifié (remplace les 4 KPI) — même composant visuel que le hero mobile */ #coach-shell .cs-brief{ position:relative; border-radius:18px; padding:20px 22px; margin-bottom:20px; overflow:hidden; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong,#0E42C8)); box-shadow:var(--shadow-sm,0 1px 3px rgba(13,23,38,.08)); } #coach-shell .cs-brief::after{ content:""; position:absolute; right:-46px; top:-46px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.12); } #coach-shell .cs-brief-hello{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.92; position:relative; } #coach-shell .cs-brief-date{ font-size:12.5px; opacity:.9; margin-top:2px; position:relative; } #coach-shell .cs-brief-row{ display:flex; align-items:center; gap:20px; margin-top:16px; position:relative; } #coach-shell .cs-ring{ position:relative; width:64px; height:64px; flex:none; } #coach-shell .cs-ring-v{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } #coach-shell .cs-ring-v b{ font-size:15px; font-weight:800; } #coach-shell .cs-ring-v s{ font-size:7.5px; text-decoration:none; opacity:.9; text-transform:uppercase; letter-spacing:.05em; } #coach-shell .cs-brief-big{ flex:1; min-width:0; } #coach-shell .cs-brief-big .n{ font-size:36px; font-weight:800; line-height:1; } #coach-shell .cs-brief-big .l{ font-size:13px; opacity:.92; margin-top:4px; font-weight:600; } #coach-shell .cs-brief-pills{ display:flex; gap:10px; flex:none; } #coach-shell .cs-bpill{ min-width:118px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:11px 14px; } #coach-shell .cs-bpill .n{ font-size:24px; font-weight:800; line-height:1; } #coach-shell .cs-bpill .l{ font-size:10.5px; opacity:.92; margin-top:4px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; } #coach-shell .cs-grid2{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; } #coach-shell .cs-sec{ font-size:14px; font-weight:800; margin:4px 0 12px; } #coach-shell .cs-watch{ display:flex; flex-direction:column; gap:9px; } #coach-shell .cs-wrow{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:12px 14px; cursor:pointer; } #coach-shell .cs-wrow:hover{ border-color:var(--accent); } #coach-shell .cs-av2{ width:40px; height:40px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); flex:none; font-size:13px; } #coach-shell .cs-wn{ flex:1; min-width:0; } #coach-shell .cs-wn b{ font-size:14px; font-weight:800; display:block; } #coach-shell .cs-wal{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; } #coach-shell .cs-chip{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:20px; } #coach-shell .cs-chev{ color:var(--text-subtle); } #coach-shell .cs-empty{ color:var(--text-muted); font-size:13px; padding:14px; text-align:center; } #coach-shell .cs-panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:14px; } #coach-shell .cs-pt{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:11px; display:flex; align-items:center; } #coach-shell .cs-pt-ct{ margin-left:auto; font-weight:800; color:var(--accent); letter-spacing:0; } #coach-shell .cs-subh{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-subtle); margin:12px 0 2px; padding-top:10px; border-top:1px solid var(--surface2); } #coach-shell .cs-act{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--surface2); font-size:12.5px; } #coach-shell .cs-act:last-child{ border-bottom:none; } #coach-shell .cs-ad{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; } #coach-shell .cs-act b{ font-weight:800; } #coach-shell .cs-lec{ font-size:13px; color:var(--text); line-height:1.5; } /* Table Équipe */ #coach-shell .cs-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; } #coach-shell .cs-table thead th{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); font-weight:800; text-align:left; padding:11px 14px; background:var(--surface2); border-bottom:1px solid var(--border); } #coach-shell .cs-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--surface2); font-weight:600; } #coach-shell .cs-table tbody tr:last-child td{ border-bottom:none; } #coach-shell .cs-trow{ cursor:pointer; } #coach-shell .cs-trow:hover{ background:var(--surface2); } #coach-shell .cs-tn{ display:flex; align-items:center; gap:10px; } #coach-shell .cs-tav{ width:32px; height:32px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); font-size:12px; } #coach-shell .cs-tn b{ font-weight:800; } /* Analyses */ #coach-shell .cs-g3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } #coach-shell .cs-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px; } #coach-shell .cs-ct{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:10px; } #coach-shell .cs-big{ font-size:30px; font-weight:800; } #coach-shell .cs-mrow{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; } #coach-shell .cs-mrow b{ font-weight:800; font-variant-numeric:tabular-nums; } #coach-shell .cs-note{ font-size:12px; color:var(--text-muted); background:var(--surface); border:1px dashed var(--border); border-radius:12px; padding:12px 14px; margin-top:16px; } /* Analyses v2 — KPIs enrichis, donut, listes d'action */ #coach-shell .cs-kv small{ font-size:13px; color:var(--text-subtle); font-weight:700; } #coach-shell .cs-ksub{ font-size:11px; color:var(--text-subtle); margin-top:3px; } #coach-shell .cs-an-g2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:start; } #coach-shell .cs-donut{ display:flex; align-items:center; gap:18px; } #coach-shell .cs-dleg{ flex:1; min-width:0; } #coach-shell .cs-dl{ display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:13px; } #coach-shell .cs-dl span{ display:flex; align-items:center; gap:8px; color:var(--text); } #coach-shell .cs-dl i{ width:11px; height:11px; border-radius:50%; flex:none; } #coach-shell .cs-dl b{ font-weight:800; font-variant-numeric:tabular-nums; } #coach-shell .cs-arow{ display:flex; align-items:center; gap:11px; padding:7px 0; } #coach-shell .cs-abn{ width:120px; flex:none; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #coach-shell .cs-abar{ flex:1; height:8px; border-radius:999px; background:var(--surface2); overflow:hidden; } #coach-shell .cs-abar i{ display:block; height:100%; border-radius:999px; } #coach-shell .cs-abv{ width:46px; flex:none; text-align:right; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; } #coach-shell .cs-lrow{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--surface2); } #coach-shell .cs-lrow:first-of-type{ border-top:none; } #coach-shell .cs-lav{ width:34px; height:34px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); font-size:12px; flex:none; } #coach-shell .cs-ln{ flex:1; min-width:0; } #coach-shell .cs-ln b{ font-size:13.5px; font-weight:800; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #coach-shell .cs-ln span{ font-size:11.5px; color:var(--text-muted); } #coach-shell .cs-lchip{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:20px; flex:none; white-space:nowrap; } #coach-shell .cs-lchip.good{ background:rgba(0,168,84,.12); color:var(--good); } #coach-shell .cs-lchip.warn{ background:rgba(232,147,12,.14); color:var(--warn); } #coach-shell .cs-lchip.bad{ background:rgba(229,72,77,.12); color:var(--danger); } } /* Coach desktop : Profil (réglages) et Messages gardent le rail visible → on décale leurs tiroirs/overlays à droite de la barre latérale (248px). */ @media (min-width:992px){ body.coach-active #coach-reglages-drawer, body.coach-active #coach-reglages-overlay, body.coach-active #coach-messagerie-drawer, body.coach-active #coach-messagerie-overlay{ left:248px !important; } /* Profil : la navigation se fait par le rail → la flèche « retour » n'a pas lieu d'être en desktop (et donnait l'impression d'être bloqué dessus). */ body.coach-active #coach-reglages-drawer .crg-back{ display:none !important; } } /* ═══ Fiche athlète coach — nouvelle identité (grille 2 colonnes desktop) ═══ */ /* Mobile intact : .cd-deskonly caché et pas de grille < 992px. */ .cd-deskonly{ display:none; } @media (min-width:992px){ .cd-deskonly{ display:flex; } /* Fiche décalée à droite du rail : occupe toute la largeur restante */ body.coach-active.athlete-selected #main-container{ max-width:none; margin-right:0; width:auto; } /* Évite tout débordement horizontal qui ferait passer le contenu sous le rail. */ body.coach-active.athlete-selected #view-coach-detail{ overflow-x:hidden; overflow-x:clip; } /* Grille principale de l'Aperçu (actif = inline display:block → override !important) */ /* align-items:stretch → les 2 cartes d'une même ligne prennent la même hauteur (pas de « trou » à côté d'une carte plus courte) ; dense → remplit les vides. */ body.coach-active.athlete-selected #cdtab-overview[style*="block"]{ display:grid !important; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; grid-auto-flow:row dense; } body.coach-active.athlete-selected #cdtab-overview > .fjd-hero, body.coach-active.athlete-selected #cdtab-overview > .cd-hub-actions, body.coach-active.athlete-selected #cdtab-overview > #cd-alertes-card, body.coach-active.athlete-selected #cdtab-overview > #cd-etat-group, body.coach-active.athlete-selected #cdtab-overview > #cd-extra-hidden, body.coach-active.athlete-selected #cdtab-overview > div[style*="text-align:right"]{ grid-column:1 / -1; } body.coach-active.athlete-selected #cdtab-overview .v2-sec{ display:none !important; } body.coach-active.athlete-selected #cdtab-overview > .dash-card{ margin:0; } /* Sous-blocs « état » et « extra » : également en grille */ body.coach-active.athlete-selected #cd-etat-group, body.coach-active.athlete-selected #cd-extra-hidden{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; margin-top:0; } body.coach-active.athlete-selected #cd-etat-group > .dash-card, body.coach-active.athlete-selected #cd-extra-hidden > .dash-card{ margin:0; } body.coach-active.athlete-selected #cd-etat-group > #cd-contexte:not(:empty){ grid-column:1 / -1; } /* Carte : identité plus nette (titres en label, coins doux déjà en place) */ body.coach-active.athlete-selected #cdtab-overview .dash-card .dash-label.cd-deskonly{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:11px; align-items:center; gap:7px; } } /* Bloc IA coach (fiche athlète) — visible MOBILE et DESKTOP (dans l'onglet Aperçu). Les styles internes sont au niveau de base (plus dans le @media) pour un rendu correct en mobile ; seul le placement en grille reste réservé au desktop. */ #cd-ia-card{ display:block; background:linear-gradient(135deg,var(--accent-a08),var(--surface)); border:1px solid var(--accent-dim); } #cd-ia-card .cd-ia-msgs{ max-height:260px; overflow:auto; display:flex; flex-direction:column; gap:8px; margin:4px 0 10px; } #cd-ia-card .cd-ia-hint{ font-size:12.5px; color:var(--text-muted); line-height:1.5; } #cd-ia-card .cd-ia-b{ max-width:85%; padding:9px 13px; border-radius:13px; font-size:13px; line-height:1.5; } #cd-ia-card .cd-ia-me{ align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:4px; } #cd-ia-card .cd-ia-ia{ align-self:flex-start; background:var(--surface2); color:var(--text); border:1px solid var(--border); border-bottom-left-radius:4px; white-space:normal; } #cd-ia-card .cd-ia-typing{ letter-spacing:2px; color:var(--text-subtle); } #cd-ia-card .cd-ia-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; } #cd-ia-card .cd-ia-chips button{ border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:20px; padding:6px 12px; font-size:12px; font-weight:800; cursor:pointer; font-family:inherit; } #cd-ia-card .cd-ia-chips button:hover{ border-color:var(--accent); color:var(--accent); } #cd-ia-card .cd-ia-field{ display:flex; gap:8px; align-items:center; } #cd-ia-card .cd-ia-field input{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 13px; font:inherit; font-size:13.5px; color:var(--text); margin:0; } #cd-ia-card .cd-ia-field button{ flex:none; width:42px; height:42px; border:none; border-radius:11px; background:var(--accent); color:#fff; display:grid; place-items:center; cursor:pointer; } @media (min-width:992px){ body.coach-active.athlete-selected #cd-ia-card{ grid-column:1 / -1; } } /* Cartes « Forme » de l'Aperçu coach — desktop uniquement, affichées seulement quand la donnée existe (classe .has-data posée par renderCoachFormeCards). */ .cd-forme-card{ display:none; } @media (min-width:992px){ body.coach-active.athlete-selected .cd-forme-card.has-data{ display:block; } .cd-forme-card .dash-label{ display:flex; align-items:center; } .cd-forme-tag{ margin-left:auto; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple,#7c5cff); background:rgba(124,92,255,.12); border-radius:5px; padding:2px 7px; } .cd-forme-score{ display:flex; align-items:baseline; gap:6px; } .cd-forme-score .big{ font-size:30px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; } .cd-forme-score .u{ font-size:12px; color:var(--text-muted); font-weight:600; } .cd-forme-bar{ height:8px; border-radius:5px; background:var(--surface2); overflow:hidden; margin-top:8px; } .cd-forme-bar i{ display:block; height:100%; border-radius:5px; } .cd-forme-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin-top:14px; } .cd-forme-wq .k{ font-size:11.5px; color:var(--text-muted); font-weight:700; } .cd-forme-wq .v{ font-size:14px; font-weight:800; margin-top:1px; } .cd-forme-dt{ font-size:11px; color:var(--text-subtle); margin-top:12px; } .cd-forme-wrow{ display:flex; align-items:center; justify-content:space-between; font-size:13px; margin-top:6px; } .cd-forme-wrow b{ font-weight:800; font-variant-numeric:tabular-nums; color:var(--text-muted); } } /* Messages coach (desktop) : panneau liste ancré à droite du rail (pas centré). */ @media (min-width:992px){ body.coach-active #coach-messagerie-drawer{ left:248px !important; right:auto !important; margin:0 !important; width:380px; max-width:380px; border-right:1px solid var(--border); box-shadow:2px 0 24px rgba(13,23,38,.08); } } /* Bouton Déconnexion dans le rail coach */ @media (min-width:992px){ #coach-rail .cs-logout{ display:flex; align-items:center; gap:10px; margin-top:8px; padding:10px 11px; border-radius:11px; border:none; background:none; color:#e5737a; font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; width:100%; text-align:left; } #coach-rail .cs-logout svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } #coach-rail .cs-logout:hover{ background:rgba(229,72,77,.14); color:#ff8a90; } } /* ═══ Messagerie coach — 2 volets (desktop) ═══ */ #coach-msg2{ display:none; } @media (min-width:992px){ /* Affiché uniquement via JS (ouvrirMessagerie2) — sinon il recouvrirait tout. */ body.coach-active #coach-msg2{ position:fixed; top:0; left:248px; right:0; bottom:0; z-index:61; background:var(--surface2); } body.coach-active #coach-msg2[style*="flex"]{ display:flex; } #coach-msg2 .msg2-list-pane{ width:340px; flex:none; background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; min-height:0; } #coach-msg2 .msg2-list-hd{ padding:16px 18px; font-family:'Michroma',sans-serif; font-size:15px; border-bottom:1px solid var(--border); flex:none; } #coach-msg2 .msg2-list-host{ flex:1; overflow:auto; padding:10px; min-height:0; } #coach-msg2 .msg2-thread-pane{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; min-height:0; } #coach-msg2 .msg2-head{ display:flex; align-items:center; gap:11px; padding:14px 20px; border-bottom:1px solid var(--border); background:var(--surface); flex:none; } #coach-msg2 .msg2-av{ width:40px; height:40px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); flex:none; } #coach-msg2 .msg2-name{ font-size:15px; font-weight:800; } #coach-msg2 .msg2-thread-host{ flex:1; min-height:0; display:flex; flex-direction:column; } #coach-msg2 #cd-commentaires-card{ flex:1; display:flex; flex-direction:column; height:100%; border:none !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important; background:transparent; } #coach-msg2 #cd-commentaires-liste{ max-height:none !important; flex:1; } #coach-msg2 .msg2-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-subtle); font-weight:700; font-size:14px; } } /* Fiche Aperçu coach allégée (desktop) : on masque le secondaire — il reste accessible via les onglets Progression/Séances. Garde l'essentiel façon maquette : hero, IA, alertes, repères, volume, séances, nutrition, analyse, état de forme. */ @media (min-width:992px){ body.coach-active.athlete-selected #cdtab-overview > #cd-extra-hidden, body.coach-active.athlete-selected #cdtab-overview > #cd-prochaine, body.coach-active.athlete-selected #cdtab-overview > .cd-hub-actions, body.coach-active.athlete-selected #cdtab-overview > div[style*="text-align:right"], body.coach-active.athlete-selected #cdtab-overview > #cd-indicateurs-card, body.coach-active.athlete-selected #cd-etat-group > #cd-etat-sec, body.coach-active.athlete-selected #cd-etat-group > #cd-etat-card{ display:none !important; } /* Hero « État du jour » : sa classe .fjd-hero est vidée au rendu → on le cible par son ID pour qu'il reste pleine largeur (sinon il passe en 1/2 colonne). */ body.coach-active.athlete-selected #cdtab-overview > #cd-hero{ grid-column:1 / -1; } /* Rail droit (sidebar) : repères compacts visibles (dernière séance + régularité) + « Évolution du poids » (la carte Forme Poids de la grille restant masquée, le bloc rail est la SEULE vue du poids côté coach desktop → on le réaffiche, sinon le poids disparaît complètement). */ body.coach-active.athlete-selected #cd-rail .cd-rail-dup{ display:block; } body.coach-active.athlete-selected #cd-rail .cd-rail-weight{ display:block !important; } } /* ═══ APERÇU COACH v3 — 6 cartes égales sous Alertes (surcharge les règles v2) ═══ */ @media (min-width:992px){ /* Pile verticale : hero/IA/alertes, puis la grille des 6 cartes, puis Lecture. */ body.coach-active.athlete-selected #cdtab-overview[style*="block"]{ display:block !important; columns:auto; } body.coach-active.athlete-selected #cdtab-overview > #cd-hero, body.coach-active.athlete-selected #cdtab-overview > #cd-ia-card, body.coach-active.athlete-selected #cdtab-overview > #cd-alertes-card, body.coach-active.athlete-selected #cdtab-overview > #cd-etat-group{ margin:0 0 14px !important; } /* Grille des 6 cartes d'analyse (reparentées dans #cd-ov-grid par _cdV3Grid) : 2 colonnes de largeur égale + rangées de hauteur égale (grid-auto-rows:1fr) → toutes les cartes font exactement la même taille. */ body.coach-active.athlete-selected #cd-ov-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; grid-auto-rows:1fr; margin:0 0 14px; align-items:stretch; } body.coach-active.athlete-selected #cd-ov-grid > .dash-card{ margin:0 !important; height:auto; break-inside:auto; } /* Cartes cliquables (Dernières séances, Volume → onglet détaillé). */ body.coach-active.athlete-selected #cd-ov-grid > #cd-hub-seances, body.coach-active.athlete-selected #cd-ov-grid > #cd-hub-volume{ transition:border-color .15s; } body.coach-active.athlete-selected #cd-ov-grid > #cd-hub-seances:hover, body.coach-active.athlete-selected #cd-ov-grid > #cd-hub-volume:hover{ border-color:var(--accent); } .cd-cardlink{ display:flex; align-items:center; } .cd-cardlink .cd-voir{ margin-left:auto; font-size:10px; font-weight:800; color:var(--accent); text-transform:none; letter-spacing:0; } /* Le groupe « état » ne garde que la Lecture Novalyz (analyse) en pleine largeur. */ body.coach-active.athlete-selected #cd-etat-group{ display:block; grid-template-columns:none; } body.coach-active.athlete-selected #cd-etat-group > #cd-recup-card{ display:none !important; } /* Cartes retirées de l'Aperçu v3 (doublons / déplacées ailleurs). */ body.coach-active.athlete-selected #cdtab-overview > #cd-forme-poids{ display:none !important; } body.coach-active.athlete-selected #cd-rail .cd-aside-montre, body.coach-active.athlete-selected #cd-rail #cd-reperes-card{ display:none !important; } /* Carte « Charge & assiduité » : 4 tuiles + streak. */ #cd-charge-card .cd-k4{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } #cd-charge-card .cd-k{ background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:10px; text-align:center; } #cd-charge-card .cd-kv{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; } #cd-charge-card .cd-kl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); font-weight:800; margin-top:3px; } #cd-charge-card .cd-charge-streak{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-muted); margin-top:11px; } #cd-charge-card .cd-charge-streak b{ font-weight:800; color:var(--warn); } /* Carte « Ma montre » détaillée : 3 lignes (pas/sommeil/FC) + sparkline. */ #cd-montre-card .cd-md-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--surface2); } #cd-montre-card .cd-md-row:first-of-type{ border-top:none; } #cd-montre-card .cd-md-ic{ width:30px; height:30px; border-radius:9px; background:var(--surface2); display:grid; place-items:center; font-size:15px; flex:none; } #cd-montre-card .cd-md-nm{ flex:none; width:92px; } #cd-montre-card .cd-md-nm b{ display:block; font-size:13px; font-weight:800; } #cd-montre-card .cd-md-nm span{ font-size:10px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.03em; font-weight:700; } #cd-montre-card .cd-md-spark{ flex:1; min-width:0; display:flex; justify-content:center; } #cd-montre-card .cd-md-spark svg{ width:100%; max-width:130px; height:30px; } #cd-montre-card .cd-md-v{ flex:none; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; min-width:58px; } #cd-montre-card .cd-md-note{ font-size:10.5px; color:var(--text-subtle); line-height:1.4; margin-top:10px; } } /* ═══ Colonne de droite coach (Aperçu v2) — desktop uniquement ═══ */ .cd-aside{ display:none; } @media (min-width:992px){ body.coach-active.athlete-selected #cd-rail .cd-aside{ display:block; } #cd-rail .cd-aside .dash-label{ margin-bottom:11px; } /* Actions */ #cd-rail .cd-aside-qa{ display:flex; flex-direction:column; gap:8px; } #cd-rail .cd-aside-qa button{ display:flex; align-items:center; gap:9px; border:1px solid var(--border); background:var(--surface); border-radius:11px; padding:11px 13px; font:inherit; font-weight:800; font-size:13px; color:var(--text); text-align:left; cursor:pointer; } #cd-rail .cd-aside-qa button svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; } #cd-rail .cd-aside-qa button:hover{ border-color:var(--accent); } #cd-rail .cd-aside-qa button.p{ background:var(--accent); border-color:var(--accent); color:#fff; } /* Repères */ #cd-rail .cd-rep-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; } #cd-rail .cd-rep-row span{ color:var(--text-muted); } #cd-rail .cd-rep-row b{ font-weight:800; font-variant-numeric:tabular-nums; } #cd-rail .cd-rep-sub{ font-size:11px; color:var(--text-muted); text-align:right; margin-top:1px; } #cd-rail .cd-rep-hr{ height:1px; background:var(--border); margin:10px 0; } /* Ma montre */ #cd-rail .cd-montre-top{ display:flex; align-items:center; gap:8px; margin-bottom:10px; } #cd-rail .cd-montre-top .ic{ width:30px; height:30px; border-radius:9px; background:var(--surface2); display:grid; place-items:center; font-size:15px; flex:none; } #cd-rail .cd-montre-top b{ font-size:13.5px; } #cd-rail .cd-montre-top .per{ margin-left:auto; font-size:10px; color:var(--text-subtle); font-weight:700; } #cd-rail .cd-montre-grid{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--border); border-radius:11px; overflow:hidden; } #cd-rail .cd-montre-cell{ padding:11px 6px; text-align:center; } #cd-rail .cd-montre-cell + .cd-montre-cell{ border-left:1px solid var(--border); } #cd-rail .cd-montre-cell .k{ font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-subtle); font-weight:800; } #cd-rail .cd-montre-cell .v{ font-size:17px; font-weight:800; margin-top:3px; color:var(--text); } #cd-rail .cd-montre-cell .v small{ font-size:11px; color:var(--text-subtle); font-weight:700; } #cd-rail .cd-montre-note{ font-size:10.5px; color:var(--text-subtle); line-height:1.4; margin-top:9px; } /* Contexte / Prochaine reparentés : espacement comme les cartes du rail */ #cd-rail #cd-aside-slots > *{ margin-bottom:12px; } #cd-rail #cd-aside-slots #cd-contexte:empty{ display:none; } } /* Fiche coach : le rail (poids/actions) n'est utile que sur l'Aperçu. Sur les autres onglets, on le masque et le contenu prend toute la largeur (évite la « 3e colonne » sur Progression, Séances, Conversation…). */ @media (min-width:992px){ body.coach-active.athlete-selected #cd-body[data-tab]:not([data-tab="overview"]) #cd-rail{ display:none !important; } body.coach-active.athlete-selected #cd-body[data-tab]:not([data-tab="overview"]) #cd-main{ flex:1 1 100%; } } /* En-tête de l'éditeur Programme : onglets de la fiche (desktop uniquement). */ .pe-tabs{ display:none; } @media (min-width:992px){ body.coach-active #cd-header .cd-back{ display:none !important; } /* fiche : nav par le rail, pas de flèche */ /* Réglages / Conversation / Déco sont déjà dans le rail de gauche → on les masque dans l'en-tête de la fiche sur desktop (sinon doublon, et ça fait « barre athlète »). Sur mobile, ils restent (pas de rail). */ body.coach-active.athlete-selected #cd-header .cd-head-actions{ display:none !important; } body.coach-active #prog-editor-overlay .pe-back{ display:none !important; } /* Programme : nav par les onglets, pas de flèche */ body.coach-active #prog-editor-overlay .pe-tabs{ display:flex; gap:4px; margin-left:18px; } body.coach-active #prog-editor-overlay .pe-tabs button{ border:none; background:none; font:inherit; font-weight:800; font-size:13px; color:var(--text-muted); padding:8px 13px; border-radius:9px; cursor:pointer; border-bottom:2.5px solid transparent; } body.coach-active #prog-editor-overlay .pe-tabs button:hover{ color:var(--text); } body.coach-active #prog-editor-overlay .pe-tabs button.on{ color:var(--accent); border-bottom-color:var(--accent); } } /* Éditeur de programme (Builder) côté coach : décalé à droite du rail (overlay). */ @media (min-width:992px){ body.coach-active #prog-editor-overlay{ left:248px !important; } /* INLINE : le Builder se place DANS l'onglet Programme, comme les autres onglets (plus de page plein écran). On masque l'en-tête (les sous-onglets de la fiche sont au-dessus) et on borne la hauteur pour que les 3 volets scrollent à l'intérieur. */ body.coach-active #cdtab-programme.prog-has-inline > *:not(#prog-editor-overlay){ display:none !important; } body.coach-active #prog-editor-overlay.prog-inline{ position:static !important; inset:auto !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; z-index:auto !important; width:auto !important; max-width:none !important; border:1px solid var(--border); border-radius:16px; overflow:visible; background:var(--surface); height:auto; min-height:0; margin-top:4px; } body.coach-active #prog-editor-overlay.prog-inline > header{ display:none !important; } /* Scroll de PAGE (plus de scroll interne par colonne). Les 3 volets poussent la hauteur ; l'agenda vit dans la colonne de droite (.pb-insp). */ body.coach-active #prog-editor-overlay.prog-inline .prog-editor-scroll:has(.pb-builder){ overflow:visible !important; } body.coach-active #prog-editor-overlay.prog-inline .pb-builder{ align-items:start; } body.coach-active #prog-editor-overlay.prog-inline .pb-rail, body.coach-active #prog-editor-overlay.prog-inline .pb-canvas, body.coach-active #prog-editor-overlay.prog-inline .pb-insp{ overflow:visible !important; min-height:0; height:auto; } } /* ============================================================ * TABLETTE / PETIT ÉCRAN (992-1279 px) — option A validée le 28/10/2026 : * le CONTENU CENTRAL doit être la colonne la plus large. Menu latéral réduit * (248 → 200 px, libellés conservés) + rail droit réduit (340/360 → 290 px) * + marges intérieures plus serrées. ≥ 1280 px : inchangé. Espace coach : inchangé. * ============================================================ */ @media (min-width:992px) and (max-width:1279px){ body.has-bottom-nav #app-side{ width:200px; padding:20px 12px; } body.has-bottom-nav #main-container{ margin-left:200px; padding:22px 22px 40px; } body.has-bottom-nav #tab-objectif.tab-content, body.has-bottom-nav #tab-conseils.tab-content, body.has-bottom-nav #tab-blessures.tab-content, body.has-bottom-nav #tab-nutrition.tab-content, body.has-bottom-nav #tab-suivi.tab-content, body.has-bottom-nav #tab-morpho.tab-content{ left:200px; } body.has-bottom-nav .hx-overlay{ left:200px !important; } body.has-bottom-nav #tab-accueil .tj{ grid-template-columns:minmax(0,1fr) 290px !important; } body.has-bottom-nav #tab-seance .en-cols, body.has-bottom-nav #tab-historique .ma-cols2, body.has-bottom-nav #tab-etat .et-wrap{ grid-template-columns:minmax(0,1fr) 290px !important; } } /* ===== Nouveau logo (28/10) ===== */ /* Connexion : « N[icône]VALYZ » + ANALYZE · PLAN · PERFORM. Les parties sombres suivent la couleur du texte (currentColor) → lisibles si un thème sombre arrive. */ .nv-login-hero .nv-hero-logo { display:block; color:var(--text); } .nv-brand-logo { display:block; width:260px; max-width:78%; height:auto; margin:0 auto; } /* Écran de connexion : le logo EST l'en-tête → le bandeau (vide à ce stade : titre « Novalyz » + boutons masqués) est retiré pour ne pas laisser une barre blanche. */ body:has(#view-login.active) #app-header { display:none; } /* Colonne de gauche (ordi / tablette) : icône + mot NOVALYZ */ .as-brand { color:var(--text); } .as-brand .as-ic { width:32px; height:35px; flex:none; } .as-brand .as-wm { height:15px; width:auto; max-width:140px; } /* Bandeau retiré à la connexion → le logo garde la marge de la barre d'état (Android / iPhone). */ body:has(#view-login.active) .nv-login-hero { padding-top:calc(34px + env(safe-area-inset-top, 0px)); } /* ===== Identité visuelle (28/10) : dégradé blanc → bleu + grands hexagones ===== */ /* Maquette validée : mockups/novalyz-login-degrade.html. Même dégradé et mêmes hexagones (trait 5 px, sans chevauchement) au login, dans la colonne de gauche (ordi / tablette) et en fond d'écran (mobile). */ :root { --nv-grad:linear-gradient(180deg,#ffffff 0%,#ffffff 34%,#eaf0ff 52%,#7aa3ff 74%,#1A5FFF 100%); } .nv-hex { position:absolute; left:0; bottom:0; width:100%; height:58%; opacity:.36; pointer-events:none; } /* Fond d'écran : calque fixe derrière le contenu (z-index:-1 → sous les cartes, sans créer de contexte d'empilement qui gênerait les modales). */ #nv-bg { display:none; position:fixed; inset:0; z-index:-1; background:var(--nv-grad); pointer-events:none; } body:has(#view-login.active) #nv-bg { display:block; } @media (max-width:991.98px) { body.has-bottom-nav #nv-bg { display:block; } } /* Colonne de gauche (ordi / tablette) */ @media (min-width:992px) { body.has-bottom-nav #app-side { background:var(--nv-grad); overflow-x:hidden; } #app-side > * { position:relative; z-index:1; } #app-side > .nv-hex { position:absolute; z-index:0; height:55%; } #app-side .as-foot { border-top-color:rgba(255,255,255,.35); } #app-side .as-foot .as-item { color:#fff; } #app-side .as-foot .as-item:hover { background:rgba(255,255,255,.14); color:#fff; } } /* ---- Connexion ---- */ #view-login .nv-login-hex { display:none; } .nv-hero-logo { color:#070B14; } .nv-hero-logo .nvl-ic { display:block; width:84px; height:92px; margin:0 auto 10px; color:#070B14; } .nv-hero-logo .nv-brand-logo { width:210px; max-width:70%; color:#070B14; } .nv-login-hero { padding-bottom:30px; } /* Le formulaire devient une carte claire posée sur le dégradé */ .nv-login-body { position:relative; background:rgba(255,255,255,.92); border:1px solid rgba(255,255,255,.7); border-radius:22px; padding:14px; margin:0 2px 32px; box-shadow:0 22px 50px rgba(10,40,120,.25); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .nv-login-body .card { background:transparent; border:none; box-shadow:none; padding:0; margin-bottom:0; } .nv-login-body .btn-accent { background:linear-gradient(135deg,#1a5fff,#0a46d6); box-shadow:0 10px 26px rgba(26,95,255,.35); } .nv-role.on { background:#fff; box-shadow:0 4px 14px rgba(26,95,255,.15); } /* Ordi / tablette (31/10) : login PLEIN ÉCRAN comme la maquette validée — dégradé et nid d'abeille sur tout l'écran, logo + nom puis la carte de connexion au centre (plus de panneau en 2 colonnes). */ @media (min-width:900px) { body:has(#view-login.active) #nv-bg { display:block; } body:has(#view-login.active) #main-container { max-width:none; width:100%; padding:0; margin:0; } #view-login.active { display:flex; flex-direction:column; align-items:center; justify-content:center; max-width:none; min-height:100vh; padding:6vh 24px; box-sizing:border-box; } #view-login .nv-login-hero { background:none; padding:0 0 22px !important; } #view-login .nv-login-hex { display:none; } .nv-hero-logo { position:relative; } .nv-hero-logo .nvl-ic { width:110px; height:120px; margin-bottom:14px; } .nv-hero-logo .nv-brand-logo { width:280px; } #view-login .nv-login-body { width:100%; max-width:420px; margin:0 auto; } } /* ---- Login : nid d'abeille où des sports apparaissent puis s'effacent (validé 31/10) ---- Couleurs d'origine : dégradé blanc → bleu inchangé. Traits bleus sur la partie claire, blancs sur la partie bleue ; apparitions éparses, lentes, semi-transparentes. */ #nv-comb { position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; } /* Connexion (31/10) : fond BLEU ANIMÉ sur toute la page (maquette validée), nid d'abeille en traits blancs, logo Novalyz en blanc / bleu clair pour rester lisible sur le bleu. */ body:has(#view-login.active) { background:#0b2a8a; } body:has(#view-login.active) #nv-bg { display:none !important; } #view-login .nv-login-hex { display:none !important; } #nv-aurora { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#0b2a8a; } #nv-aurora i { position:absolute; width:70vmax; height:70vmax; border-radius:50%; filter:blur(70px); opacity:.75; mix-blend-mode:screen; } #nv-aurora .a1 { background:#1A5FFF; left:-20vmax; top:-20vmax; animation:nva1 12s ease-in-out infinite; } #nv-aurora .a2 { background:#22d3ee; right:-25vmax; top:10vmax; animation:nva2 15s ease-in-out infinite; } #nv-aurora .a3 { background:#7c3aed; left:10vmax; bottom:-30vmax; animation:nva3 17s ease-in-out infinite; } #nv-aurora .a4 { background:#ffffff; right:10vmax; top:-30vmax; opacity:.3; animation:nva2 19s ease-in-out infinite reverse; } /* Les couleurs suivent la souris / le doigt (31/10) : halos décalés en parallaxe + une lueur sous le pointeur. « translate » s'ajoute au « transform » de l'animation sans l'écraser. */ #nv-aurora i { transition:translate 1.4s cubic-bezier(.2,.7,.2,1); } #nv-aurora .a1 { translate:calc(var(--px,0) * 9vmax) calc(var(--py,0) * 9vmax); } #nv-aurora .a2 { translate:calc(var(--px,0) * -7vmax) calc(var(--py,0) * 6vmax); } #nv-aurora .a3 { translate:calc(var(--px,0) * 6vmax) calc(var(--py,0) * -8vmax); } #nv-aurora .a4 { translate:calc(var(--px,0) * -5vmax) calc(var(--py,0) * -5vmax); } #nv-aurora .a5 { width:18vmax; height:18vmax; left:0; top:0; background:#5ab0ff; opacity:0; filter:blur(40px); translate:calc(var(--mx,50vw) - 9vmax) calc(var(--my,50vh) - 9vmax); transition:translate .9s cubic-bezier(.2,.7,.2,1), opacity 1.2s ease; } #nv-aurora.suit .a5 { opacity:.4; } @keyframes nva1 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(18vmax,14vmax); } } @keyframes nva2 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(-16vmax,12vmax); } } @keyframes nva3 { 0%,100% { transform:translate(0,0); } 50% { transform:translate(12vmax,-18vmax); } } /* Logo d'origine (noir + bleu #1A5FFF) posé dans le bloc blanc du formulaire, pour qu'il ressorte (31/10). */ #view-login .nv-login-body > .nv-hero-logo { text-align:center; margin:4px 0 18px; } #view-login .nv-login-body > .nv-hero-logo .nvl-ic { width:64px; height:70px; margin:0 auto 8px; } #view-login .nv-login-body > .nv-hero-logo .nv-brand-logo { width:200px; max-width:80%; } @media (prefers-reduced-motion:reduce) { #nv-aurora i { animation:none; } } /* Mobile (01/11, retour « les couleurs clignotent ») : un flou de 70 px + mode de fusion sur des halos de 70 vmax animés en continu fait clignoter le rendu GPU des téléphones Android. Même aspect avec des dégradés radiaux (aucun filtre, aucune fusion), calques promus pour le GPU. */ @media (pointer:coarse), (max-width:700px) { #nv-aurora i { filter:none; mix-blend-mode:normal; will-change:transform; backface-visibility:hidden; transform:translateZ(0); } #nv-aurora .a1 { background:radial-gradient(circle, rgba(26,95,255,.95) 0%, rgba(26,95,255,0) 68%); } #nv-aurora .a2 { background:radial-gradient(circle, rgba(34,211,238,.70) 0%, rgba(34,211,238,0) 68%); } #nv-aurora .a3 { background:radial-gradient(circle, rgba(124,58,237,.75) 0%, rgba(124,58,237,0) 68%); } #nv-aurora .a4 { background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 68%); } #nv-aurora .a5 { filter:none; background:radial-gradient(circle, rgba(90,176,255,.9) 0%, rgba(90,176,255,0) 70%); } } /* Dans l'app : le dégradé reste, avec un nid d'abeille discret à la place des grands hexagones. */ #nv-bg .nv-hex, #app-side > .nv-hex { display:none; } #nv-bg, body.has-bottom-nav #app-side { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%231A5FFF' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"), var(--nv-grad); background-size:56px 97px, 100% 100%; } @media (min-width:992px) { #app-side { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%231A5FFF' stroke-opacity='.10' stroke-width='1.2'/%3E%3C/svg%3E"), var(--nv-grad); background-size:56px 97px, 100% 100%; } } .nv-login-hero > .nv-hero-logo, .nv-login-body { position:relative; z-index:1; } #nv-comb .c .h { fill:none; stroke-width:1.1; transition:stroke-opacity 1.8s ease, fill-opacity 1.8s ease; stroke-opacity:.1; fill-opacity:0; } #nv-comb .c use { opacity:0; stroke-dasharray:1; stroke-dashoffset:1; transition:opacity 1.8s ease, stroke-dashoffset 2.8s ease; } #nv-comb .c.on .h { stroke-opacity:.3; fill-opacity:.04; } #nv-comb .c.on use { opacity:.5; stroke-dashoffset:0; } #nv-comb .c.b { color:#1A5FFF; } #nv-comb .c.b.on use { opacity:.38; } #nv-comb .c.w { color:#ffffff; } #nv-comb .c .h { stroke:currentColor; fill:currentColor; } @media (prefers-reduced-motion:reduce) { #nv-comb .c .h, #nv-comb .c use { transition:none; } } /* ---- Écran de démarrage ---- */ #nv-splash { position:fixed; inset:0; z-index:10000; background:var(--nv-grad); display:flex; align-items:center; justify-content:center; transition:opacity .35s ease, visibility .35s; } #nv-splash.off { opacity:0; visibility:hidden; pointer-events:none; } #nv-splash .nv-splash-in { position:relative; text-align:center; margin-top:-12vh; } #nv-splash .nvl-ic { display:block; width:96px; height:105px; margin:0 auto 14px; color:#070B14; } #nv-splash .nv-brand-logo { width:220px; color:#070B14; } /* Démarrage (31/10) : même fond que la connexion — bleu + halos + nid d'abeille blanc, logo en blanc / bleu clair. */ #nv-splash { background-color:#0b2a8a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E"), radial-gradient(60vmax 60vmax at 10% 5%, rgba(26,95,255,.85), transparent 70%), radial-gradient(55vmax 55vmax at 95% 35%, rgba(34,211,238,.55), transparent 70%), radial-gradient(60vmax 60vmax at 35% 105%, rgba(124,58,237,.55), transparent 70%); background-size:56px 97px, 100% 100%, 100% 100%, 100% 100%; } #nv-splash > .nv-hex { display:none; } #nv-splash .nv-splash-in { background:rgba(255,255,255,.94); border-radius:22px; padding:26px 30px 20px; box-shadow:0 18px 50px rgba(5,20,80,.35); } /* ---- Loader : petit logo animé devant « Chargement… » ---- */ .loader .nvl-ic { display:block; width:34px; height:37px; margin:0 auto 8px; color:var(--text); } /* ---- Logo animé : A2 (barres puis points puis traits) / B2 (courbe puis barres), tiré au hasard. L'hexagone reste fixe. ---- */ .nvl-ic { overflow:visible; } .nvl-ic .nvl-b, .nvl-ic .nvl-d { transform-box:fill-box; } .nvl-ic .nvl-b { transform-origin:50% 100%; } .nvl-ic .nvl-d { transform-origin:50% 50%; } .nvl-ic .nvl-l { stroke-dasharray:70; stroke-dashoffset:70; } .nvl-ic.nvl-X .nvl-l { stroke-dashoffset:0; } .nvl-A2 .nvl-b,.nvl-A2 .nvl-d,.nvl-A2 .nvl-l{animation-duration:4s;animation-iteration-count:infinite;animation-fill-mode:both} .nvl-A2 .nvl-b1{animation-name:nvl-a2b1}.nvl-A2 .nvl-b2{animation-name:nvl-a2b2}.nvl-A2 .nvl-b3{animation-name:nvl-a2b3}.nvl-A2 .nvl-b4{animation-name:nvl-a2b4} .nvl-A2 .nvl-d1{animation-name:nvl-a2d1}.nvl-A2 .nvl-d2{animation-name:nvl-a2d2}.nvl-A2 .nvl-d3{animation-name:nvl-a2d3}.nvl-A2 .nvl-d4{animation-name:nvl-a2d4} .nvl-A2 .nvl-l1{animation-name:nvl-a2l1}.nvl-A2 .nvl-l2{animation-name:nvl-a2l2}.nvl-A2 .nvl-l3{animation-name:nvl-a2l3} @keyframes nvl-a2b1{0%,2%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}14%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-a2b2{0%,20%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}29%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-a2b3{0%,33%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}40%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-a2b4{0%,43%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}49%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-a2d1{0%,12%{transform:translateY(-70px) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}17%{transform:translateY(0) scale(1.25,.75);opacity:1;animation-timing-function:ease-out}20%{transform:translateY(-14px) scale(.95,1.05);animation-timing-function:ease-in}23%,86%{transform:none;opacity:1}96%,100%{transform:scale(0);opacity:0}} @keyframes nvl-a2d2{0%,27%{transform:translateY(-70px) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}32%{transform:translateY(0) scale(1.25,.75);opacity:1;animation-timing-function:ease-out}35%{transform:translateY(-14px) scale(.95,1.05);animation-timing-function:ease-in}38%,86%{transform:none;opacity:1}96%,100%{transform:scale(0);opacity:0}} @keyframes nvl-a2d3{0%,38%{transform:translateY(-70px) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}43%{transform:translateY(0) scale(1.25,.75);opacity:1;animation-timing-function:ease-out}46%{transform:translateY(-14px) scale(.95,1.05);animation-timing-function:ease-in}49%,86%{transform:none;opacity:1}96%,100%{transform:scale(0);opacity:0}} @keyframes nvl-a2d4{0%,48%{transform:translateY(-70px) scale(.6);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}53%{transform:translateY(0) scale(1.25,.75);opacity:1;animation-timing-function:ease-out}56%{transform:translateY(-14px);animation-timing-function:ease-in}59%{transform:none}74%{transform:scale(1)}78%{transform:scale(1.7)}82%,86%{transform:scale(1)}96%,100%{transform:scale(0);opacity:0}} @keyframes nvl-a2l1{0%,60%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}65%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} @keyframes nvl-a2l2{0%,65%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}69%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} @keyframes nvl-a2l3{0%,69%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}74%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} .nvl-B2 .nvl-b,.nvl-B2 .nvl-d,.nvl-B2 .nvl-l{animation-duration:4s;animation-iteration-count:infinite;animation-fill-mode:both} .nvl-B2 .nvl-l1{animation-name:nvl-b2l1}.nvl-B2 .nvl-l2{animation-name:nvl-b2l2}.nvl-B2 .nvl-l3{animation-name:nvl-b2l3} .nvl-B2 .nvl-d1{animation-name:nvl-b2d1}.nvl-B2 .nvl-d2{animation-name:nvl-b2d2}.nvl-B2 .nvl-d3{animation-name:nvl-b2d3}.nvl-B2 .nvl-d4{animation-name:nvl-b2d4} .nvl-B2 .nvl-b1{animation-name:nvl-b2b1}.nvl-B2 .nvl-b2{animation-name:nvl-b2b2}.nvl-B2 .nvl-b3{animation-name:nvl-b2b3}.nvl-B2 .nvl-b4{animation-name:nvl-b2b4} @keyframes nvl-b2d1{0%,4%{transform:scale(0)}7%{transform:scale(1.8)}10%,86%{transform:scale(1)}96%,100%{transform:scale(0)}} @keyframes nvl-b2l1{0%,8%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}20%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} @keyframes nvl-b2d2{0%,19%{transform:scale(0)}22%{transform:scale(1.8)}25%,86%{transform:scale(1)}96%,100%{transform:scale(0)}} @keyframes nvl-b2l2{0%,22%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}29%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} @keyframes nvl-b2d3{0%,28%{transform:scale(0)}31%{transform:scale(1.8)}34%,86%{transform:scale(1)}96%,100%{transform:scale(0)}} @keyframes nvl-b2l3{0%,31%{stroke-dashoffset:70;animation-timing-function:cubic-bezier(.7,0,.3,1)}36%,86%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:70}} @keyframes nvl-b2d4{0%,35%{transform:scale(0)}38%{transform:scale(1.8)}41%,86%{transform:scale(1)}96%,100%{transform:scale(0)}} @keyframes nvl-b2b1{0%,44%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}54%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-b2b2{0%,48%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}57%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-b2b3{0%,52%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}60%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @keyframes nvl-b2b4{0%,56%{transform:scaleY(0);animation-timing-function:cubic-bezier(.34,1.56,.64,1)}63%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.5,0,.75,0)}96%,100%{transform:scaleY(0)}} @media (prefers-reduced-motion:reduce) { .nvl-ic .nvl-b, .nvl-ic .nvl-d, .nvl-ic .nvl-l { animation:none !important; transform:none !important; opacity:1 !important; stroke-dashoffset:0 !important; } } /* Fond d'écran mobile (retours 29/10) : les conteneurs d'écran ne doivent pas repeindre un fond uni par-dessus le dégradé, et les textes posés directement sur le fond (titres de section, aides) reçoivent une étiquette claire pour rester lisibles quand ils défilent sur la partie bleue. */ @media (max-width:991.98px) { body.has-bottom-nav .dash, body.has-bottom-nav #tab-conseils { background:transparent; } body.has-bottom-nav :is(#tab-accueil .tj-sep, #tab-seance .en-sec, #tab-historique .ma-sec, #tab-etat .et-sec, .nv-loose) { background:rgba(255,255,255,.9); border-radius:10px; padding:5px 10px; box-shadow:0 1px 3px rgba(13,20,36,.06); } body.has-bottom-nav #tab-accueil .tj-sep::after { display:none; } body.has-bottom-nav #tab-seance .en-add { background:rgba(255,255,255,.92); } body.has-bottom-nav #tab-conseils .cv-chip { background:rgba(255,255,255,.94); } body.has-bottom-nav #tab-seance h2.st { display:inline-flex; background:rgba(255,255,255,.9); border-radius:10px; padding:4px 10px; } /* Retours 31/10 : légendes grises, sélecteur de période (« Période », mois en cours) et onglets de métrique posés sur le bleu → étiquettes / cartes blanches. */ body.has-bottom-nav #tab-historique .ma-cap { background:rgba(255,255,255,.94); border-radius:10px; padding:8px 11px !important; margin:6px 0 2px; box-shadow:0 1px 3px rgba(13,20,36,.06); } body.has-bottom-nav #tab-historique .ma-period-wrap { background:rgba(255,255,255,.94); border-radius:14px; padding:10px 10px 8px; box-shadow:0 1px 3px rgba(13,20,36,.06); } } /* ===== Identité coach — variante A validée 05/11 (mockups/coach-identite.html) ===== */ /* Même famille que l'athlète (dégradé clair + nid d'abeille), en VIOLET coach. */ :root { --nv-grad-coach:linear-gradient(180deg,#ffffff 0%,#ffffff 30%,#efeaff 50%,#a48bff 74%,#6a3df0 100%); --nv-hex-coach:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%237C5CFF' stroke-opacity='.13' stroke-width='1.2'/%3E%3C/svg%3E"); } @media (min-width:992px){ body.coach-active #coach-rail{ background:#fff; } body.coach-active #coach-rail .cs-side{ background-image:var(--nv-hex-coach), var(--nv-grad-coach); background-size:56px 97px, 100% 100%; color:#0E1A33; } #coach-rail .cs-brand b{ color:#0E1A33; } #coach-rail .cs-brand span{ color:#6a5bb0; } #coach-rail .cs-item{ color:#24304a; } #coach-rail .cs-item:hover{ background:rgba(124,92,255,.12); } #coach-rail .cs-item.on{ background:linear-gradient(135deg,var(--accent),#7C5CFF); color:#fff; box-shadow:0 6px 16px rgba(90,60,230,.28); } #coach-rail .cs-me{ border-top-color:rgba(255,255,255,.4); } #coach-rail .cs-me b{ color:#fff; } #coach-rail .cs-me span{ color:rgba(255,255,255,.85); } #coach-rail .cs-av{ background:rgba(255,255,255,.22); color:#fff; } #coach-rail .cs-logout{ color:#fff; } #coach-rail .cs-logout:hover{ background:rgba(255,255,255,.16); color:#fff; } } /* Mobile : fond d'écran coach (dégradé violet + nid d'abeille), comme le fond athlète en bleu. */ @media (max-width:991.98px){ body.coach-active{ background-color:#fff; background-image:var(--nv-hex-coach), var(--nv-grad-coach); background-size:56px 97px, 100% 100%; background-attachment:fixed; } } /* ===== Page de chargement (05/11) : logo animé en plein écran pendant les chargements longs ===== */ #nv-loadpage { position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; background-color:#2a1d66; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E"), radial-gradient(60vmax 60vmax at 10% 5%, rgba(26,95,255,.85), transparent 70%), radial-gradient(55vmax 55vmax at 95% 35%, rgba(124,92,255,.7), transparent 70%), radial-gradient(60vmax 60vmax at 35% 105%, rgba(106,61,240,.75), transparent 70%); background-size:56px 97px, 100% 100%, 100% 100%, 100% 100%; transition:opacity .3s ease, visibility .3s; } #nv-loadpage.off { opacity:0; visibility:hidden; pointer-events:none; } #nv-loadpage .nv-lp-in { text-align:center; background:rgba(255,255,255,.94); border-radius:22px; padding:24px 30px 18px; box-shadow:0 18px 50px rgba(30,10,90,.35); margin-top:-8vh; } #nv-loadpage .nvl-ic { display:block; width:84px; height:92px; margin:0 auto 12px; color:#070B14; } #nv-loadpage .nv-lp-t { font-size:13px; font-weight:700; color:#55627E; } /* Rail coach : logo Novalyz identique à l'espace athlète */ #coach-rail .cs-brand .as-ic{ width:32px; height:35px; flex:none; color:#0E1A33; } #coach-rail .cs-brand .cs-bw{ display:flex; flex-direction:column; gap:5px; min-width:0; } #coach-rail .cs-brand .as-wm{ height:15px; width:auto; max-width:140px; color:#0E1A33; display:block; } /* 05/11 — Page de chargement = même visuel que l'écran de démarrage (un seul écran de chargement) */ #nv-loadpage { background-color:#0b2a8a; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16zM28 64v33' fill='none' stroke='%23ffffff' stroke-opacity='.14' stroke-width='1.2'/%3E%3C/svg%3E"), radial-gradient(60vmax 60vmax at 10% 5%, rgba(26,95,255,.85), transparent 70%), radial-gradient(55vmax 55vmax at 95% 35%, rgba(34,211,238,.55), transparent 70%), radial-gradient(60vmax 60vmax at 35% 105%, rgba(124,58,237,.55), transparent 70%); background-size:56px 97px, 100% 100%, 100% 100%, 100% 100%; } #nv-loadpage .nv-lp-in { background:rgba(255,255,255,.94); border-radius:22px; padding:26px 30px 20px; box-shadow:0 18px 50px rgba(5,20,80,.35); margin-top:-12vh; } #nv-loadpage .nv-lp-in .nvl-ic { width:96px; height:105px; margin:0 auto 14px; } #nv-loadpage .nv-lp-in .nv-brand-logo { width:220px; color:#070B14; display:block; margin:0 auto; } #nv-loadpage .nv-lp-t { margin-top:12px; } /* ===== 06/11 — Coach mobile = même rendu que l'ordi (lot 1-2, maquette coach-mobile-refonte) ===== Les blocs de l'accueil mobile utilisent les mêmes fonctions que l'ordi (_coachDeskAujourdhui…) ; ces styles sont ceux de l'ordi (#coach-shell) recopiés pour .cs-mob, en une colonne. */ @media (max-width:991.98px){ /* KPIs */ .cs-mob .cs-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; } .cs-mob .cs-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 16px; position:relative; overflow:hidden; } .cs-mob .cs-kstrip{ position:absolute; left:0; top:0; bottom:0; width:4px; } .cs-mob .cs-kv{ font-size:28px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; } .cs-mob .cs-kl{ font-size:11.5px; color:var(--text-muted); font-weight:700; margin-top:5px; } /* Briefing unifié (remplace les 4 KPI) — même composant visuel que le hero mobile */ .cs-mob .cs-brief{ position:relative; border-radius:18px; padding:20px 22px; margin-bottom:20px; overflow:hidden; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-strong,#0E42C8)); box-shadow:var(--shadow-sm,0 1px 3px rgba(13,23,38,.08)); } .cs-mob .cs-brief::after{ content:""; position:absolute; right:-46px; top:-46px; width:170px; height:170px; border-radius:50%; background:rgba(255,255,255,.12); } .cs-mob .cs-brief-hello{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; opacity:.92; position:relative; } .cs-mob .cs-brief-date{ font-size:12.5px; opacity:.9; margin-top:2px; position:relative; } .cs-mob .cs-brief-row{ display:flex; align-items:center; gap:20px; margin-top:16px; position:relative; } .cs-mob .cs-ring{ position:relative; width:64px; height:64px; flex:none; } .cs-mob .cs-ring-v{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } .cs-mob .cs-ring-v b{ font-size:15px; font-weight:800; } .cs-mob .cs-ring-v s{ font-size:7.5px; text-decoration:none; opacity:.9; text-transform:uppercase; letter-spacing:.05em; } .cs-mob .cs-brief-big{ flex:1; min-width:0; } .cs-mob .cs-brief-big .n{ font-size:36px; font-weight:800; line-height:1; } .cs-mob .cs-brief-big .l{ font-size:13px; opacity:.92; margin-top:4px; font-weight:600; } .cs-mob .cs-brief-pills{ display:flex; gap:10px; flex:none; } .cs-mob .cs-bpill{ min-width:118px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:13px; padding:11px 14px; } .cs-mob .cs-bpill .n{ font-size:24px; font-weight:800; line-height:1; } .cs-mob .cs-bpill .l{ font-size:10.5px; opacity:.92; margin-top:4px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; } .cs-mob .cs-grid2{ display:grid; grid-template-columns:1.5fr 1fr; gap:18px; align-items:start; } .cs-mob .cs-sec{ font-size:14px; font-weight:800; margin:4px 0 12px; } .cs-mob .cs-watch{ display:flex; flex-direction:column; gap:9px; } .cs-mob .cs-wrow{ display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:12px 14px; cursor:pointer; } .cs-mob .cs-wrow:hover{ border-color:var(--accent); } .cs-mob .cs-av2{ width:40px; height:40px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); flex:none; font-size:13px; } .cs-mob .cs-wn{ flex:1; min-width:0; } .cs-mob .cs-wn b{ font-size:14px; font-weight:800; display:block; } .cs-mob .cs-wal{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; } .cs-mob .cs-chip{ font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:20px; } .cs-mob .cs-chev{ color:var(--text-subtle); } .cs-mob .cs-empty{ color:var(--text-muted); font-size:13px; padding:14px; text-align:center; } .cs-mob .cs-panel{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:14px; } .cs-mob .cs-pt{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:11px; display:flex; align-items:center; } .cs-mob .cs-pt-ct{ margin-left:auto; font-weight:800; color:var(--accent); letter-spacing:0; } .cs-mob .cs-subh{ font-size:9.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-subtle); margin:12px 0 2px; padding-top:10px; border-top:1px solid var(--surface2); } .cs-mob .cs-act{ display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--surface2); font-size:12.5px; } .cs-mob .cs-act:last-child{ border-bottom:none; } .cs-mob .cs-ad{ width:8px; height:8px; border-radius:50%; margin-top:5px; flex:none; } .cs-mob .cs-act b{ font-weight:800; } .cs-mob .cs-lec{ font-size:13px; color:var(--text); line-height:1.5; } /* Table Équipe */ .cs-mob .cs-table{ width:100%; border-collapse:collapse; font-size:13px; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; } .cs-mob .cs-table thead th{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); font-weight:800; text-align:left; padding:11px 14px; background:var(--surface2); border-bottom:1px solid var(--border); } .cs-mob .cs-table tbody td{ padding:12px 14px; border-bottom:1px solid var(--surface2); font-weight:600; } .cs-mob .cs-table tbody tr:last-child td{ border-bottom:none; } .cs-mob .cs-trow{ cursor:pointer; } .cs-mob .cs-trow:hover{ background:var(--surface2); } .cs-mob .cs-tn{ display:flex; align-items:center; gap:10px; } .cs-mob .cs-tav{ width:32px; height:32px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); font-size:12px; } .cs-mob .cs-tn b{ font-weight:800; } /* Analyses */ .cs-mob .cs-g3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; } .cs-mob .cs-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px; } .cs-mob .cs-ct{ font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--text-subtle); margin-bottom:10px; } .cs-mob .cs-big{ font-size:30px; font-weight:800; } .cs-mob .cs-mrow{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; font-size:13px; } .cs-mob .cs-mrow b{ font-weight:800; font-variant-numeric:tabular-nums; } .cs-mob .cs-note{ font-size:12px; color:var(--text-muted); background:var(--surface); border:1px dashed var(--border); border-radius:12px; padding:12px 14px; margin-top:16px; } /* Analyses v2 — KPIs enrichis, donut, listes d'action */ .cs-mob .cs-kv small{ font-size:13px; color:var(--text-subtle); font-weight:700; } .cs-mob .cs-ksub{ font-size:11px; color:var(--text-subtle); margin-top:3px; } .cs-mob .cs-an-g2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; align-items:start; } .cs-mob .cs-donut{ display:flex; align-items:center; gap:18px; } .cs-mob .cs-dleg{ flex:1; min-width:0; } .cs-mob .cs-dl{ display:flex; align-items:center; justify-content:space-between; padding:5px 0; font-size:13px; } .cs-mob .cs-dl span{ display:flex; align-items:center; gap:8px; color:var(--text); } .cs-mob .cs-dl i{ width:11px; height:11px; border-radius:50%; flex:none; } .cs-mob .cs-dl b{ font-weight:800; font-variant-numeric:tabular-nums; } .cs-mob .cs-arow{ display:flex; align-items:center; gap:11px; padding:7px 0; } .cs-mob .cs-abn{ width:120px; flex:none; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cs-mob .cs-abar{ flex:1; height:8px; border-radius:999px; background:var(--surface2); overflow:hidden; } .cs-mob .cs-abar i{ display:block; height:100%; border-radius:999px; } .cs-mob .cs-abv{ width:46px; flex:none; text-align:right; font-size:12.5px; font-weight:800; font-variant-numeric:tabular-nums; } .cs-mob .cs-lrow{ display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--surface2); } .cs-mob .cs-lrow:first-of-type{ border-top:none; } .cs-mob .cs-lav{ width:34px; height:34px; border-radius:50%; background:var(--surface2); display:grid; place-items:center; font-weight:800; color:var(--text-muted); font-size:12px; flex:none; } .cs-mob .cs-ln{ flex:1; min-width:0; } .cs-mob .cs-ln b{ font-size:13.5px; font-weight:800; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cs-mob .cs-ln span{ font-size:11.5px; color:var(--text-muted); } .cs-mob .cs-lchip{ font-size:10.5px; font-weight:800; padding:2px 9px; border-radius:20px; flex:none; white-space:nowrap; } .cs-mob .cs-lchip.good{ background:rgba(0,168,84,.12); color:var(--good); } .cs-mob .cs-lchip.warn{ background:rgba(232,147,12,.14); color:var(--warn); } .cs-mob .cs-lchip.bad{ background:rgba(229,72,77,.12); color:var(--danger); } .cs-mob .cs-grid2{ grid-template-columns:1fr; gap:0; } .cs-mob .cs-brief{ padding:14px 14px 13px; margin-bottom:10px; border-radius:16px; } .cs-mob .cs-brief-row{ flex-wrap:wrap; gap:12px; margin-top:10px; } .cs-mob .cs-ring{ width:56px; height:56px; } .cs-mob .cs-ring svg{ width:56px; height:56px; } .cs-mob .cs-brief-big .n{ font-size:30px; } .cs-mob .cs-brief-pills{ flex:1 1 100%; } .cs-mob .cs-bpill{ flex:1; min-width:0; padding:8px 10px; text-align:center; } .cs-mob .cs-bpill .n{ font-size:20px; } .cs-mob .cs-panel{ padding:12px 13px; margin-bottom:10px; border-radius:14px; } .cs-mob .cs-wrow{ padding:10px 11px; gap:10px; } .cs-mob .cs-av2{ width:34px; height:34px; border-radius:10px; font-size:12px; } .cs-mob .cs-wn b{ font-size:13.5px; } } /* Titres DANS leur carte (ordi et mobile) : lignes de la carte sans cadre propre. */ .cs-panel .cs-watch{ gap:0; } .cs-panel .cs-wrow{ border:0 !important; border-top:1px solid var(--surface2) !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important; background:none !important; } .cs-panel .cs-wrow:first-child{ border-top:0 !important; padding-top:2px !important; } /* Un seul style d'avatar (carré arrondi) sur ordi comme sur mobile */ #coach-shell .cs-av2, #coach-shell .cs-tav, #coach-shell .cs-lav { border-radius:10px !important; } /* 06/11 (fiche courte) : cartes Charge & assiduité / Ma montre aussi sur mobile (avant : ordi seulement) */ @media (max-width:991.98px){ body.coach-active.athlete-selected .cd-forme-card.has-data{ display:block; } .cd-forme-card .dash-label{ display:flex; align-items:center; } .cd-forme-tag{ margin-left:auto; font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--purple,#7c5cff); background:rgba(124,92,255,.12); border-radius:5px; padding:2px 7px; } #cd-charge-card .cd-k4{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } #cd-charge-card .cd-k{ background:var(--surface2); border:1px solid var(--border); border-radius:11px; padding:10px; text-align:center; } #cd-charge-card .cd-kv{ font-size:18px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; } #cd-charge-card .cd-kl{ font-size:9.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--text-subtle); font-weight:800; margin-top:3px; } #cd-charge-card .cd-charge-streak{ display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--text-muted); margin-top:11px; } #cd-charge-card .cd-charge-streak b{ font-weight:800; color:var(--warn); } #cd-montre-card .cd-md-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--surface2); } #cd-montre-card .cd-md-row:first-of-type{ border-top:none; } #cd-montre-card .cd-md-ic{ width:30px; height:30px; border-radius:9px; background:var(--surface2); display:grid; place-items:center; font-size:15px; flex:none; } #cd-montre-card .cd-md-nm{ flex:none; width:92px; } #cd-montre-card .cd-md-nm b{ display:block; font-size:13px; font-weight:800; } #cd-montre-card .cd-md-nm span{ font-size:10px; color:var(--text-subtle); text-transform:uppercase; letter-spacing:.03em; font-weight:700; } #cd-montre-card .cd-md-spark{ flex:1; min-width:0; display:flex; justify-content:center; } #cd-montre-card .cd-md-spark svg{ width:100%; max-width:130px; height:30px; } #cd-montre-card .cd-md-v{ flex:none; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; min-width:58px; } #cd-montre-card .cd-md-note{ font-size:10.5px; color:var(--text-subtle); line-height:1.4; margin-top:10px; } #cd-charge-card .cd-k4{ grid-template-columns:repeat(3,1fr); gap:7px; } #cd-charge-card .cd-kv{ font-size:16px; } }