/* sport.pointeau.cloud — couleurs des disques olympiques pour la musculation
   (vert 10 kg guidé, jaune 15 kg poids de corps, bleu 20 kg poids libres,
   rouge 25 kg haltéro), corail pour la course. */
:root {
  --fond: #f4f3ef; --carte: #ffffff; --carte2: #f0eee8; --encre: #16181d; --doux: #6a6d75; --trait: #e2dfd7;
  --course: #ee4b2b; --course-pale: #fde3dc; --muscu: #2d63d8; --muscu-pale: #dfe8fb;
  --vert: #23955a; --jaune: #d9a514; --bleu: #2d63d8; --rouge: #d3323a;
  --ok: #23955a; --attention: #c98a0b; --mauvais: #d3323a;
  --rayon: 14px; --ombre: 0 1px 2px rgba(20, 20, 30, .06), 0 4px 16px rgba(20, 20, 30, .05);
  --titre: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --texte: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1115; --carte: #181b21; --carte2: #20242c; --encre: #e9eaee; --doux: #9599a3; --trait: #2a2e37;
    --course: #ff6b4a; --course-pale: #3a2019; --muscu: #5b8cff; --muscu-pale: #1b2640;
    --ombre: none; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.45 var(--texte); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.1; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; margin-bottom: .6rem; }
h3 { font-size: 1.1rem; }
svg { display: block; }
[hidden] { display: none !important; }

/* — Barre — */
.barre { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; padding: calc(.55rem + env(safe-area-inset-top)) 1rem .55rem; background: #14161b; color: #f2f2f2; }
.marque { font: 700 1.5rem/1 var(--titre); letter-spacing: .08em; text-decoration: none; }
.marque span { color: var(--course); }
.onglets { display: flex; gap: .25rem; flex: 1; }
.onglets a { display: flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border-radius: 999px; text-decoration: none; color: #b9bcc4; font-weight: 500; }
.onglets a svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onglets a.actif { background: #2a2e37; color: #fff; }
.sync { display: flex; align-items: center; gap: .4rem; background: none; border: 1px solid #343843; color: #b9bcc4; border-radius: 999px; padding: .35rem .7rem; cursor: pointer; font-size: .82rem; white-space: nowrap; }
.sync svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sync.tourne svg { animation: tourne 1s linear infinite; }
@keyframes tourne { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
  .onglets { position: fixed; left: 0; right: 0; bottom: 0; justify-content: space-around; background: #14161b; padding: .35rem .25rem calc(.35rem + env(safe-area-inset-bottom)); border-top: 1px solid #2a2e37; }
  .onglets a { flex-direction: column; gap: .1rem; font-size: .7rem; padding: .3rem .4rem; border-radius: 10px; }
  .onglets a svg { width: 22px; height: 22px; }
  .barre { justify-content: space-between; }
}

/* — Mise en page — */
main { max-width: 1180px; margin: 0 auto; padding: 1.1rem 1rem 2rem; outline: none; }
.entete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; }
.entete p { margin: .2rem 0 0; color: var(--doux); }
.grille { display: grid; gap: 1rem; grid-template-columns: repeat(12, 1fr); }
.grille > * { grid-column: span 12; min-width: 0; }
@media (min-width: 900px) {
  .c4 { grid-column: span 4 !important; } .c5 { grid-column: span 5 !important; } .c6 { grid-column: span 6 !important; }
  .c7 { grid-column: span 7 !important; } .c8 { grid-column: span 8 !important; }
}
.carte { background: var(--carte); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 1rem 1.1rem; border: 1px solid var(--trait); }
.carte > h2:first-child { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sous { color: var(--doux); font-size: .86rem; }
.chargement, .vide { color: var(--doux); padding: 2rem 0; text-align: center; }
.lien { color: var(--muscu); text-decoration: none; font-weight: 500; cursor: pointer; background: none; border: 0; padding: 0; }
.lien:hover { text-decoration: underline; }

/* — Chiffres — */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .6rem; }
.chiffre { background: var(--carte2); border-radius: 10px; padding: .6rem .75rem; }
.chiffre b { display: block; font: 600 1.65rem/1.05 var(--titre); }
.chiffre b small { font-size: .95rem; font-weight: 500; color: var(--doux); margin-left: .15rem; }
.chiffre span { font-size: .78rem; color: var(--doux); }
.chiffre.course b { color: var(--course); } .chiffre.muscu b { color: var(--muscu); }

/* — Héros (accueil) — */
.heros { background: #14161b; color: #f1f1f1; border: 0; position: relative; overflow: hidden; }
.heros::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 28px solid var(--course); opacity: .18; }
.heros .jx { font: 700 3.6rem/1 var(--titre); color: var(--course); }
.heros p { color: #c3c6cd; margin: .3rem 0 0; }
.heros .chiffre { background: #20242c; } .heros .chiffre span { color: #9da1aa; }

/* — Pastilles — */
.pastille { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .12rem .5rem; border-radius: 999px; background: var(--carte2); color: var(--doux); white-space: nowrap; }
.pastille.course { background: var(--course-pale); color: var(--course); }
.pastille.muscu { background: var(--muscu-pale); color: var(--muscu); }
.pastille.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pastille.attention { background: color-mix(in srgb, var(--attention) 18%, transparent); color: var(--attention); }
.pastille.mauvais { background: color-mix(in srgb, var(--mauvais) 16%, transparent); color: var(--mauvais); }
.disque { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.d-guide { background: var(--vert); } .d-corps { background: var(--jaune); } .d-libre { background: var(--bleu); } .d-x { background: var(--rouge); }

/* — Listes et tableaux — */
.liste { list-style: none; margin: 0; padding: 0; }
.liste li { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-top: 1px solid var(--trait); }
.liste li:first-child { border-top: 0; }
.liste a.ligne { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex: 1; min-width: 0; }
.liste .icone { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 700 .9rem var(--titre); }
.icone.course { background: var(--course-pale); color: var(--course); }
.icone.muscu { background: var(--muscu-pale); color: var(--muscu); }
.icone.autre { background: var(--carte2); color: var(--doux); }
.liste .texte { flex: 1; min-width: 0; }
.liste .texte b { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .droite { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 560px) {
  .liste a.ligne { flex-wrap: wrap; row-gap: .15rem; }
  .liste .droite { width: 100%; text-align: left; padding-left: calc(36px + .75rem); white-space: normal; }
}
.defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: .9rem; }
th { text-align: left; font-weight: 600; color: var(--doux); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; padding: .45rem .5rem; border-bottom: 1px solid var(--trait); white-space: nowrap; }
td { padding: .5rem .5rem; border-bottom: 1px solid var(--trait); vertical-align: top; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: var(--carte2); }
td.n, th.n { text-align: right; }
tr.groupe td { background: var(--carte2); font-weight: 600; }
.sous-ligne { color: var(--doux); font-size: .8rem; margin-top: .15rem; }

/* — Contrôles — */
.segments { display: inline-flex; background: var(--carte2); border-radius: 999px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.segments button { border: 0; background: none; padding: .3rem .75rem; border-radius: 999px; cursor: pointer; color: var(--doux); font-size: .85rem; font-weight: 500; }
.segments button.actif { background: var(--carte); color: var(--encre); box-shadow: var(--ombre); }
.bouton { border: 0; border-radius: 10px; padding: .55rem 1rem; background: var(--encre); color: var(--fond); font-weight: 600; cursor: pointer; }
.bouton.second { background: var(--carte2); color: var(--encre); }
.champ { width: 100%; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--trait); background: var(--carte); }
.puces { display: flex; flex-wrap: wrap; gap: .35rem; }
.puces button { border: 1px solid var(--trait); background: var(--carte); border-radius: 999px; padding: .25rem .7rem; cursor: pointer; font-size: .85rem; }
.puces button.actif { background: var(--encre); color: var(--fond); border-color: var(--encre); }

/* — Graphiques — */
.graphe { width: 100%; height: auto; overflow: visible; }
.graphe text { fill: var(--doux); font: 11px var(--texte); }
.graphe .axe { stroke: var(--trait); }
.graphe .val { fill: var(--encre); font-weight: 600; }
.legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--doux); margin-top: .4rem; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.barreh { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; align-items: center; gap: .6rem; padding: .25rem 0; font-size: .88rem; }
.barreh .piste { height: 10px; background: var(--carte2); border-radius: 99px; overflow: hidden; }
.barreh .piste i { display: block; height: 100%; background: var(--muscu); border-radius: 99px; }

/* — Semaine (accueil) — */
.semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.jour { background: var(--carte2); border-radius: 10px; padding: .45rem .35rem; min-height: 92px; display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; }
.jour.aujourdhui { outline: 2px solid var(--encre); }
.jour .nom { font: 600 .9rem var(--titre); color: var(--doux); display: flex; justify-content: space-between; }
.jour .bloc { border-radius: 6px; padding: .15rem .3rem; line-height: 1.25; text-decoration: none; display: block; }
.bloc.prevu-course { border: 1px dashed var(--course); color: var(--course); }
.bloc.fait-course { background: var(--course); color: #fff; }
.bloc.prevu-muscu { border: 1px dashed var(--muscu); color: var(--muscu); }
.bloc.fait-muscu { background: var(--muscu); color: #fff; }
.bloc.autre { background: var(--trait); color: var(--encre); }
@media (max-width: 560px) { .jour { min-height: 74px; font-size: .66rem; padding: .35rem .2rem; } .bloc { padding: .1rem .2rem; } }

/* — Calendrier — */
.mois { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mois .tete { text-align: center; font: 600 .85rem var(--titre); color: var(--doux); padding: .2rem 0; }
.mois .case { background: var(--carte); border: 1px solid var(--trait); border-radius: 8px; min-height: 96px; padding: .3rem; display: flex; flex-direction: column; gap: 3px; font-size: .72rem; cursor: pointer; }
.mois .case.hors { opacity: .4; }
.mois .case.aujourdhui { outline: 2px solid var(--encre); }
.mois .case .num { font: 600 .9rem var(--titre); color: var(--doux); }
@media (max-width: 640px) { .mois .case { min-height: 62px; padding: .2rem; } .mois .bloc span { display: none; } .mois .bloc { height: 6px; padding: 0; } }

/* — Plan — */
.semaine-plan { margin-top: 1rem; }
.semaine-plan h3 { display: flex; gap: .6rem; align-items: baseline; margin-bottom: .3rem; }
.semaine-plan h3 small { font: 400 .85rem var(--texte); color: var(--doux); }
.etapes { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--doux); font-size: .82rem; }
@media (max-width: 560px) { .semaine-plan .etapes { display: none; } .semaine-plan td { padding: .45rem .3rem; } }
.progression { height: 8px; border-radius: 99px; background: var(--carte2); overflow: hidden; margin: .5rem 0 .2rem; }
.progression i { display: block; height: 100%; background: var(--course); }

/* — Exercices — */
.cartes-exo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.exo { background: var(--carte); border: 1px solid var(--trait); border-radius: 12px; padding: .65rem .75rem; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: .3rem; }
.exo:hover { border-color: var(--doux); }
.exo b { font-weight: 600; display: flex; gap: .45rem; align-items: center; }
.exo .sous { font-size: .78rem; }

/* — Fenêtre — */
#voile { position: fixed; inset: 0; background: rgba(8, 9, 12, .55); z-index: 50; display: grid; place-items: center; padding: 1rem; }
.fenetre { background: var(--carte); border-radius: 16px; max-width: 640px; width: 100%; max-height: calc(100vh - 2rem); overflow: auto; padding: 1.1rem 1.2rem; position: relative; }
.fenetre .fermer { position: absolute; right: .7rem; top: .6rem; border: 0; background: var(--carte2); border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 1.1rem; }
.fenetre img.demo { width: 100%; max-width: 320px; border-radius: 12px; display: block; margin: .6rem auto; background: #fff; }
.fenetre ol { padding-left: 1.2rem; }
.credit { font-size: .72rem; color: var(--doux); text-align: center; }

/* — Connexion — */
.connexion { max-width: 360px; margin: 12vh auto; text-align: center; }
.connexion form { display: grid; gap: .7rem; margin-top: 1.2rem; }
.erreur { color: var(--mauvais); font-size: .88rem; min-height: 1.2em; }

/* — Carte GPS — */
#carte { height: 340px; border-radius: 12px; overflow: hidden; background: var(--carte2); }
@media (max-width: 560px) { #carte { height: 260px; } h1 { font-size: 1.6rem; } }