:root{
  --noir:#0f0f0e; --encre:#1b1b19; --papier:#f4f2ed; --carte:#ffffff; --rouge:#d7261e;
  --gris:#6f6d67; --gris-clair:#9a968e; --trait:#e4e0d8; --vert:#1a7f37; --or:#c2a05a;
  --rayon:16px; --ombre:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.05);
  /* 2026-09-23 : tout le texte est en rem et la racine suit la largeur de l'ecran. Les tailles fixes
     en px descendaient a 10,5 px sur telephone (onglets, etiquettes, schema du bloc) : illisible. */
  --marge:max(16px, env(safe-area-inset-left));
  --cible:44px;                      /* hauteur minimale d'une zone touchable */
}
/* 2026-09-23 (retour utilisateur : « sur mobile c'est écrit un peu trop gros ») : la racine etait a
   18-19 px sur telephone. Elle redescend a ~15,7 px sur un 390, et ne monte qu'au-dela de la tablette. */
html{font-size:clamp(15.5px, 0.9vw + 12.4px, 18px); -webkit-text-size-adjust:100%}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--papier);color:var(--encre);
  font:1rem/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));overflow-wrap:break-word}
a{color:var(--rouge)}

/* en-tete */
header{background:var(--noir);color:#fff;padding:calc(.85rem + env(safe-area-inset-top)) var(--marge) .85rem;
  display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
header b{font:700 .82rem/1 Helvetica,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
header .pts{background:rgba(255,255,255,.12);border-radius:99px;padding:.35rem .7rem;font-size:.85rem;font-weight:600}
main{max-width:44rem;margin:0 auto;padding:1rem var(--marge) 1.5rem}
h1{font-size:clamp(1.35rem,4.2vw,1.8rem);line-height:1.12;margin:.1em 0 .5em;letter-spacing:-.01em}
h2{font-size:1.08rem;margin:1.5em 0 .7em;letter-spacing:.01em}
.doux{color:var(--gris);font-size:.88rem}
.erreur{color:var(--rouge);font-size:.9rem;min-height:1.2em}

/* barre d'onglets */
nav.onglets{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--trait);
  padding-bottom:env(safe-area-inset-bottom)}
nav.onglets button{appearance:none;border:0;background:none;padding:.6rem .25rem .7rem;cursor:pointer;min-height:var(--cible);
  display:grid;gap:.2rem;justify-items:center;font:600 .68rem/1.1 inherit;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gris-clair)}
nav.onglets button svg{width:1.45rem;height:1.45rem;stroke:currentColor;fill:none;stroke-width:1.7}
nav.onglets button[aria-selected="true"]{color:var(--rouge)}
section[hidden]{display:none}

/* selecteurs semaine / jour */
.semaines{display:flex;gap:8px;margin:0 0 12px;overflow-x:auto;scrollbar-width:none}
.semaines::-webkit-scrollbar{display:none}
.semaines button{flex:0 0 auto;border:1px solid var(--trait);background:var(--carte);border-radius:99px;
  min-height:var(--cible);padding:.55rem .95rem;font:600 .88rem/1 inherit;color:var(--gris);cursor:pointer}
.semaines button[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:#fff}
.semaines button[disabled]{opacity:.45;cursor:not-allowed}
.jours{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-bottom:.9rem}
.jours button{border:1px solid var(--trait);background:var(--carte);border-radius:12px;padding:.6rem .15rem;min-height:calc(var(--cible) + .5rem);
  display:grid;gap:.15rem;justify-items:center;cursor:pointer;font:inherit;color:var(--encre)}
.jours button small{font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-clair)}
.jours button span{font-size:1.15rem}
.jours button[aria-pressed="true"]{border-color:var(--noir);box-shadow:inset 0 0 0 1px var(--noir)}
.jours button.fait{border-color:var(--vert)}
.jours button.fait small{color:var(--vert)}

/* cartes et blocs */
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:1.05rem;margin:.85rem 0;box-shadow:var(--ombre)}
.entete-seance{display:flex;align-items:flex-start;gap:12px}
.entete-seance .emoji{font-size:1.75rem;line-height:1}
.etiquette{display:inline-block;font:600 .7rem/1.2 inherit;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gris);border:1px solid var(--trait);border-radius:99px;padding:.35rem .6rem;margin:.4rem .4rem 0 0}
.etiquette.forte{color:var(--rouge);border-color:#f2c9c6}
.etiquette.faite{color:var(--vert);border-color:#bde5c8}
/* 2026-09-23 (demande utilisateur) : chaque bloc est un ENCADRE distinct, avec sa propre marge interieure,
   et non plus une section separee par un filet. Le texte ne touche plus les bords. */
details.bloc{background:var(--carte);border:1px solid var(--trait);border-left:4px solid var(--trait);
  border-radius:var(--rayon);box-shadow:var(--ombre);margin:.85rem 0;padding:.35rem 1.05rem .9rem}
details.bloc[open]{border-left-color:var(--rouge);box-shadow:0 2px 6px rgba(0,0,0,.06),0 14px 30px rgba(0,0,0,.07)}
details.bloc.charges{border-left-color:var(--or)}
.carte-seance{margin-bottom:1.1rem}
/* 2026-09-23 : l'horaire etait pose A COTE du titre et lui volait la moitie de la largeur (« Échauffeme/nt »).
   Il passe au-dessus, comme sur une feuille de séance de box : l'heure, puis le nom du bloc. */
details.bloc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;
  grid-template-areas:"temps plus" "titre plus";gap:.15rem .7rem;align-items:start;
  font-weight:600;font-size:1rem;min-height:var(--cible);padding:.6rem 0 .45rem}
/* 2026-09-23 : ce conteneur etait en flex ; le titre devenait un element flexible et se coupait en plein
   mot (« Échauffeme / nt ») sur un telephone. En bloc, le titre reste une phrase et les mentions passent dessous. */
details.bloc summary>span:first-child{grid-area:titre;display:block;min-width:0;line-height:1.3}
details.bloc summary .bloc-index{display:inline;margin-right:.3rem}
.bloc-index{font-style:normal;color:var(--rouge);font-weight:800;min-width:1.15em}
details.bloc summary::-webkit-details-marker{display:none}
details.bloc summary::after{content:"+";grid-area:plus;color:var(--rouge);font-size:1.6rem;line-height:1;align-self:center;
  width:1.4rem;text-align:center}
details.bloc[open] summary::after{content:"–"}
details.bloc ul{margin:.6em 0 .1em;padding:0;list-style:none}
details.bloc[open]>*:not(summary){animation:apparait .16s ease-out}
@keyframes apparait{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* le contenu respire : il ne colle ni au trait de gauche ni au bord de l'encadré */
details.bloc .ligne{margin-left:0;margin-right:0}
details.bloc .annotation{padding-right:.2rem}
.ligne{margin:.4em 0;padding:.55rem .65rem;border-left:3px solid var(--trait);font-size:.97rem;line-height:1.48}
.ligne.prescription{border-left-color:#d8a43b;background:#fffaf0;border-radius:0 8px 8px 0}
.ligne.wod-exercice{border:1px solid #e3e7eb;border-left:4px solid var(--rouge);background:#fff;border-radius:9px;margin:8px 0;padding:10px 12px;box-shadow:0 2px 7px rgba(20,20,20,.04)}
.ligne.wod-exercice .ligne-titre{font-size:1rem}
.ligne-titre{display:block;font-weight:800;font-size:1rem;line-height:1.3;color:var(--encre);letter-spacing:.01em}
.ligne-detail{display:block;margin-top:.2rem;color:var(--gris);font-size:.93rem}
.ligne-note{border-left-color:var(--rouge);color:var(--gris);font-size:.92rem;font-style:italic;background:#fff8f7;border-radius:0 8px 8px 0}
.annotation{margin:.5em 0 .4em;color:var(--gris);font-size:.88rem;font-style:italic;line-height:1.45}
.note-seance{border-left:3px solid var(--rouge);padding:9px 12px;margin:10px 0;background:#fff8f7;border-radius:8px}
.note-seance p{margin:.25em 0}
.video{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;text-decoration:none;margin:.3rem .5rem 0 0;
  min-height:var(--cible);border:1px solid var(--trait);border-radius:99px;padding:.5rem .85rem;color:var(--encre);background:var(--carte)}
.video::before{content:"▶";color:var(--rouge);font-size:11px}
.video-frame{width:100%;margin-top:8px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#111}
.video-frame iframe{width:100%;height:100%;border:0}
.videos-bloc{margin:12px 0 4px;padding-top:10px;border-top:1px dashed var(--trait)}
.videos-titre{display:block;margin-bottom:.3rem;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.video-bloc{display:block;margin:7px 0 0;padding:7px 9px;border-radius:10px;background:#fafafa}
.choix-programme{margin-top:10px}
.choix-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.choix-grille label{margin:0;font-weight:600}
.choix-grille select{margin-top:.3rem;padding:.7rem .5rem;font-size:max(.95rem,16px)}
.charges{border:1px solid #ead7a8;border-radius:10px;padding:10px 12px;background:#fffaf0}
#listePrs{display:grid;grid-template-columns:1fr;gap:0 .8rem}
@media (min-width:30rem){#listePrs{grid-template-columns:repeat(2,1fr)}}
#listePrs label{margin:8px 0}
@media (max-width:520px){.choix-grille{grid-template-columns:1fr}.choix-programme .bouton{margin-top:10px}}

/* chiffres et jauge */
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chiffre{background:var(--carte);border:1px solid var(--trait);border-radius:var(--rayon);padding:.9rem .5rem;text-align:center;box-shadow:var(--ombre)}
.chiffre b{display:block;font-size:1.55rem;letter-spacing:-.02em}
.chiffre span{font-size:.72rem;line-height:1.3;color:var(--gris-clair);text-transform:uppercase;letter-spacing:.09em}
.jauge{height:8px;background:var(--trait);border-radius:99px;overflow:hidden;margin:10px 0 6px}
.jauge i{display:block;height:100%;background:linear-gradient(90deg,var(--rouge),#f0673f)}

/* formulaires */
.bouton{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:3.2rem;background:var(--rouge);
  color:#fff;border:0;border-radius:13px;font:700 .95rem/1.2 inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;padding:.6rem 1rem}
.bouton:active{transform:translateY(1px)}
.bouton.secondaire{background:transparent;color:var(--encre);border:2px solid var(--encre)}
.bouton[disabled]{opacity:.45}
label{display:block;font-size:.92rem;color:var(--gris);margin:.85rem 0 .3rem}
input,textarea,select{width:100%;min-height:var(--cible);padding:.8rem;border:1px solid var(--trait);border-radius:11px;
  font:inherit;font-size:max(1rem,16px);background:var(--carte);color:var(--encre)}
table{width:100%;border-collapse:collapse;font-size:.95rem}
.tableau{overflow-x:auto;-webkit-overflow-scrolling:touch}
td,th{text-align:left;padding:.6rem .3rem;border-bottom:1px solid var(--trait);white-space:nowrap}
tr.moi{background:#fff6f5;font-weight:600}

.bloc-schema { display: block; font-style: normal; font-size: .82rem; letter-spacing: .02em; opacity: .5; margin-top: .1rem; }
.point-cle { margin: .5rem 0 0; font-size: .9rem; line-height: 1.45; opacity: .85; }
.point-cle b { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }

/* 2026-09-23 — ergonomie mobile (demande utilisateur : « que toutes les écritures soient mises à l'échelle,
   que ce soit ergonomique »). Règles qui valent pour toute la page, quel que soit l'écran. */
.semaines{padding:.15rem .15rem .35rem}                       /* la bordure du bouton actif n'est plus coupée */
.entete-seance h1{margin-top:0}
.note-seance p{font-size:.92rem;line-height:1.5}
.videos-bloc .video-bloc b{font-size:.98rem}
details.bloc summary .doux{grid-area:temps;justify-self:start;text-align:left;font-size:.8rem;line-height:1.3;
  white-space:nowrap;font-weight:600;letter-spacing:.03em;color:var(--gris-clair)}
.ligne.wod-exercice{padding:.7rem .8rem}
.charges li{padding:.2rem 0}

/* Écrans étroits (téléphones de 360 px et moins) : on garde la lisibilité en resserrant l'habillage,
   jamais le texte. */
@media (max-width:22.5rem){
  .jours{grid-template-columns:repeat(5,1fr);gap:.25rem}
  .jours button{padding:.5rem .1rem}
  .jours button small{font-size:.6rem;letter-spacing:.02em}
  .chiffres{gap:.5rem}
  .chiffre{padding:.75rem .35rem}
  .carte{padding:.9rem}
  details.bloc{padding:.3rem .85rem .8rem}
}

/* Grand écran : la colonne de lecture s'élargit un peu et les vidéos passent à deux par ligne. */
@media (min-width:48rem){
  .videos-bloc{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
  .videos-titre{grid-column:1 / -1}
}

/* Accessibilité : respecter le réglage « animations réduites » du téléphone. */
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

/* Onglets : quatre libelles sur une ligne de telephone, sans cesure. */
nav.onglets button{word-break:keep-all;hyphens:none}
nav.onglets button span{display:block;font-size:.66rem}
@media (max-width:23rem){ nav.onglets button span{font-size:.6rem} }

/* La charge calculée à partir du PR : une pastille, pas du texte noyé dans la phrase (2026-09-23). */
.charge-pr{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .4rem;margin-left:.2rem;
  background:#fff3d6;border:1px solid #e6c98a;border-radius:8px;padding:.12rem .45rem;color:var(--encre);font-size:.95rem}
.charge-pr i{font-style:normal;font-size:.78rem;color:var(--gris);letter-spacing:.01em}