/* =====================================================================
   PAGE SPORT : programme de Ruben (19/10/2026). Même langage que les autres
   pages : fond presque noir, cartes anthracite, bordures fines, texte blanc.
   Seule couleur vive : l'accent du rang (variables --accent*).
   Pensée pour être utilisée pendant l'entraînement : gros champs, peu de texte.
   ===================================================================== */
.halo-torse { background: radial-gradient(circle, rgba(var(--accent-rgb), .14) 0%, transparent 62%); top: -20px; width: 260px; height: 260px; }
.illustration-torse { position: relative; width: 164px; height: 196px; margin-top: 4px; animation: flotte 7s ease-in-out infinite; }
.illustration-torse svg { width: 100%; height: 100%; display: block; }
.page-sport .hero { padding-bottom: 14px; }
.page-sport .hero-titre { margin-top: 18px; }

/* Planning : accès discret aux autres jours */
.planning-ligne { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 10px; }
.planning-ligne .lien-btn { color: #8e8e93; font-weight: 600; }
.page-sport .jours { grid-template-columns: repeat(5, 1fr); }
.page-sport .jour-btn { background: var(--carte); border-color: var(--bord-a); color: #8e8e93; border-radius: 12px; box-shadow: none; }
.page-sport .jour-btn.actif { color: #fff; border-color: var(--accent); background: rgba(var(--accent-rgb), .12); box-shadow: none; }
.page-sport .jour-btn.aujourdhui::after { background: var(--accent); }
.consultation { margin: 0 4px 12px; }

.seance-tete { margin: 22px 4px 12px; }
.seance-titre { font-size: 22px; font-weight: 650; color: #fff; }

/* Un bloc = un circuit, ou les 20 minutes d'abdominaux, ou la course */
.bloc-sport { padding: 16px 16px 12px; }
.bloc-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.bloc-titre { font-size: 15px; font-weight: 650; color: #fff; }
.bloc-type { font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.bloc-consigne { font-size: 13px; color: #8e8e93; margin-top: 3px; line-height: 1.4; }

/* Une ligne d'exercice : le nom à gauche, la charge à droite */
.ex-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #1f1f22; }
.bloc-tete + .ex-ligne, .bloc-consigne + .ex-ligne { margin-top: 10px; }
.ex-nom { font-size: 15px; color: #e5e5ea; line-height: 1.35; }
.ex-nom b { color: #fff; font-weight: 700; margin-right: 2px; }
.ex-duree { font-size: 11.5px; color: #8e8e93; margin-left: 4px; }
.ex-prev { font-size: 12px; color: #636366; margin: -6px 0 6px; text-align: right; }
.ex-max { flex-direction: column; align-items: stretch; gap: 8px; }
.champs-max { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.champs-max .champ-kg { justify-content: space-between; }
.champs-max .champ-kg input { width: 100%; }

.champ-kg { display: inline-flex; align-items: center; gap: 6px; flex: none; background: #111113; border: 1px solid #26262a; border-radius: 10px; padding: 0 10px 0 4px; }
.champ-kg:focus-within { border-color: var(--accent); }
.champ-kg input { width: 54px; font: inherit; font-size: 16px; font-weight: 600; color: #fff; background: none; border: none; padding: 9px 4px; text-align: right; -moz-appearance: textfield; }
.champ-kg input:focus { outline: none; }
.champ-kg span { font-size: 12px; color: #8e8e93; white-space: nowrap; }
.champ-kg input::-webkit-outer-spin-button, .champ-kg input::-webkit-inner-spin-button,
.chrono-champs input::-webkit-outer-spin-button, .chrono-champs input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bloc-sport input:disabled { color: #636366; }
.bloc-sport input::placeholder { color: #48484a; }

/* Ce qu'on mesure : le temps du circuit 1, les tours du samedi */
.mesure { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 10px; border-top: 1px solid #2e2e32; margin-top: 2px; }
.mesure-label { font-size: 14px; font-weight: 650; color: #fff; }
.chrono-champs { display: inline-flex; align-items: center; gap: 4px; background: #111113; border: 1px solid #26262a; border-radius: 10px; padding: 0 8px; }
.chrono-champs:focus-within { border-color: var(--accent); }
.chrono-champs input { width: 40px; font: inherit; font-size: 18px; font-weight: 650; color: #fff; background: none; border: none; padding: 9px 2px; text-align: center; -moz-appearance: textfield; }
.chrono-champs input:focus { outline: none; }
.chrono-champs b { color: #8e8e93; }

/* Fait / pas fait */
.bloc-fait { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.choix-ligne { display: flex; gap: 6px; flex: none; }
.choix-ligne .pilule { padding: 8px 14px; font-size: 13px; }
.pilule.on { background: var(--accent); border-color: var(--accent); color: #070708; }
.pilule.on-gris { background: #2e2e32; border-color: #3a3a3e; color: #fff; }
.pilule:disabled { opacity: .45; }

.page-sport .btn-a.large { margin: 8px 0 4px; border-radius: 99px; }
.btn-a.termine { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.regles-sport { list-style: none; margin: 14px 4px 0; padding: 0; }
.regles-sport li { font-size: 12.5px; color: #636366; line-height: 1.5; }
.regles-sport li::before { content: '· '; }
.btn-archives { display: flex; margin: 26px auto 10px; }

/* Archives : un calendrier, puis le détail de la date choisie */
.cal-tete { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 12px; }
.cal-tete b { font-size: 16px; color: #fff; font-weight: 650; }
.cal-tete .lien-btn { font-size: 22px; color: #c7c7cc; padding: 2px 12px; }
.cal-tete .lien-btn:disabled { opacity: .25; }
.cal-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 8px; }
.cal-sem { font-size: 11px; color: #636366; text-align: center; padding-bottom: 4px; }
.cal-jour { position: relative; aspect-ratio: 1; font: inherit; font-size: 14px; color: #c7c7cc; background: var(--carte); border: 1px solid var(--bord-a); border-radius: 10px; cursor: pointer; }
.cal-jour:disabled { opacity: .3; cursor: default; }
.cal-jour.actif { border-color: var(--accent); color: #fff; }
.cal-jour i { position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--accent); }
.arch-bloc { margin-top: 16px; }
.arch-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: #c7c7cc; padding: 7px 0; border-top: 1px solid #1f1f22; }
.arch-ligne span:last-child { color: #fff; text-align: right; }
.arch-mesure span:first-child { font-weight: 650; color: #fff; }
.nr { color: #636366 !important; font-style: italic; }

@media (prefers-reduced-motion: reduce) { .illustration-torse { animation: none; } }
