/* Site/app/css/app.css : téléphone d'abord, identité de la marque.
   Refonte du 2026-09-26 (branche design-app) : le standard des apps de fitness, au niveau de finition de
   Nike Training Club, Strava et Apple Fitness. Une seule base de jetons ci-dessous ; l'orange est réservé
   à l'action principale de l'écran et à l'état actif, la hiérarchie vient de la taille et de l'élévation. */
:root {
  /* Charte */
  --noir: #000; --creme: #F5F1EA; --orange: #F19F00; --orange-appuye: #D98E00; --bulle-moi: #3A2A00; --rouge: #FF6B6B; --vert: #7FD48A;
  /* Surfaces élevées, gris chaud, sans bordure */
  --surface-1: #141312; --surface-2: #1E1D1B; --surface-3: #2A2826;
  /* Textes : crème, crème atténué, tertiaire (AA sur toutes les surfaces) */
  --texte-2: #ABA69E; --texte-3: #8A857D;
  /* Traits : filet discret, et contour des champs (3:1 contre les surfaces) */
  --trait: #2B2927; --contour: #75716A;
  /* Alias historiques, gardés pour le code existant */
  --gris: var(--trait); --gris-clair: var(--texte-2);
  /* Formes et rythme */
  --r-tuile: 18px; --r-bouton: 14px; --r-champ: 12px; --r-case: 8px;
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --ombre: 0 10px 30px rgba(0, 0, 0, .55);
  --sortie: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; }
/* L'attribut hidden gagne toujours, même sur un élément en grille ou en flex (exercices pliés de la séance). */
[hidden] { display: none !important; }
html { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
html, body { margin: 0; background: var(--noir); color: var(--creme); font-family: Montserrat, system-ui, sans-serif; font-size: 17px; line-height: 1.5; -webkit-text-size-adjust: 100%; font-feature-settings: "tnum" 0; }
::selection { background: var(--orange); color: var(--noir); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--orange); }
/* Cases à cocher de l'app : carré arrondi au contour visible, orange coché avec une coche noire (jamais le blanc natif). */
input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 26px; height: 26px; margin: 0; border: 2px solid var(--contour); border-radius: 8px; background: transparent; display: inline-grid; place-items: center; cursor: pointer; transition: background-color 140ms var(--sortie), border-color 140ms; }
input[type="checkbox"]::after { content: ""; width: 14px; height: 14px; background: var(--noir); opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
input[type="checkbox"]:checked { background: var(--orange); border-color: var(--orange); }
input[type="checkbox"]:checked::after { opacity: 1; }
input[type="checkbox"]:disabled { opacity: .45; }
input, textarea, select { caret-color: var(--orange); font-variant-numeric: tabular-nums; }
button, a, [role="button"], summary, label { touch-action: manipulation; }
button, .btn, .app-barre a, .app-pastille-seance, .app-option, summary { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* En-tête : sobre, la marque en crème, le profil en pastille ronde */
.app-entete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: max(10px, env(safe-area-inset-top)) var(--e-4) 10px; background: var(--noir); }
.app-logo { color: var(--creme); font-weight: 800; text-decoration: none; font-size: 15px; letter-spacing: -0.01em; min-height: 44px; display: inline-flex; align-items: center; }
.app-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); align-items: center; }
.app-nav a { color: var(--creme); text-decoration: none; font-weight: 600; font-size: 15px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; background: var(--surface-2); }
.app-nav a:active { background: var(--surface-3); }
.app-ecran { padding: var(--e-3) var(--e-4) max(var(--e-6), env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; }

/* Typographie : grand titre façon iOS, titres 700, corps 17 */
h1 { font-size: 32px; line-height: 1.1; margin: var(--e-2) 0 var(--e-2); font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
h2 { letter-spacing: -0.015em; text-wrap: balance; }
.app-date { margin: var(--e-2) 0 0; color: var(--texte-2); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.app-intro { color: var(--texte-2); margin: 0 0 var(--e-6); }

/* Formulaires */
.app-form { display: grid; gap: var(--e-4); }
.app-champ { display: grid; gap: 6px; }
.app-champ label { font-weight: 600; font-size: 15px; }
.app-champ input, .app-recherche { width: 100%; min-height: 52px; padding: 12px 14px; border-radius: var(--r-champ); border: 1px solid var(--contour); background: var(--surface-1); color: var(--creme); font: inherit; font-size: 17px; }
.app-champ input:focus, .app-recherche:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.app-erreur { color: var(--rouge); font-size: 15px; margin: 0; min-height: 1.2em; }
/* Dans un formulaire, une erreur vide ne réserve pas de place : les champs restent serrés. */
.app-form .app-erreur:empty { display: none; }
/* Listes déroulantes : même pièce que les champs, flèche dessinée, jamais le blanc natif du navigateur. */
.app-champ select, .app-form select { width: 100%; min-height: 52px; padding: 0 40px 0 14px; border-radius: var(--r-champ); border: 1px solid var(--contour); background: var(--surface-1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ABA69E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center / 18px no-repeat; color: var(--creme); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis; }
.app-champ select:focus, .app-form select:focus { outline: 2px solid var(--orange); outline-offset: 1px; border-color: transparent; }
.app-form details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; color: var(--creme); font-size: 17px; }

/* Boutons : primaire orange (un par écran), secondaire en surface, lien en orange sans soulignement */
.btn { min-height: 48px; padding: 12px 18px; border-radius: var(--r-bouton); border: 0; font: inherit; font-weight: 700; cursor: pointer; background: var(--surface-2); color: var(--creme); transition: transform 120ms var(--sortie), background-color 120ms, opacity 120ms; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary { background: var(--orange); color: var(--noir); width: 100%; min-height: 54px; font-size: 17px; }
.btn-primary:active:not(:disabled) { background: var(--orange-appuye); }
.btn-primary:disabled { opacity: .45; }
.btn-lien { background: none; color: var(--creme); padding: 0; min-height: 44px; text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; justify-content: flex-start; text-align: left; }
.btn-lien:active:not(:disabled) { opacity: .6; transform: none; }
.app-mention { color: var(--texte-2); font-size: 13px; margin: 0; text-align: center; }
.app-liens { margin: var(--e-4) 0 0; display: grid; gap: 2px; }
.app-liens a { color: var(--creme); text-decoration: none; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.app-annonce { position: fixed; left: var(--e-4); right: var(--e-4); bottom: max(var(--e-4), env(safe-area-inset-bottom)); margin: 0 auto; max-width: 528px; padding: 0; text-align: center; color: var(--creme); font-size: 15px; font-weight: 600; pointer-events: none; z-index: 30; }
.app-annonce:not(:empty) { background: var(--surface-3); border-radius: var(--r-bouton); padding: 12px 16px; box-shadow: var(--ombre); }
/* Une erreur (critique du 27/09) : même place, liseré rouge, un peu plus longtemps à l'écran. */
.app-annonce-erreur:not(:empty) { border: 1px solid var(--rouge); }
.app-liste { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.app-eleve { background: var(--surface-1); border-radius: var(--r-tuile); padding: var(--e-4); display: grid; gap: 6px; }
.app-eleve-nom { display: flex; justify-content: space-between; gap: var(--e-2); flex-wrap: wrap; min-height: 44px; align-items: center; color: var(--creme); text-decoration: none; }
.app-eleve-nom span { color: var(--texte-2); font-size: 15px; }
.app-eleve-nom strong { color: var(--orange); }
.app-eleve-meta { color: var(--texte-2); font-size: 13px; }
.app-interrupteurs { display: flex; flex-wrap: wrap; gap: 6px var(--e-4); }
.app-selecteur-acces { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; }
.app-selecteur-acces select { min-height: 44px; padding: 8px 10px; border-radius: var(--r-champ); border: 1px solid var(--contour); background: var(--surface-1); color: var(--creme); font: inherit; font-size: 17px; }
.app-vide { color: var(--texte-2); }

/* Tuiles, rangées et bandeaux */
.btn-secondaire { background: var(--surface-2); color: var(--creme); border: 0; }
.btn-secondaire:active:not(:disabled) { background: var(--surface-3); }
.btn-secondaire:disabled { opacity: .5; }
.btn.app-bouton-verrou { color: var(--texte-2); background: transparent; border: 1px dashed var(--contour); }
.app-etiquette-verrou { color: var(--orange); font-size: 13px; }
.app-carte { background: var(--surface-1); border-radius: var(--r-tuile); padding: var(--e-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-3); margin: var(--e-4) 0; }
.app-carte h2 { margin: 0; font-size: 20px; line-height: 1.25; }
.app-carte p { margin: 0; color: var(--texte-2); font-size: 15px; }
/* Rangée de navigation : texte crème, chevron discret, pas de liseré */
.app-offre { position: relative; display: flex; align-items: center; margin: var(--e-3) 0 0; padding: 14px 44px 14px var(--e-4); min-height: 56px; background: var(--surface-1); border-radius: var(--r-tuile); color: var(--creme); text-decoration: none; font-weight: 700; font-size: 17px; transition: background-color 120ms; }
.app-offre::after { content: ""; position: absolute; right: var(--e-4); top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--texte-3); border-right: 2px solid var(--texte-3); transform: translateY(-50%) rotate(45deg); }
.app-offre:active { background: var(--surface-2); }
/* Une rangée porte aussi .app-bouton-lien (grille centrée) : elle reste alignée à gauche comme une liste iOS. */
.app-offre.app-bouton-lien { display: flex; place-items: initial; text-align: left; }
.app-detail a { color: var(--orange); }
.app-bandeau { background: var(--surface-1); border-radius: var(--r-bouton); padding: 12px var(--e-4); font-size: 15px; margin: 0 0 var(--e-4); color: var(--texte-2); }
.app-resume { color: var(--texte-2); margin: 0 0 var(--e-4); }

/* Séance : tuiles d'exercices numérotées */
.app-seance { background: var(--surface-1); border-radius: var(--r-tuile); padding: var(--e-5) var(--e-4); margin: 0 0 var(--e-4); }
.app-seance h2 { font-size: 22px; line-height: 1.2; margin: 0 0 var(--e-2); }
.app-echauffement, .app-cardio, .app-detail { color: var(--texte-2); font-size: 15px; margin: 6px 0; }
.app-sous-titre { color: var(--creme); font-weight: 700; }
.app-blocs { list-style: none; margin: var(--e-4) 0; padding: 0; display: grid; gap: var(--e-2); }
.app-bloc { display: grid; grid-template-columns: 30px 1fr; gap: var(--e-2) var(--e-3); align-items: start; border-top: 1px solid var(--trait); padding-top: var(--e-4); }
.app-bloc:first-child { border-top: 0; padding-top: var(--e-2); }
.app-bloc-bonus .app-bloc-corps { background: var(--surface-2); border-radius: var(--r-bouton); padding: var(--e-3); }
/* Séance en accordéon : une rangée de tête par exercice, le corps sur toute la largeur quand il est ouvert */
.app-bloc-accordeon { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
.app-bloc-accordeon:first-child { padding-top: 0; }
.app-bloc-tete { display: grid; grid-template-columns: 30px 1fr auto 12px; align-items: center; gap: var(--e-3); width: 100%; min-height: 60px; padding: var(--e-3) 0; border: 0; background: none; color: var(--creme); font: inherit; text-align: left; cursor: pointer; }
.app-bloc-nom { font-weight: 700; font-size: 17px; line-height: 1.3; min-width: 0; }
.app-bloc-nom small { display: block; font-size: 15px; font-weight: 600; color: var(--texte-2); }
.app-bloc-nom small::before { content: "+ "; }
.app-bloc-etat { font-size: 13px; font-weight: 700; color: var(--texte-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Chevron : vers le bas replié, vers le haut ouvert (critique du 26/09 au soir). */
.app-bloc-tete::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--texte-3); border-bottom: 2px solid var(--texte-3); transform: translateY(-3px) rotate(45deg); justify-self: end; }
.app-bloc-tete[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.app-bloc-ouvert .app-bloc-nom { font-size: 20px; }
/* Exercice ouvert : « Exercice 2 sur 4 » passe sous le nom, qui garde toute la largeur. */
.app-bloc-ouvert .app-bloc-etat { grid-column: 2; grid-row: 2; margin-top: -6px; }
.app-bloc-ouvert .app-bloc-tete .app-num { grid-row: 1 / span 2; }
.app-bloc-ouvert .app-bloc-tete .app-num { background: var(--creme); color: var(--noir); }
.app-bloc-fait .app-bloc-nom { color: var(--texte-2); }
.app-bloc-fait .app-bloc-tete .app-num { background: var(--orange); color: transparent; position: relative; }
.app-bloc-fait .app-bloc-tete .app-num::after { content: ""; position: absolute; inset: 8px; background: var(--noir); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.app-bloc-fait .app-bloc-etat { color: var(--orange); }
.app-bloc-accordeon > .app-bloc-corps { padding: 0 0 var(--e-4); }
.app-bloc-accordeon .app-exo { font-size: 15px; }
.app-bloc-accordeon.app-bloc-bonus .app-bloc-corps { padding: var(--e-3); }
.app-num { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--creme); font-weight: 800; font-size: 15px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.app-bloc-corps { display: grid; gap: var(--e-1); min-width: 0; }
.app-exo { margin: 0; font-weight: 700; font-size: 17px; line-height: 1.3; }
.app-superset-cadre { margin-top: var(--e-3); padding: var(--e-3); background: var(--surface-2); border-radius: var(--r-bouton); display: grid; gap: var(--e-1); }
.app-superset-badge { font-size: 13px; font-weight: 700; color: var(--texte-2); letter-spacing: .02em; }
.app-superset { margin: 0; color: var(--creme); font-size: 17px; font-weight: 700; }
/* Actions d'un exercice : pastilles compactes qui se suivent sous le nom */
.app-exo .app-changer, .app-superset .app-changer { display: inline-flex; align-items: center; margin: 6px 4px 0 0; min-height: 40px; padding: 0 11px; border-radius: 999px; font-size: 15px; vertical-align: middle; }
.app-superset .app-changer { margin-top: 6px; }
/* « Autre prise » et « Autre exercice » passent à la ligne ensemble, jamais l'un sans l'autre. */
.app-echanges { display: inline-flex; flex-wrap: nowrap; vertical-align: middle; max-width: 100%; }
.app-bouton-video { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; padding: 0 11px 0 9px; margin: 6px 4px 0 0; border-radius: 999px; background: var(--surface-2); color: var(--creme); font-size: 15px; vertical-align: middle; }
.app-bouton-video::before { content: ""; width: 14px; height: 14px; background: var(--orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.app-exo .app-bouton-video, .app-superset .app-bouton-video { font-weight: 700; }
/* Vignette de la vidéo en séance (26/09) : image 16:9, « Voir la vidéo » posé en bas à gauche avec le triangle orange. */
.app-vignette-video { display: flex; align-items: center; width: 100%; min-height: 56px; margin: var(--e-2) 0 var(--e-1); padding: var(--e-3) var(--e-4); border: 0; border-radius: var(--r-bouton); background: var(--surface-2); color: var(--creme); font: inherit; text-align: left; cursor: pointer; }
.app-vignette-etiquette { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--creme); }
.app-vignette-etiquette::before { content: ""; width: 14px; height: 14px; background: var(--orange); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }
.app-vignette-video:active { background: var(--surface-3); }
.app-gainage { margin-top: var(--e-3); }
.app-gainage ul { margin: var(--e-1) 0; padding-left: var(--e-5); }
.app-pied p { color: var(--texte-2); font-size: 15px; }
.app-liste-seances { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.app-liste-seances a { display: block; background: var(--surface-1); border-radius: var(--r-tuile); padding: var(--e-4); color: var(--creme); text-decoration: none; font-weight: 600; min-height: 56px; }
.app-liste-seances a:active { background: var(--surface-2); }
.app-liste-seances a { position: relative; padding-right: 44px; }
.app-liste-seances a::after { content: ""; position: absolute; right: var(--e-4); top: 50%; width: 9px; height: 9px; border-top: 2px solid var(--texte-3); border-right: 2px solid var(--texte-3); transform: translateY(-50%) rotate(45deg); }
.app-ecran > h2, .app-programme > h2 { font-size: 22px; line-height: 1.2; margin: var(--e-6) 0 var(--e-2); }
.app-liste-apercu li { background: var(--surface-1); border-radius: var(--r-tuile); padding: 14px var(--e-4); font-weight: 600; }
.app-progression { height: 4px; background: var(--surface-3); border-radius: 2px; margin: 0 0 var(--e-4); overflow: hidden; }
.app-progression > div { height: 100%; width: 100%; background: var(--orange); border-radius: 2px; transform-origin: left center; transition: transform 240ms var(--sortie); }
.app-question h2 { font-size: 22px; line-height: 1.2; margin: 0 0 var(--e-4); }
.app-options { display: grid; gap: 10px; margin: 0 0 var(--e-5); }
.app-option { display: flex; gap: 10px; align-items: flex-start; width: 100%; min-height: 60px; padding: 14px var(--e-4); border-radius: var(--r-tuile); border: 1.5px solid transparent; background: var(--surface-1); color: var(--creme); font: inherit; text-align: left; cursor: pointer; transition: transform 120ms var(--sortie), background-color 120ms, border-color 120ms; }
.app-option:active:not(:disabled) { transform: scale(.98); background: var(--surface-2); }
.app-option[aria-pressed="true"], .app-option[aria-checked="true"] { border-color: var(--orange); background: var(--surface-2); }
.app-option strong { display: block; }
.app-option small { color: var(--texte-2); font-size: 15px; }
.app-pilules { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 var(--e-5); }
.app-pilules .app-option { width: auto; min-width: 72px; justify-content: center; min-height: 52px; border-radius: 999px; padding: 12px 20px; }
.app-option:disabled { opacity: .45; cursor: default; }
.app-actions { display: grid; gap: 10px; margin-top: var(--e-2); }

/* Volets plein écran (vidéo, choix d'exercice) */
.app-volet { position: fixed; inset: 0; background: rgba(0, 0, 0, .94); z-index: 50; display: grid; place-items: center; padding: max(var(--e-4), env(safe-area-inset-top)) var(--e-4) max(var(--e-4), env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.app-volet-cadre { width: 100%; max-width: 560px; display: grid; gap: var(--e-3); }
.app-volet-titre { margin: 0; font-weight: 700; font-size: 20px; }
.app-volet-mention { margin: var(--e-1) 0 0; font-size: 13px; color: var(--texte-2); line-height: 1.4; }
.app-volet-video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-tuile); background: #000; }
/* Un Short est vertical : cadre 9:16 centré, limité par la hauteur visible de l'écran. */
.app-volet-video-vertical { aspect-ratio: 9 / 16; width: auto; height: min(68dvh, calc((100vw - 32px) * 16 / 9)); max-width: 100%; justify-self: center; }
.app-volet-fermer { width: 100%; }
body.app-volet-ouvert { overflow: hidden; }
.app-avantages { padding-left: var(--e-5); display: grid; gap: var(--e-2); margin: 0 0 var(--e-5); }
.app-bouton-lien { display: grid; place-items: center; text-decoration: none; }

@media (min-width: 700px) { .app-ecran { padding-top: var(--e-8); } h1 { font-size: 36px; } }

/* Barre d'onglets : noire translucide, l'onglet actif en orange, sans fond ni liseré */
.app-barre { position: fixed; left: 0; right: 0; bottom: 0; display: none; background: rgba(10, 10, 10, .86); -webkit-backdrop-filter: saturate(160%) blur(22px); backdrop-filter: saturate(160%) blur(22px); border-top: 1px solid var(--trait); padding: 4px 0 calc(4px + env(safe-area-inset-bottom)); z-index: 20; }
body.app-connectee .app-barre { display: flex; }
.app-barre a { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; min-height: 56px; color: var(--texte-3); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }
.app-barre a:active .app-barre-icone { transform: scale(.9); }
.app-barre a[aria-current="page"] { color: var(--orange); }
/* Sur petit écran, les cinq libellés (Programmes, Formations en tête) débordaient. Taille resserrée,
   icône inchangée : le texte reste lisible, ni tronqué ni sur deux lignes. */
@media (max-width: 400px) {
  .app-barre a { font-size: 11px; padding: 6px 0; letter-spacing: -0.2px; }
}
.app-barre-icone { display: block; width: 26px; height: 26px; background: currentColor; transition: transform 120ms var(--sortie); -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.app-barre-accueil { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11 12 3l9 8'/%3E%3Cpath d='M5 10v10h5v-6h4v6h5V10'/%3E%3C/svg%3E"); }
.app-barre-programmes { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h3M19 12h3M5 8v8M19 8v8M8 6v12M16 6v12M8 12h8'/%3E%3C/svg%3E"); }
.app-barre-formations { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E"); }
.app-barre-coaching { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.app-barre-messages { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.app-barre-nutrition { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-4 0-7 3-7 7s3 6 7 6 7-2 7-6-3-7-7-7z'/%3E%3Cpath d='M12 7c0-2 1-4 3-4'/%3E%3C/svg%3E"); }

/* Nutrition */
.app-cible { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--creme); margin: var(--e-1) 0; font-variant-numeric: tabular-nums; }
.app-macros { font-weight: 700; font-variant-numeric: tabular-nums; }
.app-repas-entete { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-2); }
.app-repas-lignes { margin: 6px 0; padding-left: 18px; }
.app-courses { list-style: none; padding: 0; margin: 0 0 10px; }
.app-courses li label { display: flex; gap: var(--e-3); align-items: center; min-height: 48px; border-bottom: 1px solid var(--trait); }
.app-courses li input { width: 24px; height: 24px; accent-color: var(--orange); }
.app-courses-rayon h3 { font-size: 13px; color: var(--texte-2); margin: var(--e-4) 0 2px; letter-spacing: .02em; }
.app-regles { padding-left: 18px; }
.app-regles li { margin-bottom: var(--e-2); }
body.app-connectee .app-ecran { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
body.app-connectee .app-annonce { bottom: calc(80px + env(safe-area-inset-bottom)); }

/* Retour : un chevron et le libellé, comme la barre de navigation d'iOS */
.app-retour-zone { max-width: 560px; margin: 0 auto; padding: 4px var(--e-2) 0; }
.app-retour-zone:empty { display: none; }
.app-retour { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 var(--e-2) 0 2px; color: var(--orange); text-decoration: none; font-weight: 600; font-size: 17px; background: none; border: 0; }
.app-retour:active { opacity: .6; }
.app-retour::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Formations et leçons */
.app-progression-formation { height: 6px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin: var(--e-2) 0; }
.app-progression-formation > div { height: 100%; background: var(--orange); border-radius: 3px; }
.app-lecon-video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r-tuile); background: #000; margin: var(--e-3) 0; }
.app-lecon-vue { display: flex; align-items: center; gap: var(--e-3); min-height: 48px; font-weight: 600; }
.app-lecon-vue input { width: 26px; height: 26px; accent-color: var(--orange); }
.app-lecons { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: 2px; background: var(--surface-1); border-radius: var(--r-tuile); overflow: hidden; }
.app-lecons a, .app-lecons .app-bouton-verrou { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px var(--e-4); border-radius: 0; background: var(--surface-1); border: 0; color: var(--creme); text-decoration: none; font-weight: 600; width: 100%; text-align: left; font: inherit; }
.app-lecons li + li a, .app-lecons li + li .app-bouton-verrou { border-top: 1px solid var(--trait); }
.app-lecons a:active { background: var(--surface-2); }
.app-lecons .btn.app-bouton-verrou { color: var(--texte-2); border-style: solid; border-width: 0; }
.app-lecons .vue { color: var(--orange); }
.app-fil { color: var(--texte-2); font-size: 15px; margin: 0 0 var(--e-2); }

/* Saisie des séries : champs de 48 px, chiffres tabulaires, case ronde qui se remplit d'orange */
.app-saisie { margin: var(--e-2) 0 var(--e-1); display: grid; gap: 6px; }
.app-saisie-champ { min-height: 48px; padding: 8px 12px; border-radius: var(--r-champ); border: 1px solid var(--contour); background: var(--noir); color: var(--creme); font: inherit; font-size: 17px; width: 100%; }
.app-saisie-champ:focus { outline: 2px solid var(--orange); outline-offset: 0; border-color: transparent; }
.app-saisie-champ:disabled { opacity: .5; }
.app-serie { display: grid; grid-template-columns: 22px 1fr 1fr 44px; gap: 6px; align-items: center; margin: 0; }
.app-serie-entete { display: grid; grid-template-columns: 22px 1fr 1fr 44px; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--texte-2); letter-spacing: .02em; margin-top: var(--e-1); }
.app-serie-entete span { text-align: center; }
.app-serie-tout { font: inherit; letter-spacing: inherit; color: var(--creme); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; min-height: 44px; padding: 0; text-align: center; cursor: pointer; }
.app-serie .app-saisie-champ { min-height: 48px; padding: 6px 2px; text-align: center; font-weight: 700; min-width: 0; border: 0; border-radius: 0; background: transparent; }
.app-serie .app-saisie-champ:focus { outline: 0; }
/* Boutons + et − autour de chaque valeur : une seule pièce, contour visible, le champ au centre */
.app-pas { display: grid; grid-template-columns: 42px minmax(32px, 1fr) 42px; align-items: center; min-height: 48px; border: 1px solid var(--contour); border-radius: var(--r-champ); background: var(--noir); overflow: hidden; }
.app-pas:focus-within { outline: 2px solid var(--orange); outline-offset: 0; border-color: transparent; }
.app-pas-bouton { height: 48px; border: 0; padding: 0; background: transparent; color: var(--texte-2); cursor: pointer; display: grid; place-items: center; }
.app-pas-bouton::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--icone) center / contain no-repeat; mask: var(--icone) center / contain no-repeat; }
.app-pas-plus { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.app-pas-moins { --icone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.app-pas-bouton:active:not(:disabled) { background: var(--surface-3); color: var(--creme); }
.app-pas-bouton:disabled { opacity: .35; }
.app-serie-num { color: var(--texte-2); font-size: 15px; font-weight: 700; padding: 0; text-align: center; font-variant-numeric: tabular-nums; }
.app-serie-faite { display: flex; align-items: center; justify-content: center; min-height: 48px; min-width: 44px; cursor: pointer; }
.app-serie-faite input { -webkit-appearance: none; appearance: none; margin: 0; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--contour); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color 140ms var(--sortie), border-color 140ms, transform 140ms var(--sortie); }
.app-serie-faite input::after { content: ""; width: 14px; height: 14px; background: var(--noir); opacity: 0; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.app-serie-faite input:checked { background: var(--orange); border-color: var(--orange); }
/* Compte gratuit (27/09) : la ligne de série existe, verrouillée, et mène à l'offre d'un toucher. */
.app-serie-verrou { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; text-align: center; min-height: 48px; }
.app-serie-verrou .app-pas { opacity: .45; }
.app-serie-verrou .app-pas .app-pas-bouton { height: 48px; display: grid; place-items: center; }
.app-serie-verrou .app-pas .app-saisie-champ { min-height: 48px; }
.app-serie-case-verrou { width: 34px; height: 34px; border-radius: 50%; border: 2px dashed var(--contour); display: block; }
.app-serie-verrou:active .app-pas { opacity: .7; }
.app-serie-faite input:checked::after { opacity: 1; }
.app-serie-faite input:active { transform: scale(.9); }
.app-serie-faite input:disabled { opacity: .45; }
.app-serie-note { min-height: 48px; font-size: 17px; }
/* Repos : pilule flottante au-dessus de la barre, sombre au repos, orange quand le chrono tourne */
.app-repos { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 5; margin: var(--e-4) 0; }
/* Clavier ouvert (app/js/clavier.js) : la barre du bas et le repos, ancrés en bas, remonteraient au-dessus du clavier
   sur iPhone et cacheraient le champ. On les range le temps de la saisie. */
body.app-clavier .app-barre { display: none; }
body.app-clavier .app-repos { position: static; }
body.app-clavier.app-connectee .app-ecran { padding-bottom: max(var(--e-6), env(safe-area-inset-bottom)); }
.app-repos .btn { width: 100%; min-height: 56px; border-radius: 999px; background: rgba(42, 40, 38, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--creme); font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: var(--ombre); }
.app-repos-actif .btn { background: var(--orange); color: var(--noir); }
/* La pilule ne recouvre plus la consigne ni la série à faire de l'exercice ouvert (critique du 27/09) : 72 px de
   dégagement sous l'exercice ouvert, et une marge de défilement pour tout ce sur quoi l'écran se cale. */
.app-bloc-ouvert { padding-bottom: 72px; }
.app-serie, .app-consigne, .app-bloc-ouvert .app-bloc-tete { scroll-margin-bottom: calc(140px + env(safe-area-inset-bottom)); }
/* Grille des jours d'entraînement (26/09) : un carré par jour du mois, orange quand elle s'est entraînée. */
.app-grille-carte { display: block; color: inherit; text-decoration: none; }
a.app-grille-carte:active { background: var(--surface-2); }
.app-grille { display: grid; gap: var(--e-2); }
.app-grille-titre { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 700; color: var(--creme); font-variant-numeric: tabular-nums; }
.app-grille-jours, .app-grille-cases { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.app-grille-jours span { text-align: center; font-size: 13px; font-weight: 700; color: var(--texte-3); }
.app-grille-case { aspect-ratio: 1; border-radius: var(--r-case); background: var(--surface-2); }
.app-grille-hors { background: transparent; }
.app-grille-avenir { background: transparent; box-shadow: inset 0 0 0 1px var(--trait); }
.app-grille-faite { background: var(--orange); }
.app-grille-aujourdhui { box-shadow: inset 0 0 0 2px var(--creme); }
.app-grille-faite.app-grille-aujourdhui { box-shadow: inset 0 0 0 2px var(--noir), 0 0 0 2px var(--creme); }
.app-grille-carte .app-detail { margin-top: var(--e-3); }
.app-grille-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--e-2); margin-bottom: var(--e-3); }
.app-grille-nav .app-grille-titre { text-align: center; font-size: 17px; white-space: nowrap; }
.app-grille-fleche { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--surface-2); cursor: pointer; }
.app-grille-fleche::before { content: ""; width: 9px; height: 9px; border-left: 2px solid var(--creme); border-bottom: 2px solid var(--creme); }
.app-grille-fleche-avant::before { transform: translateX(2px) rotate(45deg); }
.app-grille-fleche-apres::before { transform: translateX(-2px) rotate(-135deg); }
.app-grille-fleche:disabled { opacity: .35; cursor: default; }

/* Circuit maison (26/09) : carte des réglages, liste des exercices, chrono plein écran (mêmes bases que le repos). */
.app-circuit-carte { gap: var(--e-3); }
.app-liste-apercu li { display: grid; gap: 2px; }
.app-apercu-circuit { font-size: 15px; color: var(--texte-2); }
.app-circuit-carte .btn-primary { margin-top: var(--e-1); }
.app-circuit-plan { margin: 0; font-size: 17px; line-height: 1.45; color: var(--creme); }
.app-circuit-hausse { margin: 0; padding: var(--e-3) var(--e-4); border-radius: var(--r-bouton); background: var(--surface-2); font-size: 15px; font-weight: 700; color: var(--creme); }
.app-circuit-ajuster > summary { min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--creme); cursor: pointer; list-style: none; }
.app-circuit-ajuster > summary::-webkit-details-marker { display: none; }
.app-circuit-ajuster[open] > summary { color: var(--texte-2); }
.app-circuit-exo-consigne { font-size: 15px; line-height: 1.45; color: var(--texte-2); }
/* Consigne de Nico sous un exercice de salle (27/09) : la même voix que dans le circuit maison. */
/* Le titre reçoit le focus à chaque écran (VoiceOver) : pas d'anneau dessus, il ne se manipule pas. */
#ecran h1[tabindex="-1"]:focus, #ecran h2[tabindex="-1"]:focus { outline: none; }
.app-consigne { margin: 0 0 var(--e-3); font-size: 15px; line-height: 1.45; color: var(--texte-2); text-wrap: pretty; }
.app-circuit-reglage { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 52px; border-top: 1px solid var(--trait); }
.app-circuit-libelle { font-size: 17px; font-weight: 700; color: var(--creme); }
.app-circuit-pas { display: flex; align-items: center; gap: var(--e-2); }
.app-circuit-bouton { width: 44px; height: 44px; border-radius: 999px; background: var(--surface-2); color: var(--creme); border: 0; font: inherit; font-size: 22px; font-weight: 700; cursor: pointer; }
.app-circuit-valeur { min-width: 72px; text-align: center; font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.app-circuit-sous-titre { margin: var(--e-6) 0 var(--e-2); font-size: 20px; }
.app-circuit-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.app-circuit-liste li { display: flex; align-items: flex-start; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-tuile); background: var(--surface-1); }
.app-circuit-exo { flex: 1; display: grid; gap: 2px; min-width: 0; }
.app-circuit-exo small { font-size: 15px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.app-circuit-liste .app-bouton-video { margin: 0; flex: none; }
.app-circuit-plein .app-repos-plein-corps { gap: var(--e-3); }
/* Phase en grand, lisible téléphone posé au sol : orange à l'effort, crème au repos (même règle que le repos de la salle). */
.app-circuit-phase { margin: 0; font-size: clamp(40px, 12vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; color: var(--orange); }
.app-circuit-en-pause .app-circuit-phase { color: var(--creme); }
.app-circuit-plein[data-phase="pause"] .app-circuit-phase, .app-circuit-plein[data-phase="recuperation"] .app-circuit-phase, .app-circuit-plein[data-phase="preparation"] .app-circuit-phase { color: var(--creme); }
.app-circuit-plein .app-repos-anneau-arc { stroke: var(--orange); }
.app-circuit-plein[data-phase="pause"] .app-repos-anneau-arc, .app-circuit-plein[data-phase="recuperation"] .app-repos-anneau-arc, .app-circuit-plein[data-phase="preparation"] .app-repos-anneau-arc, .app-circuit-en-pause .app-repos-anneau-arc { stroke: var(--creme); }
.app-circuit-nom { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--creme); text-wrap: balance; }
/* Téléphone posé au sol (critique du 27/09) : l'anneau et le chrono du circuit prennent presque toute la largeur. */
.app-circuit-plein .app-repos-anneau { width: min(82vw, 340px); }
.app-circuit-plein .app-repos-temps { font-size: clamp(88px, 28vw, 120px); letter-spacing: -0.04em; }
.app-circuit-plein.app-circuit-fin-de-phase .app-repos-temps { color: var(--orange); animation: app-battement 1s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes app-battement { 0% { transform: scale(1.06); } 100% { transform: scale(1); } }
.app-circuit-plein .app-circuit-geste { width: 100%; }
.app-circuit-passer { min-height: 44px; color: var(--texte-2); }
.app-circuit-consigne { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--texte-2); text-wrap: pretty; }
.app-circuit-restant { margin: 0; font-size: 15px; font-weight: 700; color: var(--texte-2); font-variant-numeric: tabular-nums; }
/* Au repos, l'exercice qui vient attend dans une carte sous l'anneau (comme le repos de la salle). */
.app-circuit-carte-ensuite { width: 100%; display: grid; gap: var(--e-1); justify-items: center; padding: var(--e-4); border-radius: var(--r-tuile); background: var(--surface-1); }
.app-circuit-carte-ensuite > p:first-child { margin: 0; font-size: 17px; color: var(--texte-2); }
.app-circuit-carte-ensuite strong { color: var(--creme); font-weight: 800; }
.app-circuit-carte-ensuite[hidden] { display: none; }
.app-lecteur-seul { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.app-circuit-progres { margin: 0; font-size: 17px; font-weight: 700; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.app-circuit-en-pause .app-repos-anneau { opacity: .45; }
.app-circuit-terminer { width: 100%; display: grid; gap: var(--e-2); justify-items: center; }
.app-circuit-question { margin: 0; font-size: 15px; font-weight: 700; color: var(--creme); }
/* Fin du circuit : la carte orange du bilan, comme la fin d'une séance de salle. */
.app-circuit-bilan { width: 100%; text-align: left; margin: 0; }
.app-circuit-bilan h2 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--noir); }
.app-circuit-statut { margin: 0; font-size: 15px; color: var(--texte-2); text-align: center; }
.app-circuit-statut a { color: var(--creme); font-weight: 700; }
.app-circuit-geste { min-height: 56px; font-size: 17px; }
.app-circuit-plein .app-bouton-video { margin: 0; }
.app-circuit-plein a.app-repos-reduire { display: inline-flex; align-items: center; text-decoration: none; }

/* Repos plein écran (26/09) : s'ouvre à la coche, au-dessus de tout, barre du bas comprise. Un anneau orange qui
   se vide autour du chrono, la série qui attend, puis les gestes : −15 s / +15 s, « Passer », « Réduire ». */
.app-repos-plein { position: fixed; inset: 0; z-index: 40; background: var(--noir); display: grid; place-items: center; overflow-y: auto; overscroll-behavior: contain;
  padding: max(var(--e-6), env(safe-area-inset-top)) var(--e-4) max(var(--e-6), env(safe-area-inset-bottom)); }
.app-repos-plein[hidden] { display: none; }
.app-repos-plein:focus { outline: none; }
.app-repos-plein-corps { width: 100%; max-width: 420px; display: grid; gap: var(--e-4); justify-items: center; text-align: center; }
.app-repos-plein-titre { margin: 0; font-size: 17px; font-weight: 700; color: var(--texte-2); }
.app-repos-anneau { position: relative; width: min(66vw, 280px); aspect-ratio: 1; display: grid; place-items: center; }
.app-repos-anneau svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-repos-anneau-piste { fill: none; stroke: var(--surface-3); stroke-width: 6; }
.app-repos-anneau-arc { fill: none; stroke: var(--creme); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.app-repos-temps { position: relative; margin: 0; font-size: clamp(56px, 18vw, 80px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--creme); font-variant-numeric: tabular-nums; }
.app-repos-ensuite { width: 100%; display: grid; gap: 2px; padding: var(--e-4); border-radius: var(--r-tuile); background: var(--surface-1); }
.app-repos-ensuite p { margin: 0; }
.app-repos-ensuite-titre { font-size: 13px; font-weight: 700; color: var(--texte-2); }
.app-repos-ensuite-nom { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--creme); }
.app-repos-ensuite-detail { font-size: 15px; font-weight: 600; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.app-repos-ajuster { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }
.app-repos-pas { min-height: 56px; font-size: 17px; font-variant-numeric: tabular-nums; }
.app-repos-passer { width: 100%; min-height: 56px; font-size: 17px; background: var(--surface-3); }
.app-repos-reduire { min-height: 48px; padding: 0 var(--e-4); border: 0; background: none; font: inherit; font-weight: 700; color: var(--creme); cursor: pointer; }
.app-formes { display: flex; gap: var(--e-2); margin: var(--e-1) 0 var(--e-3); }
.app-forme { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; border: 1.5px solid transparent; border-radius: var(--r-bouton); background: var(--surface-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.app-forme:has(input:checked) { border-color: var(--orange); background: var(--surface-3); }
.app-forme input { accent-color: var(--orange); }
.app-commentaire { min-height: 88px; resize: vertical; }
.app-enregistrement .app-champ { display: grid; gap: 6px; font-weight: 600; margin: 0 0 var(--e-3); }
.app-saisie-historique { min-height: 44px; display: inline-flex; align-items: center; font-size: 15px; }

/* Mes séances, séance enregistrée, historique */
.app-serie-non-faite { opacity: .6; text-decoration: line-through; }
.app-courbe { width: 100%; height: auto; display: block; margin: var(--e-2) 0 var(--e-4); }
.app-liste-seances li.app-seance-du-jour a { box-shadow: inset 0 0 0 1.5px var(--orange); font-weight: 700; }

/* Coach : fiche élève, calendrier, évolution par exercice */
.app-calendrier { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--e-1); }
.app-calendrier-jour-nom { text-align: center; font-size: 13px; color: var(--texte-2); font-weight: 700; padding: var(--e-1) 0; }
.app-calendrier-jour { min-height: 44px; border-radius: var(--r-champ); background: var(--surface-1); display: grid; place-items: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.app-calendrier-jour.hors { color: var(--texte-3); background: transparent; }
.app-calendrier-jour.aujourdhui { outline: 1.5px solid var(--orange); }
/* La case avec séances est elle-même un <button> (pas un bouton imbriqué) : reprend le look de la case. */
button.app-calendrier-jour { all: unset; box-sizing: border-box; width: 100%; min-height: 44px; border-radius: var(--r-champ); background: var(--surface-2); display: grid; place-items: center; font-size: 13px; color: var(--creme); text-align: center; cursor: pointer; }
button.app-calendrier-jour:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.app-point { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; margin: 1px; }
.app-calendrier-entete { display: flex; align-items: center; justify-content: space-between; margin: var(--e-2) 0; }
.app-evolution { font-size: 13px; font-weight: 700; margin-left: var(--e-2); font-variant-numeric: tabular-nums; }
.app-evolution-hausse { color: var(--orange); }
.app-evolution-baisse { color: var(--texte-2); }
.app-evolution-neutre { color: var(--texte-3); }

/* Coach : éditeur de programme, volet de choix d'exercice */
.app-onglets { display: flex; gap: 6px; overflow-x: auto; padding-bottom: var(--e-1); overscroll-behavior-x: contain; scrollbar-width: none; }
.app-onglets::-webkit-scrollbar { display: none; }
.app-onglet { min-height: 44px; padding: 0 var(--e-4); border-radius: 999px; border: 0; background: var(--surface-2); color: var(--creme); white-space: nowrap; font: inherit; font-weight: 600; cursor: pointer; }
.app-onglet[aria-current="true"] { background: var(--creme); color: var(--noir); }
.app-editeur-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--e-2); }
.app-editeur-actions .btn { min-height: 44px; padding: 6px var(--e-3); font-size: 15px; }
.app-editeur-lien { min-height: 44px; display: inline-flex; align-items: center; }
.app-consignes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.app-renommage { margin-bottom: var(--e-2); }
/* Le volet de choix occupe l'écran : titre, recherche, liste défilante, bouton de fermeture. */
.app-choix { display: grid; grid-template-rows: auto auto 1fr auto; place-items: stretch; background: var(--noir); padding: max(var(--e-4), env(safe-area-inset-top)) var(--e-4) max(var(--e-4), env(safe-area-inset-bottom)); gap: 10px; }
/* Variantes : titre, phrase d'aide, liste, fermeture (même rangées que le volet de choix, sans recherche). */
.app-choix-variantes { grid-template-rows: auto auto 1fr auto; }
.app-choix-liste { overflow: auto; display: grid; gap: 6px; align-content: start; overscroll-behavior: contain; }
.app-choix-ligne { min-height: 52px; text-align: left; padding: 10px 14px; border-radius: var(--r-bouton); background: var(--surface-1); border: 1.5px solid transparent; color: var(--creme); font: inherit; cursor: pointer; }
.app-choix-ligne:active { background: var(--surface-2); }
.app-choix-ligne-en-place { border-color: var(--orange); }
.app-pastille { font-size: 11px; font-weight: 700; color: var(--orange); border: 1px solid var(--orange); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.app-badge { position: absolute; top: 3px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: #000; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #0A0A0A; }

/* Messagerie : bulles, saisie, accompagnements */
.app-fil { display: flex; flex-direction: column; gap: 6px; }
.app-fil-haut { text-align: center; }
.app-fil-jour { text-align: center; font-size: 13px; font-weight: 700; color: var(--texte-2); margin: var(--e-3) 0 var(--e-1); }
.app-bulle { max-width: 82%; padding: 10px 14px; border-radius: 20px; background: var(--surface-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.app-bulle p { margin: 0; }
.app-bulle-moi { align-self: flex-end; background: var(--bulle-moi); border-bottom-right-radius: 6px; }
.app-bulle-autre { align-self: flex-start; border-bottom-left-radius: 6px; }
.app-bulle-heure { display: block; font-size: 11px; color: var(--texte-2); margin-top: var(--e-1); }
.app-saisie-message { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-2); margin-top: var(--e-3); }
/* Le bouton porte `.btn-primary { width: 100% }` : sans ces deux règles, sa base occupe toute la ligne
   et la zone de saisie, de base nulle, est écrasée à zéro. La spécificité (0,2,0) passe devant (0,1,0). */
.app-saisie-message textarea { flex: 1 1 100%; min-width: 0; min-height: 88px; border-radius: 20px; resize: none; }
.app-saisie-message .btn { flex: 0 0 auto; width: auto; border-radius: 999px; }
.app-compteur { font-size: 13px; color: var(--texte-2); }
.app-accompagnements { margin-top: var(--e-6); }

/* Profil : un bloc par sujet, titres crème, et la liste des relevés de mesures */
.app-profil-bloc { display: grid; gap: 10px; margin: var(--e-5) 0; }
.app-profil-bloc > h2 { margin: 0; font-size: 22px; color: var(--creme); padding-bottom: 0; }
section + section > .app-profil-bloc { margin-top: var(--e-8); }
/* Réglages rarement touchés (informations, mot de passe) : une ligne cliquable qui ouvre les champs. */
.app-reglages { margin: var(--e-8) 0 var(--e-2); background: var(--surface-1); border-radius: var(--r-tuile); padding: 0 var(--e-4); }
.app-repli { border-bottom: 1px solid var(--trait); }
.app-repli:last-child { border-bottom: 0; }
/* Un repli seul dans un bloc du profil (bilan à remplir, relevé à ajouter) : rangée sur surface, sans filet. */
.app-repli-seul { border-bottom: 0; background: var(--surface-1); border-radius: var(--r-tuile); padding: 0 var(--e-4); }
.app-repli-seul > .app-repli-contenu { padding-bottom: var(--e-4); }
.app-repli > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 52px; padding: var(--e-3) 0; font-weight: 600; color: var(--creme); }
.app-repli > summary::-webkit-details-marker { display: none; }
.app-repli > summary::after { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--texte-3); border-right: 2px solid var(--texte-3); transform: rotate(45deg); transition: transform 200ms var(--sortie); }
.app-repli[open] > summary::after { transform: rotate(135deg); }
.app-repli-contenu { display: grid; gap: 10px; padding: 0 0 var(--e-4); }
.app-profil-bloc h3 { margin: var(--e-3) 0 0; font-size: 17px; }
/* Champs du profil : même hauteur pour tous (date et listes comprises), 16 px pour qu'iOS ne zoome pas.
   La date native d'iOS ignore la largeur sans appearance. */
.app-profil-bloc .app-form, .app-repli .app-form { gap: var(--e-3); }
.app-profil-bloc .app-champ, .app-repli .app-champ { gap: 6px; }
.app-profil-bloc .app-champ label, .app-repli .app-champ label { font-size: 15px; line-height: 1.3; color: var(--texte-2); font-weight: 600; }
.app-profil-bloc .app-champ input, .app-profil-bloc .app-champ select, .app-repli .app-champ input {
  width: 100%; min-width: 0; height: 48px; min-height: 0; padding: 0 12px; border-radius: var(--r-champ);
  border: 1px solid var(--contour); background-color: var(--surface-1); color: var(--creme); font: inherit; font-size: 17px; text-overflow: ellipsis; }
.app-profil-bloc .app-champ select { padding-right: 40px; }
.app-profil-bloc .app-champ input[type="date"] { -webkit-appearance: none; appearance: none; display: block; line-height: 48px; }
.app-profil-bloc .app-champ input::-webkit-date-and-time-value { text-align: left; margin: 0; }
.app-profil-bloc .app-champ select:focus { outline: 2px solid var(--orange); outline-offset: 1px; }
.app-profil-bloc .app-erreur, .app-repli .app-erreur { min-height: 0; }
/* Relevé de mesures : deux colonnes, la date avec le poids, les boutons et l'erreur globale sur toute la largeur. */
.app-form-mesures { grid-template-columns: 1fr 1fr; column-gap: var(--e-3); align-items: end; }
/* Deux colonnes sur un téléphone : l'étiquette passe en taille d'étiquette pour tenir sur une ligne. */
.app-form-mesures .app-champ label { font-size: 13px; }
.app-form-mesures > :not(.app-champ) { grid-column: 1 / -1; }
.app-releves { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.app-releve { border-top: 1px solid var(--trait); padding-top: var(--e-3); display: grid; gap: var(--e-1); }
.app-releve-jour { margin: 0; font-weight: 700; }
.app-releve-valeurs { margin: 0; color: var(--texte-2); font-size: 15px; font-variant-numeric: tabular-nums; }

/* Tableau de bord du tunnel (coach) */
.app-tableau-periodes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 var(--e-2); }
.app-tableau-periodes .btn { flex: 1 1 0; min-width: 88px; padding: 10px var(--e-3); border-radius: 999px; }
.app-tableau-periodes .btn[aria-pressed="true"] { background: var(--creme); color: var(--noir); }
.app-tableau[aria-busy="true"] { opacity: .6; }
.app-tableau-section { margin: var(--e-6) 0 0; display: grid; gap: 10px; }
.app-tableau-section > h2 { margin: 0; font-size: 20px; color: var(--creme); }
.app-tableau-etapes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.app-tableau-etape, .app-tableau-bloc { background: var(--surface-1); border-radius: var(--r-tuile); padding: 14px var(--e-4); display: grid; gap: 6px; }
.app-tableau-compteur { display: flex; justify-content: space-between; align-items: baseline; gap: var(--e-3); }
.app-tableau-libelle { color: var(--creme); font-weight: 600; font-size: 15px; }
.app-tableau-nombre { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; color: var(--creme); font-variant-numeric: tabular-nums; }
.app-tableau-paliers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-2) var(--e-4); }
.app-tableau-paliers .app-tableau-libelle { color: var(--texte-2); font-weight: 600; }
.app-tableau-taux { margin: 0; color: var(--orange); font-size: 15px; font-weight: 700; }
.app-tableau-note { color: var(--texte-2); font-size: 13px; margin: var(--e-6) 0 0; }
.app-installer { position: relative; }
.app-installer-etapes { margin: 0; padding-left: var(--e-5); color: var(--texte-2); font-size: 15px; display: grid; gap: 6px; }
.app-installer-fermer { justify-self: start; font-size: 15px; }

/* Pastilles de séances : changer de séance d'un toucher, en une ligne qui défile */
.app-pastilles ul { list-style: none; margin: 0; padding: 0 0 2px; display: flex; flex-wrap: nowrap; gap: var(--e-2); overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: none; }
.app-pastilles ul::-webkit-scrollbar { display: none; }
.app-pastilles li { flex: 0 0 auto; scroll-snap-align: start; }
.app-pastilles-titre { margin: var(--e-3) 0 var(--e-2); font-size: 15px; font-weight: 600; color: var(--texte-2); }
.app-pastille-seance { display: inline-flex; align-items: center; padding: 0 var(--e-4); border: 0; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; min-height: 44px; white-space: nowrap; box-sizing: border-box; color: var(--creme); background: var(--surface-2); }
.app-pastille-seance:active { background: var(--surface-3); }
.app-pastille-seance-courante { background: var(--creme); color: var(--noir); font-weight: 700; }

/* Accueil, page du jour : carte héro avec la photo de Nico en salle, bandeau d'essai, mot de Nico */
/* Carte du jour : un aplat orange uni, texte noir, bouton noir (choix de Nico : pas de photo, l'app parle à des femmes) */
.app-carte-jour { align-content: start; padding: var(--e-5); background: var(--orange); color: var(--noir); }
.app-carte-jour h2 { font-size: 15px; font-weight: 700; color: var(--noir); opacity: .75; }
.app-carte-jour > p { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--noir); text-wrap: balance; margin-bottom: var(--e-3); }
.app-carte-jour .btn-primary { background: var(--noir); color: var(--creme); }
.app-carte-jour .btn-primary:active:not(:disabled) { background: #1A1A1A; }
.app-carte-jour :focus-visible { outline-color: var(--noir); }
.app-carte-jour .app-pastilles-titre { color: rgba(0, 0, 0, .7); }
.app-carte-jour .app-pastille-seance { background: rgba(0, 0, 0, .14); color: var(--noir); }
.app-carte-jour .app-pastilles ul { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: var(--e-6); }
.app-carte-jour .app-pastille-seance:active { background: rgba(0, 0, 0, .24); }
/* Abonnement : la phrase de réassurance sous chaque bouton, et la mention de la page de paiement avant les cartes. */
.app-abonnement-note { margin: var(--e-3) 0 0; text-align: center; }
.app-abonnement-securise { margin: 0 0 var(--e-4); }
.app-bandeau-essai { margin: var(--e-3) 0 0; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-3); padding: var(--e-2) var(--e-4); min-height: 56px; }
/* Le lien prend l'orange de l'app : sans couleur déclarée il s'affiche en bleu navigateur, illisible sur le fond sombre. */
/* En tête de séance (compte gratuit), le bandeau garde un écart avec la tuile de séance qui suit. */
.app-bandeau-gratuit { margin: 0 0 var(--e-4); }
.app-bandeau-essai a { flex: none; color: var(--creme); font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.app-mot-de-nico { grid-template-columns: 44px 1fr; column-gap: var(--e-3); align-items: center; }
.app-mot-de-nico::before { content: ""; grid-row: 1; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-3) url("../img/nico-avatar.jpg") center / cover no-repeat; }
.app-mot-de-nico h2 { grid-row: 1; font-size: 17px; }
.app-mot-de-nico p { grid-column: 1 / -1; font-size: 20px; line-height: 1.45; color: var(--creme); font-weight: 500; letter-spacing: -0.005em; }

@media (hover: hover) and (pointer: fine) {
  .app-offre:hover, .app-liste-seances a:hover, .app-lecons a:hover, .app-choix-ligne:hover { background: var(--surface-2); }
  .btn-secondaire:hover:not(:disabled), .app-pastille-seance:hover { background: var(--surface-3); }
  .app-pastille-seance-courante:hover { background: var(--creme); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* Écran de fin de séance : le bilan en aplat orange, trois chiffres, puis le détail par exercice */
.app-bilan { min-height: 0; padding-top: var(--e-6); }
.app-bilan-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); margin: var(--e-1) 0 var(--e-3); }
.app-bilan-chiffre { display: grid; gap: 2px; padding: var(--e-3) 0 0; border-top: 1.5px solid rgba(0, 0, 0, .2); }
.app-bilan-chiffre strong { font-size: 30px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: var(--noir); font-variant-numeric: tabular-nums; }
.app-bilan-chiffre span { font-size: 13px; font-weight: 700; color: rgba(0, 0, 0, .7); }
.app-bilan-detail { margin: var(--e-8) 0 var(--e-1); font-size: 22px; }
.app-bilan-seance { margin: 0 0 var(--e-3); font-size: 15px; color: var(--texte-2); font-weight: 600; }

/* Accueil : les rangées de navigation regroupées en une liste, séparées par un filet (liste groupée d'iOS) */
.app-groupe { margin: var(--e-4) 0 0; background: var(--surface-1); border-radius: var(--r-tuile); overflow: hidden; }
.app-groupe .app-offre { margin: 0; border-radius: 0; background: transparent; }
.app-groupe .app-offre + .app-offre { box-shadow: inset 0 1px 0 var(--trait); }
.app-groupe .app-offre:active { background: var(--surface-2); }
/* Messages : les accompagnements derrière une rangée repliée */
.app-repli-carte { margin-top: var(--e-6); background: var(--surface-1); border-radius: var(--r-tuile); }
.app-repli-carte > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 56px; padding: 0 var(--e-4); font-weight: 700; cursor: pointer; }
.app-repli-carte > summary::-webkit-details-marker { display: none; }
.app-repli-carte > summary::after { content: ""; width: 9px; height: 9px; border-top: 2px solid var(--texte-3); border-right: 2px solid var(--texte-3); transform: rotate(135deg); transition: transform 200ms var(--sortie); }
.app-repli-carte[open] > summary::after { transform: rotate(-45deg); }
.app-repli-cartes { padding: 0 var(--e-2) var(--e-2); }
.app-repli-cartes .app-seance { background: var(--surface-2); margin: 0 0 var(--e-2); }

/* Revue de fin (26/09) */
.app-carte-jour h2 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--noir); opacity: 1; text-wrap: balance; }
.app-carte-jour .app-carte-jour-meta { font-size: 15px; font-weight: 700; color: rgba(0, 0, 0, .7); margin: 0 0 var(--e-3); letter-spacing: 0; }
.app-bilan h2 { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; color: var(--noir); opacity: 1; }
.app-saisie-champ::placeholder { color: var(--texte-3); opacity: 1; }
.app-exo, .app-superset { font-size: 15px; }
/* Listes d'avantages : une coche dessinée à la place du disque du navigateur */
.app-avantages { list-style: none; padding-left: 0; }
.app-avantages li { position: relative; padding-left: 26px; }
.app-avantages li::before { content: ""; position: absolute; left: 0; top: .3em; width: 16px; height: 16px; background: var(--texte-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Détail d'une séance enregistrée : une liste groupée, un exercice par rangée */
.app-liste-exercices { background: var(--surface-1); border-radius: var(--r-tuile); overflow: hidden; margin: 0 0 var(--e-4); }
.app-liste-exercices .app-seance { background: transparent; border-radius: 0; margin: 0; padding: var(--e-4); }
.app-liste-exercices .app-seance + .app-seance { box-shadow: inset 0 1px 0 var(--trait); }
.app-liste-exercices .app-seance h2 { font-size: 17px; margin: 0 0 var(--e-1); }
.app-liste-exercices .app-seance p { margin: 2px 0; font-size: 15px; }
.app-liste-exercices .app-liens { margin-top: var(--e-1); }
/* Ordinateur : l'en-tête et la barre d'onglets suivent la colonne de 560 px */
@media (min-width: 700px) {
  .app-entete { max-width: 560px; margin: 0 auto; padding-left: var(--e-4); padding-right: var(--e-4); }
  .app-barre { left: 50%; right: auto; width: 560px; transform: translateX(-50%); border: 1px solid var(--trait); border-bottom: 0; border-radius: var(--r-tuile) var(--r-tuile) 0 0; }
}
/* « Historique » reste un lien : texte atténué et chevron, jamais un titre suivi de vide */
.app-saisie-historique, .app-liste-exercices .app-liens a { color: var(--texte-2); font-weight: 600; gap: 6px; }
.app-saisie-historique::after, .app-liste-exercices .app-liens a::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); margin-left: 2px; }
.app-liste-exercices .app-liens a { display: inline-flex; align-items: center; }