/* ===========================================================================
   gtg_challenge — Styles spécifiques à l'app
   ===========================================================================
   Réutilise les tokens et composants partagés. Ajoute uniquement ce qui est
   propre à cette app (topbar, tabbar, timeline, ranking, ex-grid, admin).
   =========================================================================== */

.app {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Garantit que le fond couvre toute la hauteur, y compris la zone
       du home indicator iPhone (sous viewport-fit=cover). Évite la
       perception d'une "bande noire" en bas. */
    background: var(--bg);
}

/* ===========================================================================
   PAGE TUTO INSTALL — Redesign
   ===========================================================================
   Première impression : centré, aéré, propre. Le pentagone fait l'identité
   en haut, les étapes sont numérotées avec des pastilles. Mobile-first.
   =========================================================================== */
.tutorial {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    background: var(--bg);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 56px 20px 32px;
    padding-top:    max(56px, calc(env(safe-area-inset-top) + 32px));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
}
.tutorial.hidden { display: none; }

.tutorial-inner {
    max-width: 440px;
    width: 100%;
    /* Entrée discrète : on arrive doucement de quelques pixels en bas. */
    animation: tuto-in 420ms cubic-bezier(.2,.7,.2,1) 40ms both;
}
@keyframes tuto-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hero : logo + titre + tagline centrés. */
.tutorial-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 22px;
}
.logo-xl {
    width: 92px;
    height: 92px;
}
.logo-xl path { stroke-width: 6; }  /* trait plus fin que le 8 par défaut */

.tutorial-title {
    font-size: 28px;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    text-align: center;
    color: var(--fg-strong);
    font-weight: 700;
}
.tutorial-tagline {
    font-size: 14px;
    color: var(--fg-muted);
    margin: 0 0 32px;
    text-align: center;
    line-height: 1.55;
    padding: 0 4px;
}

/* Section par plateforme : carte propre avec subtil divider sous le titre. */
.tuto-section {
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 22px 20px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-1);
}
.tuto-section.hidden { display: none; }

.tuto-section h2 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--fg-muted);
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: var(--border-w) solid var(--border);
    font-weight: 600;
}

.tuto-section p {
    font-size: 14px;
    color: var(--fg);
    line-height: 1.6;
    margin: 0 0 12px;
}
.tuto-section p:last-child { margin-bottom: 0; }
.tuto-section strong { color: var(--fg-strong); font-weight: 600; }

/* Étapes numérotées avec pastilles ronds (counter CSS, pas d'images). */
.tuto-steps {
    list-style: none;
    counter-reset: tuto-step;
    margin: 0;
    padding: 0;
}
.tuto-steps li {
    counter-increment: tuto-step;
    position: relative;
    padding: 3px 0 16px 40px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fg);
}
.tuto-steps li:last-child { padding-bottom: 0; }
.tuto-steps li::before {
    content: counter(tuto-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fg-strong);
    color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
/* Trait vertical reliant les pastilles (look "checklist") */
.tuto-steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 4px;
    width: 1px;
    background: var(--border);
}

/* Tip / info supplémentaire en bas d'une section. */
.tuto-hint {
    font-size: 12px !important;
    color: var(--fg-muted) !important;
    line-height: 1.55;
    margin: 14px 0 0 !important;
    padding: 11px 13px;
    background: var(--bg-elev-2);
    border-radius: var(--radius);
}

/* "Touche clavier" stylisée pour les références système (⎋, ⋮, …) */
.kbd {
    display: inline-block;
    padding: 1px 7px;
    border: var(--border-w) solid var(--border-strong);
    border-radius: 4px;
    background: var(--bg);
    color: var(--fg-strong);
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
    margin: 0 2px;
    vertical-align: 1px;
    box-shadow: 0 1px 0 var(--border-strong);
}

/* Bouton install Android : un peu plus de marge dessous. */
#installPromptBtn { margin-bottom: 12px; }

.tutorial-footer {
    margin-top: 28px;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: var(--fg-dim);
    text-align: center;
}

/* --- Topbar ------------------------------------------------------------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg);
    border-bottom: var(--border-w) solid var(--border);
    /* Respecte le notch / Dynamic Island iPhone et l'éventuelle barre
       de statut Android (encoches). */
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}
.topbar-left  { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.topbar-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.topbar-title {
    font-size: 13px;
    color: var(--fg);
    /* Si le nom est trop long sur petit écran, on tronque proprement
       avec une ellipse plutôt que de pousser la topbar à déborder. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-title strong { color: var(--fg-strong); font-weight: 600; }
.topbar-title .subtitle { color: var(--fg-muted); }

.topbar .logo { width: 26px; height: 26px; }

/* Pastille "offline" dans la topbar : un petit point coloré + tooltip */
.offline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--warning);
    display: inline-block;
    box-shadow: 0 0 0 2px var(--bg);
    align-self: center;
}
.offline-dot.hidden { display: none; }

/* Marqueur "non synchronisé" sur les éléments de la timeline */
.timeline-item.is-pending::after {
    content: '· en attente sync';
    margin-left: 6px;
    font-size: 10px;
    color: var(--warning);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/* ===========================================================================
   ANIMATION "+N reps" : flash de félicitation après ajout d'une série
   ===========================================================================
   Centrée, non-bloquante (pointer-events:none), disparaît seule.
   Combine fade + pop + slide up pour un mouvement satisfaisant. */
.celebrate {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    animation: celebrate-fade 1700ms ease forwards;
}
.celebrate-bubble {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    background: var(--bg-elev-2);
    border: 2px solid var(--success);
    border-radius: 999px;
    box-shadow: var(--shadow-2);
    color: var(--fg-strong);
    font-size: 16px;
    font-weight: 600;
    animation: celebrate-pop 1700ms cubic-bezier(.18,.7,.2,1.3) forwards;
    will-change: transform, opacity;
}
.celebrate-icon {
    color: var(--success);
    font-size: 22px;
    line-height: 1;
    font-weight: 700;
    display: inline-block;
    animation: celebrate-icon-spin 700ms cubic-bezier(.4,1.5,.5,1) 80ms both;
}
.celebrate-text strong {
    color: var(--success);
    font-weight: 700;
    margin-right: 2px;
    font-variant-numeric: tabular-nums;
}
.celebrate-text small {
    display: block;
    font-size: 11px;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 500;
}
@keyframes celebrate-fade {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes celebrate-pop {
    0%   { transform: scale(0.5) translateY(20px); }
    15%  { transform: scale(1.05) translateY(0); }
    25%  { transform: scale(1); }
    70%  { transform: scale(1) translateY(0); }
    100% { transform: scale(0.9) translateY(-12px); }
}
@keyframes celebrate-icon-spin {
    from { transform: scale(0) rotate(-90deg); }
    to   { transform: scale(1) rotate(0); }
}

/* --- Vue principale ----------------------------------------------------- */
main.view {
    /* flex: 1 fait que la view remplit TOUT l'espace dispo entre la topbar
       et la tabbar. Combiné avec min-height: 100dvh sur .app, ça garantit
       que la page occupe systématiquement 100% de l'écran, même si le
       contenu est court (Dash avec peu d'exos). */
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 16px 16px 24px;
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
}

/* --- Tabbar mobile ------------------------------------------------------
   IMPORTANT : on n'utilise PLUS `position: fixed`. Sur iOS Safari (et iOS
   PWA standalone), le fixed positioning interagit mal avec le clavier qui
   s'ouvre (la barre se "colle" au bord visuel du clavier et ne revient
   pas toujours en bas après fermeture).
   On passe à `position: sticky; bottom: 0;` : la tabbar est un VRAI enfant
   flex de .app, naturellement positionnée tout en bas, et qui colle au
   bord inférieur quand on scrolle dans une page longue. Pas de bug iOS. */
.tabbar {
    position: sticky;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    width: 100%;
    background: var(--bg);
    border-top: var(--border-w) solid var(--border);
    /* La barre s'étend jusqu'au bord physique du téléphone et, en bonus,
       son fond couvre la zone du home indicator iPhone : visuellement,
       il n'y a plus de "bande noire" parasite — on a UNE barre cohérente. */
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
    /* Marge négative en flex column : permet à la tabbar de couvrir l'éventuel
       fond du .app et reste collée bas même si le contenu déborde. */
    margin-top: auto;
}
/* Un onglet hidden ne consomme pas de cellule de grille */
.tabbar .tab.hidden { display: none; }

/* Masquage de la tabbar quand le clavier mobile est ouvert.
   Volontairement scopé via JS uniquement sur la page Dashboard
   (cf. setupKeyboardHandling dans app.js). Les autres pages gardent
   la tabbar visible — sticky se débrouille bien tout seul ailleurs. */
body.kb-open .tabbar { display: none; }
.tab {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--fg-muted);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.3px;
    /* Légèrement réduit pour une tabbar plus compacte (moins d'espace
       perçu comme "vide" sous la barre). */
    padding: 11px 4px;
    border-top: 2px solid transparent;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.tab.is-active {
    color: var(--fg-strong);
    border-top-color: var(--fg-strong);
}

/* --- Section / cards layout -------------------------------------------- */
.section { margin-bottom: var(--space-5); }
.section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--fg-muted);
    margin: 0 0 var(--space-2);
}

/* --- Form auth (login / register) -------------------------------------- */
.form-tight { max-width: 360px; margin: 32px auto; }
.form-switch {
    margin-top: var(--space-4);
    font-size: 12px;
    text-align: center;
    color: var(--fg-muted);
}

/* --- Grille d'exercices (dashboard) ------------------------------------ */
.ex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}
.ex-btn {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 6px;
    padding: 14px;
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    color: var(--fg);
    cursor: pointer;
    font-family: inherit;
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), background var(--transition), transform 80ms ease;
}
.ex-btn:hover { border-color: var(--fg-strong); background: var(--bg-elev-2); }
.ex-btn:active { transform: translateY(1px); }
.ex-btn .name { font-size: 15px; color: var(--fg-strong); }
.ex-btn .meta { font-size: 12px; color: var(--fg-muted); }
.ex-btn .meta strong { color: var(--fg-strong); font-weight: 600; }

/* --- Card "résumé du jour" --------------------------------------------- */
.day-summary {
    padding: 16px;
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-lg);
}
.day-summary .total {
    font-size: 28px;
    color: var(--fg-strong);
    letter-spacing: -0.02em;
}
.day-summary .total small { font-size: 14px; color: var(--fg-muted); margin-left: 4px; }
.day-summary .breakdown {
    margin-top: 8px;
    font-size: 12px;
    color: var(--fg-muted);
}
.day-summary .breakdown span + span::before { content: ' · '; color: var(--fg-dim); }

/* --- Timeline ---------------------------------------------------------- */
.timeline {
    position: relative;
    margin-left: 6px;
    padding-left: 20px;
    border-left: var(--border-w) dashed var(--border-strong);
}
.timeline-item {
    position: relative;
    padding: 8px 0;
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 14px;
    width: 8px;
    height: 8px;
    background: var(--fg-strong);
    border-radius: 50%;
}
.timeline-time { color: var(--fg-muted); font-size: 12px; min-width: 44px; }
.timeline-name { color: var(--fg); }
.timeline-reps { color: var(--fg-strong); font-weight: 600; }
.timeline-empty {
    color: var(--fg-muted);
    font-size: 13px;
    padding: 16px;
    border: var(--border-w) dashed var(--border);
    border-radius: var(--radius);
    text-align: center;
}

/* --- Classement -------------------------------------------------------- */
.ranking-list { list-style: none; margin: 0; padding: 0; }
.ranking-row {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev-1);
    margin-bottom: 8px;
    font-size: 14px;
}
.ranking-row.is-me {
    border-color: var(--fg-strong);
    background: var(--accent-soft);
}
.ranking-rank { color: var(--fg-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.ranking-rank.is-top { color: var(--warning); }
.ranking-name { color: var(--fg); }
.ranking-row.is-me .ranking-name { color: var(--fg-strong); font-weight: 600; }
.ranking-reps { color: var(--fg-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking-empty {
    color: var(--fg-muted);
    font-size: 13px;
    padding: 16px;
    text-align: center;
    border: var(--border-w) dashed var(--border);
    border-radius: var(--radius);
}

/* --- Admin ------------------------------------------------------------- */
.admin-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    border-bottom: var(--border-w) dashed var(--border);
    font-size: 14px;
}
.admin-row:last-child { border-bottom: 0; }
.admin-row .left { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-row .left .name { color: var(--fg-strong); }
.admin-row .left .sub  { font-size: 11px; color: var(--fg-muted); }
.admin-row .right { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.admin-tag {
    display: inline-block;
    padding: 2px 6px;
    border: var(--border-w) solid var(--border-strong);
    border-radius: 999px;
    font-size: 10px;
    color: var(--fg-muted);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.admin-tag.is-admin { color: var(--warning); border-color: var(--warning); }
.admin-tag.is-off   { color: var(--fg-dim);  border-color: var(--border); }

/* Form inline (admin) */
.inline-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.inline-form .field { flex: 1; min-width: 140px; }

/* ===========================================================================
   Vue Statistiques : hero, key-value cards, sparkline, par exercice
   =========================================================================== */
.hero-card {
    padding: 20px;
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius-lg);
}
.hero-num {
    font-size: 36px;
    line-height: 1;
    color: var(--fg-strong);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.hero-sub { font-size: 13px; color: var(--fg-muted); margin-top: 6px; }
.hero-meta {
    font-size: 12px;
    color: var(--fg-dim);
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-meta strong { color: var(--fg); }

.kv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.kv-card {
    padding: 14px;
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
}
.kv-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fg-muted);
}
.kv-value {
    font-size: 22px;
    color: var(--fg-strong);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.kv-value small { font-size: 12px; color: var(--fg-muted); margin-left: 4px; }
.kv-sub { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }

/* Sparkline 7 jours */
.sparkline {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    align-items: end;
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    padding: 12px 10px 8px;
    height: 140px;
}
.spark-col {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    gap: 2px;
    min-width: 0;
}
.spark-val {
    width: 100%;
    background: var(--fg-strong);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    transition: height var(--transition);
}
.spark-val.is-today { background: var(--success); }
.spark-num {
    font-size: 10px;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}
.spark-day {
    font-size: 10px;
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Changelog (vue Paramètres > Mise à jour) */
.changelog-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--fg);
}
.changelog-list li {
    margin-bottom: 6px;
    line-height: 1.5;
}
.changelog-list li::marker { color: var(--fg-muted); }

/* Liste par exercice */
.exo-list {
    background: var(--bg-elev-1);
    border: var(--border-w) solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.exo-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: var(--border-w) solid var(--border-soft);
    font-size: 14px;
}
.exo-row:last-child { border-bottom: 0; }
.exo-name { color: var(--fg-strong); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.exo-reps { color: var(--fg-strong); font-variant-numeric: tabular-nums; font-weight: 600; }
.exo-sub  { color: var(--fg-muted); font-size: 12px; }