/* =================================================================== KarmaWorkoutLog — thème carbone / cuivre, sombre, mobile-first Contexte : salle de sport, luminosité variable, saisie au pouce entre deux séries. Cibles tactiles >= 48px, contraste fort. =================================================================== */ :root { color-scheme: dark; /* Fonds et surfaces — charbon chaud */ --bg: #141211; --bg-raise: #191613; --surface: #201c19; --surface-2: #2b2521; --border: #736254; --border-soft: #413830; /* Texte — plancher de luminance pour lisibilité plein soleil */ --text: #f5efe7; --text-dim: #bfb1a5; --text-faint: #b4a497; /* Accent unique : cuivre */ --accent: #e9a06b; --accent-strong: #f2b98f; --accent-deep: #9b4f25; --accent-ink: #20130c; --accent-soft: rgba(233, 160, 107, 0.14); /* Sémantique */ --success: var(--text); --warn: #e8b45a; --warn-soft: rgba(232, 180, 90, 0.14); --danger: #e0685c; --danger-soft: rgba(224, 104, 92, 0.14); /* Rayons, ombres */ --radius-s: 8px; --radius: 12px; --radius-l: 16px; --shadow: 0 4px 18px rgba(0, 0, 0, 0.35); --shadow-lift: 0 8px 28px rgba(0, 0, 0, 0.45); } /* Thème clair — même structure, luminances inversées. Le thème sombre reste le défaut ; [data-theme="light"] sur bascule l'ensemble. */ [data-theme="light"] { color-scheme: light; --bg: #f7f2ec; --bg-raise: #eee5db; --surface: #fffcf8; --surface-2: #eee5db; --border: #9d8776; --border-soft: #d8cabc; --text: #28211c; --text-dim: #705f52; --text-faint: #786656; --accent: #9b4f25; --accent-strong: #84401c; --accent-deep: #753a1d; --accent-ink: #fff9f2; --accent-soft: rgba(155, 79, 37, 0.12); --success: var(--text); --warn: #b07922; --warn-soft: rgba(176, 121, 34, 0.12); --danger: #b3453a; --danger-soft: rgba(179, 69, 58, 0.12); --shadow: 0 4px 18px rgba(40, 33, 28, 0.14); --shadow-lift: 0 8px 28px rgba(40, 33, 28, 0.18); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* ---------------------------------------------------------------- Typo / liens ---------------------------------------------------------------- */ h1, h2, h3 { line-height: 1.2; margin: 0 0 0.35em; font-weight: 750; letter-spacing: -0.01em; } h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); } h2 { font-size: 1.15rem; color: var(--text); } p { margin: 0 0 0.8em; } a { color: var(--accent-strong); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---------------------------------------------------------------- Chrome applicatif (header / shell / footer) ---------------------------------------------------------------- */ .site-header { background: var(--bg-raise); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 30; backdrop-filter: blur(8px); } .site-header .header-inner { width: min(960px, 100%); margin: 0 auto; padding: 0 16px; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .site-brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 1.02rem; letter-spacing: 0.01em; } .brand-version { flex: none; color: var(--text-dim); font-size: 0.65rem; font-weight: 500; letter-spacing: 0; } .site-brand:hover { text-decoration: none; color: var(--accent-strong); } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); color: var(--accent-ink); font-weight: 900; font-size: 0.85rem; letter-spacing: 0; } .site-nav { display: flex; align-items: center; gap: 4px; } .site-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius-s); color: var(--text-dim); font-size: 0.95rem; font-weight: 600; } .site-nav a:hover { color: var(--text); background: var(--surface); text-decoration: none; } .site-nav a.nav-cta { color: var(--accent-strong); } .page-shell { width: min(960px, 100%); margin: 0 auto; padding: 20px 16px 120px; } .site-footer { width: min(960px, 100%); margin: 0 auto; padding: 20px 16px 32px; color: var(--text-faint); font-size: 0.8rem; border-top: 1px solid var(--border-soft); } /* ---------------------------------------------------------------- Composants génériques ---------------------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: clamp(20px, 4vw, 32px); box-shadow: var(--shadow); } .flash { margin: 0 0 16px; border-radius: var(--radius); padding: 12px 16px; font-weight: 600; border: 1px solid transparent; } .flash--success { background: var(--accent-soft); color: var(--success); border-color: var(--border); } .flash--error { background: var(--danger-soft); color: var(--danger); border-color: rgba(224, 104, 92, 0.3); } .flash--warning { background: var(--warn-soft); color: var(--warn); border-color: rgba(232, 180, 90, 0.3); } /* Boutons — cibles >= 48px, généreuses au pouce */ button, .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--accent-deep); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); padding: 0 20px; font: inherit; font-weight: 750; font-size: 1rem; cursor: pointer; transition: background 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease; box-shadow: 0 2px 10px rgba(233, 160, 107, 0.22); user-select: none; -webkit-tap-highlight-color: transparent; } button:hover, .button:hover { background: var(--accent-strong); text-decoration: none; } button:active, .button:active { transform: translateY(1px); } /* [hidden] doit toujours gagner, même sur un display explicite — sans ça, JS pose .hidden=true et le bouton reste visible (bug chronos). */ [hidden] { display: none !important; } .button--secondary, button.button--secondary { background: var(--surface-2); color: var(--text); border-color: var(--border); box-shadow: none; } .button--secondary:hover { background: var(--surface); border-color: var(--text-faint); } .button--ghost, button.button--ghost { background: transparent; color: var(--text-dim); border-color: var(--border); box-shadow: none; } .button--ghost:hover { color: var(--text); border-color: var(--text-faint); } .button--small { min-height: 40px; padding: 0 14px; font-size: 0.9rem; } .button--block { width: 100%; } /* Formulaires — gros champs, labels persistants */ label { display: block; margin-bottom: 6px; color: var(--text-dim); font-weight: 650; font-size: 0.9rem; } input, textarea, select { width: 100%; min-height: 52px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raise); color: var(--text); padding: 10px 14px; font: inherit; font-size: 1.05rem; transition: border-color 0.15s ease, box-shadow 0.15s ease; } textarea { min-height: 96px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--text-faint); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Clavier numérique : champs numériques plus confortables */ input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"] { font-variant-numeric: tabular-nums; text-align: center; font-weight: 650; } form .form-row, form > div { margin-bottom: 16px; } .form-error, .form-error ul { margin: 6px 0 0; color: var(--danger); } /* =================================================================== LOGIN =================================================================== */ .login-shell { min-height: 70vh; display: grid; align-content: center; gap: 24px; max-width: 420px; margin: 0 auto; } .login-hero { text-align: center; } .login-hero h1 { font-size: 1.7rem; margin-bottom: 8px; } .login-hero .lead { color: var(--text-dim); margin: 0; } .login-card { display: grid; gap: 18px; } .login-card button[type="submit"] { width: 100%; min-height: 54px; font-size: 1.05rem; } /* =================================================================== KWL — ACCUEIL (cycle, semaines, créneaux) =================================================================== */ .kwl-app { display: grid; gap: 20px; } .kwl-cycle-head h1 { margin-bottom: 4px; } .kwl-cycle-start { color: var(--text-dim); font-size: 0.95rem; margin: 0; } /* CTA prochaine séance — l'action principale, proéminente */ .kwl-next { background: linear-gradient(135deg, var(--accent-soft), rgba(233, 160, 107, 0.06)); border: 1px solid rgba(233, 160, 107, 0.35); border-radius: var(--radius-l); padding: 18px; display: grid; gap: 10px; } .kwl-next > p { margin: 0; color: var(--text-dim); font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .kwl-next-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow arrow" "title arrow"; align-items: center; column-gap: 14px; row-gap: 1px; min-height: 64px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 12px 18px; font-weight: 800; font-size: 1.05rem; box-shadow: 0 3px 14px rgba(233, 160, 107, 0.3); transition: background 0.15s ease, transform 0.06s ease; } .kwl-next-link:hover { background: var(--accent-strong); text-decoration: none; } .kwl-next-link:active { transform: translateY(1px); } .kwl-next-link::after { content: "→"; grid-area: arrow; font-weight: 900; font-size: 1.15rem; } .kwl-next-eyebrow { grid-area: eyebrow; font-size: 0.78rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.82; } .kwl-next-title { grid-area: title; font-size: 1.1rem; } /* Semaines */ .kwl-week { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 16px 16px 12px; } .kwl-week > h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 750; margin: 0 0 10px; } .kwl-week > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } /* Créneau = carte cliquable sur toute la surface, 2 rangées */ .kwl-slot > a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "topline state" "type type"; align-items: center; column-gap: 10px; row-gap: 4px; min-height: 64px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--border-soft); background: var(--bg-raise); color: var(--text); transition: border-color 0.15s ease, background 0.15s ease; } .kwl-slot > a:hover { border-color: var(--accent-deep); background: var(--surface-2); text-decoration: none; } .kwl-slot .kwl-topline { grid-area: state; display: contents; } .kwl-day { font-weight: 750; font-size: 0.95rem; } .kwl-day::after { content: " "; } .kwl-ref { color: var(--text-faint); font-size: 0.88rem; font-variant-numeric: tabular-nums; margin-left: 6px; } .kwl-slot .kwl-top { grid-area: topline; display: flex; align-items: baseline; gap: 2px; min-width: 0; } .kwl-type { grid-area: type; font-size: 0.92rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kwl-type strong { color: var(--text); font-weight: 700; margin-right: 4px; } /* Pastille de statut — scan rapide, contraste renforcé */ .kwl-state { grid-area: state; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 750; padding: 6px 11px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } .kwl-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .kwl-slot.done .kwl-state { background: var(--accent-soft); color: var(--success); border-color: var(--border); } .kwl-slot.past .kwl-state { background: var(--warn-soft); color: var(--warn); border-color: rgba(232, 180, 90, 0.45); } .kwl-slot.future .kwl-state { background: transparent; color: var(--text-dim); border-color: var(--border); } /* Rail droit : mêmes dimensions pour toutes les pilules */ .kwl-state { min-width: 84px; justify-content: center; } .kwl-slot.done > a { border-color: var(--border); } .kwl-slot.past > a { border-color: rgba(232, 180, 90, 0.3); background: linear-gradient(135deg, rgba(232,180,90,0.05), transparent 60%); } .kwl-slot.done .kwl-type, .kwl-slot.done .kwl-day { color: var(--text-dim); } .kwl-links { display: flex; justify-content: center; padding-top: 8px; } .kwl-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--text-faint); font-size: 0.9rem; font-weight: 600; border-radius: var(--radius-s); } .kwl-links a:hover { color: var(--danger); text-decoration: none; } /* =================================================================== KWL — FICHE SÉANCE =================================================================== */ .kwl-sheet-head { display: grid; gap: 12px; } .kwl-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; color: var(--text-dim); font-weight: 650; font-size: 0.95rem; justify-self: start; } .kwl-back:hover { color: var(--accent-strong); text-decoration: none; } .kwl-sheet-head h1 { margin: 0; font-size: 1.45rem; } .kwl-sheet-sub { margin: 0; color: var(--text-dim); font-size: 0.92rem; } .kwl-instruction { margin: 0; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; padding: 10px 14px; color: var(--text-dim); font-size: 0.92rem; } /* Chronos : barre sticky — 2 colonnes : SÉANCE à gauche (grosse, centrée V+H), exercice puis repos puis cumul empilés à droite. */ .kwl-suggestion { margin: 0; padding: 10px 14px 10px 13px; border-left: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: var(--accent-soft); color: var(--text-dim); font-size: 0.9rem; line-height: 1.45; max-width: 68ch; display: grid; gap: 2px; } .kwl-suggestion strong { color: var(--accent-strong); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } [data-theme="light"] .kwl-suggestion { color: #705f52; } .kwl-chronos { position: sticky; top: 64px; /* juste sous .site-header (lui-même sticky) */ z-index: 20; display: grid; grid-template-columns: 1fr 1fr; /* séance | pile droite */ gap: 8px 12px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 10px 16px; box-shadow: var(--shadow); align-items: stretch; } /* Colonne droite : exercice, repos, cumul empilés */ .kwl-chronos-col { display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; } .kwl-chrono { display: grid; grid-template-rows: auto auto; align-items: center; gap: 2px 14px; padding: 0; border-radius: 0; background: transparent; flex: 1; min-width: 0; } /* Chrono séance : colonne gauche de la barre — GROS, centré verticalement et horizontalement */ .kwl-chrono--session { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto; justify-items: center; align-content: center; text-align: center; gap: 4px; } .kwl-chrono--session .chrono-actions { display: flex; width: 100%; justify-content: center; } .kwl-chrono--session .chrono-actions button { min-height: 52px; flex: 1; width: 100%; font-size: 1rem; } .kwl-chrono .chrono-label { font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .kwl-chrono [id^="chrono-"] { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em; color: var(--text); line-height: 1; } .kwl-chrono button { min-height: 44px; padding: 0 18px; font-size: 0.85rem; border-radius: var(--radius-s); grid-row: 1 / -1; grid-column: 2; justify-self: end; } /* Boutons secondaires des chronos : discrétion */ .kwl-chrono button.button--secondary { background: var(--surface-2); border-color: var(--border); color: var(--text); box-shadow: none; } .kwl-chrono button.button--secondary:hover { border-color: var(--accent-deep); color: var(--accent-strong); } .kwl-chrono .chrono-actions { display: flex; gap: 6px; grid-row: 1 / -1; grid-column: 2; justify-self: end; } /* Carte séance : neutralise le placement en colonne 2 — bouton pleine largeur dessous */ .kwl-chrono--session .chrono-actions, .kwl-chrono--session button { grid-column: auto; grid-row: auto; justify-self: stretch; width: 100%; } /* Exercices */ .kwl-exercise { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 16px; display: grid; gap: 12px; } .kwl-exercise h2 { font-size: 1.08rem; margin: 0; } .kwl-meta { margin: 0; color: var(--text-dim); font-size: 0.85rem; display: flex; flex-wrap: wrap; gap: 4px 10px; } .kwl-meta strong { color: var(--accent-strong); font-weight: 750; } .kwl-method-note { margin: 0; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: var(--radius-s); background: var(--bg-raise); color: var(--text-dim); font-size: 0.86rem; line-height: 1.45; } .kwl-method-note strong { color: var(--accent-strong); } /* Chronos exercice : rangée compacte de deux cellules, intégrée à la carte */ .kwl-ex-chronos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px; background: var(--bg-raise); border: 1px solid var(--border-soft); border-radius: var(--radius); } .kwl-ex-chrono { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; padding: 10px 12px; border-radius: var(--radius-s); } /* Libellé chrono exercice : compact, hiérarchie faible */ .kwl-ex-chrono .chrono-label { display: block; font-size: 0.65rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); line-height: 1.2; } .kwl-ex-chrono .ex-chrono-display { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.4rem; letter-spacing: 0.02em; color: var(--text); line-height: 1.15; text-align: center; } .kwl-ex-chrono .chrono-actions { display: grid; gap: 6px; } /* Boutons chrono exercice : primaires (c'est l'action), compacts */ .kwl-ex-chrono button { min-height: 44px; padding: 0 12px; font-size: 0.83rem; font-weight: 750; border-radius: var(--radius-s); width: 100%; } /* Légère retenue : les deux boutons chronos partagent le même style primaire adouci — pas de surcharge d'accent */ .kwl-ex-chrono button.button--secondary { background: var(--surface-2); border-color: var(--accent-deep); color: var(--accent-strong); box-shadow: none; } .kwl-ex-chrono button.button--secondary:hover { border-color: var(--accent); background: var(--surface); } /* Séries : titre de section discret pour marquer la coupure */ .kwl-sets { display: grid; gap: 10px; } .kwl-sets::before { content: "Séries"; font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); margin-bottom: -4px; } .kwl-set-group { display: grid; gap: 8px; padding: 10px; background: var(--bg-raise); border: 1px solid var(--border-soft); border-radius: var(--radius); } .kwl-set-group-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; padding: 0 2px; } .kwl-set-group-head strong { font-size: 0.86rem; color: var(--text); } .kwl-set-group-head span { font-size: 0.78rem; color: var(--text-dim); } .kwl-set { display: grid; grid-template-columns: 38px 1fr 1fr 0.85fr; align-items: end; gap: 8px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px; } .kwl-set-group--sides .kwl-set { border-left: 3px solid var(--accent-deep); } .kwl-set-group--sides .kwl-set[data-side="D"] { border-left-color: var(--border); } .kwl-set-n { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; align-self: end; margin-bottom: 12px; /* aligne avec le centre du champ (60px) */ width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-size: 0.95rem; color: var(--accent-strong); } .kwl-set-n--side { background: var(--accent-soft); border-color: var(--accent-deep); font-size: 1.05rem; } .kwl-set .kwl-in { min-height: 60px; padding: 10px 6px; font-size: 1.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; } /* Étiquettes persistentes au-dessus des champs */ .kwl-field { display: grid; gap: 4px; min-width: 0; } .kwl-field > span { font-size: 0.72rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); text-align: center; } /* Pied de formulaire */ .kwl-footer { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 16px; } .kwl-footer .kwl-fatigue { max-width: 160px; } #btn-save { width: 100%; min-height: 56px; font-size: 1.08rem; font-weight: 800; } /* Le pied de séance (fatigue/remarques) n'est utile qu'en fin de parcours : pas de sticky, il vit au fil du document. */ .kwl-footer { position: static; } /* Historique : secondaire, délimité mais discret */ .kwl-history { margin: 0; padding-top: 6px; border-top: 1px solid var(--border-soft); } .kwl-history-title { margin: 0 0 2px; font-size: 0.8rem; font-weight: 750; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; } .kwl-history-sets { margin: 0; font-size: 0.85rem; color: var(--text-dim); line-height: 1.5; } .kwl-history-duration { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-faint); } .kwl-history-empty { text-transform: none; letter-spacing: 0; font-weight: 550; font-size: 0.85rem; } /* Navigation exercices : pouce-friendly, compacte */ .kwl-nav-ex { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .kwl-nav-ex button { min-height: 52px; font-weight: 750; font-size: 0.95rem; } /* Compteur carrousel : badge discret en tête de carrousel */ .kwl-carousel-counter { font-size: 0.82rem; color: var(--text-dim); font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; display: inline-block; margin: 0 0 10px 2px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; font-variant-numeric: tabular-nums; } .kwl-banner { margin: 0; background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(232, 180, 90, 0.3); border-radius: var(--radius-s); padding: 10px 14px; font-weight: 650; font-size: 0.9rem; } /* =================================================================== DESKTOP — respirer davantage =================================================================== */ @media (min-width: 760px) { .page-shell { padding-top: 32px; } .kwl-week > ul { grid-template-columns: 1fr 1fr; gap: 10px; } .kwl-chronos { max-width: 720px; } .kwl-footer { grid-template-columns: 1fr 1fr; align-items: end; } .kwl-footer #btn-save { grid-column: 1 / -1; } } /* Petits écrans : resserrer les séries */ @media (max-width: 380px) { .kwl-set-group { padding: 8px; } .kwl-set { grid-template-columns: 34px 1fr 1fr 0.75fr; gap: 6px; padding: 8px; } .kwl-set .kwl-in { font-size: 1.1rem; padding: 10px 4px; min-height: 54px; } .kwl-chrono [id^="chrono-"] { font-size: 1.3rem; } .kwl-chrono button { font-size: 0.8rem; } .kwl-ex-chrono .ex-chrono-display { font-size: 1.2rem; } .kwl-ex-chrono button { font-size: 0.78rem; min-height: 42px; } } /* Accessibilité : réduire les animations si demandé */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* Carte séance : libellé et timer PLUS GROS et CENTRÉS (demande Karma) */ .kwl-chrono--session .chrono-label { font-size: 1.05rem; text-align: center; justify-self: center; color: var(--text); } .kwl-chrono--session [id="chrono-session"] { font-size: 2.6rem; text-align: center; justify-self: center; } /* Cumulé repos : rangée dédiée sous exercice+repos, centré, discret */ .ex-rest-total { justify-self: center; text-align: center; font-size: 0.78rem; color: var(--text-faint); min-height: 1em; font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- En-tête : répartition sur petit écran — wordmark compact, logout compact. ---------------------------------------------------------------- */ .site-brand { min-width: 0; } .site-brand .brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 480px) { .site-header .header-inner { gap: 6px; padding: 0 10px; } .site-brand { font-size: 0.83rem; gap: 6px; } .site-brand .brand-mark { width: 24px; height: 24px; font-size: 0.72rem; flex: none; border-radius: 7px; } .site-nav a { padding: 0 5px; font-size: 0.85rem; min-height: 44px; } .theme-toggle { margin-right: 0; flex: none; width: 50px; min-width: 50px; height: 40px; min-height: 40px; } .theme-toggle::before { width: 20px; height: 20px; left: 5px; } .theme-toggle::after { left: 12px; width: 10px; height: 10px; } [data-theme="light"] .theme-toggle::before { left: 24px; } [data-theme="light"] .theme-toggle::after { left: 30px; width: 7px; height: 7px; } } /* ---------------------------------------------------------------- Switch thème clair/sombre — toggle pilule, curseur lune/soleil. Garde id="btn-theme" + localStorage kwl_theme (inchangés côté JS). ---------------------------------------------------------------- */ .theme-toggle { position: relative; width: 54px; min-width: 54px; height: 44px; min-height: 44px; padding: 0; margin-right: 8px; cursor: pointer; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); transition: background 0.2s ease, border-color 0.2s ease; /* neutralise le style bouton générique */ color: inherit; font-size: 0; box-shadow: none; } .theme-toggle:hover { border-color: var(--accent); } /* Curseur pilule : disque accent, centré verticalement, glisse horizontalement */ .theme-toggle::before { content: ""; position: absolute; top: 50%; left: 6px; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); transition: left 0.2s ease, background 0.2s ease; z-index: 1; } /* Glyphe lune : croissant sombre au centre du curseur (découpe par ombre) */ .theme-toggle::after { content: ""; position: absolute; top: 50%; left: 13px; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; box-shadow: -3.5px 0 0 0 var(--accent-ink); transition: left 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, width 0.2s ease; z-index: 2; pointer-events: none; } /* Thème clair : curseur à droite, glyphe soleil plein (point central) */ [data-theme="light"] .theme-toggle { background: var(--accent-soft); border-color: var(--accent-deep); } [data-theme="light"] .theme-toggle::before { left: 26px; background: var(--accent-strong); } [data-theme="light"] .theme-toggle::after { left: 33px; width: 8px; height: 8px; background: var(--accent-ink); box-shadow: none; } /* =================================================================== KWL — APERÇU DE SÉANCE (avant démarrage) Liste des exercices en cartes scannables + CTA primaire proéminent. Mobile-first : lecture au pouce entre la porte et le premier plateau. =================================================================== */ .kwl-overview { display: grid; gap: 18px; } /* Titre de section discret, généré en CSS pour éviter de toucher au Twig */ .kwl-overview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .kwl-overview-list::before { content: "Exercices"; font-size: 0.78rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } /* Chaque exercice = carte à pastille numérotée + contenu */ .kwl-overview-list > li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pos name" "pos meta" "pos method"; column-gap: 12px; row-gap: 6px; align-items: center; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 12px 14px; } .kwl-overview-list .kwl-method-note { grid-area: method; } /* Pastille numéro : repère de progression stable, accent discret */ .kwl-ov-pos { grid-area: pos; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(233, 160, 107, 0.35); color: var(--accent-strong); font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums; } [data-theme="light"] .kwl-ov-pos { border-color: rgba(155, 79, 37, 0.35); } /* Nom de l'exercice : l'information principale, en fort */ .kwl-ov-name { grid-area: name; font-weight: 750; font-size: 1.02rem; color: var(--text); line-height: 1.25; min-width: 0; } /* Méta : chips scannables, une ligne qui enveloppe proprement */ .kwl-ov-meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--text-dim); font-variant-numeric: tabular-nums; } .kwl-ov-meta > strong, .kwl-ov-meta > span { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border-radius: 999px; background: var(--bg-raise); border: 1px solid var(--border-soft); font-weight: 600; white-space: nowrap; } /* Séries × plage : la donnée de charge, mise en avant par l'accent */ .kwl-ov-meta > strong { background: var(--accent-soft); border-color: rgba(233, 160, 107, 0.3); color: var(--accent-strong); font-weight: 800; font-size: 0.85rem; } [data-theme="light"] .kwl-ov-meta > strong { border-color: rgba(155, 79, 37, 0.3); } /* CTA principal : bouton pleine largeur, cible 56px, accent plein — cohérent avec .kwl-next-link de l'accueil */ .kwl-overview-start { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 20px; border-radius: var(--radius); background: var(--accent); border: 1px solid var(--accent-deep); color: var(--accent-ink); font-weight: 800; font-size: 1.08rem; box-shadow: 0 3px 14px rgba(233, 160, 107, 0.3); transition: background 0.15s ease, transform 0.06s ease; -webkit-tap-highlight-color: transparent; user-select: none; } .kwl-overview-start:hover { background: var(--accent-strong); text-decoration: none; } .kwl-overview-start:active { transform: translateY(1px); } /* CTA sticky en bas sur toutes les tailles d'écran : sur un écran dont l'unique finalité est de lancer la séance, l'action principale doit rester visible sans scroll. */ .kwl-overview-start { position: sticky; bottom: 12px; z-index: 15; } .kwl-overview::after { content: ""; display: block; height: 76px; /* hauteur CTA (56) + marge basse (12) + souffle (8) */ } /* Desktop : limiter la largeur de lecture, CTA plus contenu */ @media (min-width: 760px) { .kwl-overview { max-width: 640px; } .kwl-overview-start { min-height: 52px; font-size: 1.05rem; } } /* =================================================================== KWL — DÉTAIL DE SÉANCE (historique) En-tête en carte + blocs exercices + séries en rangées lisibles. =================================================================== */ /* En-tête : carte qui regroupe identité + métriques + notes */ .kwl-session-head { display: grid; gap: 10px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 16px; box-shadow: var(--shadow); } .kwl-session-head .kwl-back { padding: 0 4px; margin: -4px 0 0 -4px; } .kwl-session-head h1 { margin: 0; font-size: 1.45rem; } /* Sous-titre : contexte de la séance, discret mais complet */ .kwl-session-sub { margin: 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.45; } /* Métriques : chips tabulaires scannables (durée, fatigue) */ .kwl-session-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.85rem; padding: 0; background: transparent; border: none; color: var(--text-dim); font-weight: 600; } .kwl-session-meta > span { background: var(--bg-raise); border: 1px solid var(--border-soft); border-radius: var(--radius-s); padding: 6px 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); font-weight: 600; } /* Notes de séance : encadré à filet accent, italique */ .kwl-session-notes { margin: 0; padding: 10px 14px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--text); font-size: 0.92rem; font-style: italic; } /* Liste des exercices : chaque exercice est une carte */ .kwl-history-detail { display: grid; gap: 14px; } .kwl-history-ex { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-l); padding: 14px 16px; display: grid; gap: 10px; } .kwl-history-ex h2 { margin: 0; font-size: 1.05rem; font-weight: 750; } /* Méta exercice : méthode, plage, durée, repos cumulé — ligne discrète */ .kwl-history-exmeta { margin: 0; color: var(--text-dim); font-size: 0.82rem; display: flex; flex-wrap: wrap; gap: 4px 10px; font-variant-numeric: tabular-nums; } .kwl-history-exmeta .kwl-tag-method { color: var(--accent-strong); font-weight: 750; } /* Séries : rangées à pastille numérotée, charge en fort, RIR/repos en badges */ .kwl-history-sets { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .kwl-history-sets li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--bg-raise); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: 8px 12px; font-variant-numeric: tabular-nums; } /* Pastille numéro de série (G/D inclus) */ .kwl-hset-n { flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 800; font-size: 0.85rem; color: var(--accent-strong); line-height: 1.1; } /* Charge × reps : l'info principale de la série */ .kwl-hset-load { font-weight: 750; font-size: 0.98rem; color: var(--text); white-space: nowrap; } /* RIR et repos : badges discrets à droite du flux */ .kwl-hset-rir, .kwl-hset-rest { font-size: 0.75rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .kwl-hset-rir { background: var(--accent-soft); color: var(--accent-strong); border: 1px solid rgba(233, 160, 107, 0.3); } [data-theme="light"] .kwl-hset-rir { border-color: rgba(155, 79, 37, 0.3); } .kwl-hset-rest { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border-soft); } /* Note d'exercice : discret, filet bord doux */ .kwl-history-exnote { margin: 0; padding-top: 8px; border-top: 1px dashed var(--border-soft); color: var(--text-dim); font-size: 0.85rem; font-style: italic; } /* ---------------------------------------------------------------- Barre chronos — peaufinage d'habillage (structure figée) ---------------------------------------------------------------- */ /* Filet vertical visuel entre les deux colonnes */ .kwl-chronos { gap: 8px 16px; } .kwl-chrono--session { border-right: 1px solid var(--border-soft); padding-right: 16px; } /* Timer séance : accent quand la séance a démarré (classe posée par le JS si disponible ; sinon reste neutre — pas de sélecteur d'état fragile) */ .kwl-chrono--session [id="chrono-session"] { font-size: 2.6rem; color: var(--accent-strong); text-align: center; justify-self: center; } /* Timers empilés à droite : un peu plus petits que séance, alignés */ .kwl-chronos-col .kwl-chrono { grid-template-columns: auto 1fr; grid-template-rows: auto; gap: 0 10px; align-items: center; } .kwl-chronos-col .kwl-chrono .chrono-label { grid-column: 1; } .kwl-chronos-col .kwl-chrono [id^="chrono-"] { grid-column: 1; font-size: 1.25rem; font-weight: 800; } .kwl-chronos-col .kwl-chrono .chrono-actions { grid-row: 1 / -1; grid-column: 2; } .kwl-chronos-col .kwl-chrono button { min-height: 40px; } @media (max-width: 380px) { .kwl-chrono--session [id="chrono-session"] { font-size: 2.2rem; } .kwl-chronos { padding: 8px 12px; gap: 6px 12px; } .kwl-chrono--session { padding-right: 10px; } } /* Carnet continu — navigation, surfaces sobres et contrôles au pouce. */ :root { --session-bar-height: 144px; } html { scroll-padding-top: calc(var(--session-bar-height) + 12px); } .site-header { position: static; backdrop-filter: none; } .site-brand .brand-mark { background: var(--accent); color: var(--accent-ink); } .page-shell { max-width: 780px; padding-bottom: 30px; } .site-footer { max-width: 780px; padding-bottom: calc(110px + env(safe-area-inset-bottom)); } button, .button, .kwl-next-link, .kwl-overview-start { box-shadow: none; } button:disabled { opacity: .55; cursor: default; } :where(a, button, summary, select, input, textarea):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .kwl-page-head { display: grid; gap: 6px; } .kwl-page-head p, .kwl-page-head h1 { margin: 0; } .kwl-page-head h1 { font-size: clamp(1.7rem, 5vw, 2.35rem); } .kwl-page-head > p { color: var(--text-dim); } .kwl-eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-dim); } .kwl-muted { color: var(--text-dim); font-size: .9rem; } .kwl-text-link { display: inline-flex; align-items: center; min-height: 48px; } .kwl-next-focus { background: var(--surface); border-color: var(--border-soft); padding: 24px; gap: 16px; } .kwl-next-focus h2 { font-size: 1.6rem; } .kwl-next-focus > .kwl-muted { text-transform: none; letter-spacing: normal; font-weight: 400; } .kwl-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; background: var(--bg-raise); border-top: 1px solid var(--border); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); } .kwl-bottom-nav a { display: flex; flex: 1; max-width: 230px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; color: var(--text-dim); font-size: .85rem; font-weight: 650; border-radius: 8px; } .kwl-bottom-nav a span { font-size: 1.25rem; line-height: 1.2; } .kwl-bottom-nav a[aria-current] { background: var(--accent-soft); color: var(--accent); } .kwl-bottom-nav a:hover { text-decoration: none; background: var(--surface); } .kwl-drafts:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; } .kwl-drafts:empty { display: none; } .kwl-drafts, .kwl-session-list { display: grid; gap: 12px; } .kwl-session-card, .kwl-resume-card { display: grid; gap: 5px; padding: 18px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); color: var(--text); } .kwl-session-card:hover, .kwl-resume-card:hover { text-decoration: none; border-color: var(--accent); } .kwl-week-fold { padding: 0 16px; } .kwl-week-fold > summary { cursor: pointer; padding: 18px 0; font-size: 1.05rem; font-weight: 750; } .kwl-week-fold > summary span { float: right; font-size: .8rem; color: var(--text-dim); font-weight: 400; padding-top: 4px; } .kwl-week-fold > ul { padding-bottom: 16px; } .kwl-slot.done .kwl-state, .flash--success { background: var(--surface-2); color: var(--text); } .kwl-slot.done .kwl-state::before { content: "✓ "; } .kwl-slot.done > a { border-color: var(--border-soft); } .kwl-session-bar { position: sticky; top: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; background: var(--bg-raise); border: 1px solid var(--border-soft); border-radius: 12px; padding: 10px 12px; } .kwl-session-clock, .kwl-rest-clock { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; } .kwl-session-bar .chrono-label { grid-column: 1; color: var(--text-dim); font-size: .75rem; } .kwl-session-bar strong { grid-column: 1; font-size: 1.45rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .kwl-session-bar button { grid-column: 2; grid-row: 1 / 3; min-height: 48px; padding: 0 10px; font-size: .8rem; } #rest-context { grid-column: 1 / -1; margin: 0; border-top: 1px solid var(--border-soft); padding-top: 6px; font-size: .78rem; color: var(--text-dim); } .kwl-save-status { margin: -10px 0 0; color: var(--text-dim); font-size: .78rem; } .kwl-notebook { display: grid; gap: 18px; } .kwl-notebook-tools p { color: var(--text-dim); font-size: .8rem; margin: 8px 0 0; } .kwl-exercise { gap: 10px; padding: 16px; scroll-margin-top: 8px; } .kwl-exercise.is-timed { border-color: var(--accent); } .kwl-exercise-title { display: flex; gap: 10px; align-items: center; } .kwl-exercise h2 { font-size: 1.15rem; line-height: 1.35; } .kwl-ex-number { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; } .kwl-meta strong, .kwl-method-note strong { color: var(--text); } .kwl-details { border-top: 1px solid var(--border-soft); } .kwl-details summary { cursor: pointer; padding: 12px 0; min-height: 48px; font-size: .85rem; color: var(--text-dim); } .kwl-details[open] summary { color: var(--text); } .kwl-details > p, .kwl-details > div { margin-bottom: 10px; } .kwl-suggestion { border: none; background: var(--bg-raise); color: var(--text-dim); } .kwl-sets { gap: 8px; } .kwl-sets::before { content: none; } .kwl-set-group { padding: 8px 0; border: 0; border-radius: 0; border-top: 1px solid var(--border-soft); background: transparent; gap: 6px; } .kwl-set { background: transparent; border: 0; border-radius: 0; padding: 0; grid-template-columns: 30px 1fr 1fr .8fr; gap: 8px; } .kwl-set-n { background: transparent; color: var(--text-dim); border: none; width: 28px; } .kwl-set-group--sides .kwl-set { border-left: 0; } .kwl-set-n--side { background: var(--surface-2); border-radius: 6px; } .kwl-set .kwl-in { min-height: 48px; font-size: 1.12rem; border-color: var(--border); background: var(--surface-2); } .kwl-set .kwl-in.is-suggested { color: var(--accent); } .kwl-field > span { font-size: .7rem; } .kwl-ex-timer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-top: 1px solid var(--border-soft); padding-top: 10px; } .kwl-ex-timer > span:first-child { flex: 1; font-size: .78rem; color: var(--text-dim); min-width: 78px; } .kwl-ex-timer strong { display: block; font-size: 1.1rem; color: var(--text); font-variant-numeric: tabular-nums; } .kwl-ex-timer button { padding: 0 12px; font-size: .8rem; } .kwl-ex-timer [data-rest-total]:not(:empty) { flex-basis: 100%; font-size: .78rem; } .kwl-session-review { scroll-margin-top: 8px; grid-template-columns: 1fr; } .kwl-session-review #btn-save { grid-column: auto; } .kwl-session-review p:empty { display: none; } #btn-finish { min-height: 56px; margin: 8px 0; } .kwl-overview-start { bottom: calc(84px + env(safe-area-inset-bottom)); } @media (max-width: 380px) { .page-shell { padding-left: 12px; padding-right: 12px; } .kwl-exercise { padding: 12px; } .kwl-session-bar { column-gap: 10px; padding: 10px; } .kwl-session-bar button { padding: 0 8px; } .kwl-session-bar strong { font-size: 1.25rem; } .kwl-set { grid-template-columns: 26px 1fr 1fr .8fr; gap: 6px; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } } .kwl-in, .kwl-session-review input, .kwl-session-review textarea { scroll-margin-top: calc(var(--session-bar-height) + 16px); scroll-margin-bottom: calc(100px + env(safe-area-inset-bottom)); } /* Compte et édition des programmes */ .account-menu { position: relative; } .account-menu summary { cursor: pointer; padding: 12px 8px; min-height: 44px; } .account-menu > div { position: absolute; right: 0; top: 100%; z-index: 100; width: min(230px, 80vw); padding: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lift); } .account-menu a { display: block; padding: 12px; } .editor-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; } .editor-actions form { margin: 0; } .editor-actions a { padding: 10px 0; } a.editor-button { display: inline-block; padding: 12px 18px; border-radius: var(--radius-s); background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; } button.editor-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); } .editor-form { max-width: 920px; } .editor-form input:not([type=checkbox]), .editor-form select, .editor-form textarea { width: 100%; min-width: 0; } .editor-form label { display: block; margin: 8px 0 4px; } .editor-form input[type=checkbox] { margin-right: 8px; } .editor-form input[type=checkbox] + label { display: inline; } .editor-form ul { color: var(--danger); padding-left: 20px; } .editor-form .help-text, .editor-form .help { color: var(--text-dim); font-size: .9rem; } .editor-form details > summary { padding: 12px 0; cursor: pointer; font-weight: 700; } .editor-grid > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; } .editor-grid > div > div:first-child { grid-column: 1 / -1; } .editor-exercise { min-width: 0; margin: 18px 0; } .editor-exercise legend { font-weight: 700; padding: 0 8px; } .editor-week-body { padding: 0 18px 18px; } .editor-session { padding: 16px 0; border-top: 1px solid var(--border-soft); } .editor-session li { margin: 8px 0; } .editor-notes { white-space: pre-wrap; } @media (max-width: 520px) { .editor-grid > div { grid-template-columns: minmax(0, 1fr); } .editor-actions { align-items: stretch; } .editor-actions > * { max-width: 100%; } .site-brand { font-size: .95rem; } }