/* Carnet : feuille de style, pensée d'abord pour l'iPhone (gros boutons, saisie au pouce, clair ou sombre). */
:root {
  color-scheme: light dark;
  --fond: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eceef2;
  --bord: #dde1e7;
  --texte: #14171c;
  --texte-2: #5b6473;
  --accent: #2f6fed;
  --accent-doux: rgba(47, 111, 237, 0.12);
  --sur-accent: #ffffff;
  --succes: #1c9a59;
  --succes-doux: rgba(28, 154, 89, 0.14);
  --alerte: #b8730a;
  --danger: #d33a3f;
  --rayon: 14px;
  --haut: env(safe-area-inset-top, 0px);
  --bas: env(safe-area-inset-bottom, 0px);
  --hauteur-onglets: 62px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #0f1115;
    --surface: #171a21;
    --surface-2: #222631;
    --bord: #2c313c;
    --texte: #eef1f6;
    --texte-2: #9aa3b2;
    --accent: #5b93ff;
    --accent-doux: rgba(91, 147, 255, 0.16);
    --sur-accent: #0b0d11;
    --succes: #36c47c;
    --succes-doux: rgba(54, 196, 124, 0.16);
    --alerte: #f0a530;
    --danger: #f2585d;
  }
}
:root[data-theme="sombre"] {
  --fond: #0f1115;
  --surface: #171a21;
  --surface-2: #222631;
  --bord: #2c313c;
  --texte: #eef1f6;
  --texte-2: #9aa3b2;
  --accent: #5b93ff;
  --accent-doux: rgba(91, 147, 255, 0.16);
  --sur-accent: #0b0d11;
  --succes: #36c47c;
  --succes-doux: rgba(54, 196, 124, 0.16);
  --alerte: #f0a530;
  --danger: #f2585d;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--fond); color: var(--texte); }
body {
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body.sans-defilement { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
[hidden] { display: none !important; }

/* Cadre général */
.entete {
  position: sticky; top: 0; z-index: 5;
  padding: calc(var(--haut) + 14px) 16px 10px;
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.entete h1 { font-size: 28px; font-weight: 700; }
.contenu { padding: 4px 16px calc(var(--hauteur-onglets) + var(--bas) + 80px); max-width: 720px; margin: 0 auto; }
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px calc(var(--bas) + 4px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--bord);
}
.onglets button {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 6px 0; color: var(--texte-2); font-size: 11px;
}
.onglets svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.onglets button.actif { color: var(--accent); }
.bandeau-seance {
  position: fixed; left: 12px; right: 12px; z-index: 11;
  bottom: calc(var(--hauteur-onglets) + var(--bas) + 8px);
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border: 0; border-radius: var(--rayon);
  background: var(--accent); color: var(--sur-accent); font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Éléments communs */
.vide { color: var(--texte-2); text-align: center; padding: 24px 8px; }
.discret { color: var(--texte-2); }
.petit { font-size: 13px; }
.carte {
  display: block; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  padding: 14px 16px; margin: 10px 0; color: var(--texte);
}
button.carte:active { background: var(--surface-2); }
.titre-section { display: flex; justify-content: space-between; align-items: center; margin: 24px 0 6px; gap: 8px; }
.titre-section .actions { display: flex; gap: 6px; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 10px 16px; border-radius: 12px;
  border: 1px solid var(--bord); background: var(--surface); color: var(--texte); font-weight: 600;
}
.bouton:active { filter: brightness(0.95); }
.bouton.primaire { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.bouton.danger { color: var(--danger); }
.bouton.plein-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.bouton.discret { border-color: transparent; background: var(--accent-doux); color: var(--accent); min-height: 36px; padding: 6px 12px; }
.bouton.large { width: 100%; margin: 8px 0; }
.bouton:disabled { opacity: 0.45; }
.icone {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: var(--texte-2); font-size: 22px;
}
.icone:active { background: var(--surface-2); }
.icone svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.puces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.puce { font-size: 13px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--texte-2); }
.puce.ok { background: var(--succes-doux); color: var(--succes); }
.puce.attention { background: color-mix(in srgb, var(--alerte) 16%, transparent); color: var(--alerte); }
.puce.erreur { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.empile > * + * { margin-top: 8px; }

/* Champs */
.champ { display: block; margin: 12px 0; }
.champ > span { display: block; font-size: 13px; color: var(--texte-2); margin-bottom: 6px; }
.champ input, .champ select, .champ textarea, .saisie {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--bord); background: var(--surface-2); font-size: 16px;
}
textarea { resize: vertical; min-height: 70px; }
.interrupteur { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--bord); }
.interrupteur:last-child { border-bottom: 0; }
.interrupteur input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 50px; height: 30px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--bord);
  position: relative; transition: background 0.15s;
}
.interrupteur input[type="checkbox"]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.15s;
}
.interrupteur input[type="checkbox"]:checked { background: var(--succes); border-color: var(--succes); }
.interrupteur input[type="checkbox"]:checked::after { transform: translateX(20px); }
.segments { display: flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 3px; }
.segments button { flex: 1; border: 0; background: none; padding: 8px 6px; border-radius: 8px; font-size: 14px; color: var(--texte-2); }
.segments button.actif { background: var(--surface); color: var(--texte); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.groupe { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 4px 16px; margin: 8px 0 20px; }
.groupe .note { color: var(--texte-2); font-size: 13px; padding: 10px 0; }

/* Routines et dossiers */
details.dossier { margin: 8px 0; }
details.dossier > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center;
  padding: 10px 2px; font-weight: 600; color: var(--texte-2);
}
details.dossier > summary::-webkit-details-marker { display: none; }
details.dossier > summary .fleche { transition: transform 0.15s; display: inline-block; margin-right: 6px; }
details.dossier[open] > summary .fleche { transform: rotate(90deg); }
.carte-routine h3 { margin-bottom: 4px; }
.carte-routine .resume { color: var(--texte-2); font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.carte-routine .boutons { display: flex; gap: 8px; margin-top: 12px; }
.carte-routine .boutons .bouton.primaire { flex: 1; }

/* Feuilles (fenêtres qui montent du bas) */
.fond { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40; animation: apparition 0.15s; }
.feuille {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-height: calc(100dvh - var(--haut) - 24px); overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 8px 16px calc(var(--bas) + 16px);
  animation: montee 0.2s ease-out;
  max-width: 720px; margin: 0 auto;
}
.feuille > p { white-space: pre-line; }
.feuille.pleine { top: calc(var(--haut) + 12px); max-height: none; display: flex; flex-direction: column; padding-bottom: 0; }
.feuille .poignee { width: 40px; height: 5px; border-radius: 3px; background: var(--bord); margin: 4px auto 10px; }
.feuille .tete-feuille { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0 10px; }
.feuille .tete-feuille h2 { font-size: 18px; }
.feuille .corps-feuille { flex: 1; overflow: auto; overscroll-behavior: contain; margin: 0 -16px; padding: 0 16px 16px; }
.feuille .pied-feuille { padding: 10px 0 calc(var(--bas) + 12px); border-top: 1px solid var(--bord); display: flex; gap: 8px; }
.feuille .pied-feuille .bouton { flex: 1; }
.choix { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; }
.choix .bouton { width: 100%; }
@keyframes montee { from { transform: translateY(30px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes apparition { from { opacity: 0; } to { opacity: 1; } }

/* Messages */
.messages { position: fixed; left: 0; right: 0; top: calc(var(--haut) + 10px); z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.message { background: var(--texte); color: var(--fond); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: 90%; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); animation: apparition 0.15s; }
.message.erreur { background: var(--danger); color: #fff; }

/* Séance en cours */
.seance { position: fixed; inset: 0; z-index: 30; background: var(--fond); display: flex; flex-direction: column; }
.barre-seance {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(var(--haut) + 8px) 12px 8px; background: var(--surface); border-bottom: 1px solid var(--bord);
}
.barre-seance .chrono { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 17px; }
.corps-seance { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 12px 12px calc(var(--bas) + 120px); }
.titre-seance { width: 100%; font-size: 22px; font-weight: 700; border: 0; background: none; padding: 4px 4px; border-radius: 8px; }
.titre-seance:focus { background: var(--surface-2); outline: none; }
.resume-seance { display: flex; gap: 18px; padding: 6px 4px 10px; color: var(--texte-2); font-size: 14px; }
.resume-seance strong { display: block; color: var(--texte); font-size: 16px; font-variant-numeric: tabular-nums; }
.dates-seance { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.bloc-exo { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px 10px 6px; margin: 12px 0; }
.bloc-exo.superset { border-left: 4px solid var(--accent); }
.tete-exo { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.nom-exo { font-weight: 700; font-size: 17px; color: var(--accent); }
.sous-titre { font-size: 13px; color: var(--texte-2); }
.badge-superset { display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--accent); }
.note-exo { width: 100%; border: 0; background: none; padding: 6px 2px; font-size: 16px; color: var(--texte-2); }
.note-exo:focus { outline: none; color: var(--texte); }
.repos-exo { border: 0; background: none; color: var(--accent); font-size: 14px; padding: 4px 2px 8px; }
.ligne-serie {
  display: grid; align-items: center; gap: 6px;
  grid-template-columns: 34px minmax(0, 1fr) repeat(var(--champs), minmax(52px, 68px)) 44px;
  padding: 3px 2px; border-radius: 8px;
}
.ligne-serie.avec-rpe { grid-template-columns: 34px minmax(0, 1fr) repeat(var(--champs), minmax(52px, 68px)) 48px 44px; }
.ligne-serie.routine { grid-template-columns: 34px repeat(var(--champs), minmax(0, 1fr)) 44px; }
.ligne-serie.entete-series { font-size: 12px; color: var(--texte-2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.ligne-serie.entete-series > * { text-align: center; }
.ligne-serie.entete-series > :nth-child(2) { text-align: left; }
.ligne-serie.routine.entete-series > :nth-child(2) { text-align: center; }
.ligne-serie.faite { background: var(--succes-doux); }
.numero-serie { height: 40px; border: 0; border-radius: 8px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.numero-serie.warmup { color: var(--alerte); }
.numero-serie.dropset { color: var(--accent); }
.numero-serie.failure { color: var(--danger); }
.precedent { border: 0; background: none; text-align: left; color: var(--texte-2); font-size: 13px; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ligne-serie input {
  width: 100%; height: 40px; border: 0; border-radius: 8px; background: var(--surface-2);
  text-align: center; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0 4px;
}
.ligne-serie input::placeholder { color: var(--texte-2); opacity: 0.7; font-weight: 500; }
.ligne-serie.faite input { background: transparent; }
.ligne-serie select { height: 40px; border: 0; border-radius: 8px; background: var(--surface-2); text-align: center; font-size: 16px; padding: 0 2px; }
.case {
  width: 44px; height: 40px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--texte-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.case svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ligne-serie.faite .case { background: var(--succes); color: #fff; }
.ajout-serie { width: 100%; margin: 6px 0 4px; border: 0; border-radius: 10px; padding: 10px; background: var(--surface-2); font-weight: 600; font-size: 15px; }
.minuteur {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--bas) + 12px); z-index: 31;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.minuteur .temps { flex: 1; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.minuteur .temps::before { content: "Repos"; display: block; font-size: 12px; font-weight: 600; color: var(--texte-2); }
.minuteur .barre { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 0 0 0 var(--rayon); transition: width 0.25s linear; }
.minuteur.fini { border-color: var(--succes); }
.minuteur.fini .temps { color: var(--succes); }

/* Choix des exercices */
.recherche { position: sticky; top: 0; background: var(--surface); padding: 2px 0 8px; z-index: 1; }
.filtres { display: flex; gap: 8px; margin-top: 8px; }
.filtres select { flex: 1; min-height: 38px; border-radius: 10px; border: 1px solid var(--bord); background: var(--surface-2); padding: 6px 8px; font-size: 16px; }
.ligne-exo { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 4px; border: 0; border-bottom: 1px solid var(--bord); background: none; text-align: left; }
.ligne-exo .pastille { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--texte-2); font-size: 14px; }
.ligne-exo.choisi .pastille { background: var(--accent); color: var(--sur-accent); }
.ligne-exo .texte { flex: 1; min-width: 0; }
.ligne-exo .texte strong { display: block; font-weight: 600; }
.ligne-exo .texte span { font-size: 13px; color: var(--texte-2); }

/* Historique */
.calendrier { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 10px; margin: 6px 0 16px; }
.calendrier .tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; }
.calendrier .grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.calendrier .jour-semaine { font-size: 12px; color: var(--texte-2); padding: 2px 0; }
.calendrier .jour { height: 36px; border: 0; border-radius: 10px; background: none; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.calendrier .jour.actif { background: var(--accent-doux); color: var(--accent); font-weight: 700; }
.calendrier .jour.aujourdhui { outline: 1px solid var(--bord); }
.calendrier .jour.choisi { background: var(--accent); color: var(--sur-accent); }
.mois-titre { margin: 20px 0 4px; font-size: 15px; color: var(--texte-2); font-weight: 600; }
.carte-seance h3 { margin-bottom: 2px; }
.carte-seance .date { color: var(--texte-2); font-size: 14px; }
.detail-exo { padding: 12px 0; border-bottom: 1px solid var(--bord); }
.detail-exo:last-child { border-bottom: 0; }
.detail-exo h3 { color: var(--accent); margin-bottom: 6px; }
.detail-serie { display: flex; gap: 10px; font-variant-numeric: tabular-nums; padding: 3px 0; }
.detail-serie .num { width: 24px; color: var(--texte-2); font-weight: 600; }
.detail-serie .record { color: var(--alerte); font-size: 13px; }

/* Progrès */
.tuiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 16px; }
.tuile { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px; }
.tuile .valeur { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tuile .libelle { font-size: 13px; color: var(--texte-2); }
.bloc-graphique { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 12px 14px 8px; margin: 10px 0 16px; }
.bloc-graphique h3 { margin-bottom: 2px; }
.bloc-graphique .discret { font-size: 13px; }
svg.graphique { width: 100%; height: auto; display: block; margin-top: 6px; overflow: visible; }
svg.graphique .barre { fill: var(--accent); }
svg.graphique .barre.vide { fill: var(--surface-2); }
svg.graphique .courbe { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg.graphique .point { fill: var(--accent); }
svg.graphique .grille { stroke: var(--bord); stroke-width: 1; }
svg.graphique text { fill: var(--texte-2); font-size: 11px; font-variant-numeric: tabular-nums; }
.barres-h { margin-top: 8px; }
.barre-h { display: grid; grid-template-columns: 112px 1fr 34px; gap: 8px; align-items: center; font-size: 14px; padding: 4px 0; }
.barre-h .jauge { height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.barre-h .jauge span { display: block; height: 100%; background: var(--accent); border-radius: 5px; }
.barre-h .nombre { text-align: right; font-variant-numeric: tabular-nums; color: var(--texte-2); }
.records { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.code-secours { font: 600 22px/1.5 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.04em; text-align: center; padding: 14px; background: var(--surface-2); border-radius: 12px; word-break: break-all; user-select: all; -webkit-user-select: all; }

/* Consigne de la routine (affichée, jamais enregistrée dans la séance) */
.consigne { font-size: 13px; color: var(--texte-2); margin: 6px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.consigne.ouverte { display: block; }
.interrupteur input[type="checkbox"]:disabled { opacity: 0.4; }